I think we should move all javascript from the header to the footer (or use defer) to speed up page loading.

...And adjust intraday order if necessary

We want to showcase both OneDrive and Google Drive.

This will increase perfomance.

Upcoming change https://github.com/davidnuescheler/theblog/blob/alexonedrive/head.html#L32-L65 deals with the "by AUTHOR" text in the DOM, fetch the author avatar and construct the expected DOM for an author. This is a decent amount of logic which is run client side. Which means this final DOM will not be cached by Fastly and we be recomputed on each request.
This could be moved into a pre.js but we are using helix-pages here which does not support it. adobe/helix-pipeline#516 will introduce one step into this direction but not enough to cover this use case (see my comment there).

Multiple issues there:

• some posts have no hero banner, indexing fails to fetch an image
• some hero banner have a caption, which is transform into 2 paragraphs, which is not supported by our css. See http://localhost:3000/ms/archive/posts/2019/transportation-toys-in-3d-from-static-models-to-animation.html and https://theblog.adobe.com/transportation-toys-in-3d-from-static-models-to-animation

Follow up from #14.

Current product handling is ok for demo (links are not all working) but final implementation should be different: it should follow the same pattern than author, fetch the product page, retrieve logo / link / product name from product page and insert it from here. Creating all corresponding content in OneDrive is a fastidious task (all logo should be pasted inside the docx), will be done when architecture is clear and final.

Todos: once final destination system is defined (OneDrive, GoogleDoc or GitHub)

• create a product page per product which includes: logo, product name, link to adobe.com page
• update fetchProducts from head.html to gather data from product page (instead of guessing logo name and link).

with full navigation and links to products and topics

the current css assumes that there is only one section for the post body... it seems that the vast majority of the posts fulfill that assumption, however most recently one was imported that doesn't conform to that...

https://theblog.helix-demo.xyz/ms/archive/posts/2020/the-it-experts-guide-to-ai-and-content-management.html

it would be great, if in the short-term we could just ignore hr and not translate them to thematic breaks...

For example, if the product paragraph looks like this:

<p>Products:</p>

then that paragraph won't be removed from the DOM.

It should be removed regardless of matched products.

and link it so you can jump directly to the topic.

I think tags should be added in a simple way by an author just adding

Topics: Customer Experience, Campaign Management

at the very end of the document.

As this is below the fold i think client sided manipulation of the DOM should be perfectly fine to create the "Topics" experience

Indexing would have to be adapted to be able to deal with this new way of specifying tags/topics.

Showing all posts for a specific topic/tag i could see a default way of dealing with it, intuitively something like /topic.html?topic=Campaign+Management but ideally we also support /topics/campaign-management.html where we could similar to authors optionally have a little description on the topic / product.

https://theblog--davidnuescheler.hlx.page/authors/donna-morris.html
vs
https://theblog.adobe.com/author/donnamorris

At the bottom of the page, the latest posts from an author are displayed.

