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.