See https://www.hlx.live/developer/font-fallback

https://www.24life.com/graphic-designer-by-day-this-gx24-instructor-says-power-jumping-with-you-is-worth-it/

TODO: clarify: is this specified in a metadata, added as link in the document, or pulled from a JSON table?

e.g. https://www.24life.com/collections/recipes/

Can re-use the Article List block as on https://main--24life--hlxsites.hlx.page/author/trish-shallest
Just need to add another configuration option to filter by collection, instead of author-id.

Goals: let the author change the brand, slogan and main links in the footer. The social media icons could be hard-coded in JS, or as well added to the word document.

If you find this: No, the comment widget will not be implemented as per customers request.

Around 2300 posts
e.g. https://www.24life.com/with-hard-knocks-brett-kicks-things-up-a-notch/

See list on https://www.24life.com/sitemap_index.xml

Manually import article posts, create issues for missing blocks, implement the blocks, then complete the article. Repeat. Let's make each article final before moving to the next. Only when we have all blocks, create a script for the import.

Basically a list of articles for a category. Uses article-list block with a different filter.

See fstab.yaml how folders are mapped to /category/default and /tag/default.

example:
https://www.24life.com/category/lifestyle/

Background

The original site has trailing slashes for each url. e.g. https://www.24life.com/isabel-beats-incredible-odds/

