adobe / theblog Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
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
Using CloudFlare?
Many details are not 1:1, like spacings, fonts... The overall styling must be reviewed and polished. This includes (not exhaustive):
This excludes the Header and Footer, tackled here #2.
Each author page has a "Latest" section at the end, listing the most recent (or all?) articles posted by this author.
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 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.
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.
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...
This will increase perfomance.
The 2 Algolia libraries are currently served via 3rd party domains.
@trieloff can you help with that?
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).
Several features require a search index for blog posts.
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...
it would be great, if in the short-term we could just ignore hr
and not translate them to thematic breaks...
with full navigation and links to products and topics
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:
Clean up header and footer to be exact copies of the actual site
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
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 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...
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/
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.
Come up with a preliminary plan for the project.
and link it so you can jump directly to the topic.
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.
currently the css doesn't support a mobile (smaller screen width) version of the homepage.
We want to showcase both OneDrive and Google Drive.
I think we should move all javascript from the header to the footer (or use defer
) to speed up page loading.
This will make it easier for us to differentiate CSS for the different page types (homepage, author, post, topic, product).
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.
...And adjust intraday order if necessary
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).
Hostname: theblog.helix-demo.xyz
Backends:
/_query/โฆ
)Caching:
Click the nav: Topics > Creativity > 3D & AR
-> 404 error
Follow up issue from #3: topics need to be indexed.
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:
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 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.
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)
fetchProducts
from head.html
to gather data from product page (instead of guessing logo name and link).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
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
The homepage https://theblog.adobe.com/ has a different layout than the blog entries, we need to:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.