Projects

Dabbling in Open Source

My primary focus of interest lies in Metalsmith, a static site generator that motivates me to delve deeper into node.js. Metalsmith is more than just a simple, pluggable static site generator, as its core functionality involves reading files from a directory, converting them into JavaScript objects, exposing them to plugins for manipulation, and ultimately converting the objects back into files that are then written to a designated destination directory. It acts as an "engine" that facilitates this entire process.

How Metalsmith works

Unlike monolithic static site generators such as Gatsby or Hugo, Metalsmith offers a clear and simple understanding of its functionality. With its node plugin architecture, even complex plugins can be easily created, and there is a vast selection of plugins available to choose from.

Metalsmith, originally developed by Segment in early 2014, experienced a period of inactivity after a few years of initial development.

Recently, a new lead developer/maintainer Kevin Van Lierde AKA webketje has taken over and Metalsmith is now again under active development. Read more about this history here.

Plugins

I have build several plugins that are available to the community on my GitHub repo or via npm. I also try to contribute to existing plugins.

Metalsmith Markdown Partials

Enables the reuse of markdown partials. These partials are inserted into the contents of a markdown file by replacing an include marker. This allows for modular markdown and promotes reuse of content.

Metalsmith Blog Lists

Adds the following lists to the metadata. This makes this data accessible to all pages and may be used to create widgets that promote featured and/or latest blogposts. This plugin requires all blogposts to be located in blog/ of the content directory.

  • All Blogs
  • Recent Blogs
  • Featured Blogs
  • Annualized Blogs List

Reformats links, strips the protocal and host name from local links and adds a target and rel attribute to external links. As markdown syntax only allows for alt and title attributes in links, content editors normally must use HTML to add other attributes. This plugin negates the use of HTML for links in a markdown document.

Metalsmith Prism

Syntax highlighting for Metalsmith HTML templates using Prism.js. This plugin was authored by Robert McGuinness and sponsored by Availity. I assumed maintenance in March 2022.

Metalsmith Static Files

Copies a directory from the source folder to the build folder. Since metalsmith-assets is deprecated and the repo is archived, I needed an up-to-date plugin.

Starters

Here are some starters that may be helpful to get started with building a Metalsmith site.

Metalsmith Bare-bones Starter

As the name says, this starter is providing a bare-bones setup to get you started. It uses Markdown content and Nunjucks templating and has a couple of pages. The rest is up to you.

Plugins:

  • @metalsmith/drafts
  • metalsmith-metadata
  • @metalsmith/markdown
  • @metalsmith/permalinks
  • metalsmith-layouts
  • metalsmith-assets
  • metalsmith-if
  • metalsmith-html-minifier

Metalsmith Blog Starter

A blog starter, based on the Metalsmith Bare-bones Starter. It adds a blog landing page and several "greek" blog posts. The rest is up to you.

Plugins:

  • @metalsmith/drafts
  • metalsmith-metadata
  • @metalsmith/collections
  • @metalsmith/markdown
  • @metalsmith/permalinks
  • @metalsmith/layouts
  • metalsmith-prism
  • metalsmith-assets
  • metalsmith-if
  • metalsmith-html-minifier

Metalsmith Company Starter

Company websites are normally more complex than your average portfolio or blog site. Here is a starter that inlcudes flexible page layouts, a responsive/progressive image component and more.

Plugins:

  • @metalsmith/drafts
  • metalsmith-metadata
  • @metalsmith/collections
  • @metalsmith/markdown
  • @metalsmith/permalinks
  • @metalsmith/layouts
  • metalsmith-prism
  • metalsmith-static
  • @metalsmith/sass
  • @metalsmith/postcss
  • metalsmith-if
  • metalsmith-html-minifier