Projects

Dabbling in Open Source

My main area of interest is Metalsmith a static site generator that encourages me to learn more about node. Metalsmith has a by-line An extremely simple, pluggable static site generator but that only tells part of the story. At its core, Metalsmith is an "engine" that reads files from a directory, turns them into a javascript object, exposed the object to plugins for manipulation and finally turns the object back into files, then writes them to a destination directory.

How Metalsmith works

Compared to monoliths like Gatsby or Hugo, it is easy to see what Metalsmith does. Even fairly sophisticated plugins can be written by taking advantadge of node plugins, and there are a myriad of them.

Metalsmith lay dormant for a while. It was initially created by Segment in early 2014. But after a couple of years the project languished.

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