Random notes to myself

We're venturing into creating dynamic media sections using Sanity Studio, enabling our Metalsmith SSG to fetch content seamlessly during build time.

Metalsmith is a versatile static site generator that allows for customization through various plugins. Using a structured content model, it enables building succinct, reusable page components. We'll explore this through a practical example.

Metalsmith, while excellent for developers, can pose challenges for non-technical content creators. To address this, I explored sanity.io as a user-friendly interface. My proof-of-concept site illustrates the practicality of this solution.

Learn how to implement a versatile badge section for your website using Metalsmith and Nunjucks templating. This guide details how to list features, awards or customers, controlling what to display and the order, with ease and flexibility.

Forestry.io is a Git-backed CMS for websites and web products built using static site generators. This post describes how to setup Forestry CMS with the Metalsmith Forestry Starter.

Built a Metalsmith Netlify starter with integrated CMS. Overcome YAML limitations with Manual Initialization. Content types defined in individual files; simplifies managing growing configurations. Code available on GitHub.

Static Site Generators (SSGs) often leave non-developer editors wanting a smoother experience. This post details how to integrate Netlify CMS with a Metalsmith site, providing an easy, code-free editing interface.

A new set of three starters to help get started with Metalsmith quickly.

Explore creating flexible page layouts for Metalsmith using Markdown and Nunjucks. Learn about 'Sectioned Pages' composed of YAML-based structured data for intricate web designs.

The post explores creating a lazy-loading image component for Metalsmith/Nunjucks using Cloudinary.io. It uses low-res images first, then high-res as they enter the viewport. It also covers the use of Intersection and Resize Observer APIs.

Responsive images, essential for modern web development, improve user experience and reduce loading times. Using the Responsive Image Breakpoints Generator, create images tailored for all screen sizes.

"Nunjucks, a JavaScript-based templating engine, is used in Project ORCA. Offering features such as variables, loops, conditionals, block inheritance, includes, and macros."