Introduction and orientation for templating with Ghost, Metalsmith, Eleventy, and Next.js + Strapi.

The examples are mostly focused to be used by projects were one needs reusable structures, yet the complexity is not overwhelming, as to be able to type the content on a set of files manually; id est, for blogs or moderately sized businesses with posts and notices for users.

• Tooltips for acronyms galore!

  Video showcase (open)

  tooltips.mp4

• Sidebar that visually responds to the section actively viewed on the main content area of the page; it self-scrolls to have the "current" link in view at all times, with a debounced handler to prevent such action if the user happens to scroll at that moment (just before it triggers).

  Video showcase (open)

  sidebar.mp4

• Theme switching between Handlebars and Nunjucks section.

  Video showcase (open)

  theme-switch.mp4

• Code syntax highlighting with Highlight.js.

I might restructure the site with routing and add new sections in the future, along with having hosted examples of each section with embedded mini-previews.

All code examples are functional and a good way to realize why templating is useful without much effort form the reader.