I see inconsistent behaviours when working locally on the project and reloading frequently various the pages we have (like http://localhost:3000/posts/creating-adobe-experience-platform-pipeline-with-kafka.html). In the hlx up logs, I see errors like:

[hlx] error: Error while fetching Markdown from https://adobeioruntime.net/api/v1/web/helix/helix-services/word2md@latest?rid=9LMbVX53YZ22tg%2BP71%2BMuW14IJYsc%2FhB&src=helix%2Fgithub.com--davidnuescheler--theblog%2Fproducts&path=%2Fhead.docx&shareLink=https%3A%2F%2Fadobe.sharepoint.com%2Fsites%2FTheBlog%2FShared%2520Documents%2Ftheblog%3Fcsf%3D1%26e%3D8Znxth with the following options:
{ uri:
   'https://adobeioruntime.net/api/v1/web/helix/helix-services/word2md@latest?rid=9LMbVX53YZ22tg%2BP71%2BMuW14IJYsc%2FhB&src=helix%2Fgithub.com--davidnuescheler--theblog%2Fproducts&path=%2Fhead.docx&shareLink=https%3A%2F%2Fadobe.sharepoint.com%2Fsites%2FTheBlog%2FShared%2520Documents%2Ftheblog%3Fcsf%3D1%26e%3D8Znxth',
  json: false,
  timeout: 10000,
  time: true,
  followAllRedirects: true }

Looking at Coralogix, I also see plenty of messages like this (INFO, not ERROR):

{"message":"Error while converting document: %s { StatusCodeError: 404 - 

Maybe @tripodsan can help here.

The 2 Algolia libraries are currently served via 3rd party domains.

@trieloff can you help with that?

I think authors should be added in a simple way by an author just adding

by Bruce Swann
Posted on 11-18-2019

at the top of the document.

As this is below the fold i think client sided manipulation of the DOM should be perfectly fine to create the "Author" experience

Indexing would have to be adapted to be able to deal with this new way of specifying authors.

Showing all posts for a specific author i could see a default way of dealing with it, intuitively something like /authors/bruce-swann.html where we could have a bio written up and possibly have access to the prominent image as their headshot. alternatively, we could have all the authors images in separated out.

it would be great to have a way to get from sitemap.xml or some other list of URLs that encompass something like the results from a google search for site:theblog.adobe.com and turn those URLs into a set of .md files...

i think in this particular case a selector of section#content would probably be used to get to the content and then it looks a straight forward html to md conversion.

from there i think it would be great to find a batch way to convert folder structure into gdocs or .docx

Open http://localhost:3000/posts/adobe-named-a-leader-in-forresters-latest-enterprise-marketing-software-suites-report.html
and compare it to https://adobe.sharepoint.com/:w:/r/sites/TheBlog/_layouts/15/Doc.aspx?sourcedoc={a5292931-bdab-465f-9d85-7850955f9a65}&action=edit&wdPid=5b6014b6

Lists are not rendered as ul / li but just a set of lines.

Follow up issue from #3: topics need to be indexed.

Several features require a search index for blog posts.

Each author page has a "Latest" section at the end, listing the most recent (or all?) articles posted by this author.

this can be a container for things like #42

i think we are at a good starting point, see below the mobile score of https://theblog.page for an individual blog post...

Each post has related articles at the bottom. The logic still needs to be defined, i.e. whether the selection is manually curated, or if it is based on the (main) topic, product, or articles from the same author...

For starters, we could just display articles from the same author.

it looks like the products mentioned in a post are extracted somehow from the href, but it seems that the svg src could be a more reliable source for the svg icon at least?

compare:
https://theblog.adobe.com/52-weeks-of-productivity/
https://theblog.helix-demo.xyz/ms/archive/posts/2020/52-weeks-of-productivity.html

The homepage https://theblog.adobe.com/ has a different layout than the blog entries, we need to:

• style it accordingly
• set the default content
• implement the "latest stories"
• implement the "popular stories"

e.g. http://localhost:3000/ms/topics/3d-&-ar.html

Below author "section", you can find a "Products in this article" section. This product list is extracted in the main import as :

---
Topics: x y z
Products: a b c

at the end of the document and should be processed to appear below the author.

Example here: https://theblog.adobe.com/creating-adobe-experience-platform-pipeline-with-kafka/

fstab.json points to the an adobe.sharepoint.com URL which requires a login and permission, not sure if that's ok:

https://adobe.sharepoint.com/sites/TheBlog/Shared%20Documents/theblog?csf=1&e=8Znxth

Opening that URL with my Adobe credentials says "You need permission to access this item".

If I try to run theblog with "hlx run" I get this error which looks related and http://localhost:3000 returns a 404:

[hlx] error: Could not find Markdown at https://adobeioruntime.net/api/v1/web/helix/helix-services/word2md@latest?rid=auACneEt2mwwuW29wnzHvl6EyuUu%2BKTf&src=helix%2Fgithub.com--davidnuescheler--theblog%2Fmaster&path=%2Findex.docx&shareLink=https%3A%2F%2Fadobe.sharepoint.com%2Fsites%2FTheBlog%2FShared%2520Documents%2Ftheblog%3Fcsf%3D1%26e%3D8Znxth

On each blog entry, there is a nav bar allowing to navigate from one entry to another (time based). It includes the time to read (?) and the share feature (we should skip the social features - like and feed).

somehow it seems like the publish date has vanished from the homepage and there are some layout issues...

it seems that the delivery of stale cache items doesn't seem to work as expected, or at least i am still getting completely uncached responses after the actual ttyl expires...

Many details are not 1:1, like spacings, fonts... The overall styling must be reviewed and polished. This includes (not exhaustive):

• mobile version
• vertical title on the right side of the page

This excludes the Header and Footer, tackled here #2.

i think at this stage it would be great if we just have a /drafts vs. a /posts folder and publishing essentially just means moving things in one drive / sharepoint

Come up with a preliminary plan for the project.

currently the css doesn't support a mobile (smaller screen width) version of the homepage.

https://github.com/davidnuescheler/theblog/blob/alexonedrive/content/posts/creating-adobe-experience-platform-pipeline-with-kafka.md starts being the "reference" markdown.

The current style implementation requires the md file to start with:

• a title
• a thematic break
• an image
• a thematic break
• the "author block"
• a thematic break
• the blog post content

All those thematic breaks are only here to properly style the fullscreen hero image and to differentiate the author section.
This requires the author to know those requirements and will be leading to a lot of rendering errors (oups i forgot a thematic break somewhere...).

TODO 1: remove the first TB from the reference md and rewrap the dom with required divs. This should be doable with adobe/helix-pipeline#516

But this does not solve the "what if the author does not have a hero image" or "he/she/they forgot to add the author section"... our code has to have a strong resilience to author mistakes. This would be doable only with code...

TODO 2: make sure the layout does not break for basic author mistakes or use cases we forgot.

Each blog entry has a "Recommended Articles" section at the end, this should be implemented. We need to research if a search can be implemented to do find something meaningful. Otherwise, I do not see how we could implement this in a user friendly matter (no one wants to maintain a list manually for each blog entry).

Click the nav: Topics > Creativity > 3D & AR
-> 404 error

Using CloudFlare?

Clean up header and footer to be exact copies of the actual site

This will make it easier for us to differentiate CSS for the different page types (homepage, author, post, topic, product).

This is somewhat related #42 but more cosmetic. We can modify the algoliasearch hosts.read property to use the current host and then pass the results through Fastly in the backend.

Some authors have a LinkedIn and ( and / or I assume ) a Twitter account.
See https://theblog.adobe.com/remove-the-mapping-misery-and-keep-the-creativity/ coming from author bio https://theblog.adobe.com/author/javier-angel/

Hostname: theblog.helix-demo.xyz
Backends:

• Fastly (Helix Pages)
• Algolia (/_query/…)

Caching:

• some (not too much)