If mapped directly in Franklin, this would be isabel-beats-incredible-odds/index.docx. Having thousands of index.docx files is difficult to manage (e.g. Sharepoint search shows just the filename, index.docx for each result.

Therefore we are creating documents by it's name, e.g.

• document: /isabel-beats-incredible-odds.docx
• franklin url: https://www.24life.com/isabel-beats-incredible-odds

Task

This can be achieved either by a CDN rewrite/redirect rule, or adding a list of urls to the redirect spread sheet.

Note: so far we assume there is no CDN.

To be used in the list off magazine issues: https://www.24life.com/magazine/

Is this really needed?

• open https://www.24life.com/isabel-beats-incredible-odds/
• then Press the twitter icon.

https://www.24life.com/about-us/

We can have a section for each header, and set the style metadata property to override the h3 color.

https://www.24life.com/are-your-workouts-sabotaging-your-sleep/

Requires data from #9

See https://www.24life.com/magazine/volume-5-issue-11/

Extension of #3

Suggestions:

• Check the order of articles, and if the large article is the first, put it on the left. Otherwise put it on the right.
• or automatically alternative between left and right after each group of blocks.
• alternatively, let the author add a 'large right' variant to the block.

https://www.24life.com/magazine/

There is also a hover effect and mobile version.

https://www.24life.com/not-found

see /404.html in code base

https://www.hlx.live/developer/sitemap
https://www.hlx.live/docs/go-live-checklist#sitemap--robots

maybe no block is needed, if the quote format is exported from Word to HTML.

https://www.24life.com/magazine/volume-5-issue-12/

Comes in several variations:

• 2 or 3 side by side, smaller for "more to explore" https://www.24life.com/nourishment/
• different colored bars
• Collections are displayed larger (2 rows) without the bar (intentional?) https://www.24life.com/

Note these will be animated later: #27

e.g. https://www.24life.com/leilani-fights-her-way-back-to-fitness/

I already created a hero-block, it just needs to be completed, and as well make sure the lighthouse score is improved. https://pagespeed.web.dev/analysis/https-61-100--24life--hlxsites-hlx-page-isabel-beats-incredible-odds/lgnzd9djfg?utm_source=psi&utm_medium=redirect&form_factor=mobile

Just like cards, it comes in different color variations. (see --color-focus css variable)

A huge card is shown with the current issue.

Create summary document for each issue? Or create a metadata table in each issue, that is then pulled into a JSON table.

https://www.24life.com/are-your-workouts-sabotaging-your-sleep/

To be populated from author index

depends on #14

also align media-query sizes, see https://www.hlx.live/docs/dev-collab-and-good-practices

Some images (to be investigated) open in a dialog.

e.g. https://www.24life.com/jim-kwik-unlocks-your-potential-in-uncertain-times-with-limitless/

but then some images don't do this:

https://www.24life.com/the-change-master-john-berardis-second-act-will-help-you-too/

TODO: discuss if and how to make this consistent.

issue: https://www.24life.com/magazine/volume-6-issue-2/

https://www.24life.com/sitemap_index.xml

The footer is not mobile-friendly; update it to make the footer content adjust per screen size

Follow up to issue #1

Follow-up task after PR #53

on https://www.24life.com/about-us/ add a fragment with https://www.24life.com/contact/.

Discuss with authors which of the two versions should be used in both places.

top of https://www.24life.com/

e.g. https://www.24life.com/?s=san+francisco

Note how the search term is highlighted in the result.

Depends on #9, but also needs indexes for pages and magazines.

Add index for post content.

If we use the search component from Zemax, this should not take long to build.

Check with customer which solution they use.

e.g. https://www.24life.com/category/lifestyle/

The customer has currently 1811 tags. While I could create a document for each of them, future authors might not want to do this.

It could be handled with a single document and query params, like in ex. as query param https://www.keysight.com/blogs/tag-matches?tag=Network%20Security

We could also use folder mapping in fstab.yaml (i.e. mapping everything starting with /category/ to a “template” page like /category/default where you can auto-populate the content based on the category name in the path (same as you would in the query param case).
(to be investigated how this works.)

Maybe use the same approach for collection pages #23

https://www.24life.com/experts/

Pull data from the Author index (#14).

https://www.24life.com/graphic-designer-by-day-this-gx24-instructor-says-power-jumping-with-you-is-worth-it/

It is a normal POST form, it redirects to https://www.24life.com/newsletter-confirmation/

Use Franklin Forms to Submit to spreadsheets

There are currently 14 collections.

https://www.24life.com/collections/feel-better/
https://www.24life.com/collections/success-stories/

See https://www.24life.com/page-sitemap.xml

https://www.24life.com/the-change-master-john-berardis-second-act-will-help-you-too/

https://www.24life.com/graphic-designer-by-day-this-gx24-instructor-says-power-jumping-with-you-is-worth-it/

Note this is different from #11

there is also a mobile version

depends on #13

e.g. https://www.24life.com/author/24life/page/23/

or simpler: add a load-more button like on https://main--24life--hlxsites.hlx.page/experts

109 pages (about us, magazines, etc)

See https://www.24life.com/page-sitemap.xml

the non-magazine pages should probably be manually imported, not with the import tool.

Animated hero on https://www.24life.com/magazine/volume-5-issue-12/

It's also a carousel and responsive.

https://www.24life.com/feed/

https://github.com/hlxsites/vg-macktrucks-com/blob/main/.github/workflows/generate-atom-news-feeds.yaml

The generated file will be named feed.xml, so we also need to add a redirect from /feed/ to /feed.xml

178+ authors

Slide in from bottom:

• https://www.24life.com/graphic-designer-by-day-this-gx24-instructor-says-power-jumping-with-you-is-worth-it/
• https://www.24life.com/maye-musk-is-unstoppable/

Slide in from the sides, for articles: https://www.24life.com/magazine/volume-5-issue-11/

Text and image sliding from left or right: https://www.24life.com/workout-barbell-nation/

Set scroll animation and direction as metadata property.

https://www.24life.com/author/24life/
https://www.24life.com/?s=art

Different from cards on https://www.24life.com/

Articles like https://www.24life.com/isabel-beats-incredible-odds/ all have repeating parts. We don't want authors to have to add social media buttons and author panel to each blog article, instead a template will automatically add these.

To be used in the top navigation https://www.24life.com/

Open question: how to have only articles in the index?

Same view as in the Navigation, see #10.

https://www.24life.com/patricia-moreno-awakens-the-brain-body-connection-to-transform-you/

Basically a list of articles by this author.

Also create a bio in metadata, which is then indexed and used in the articles as a bio. Create the index here.

https://www.24life.com/author/rachelle-cihonski/

https://www.24life.com/newsletter-full/
This link is attached to the mail icon in the upper right of the menu bar.

Page submits a form to: http://newsletter.culturefoundry.com/t/r/s/hruuutt/

Use Franklin Forms to Submit to spreadsheets

e.g. https://www.24life.com/movement/

https://github.com/adobe/franklin-sidekick-library

And create a first Block document.

Also consider setting up a list of tags, categories, collections and authors. So the users can easily pick one.

https://www.24life.com/magazine/volume-5-issue-12/