Build better pages with Metalsmith Components
Metalsmith Components embrace a modular page building paradigm. Rather than using the markdown body for all content, a structured content model is defined in the page fontmatter. Frontmatter objects define pages section templates. As a result page layout files are much shorter, as the code is organized into smaller component files, components can easily be reused on any page.
Let's have a look at what that looks like. Here is how this page is build:
---
layout: sections.njk
bodyClasses: "home"
bodyBackgroundImage: "v1648837357/components-library/components-background_mfr1ag.jpg"
seo:
title: Metalsmith Nunjucks Components Library
description: "A collection of Nunjucks components for use with Metalsmith"
socialImage: "v1648838418/components-library/ms-nj-social-image_jb9yox.jpg"
canonicalOverwrite: ""
sections:
- section: home-banner
...
- section: intro
- section: media
...
---
layout
is used to determine which template to use for the page.bodyClasses
is used to add classes to the body tag.bodyBackgroundImage
sets the background image for the body.- The
seo
object contains the SEO metadata for the page. - The
sections
array contains the sections to be rendered on the page.
Here we see that the page is built with a sections
array. Let's have a closer look at the media section.
Composable Sections
This following code example shows a simplified media section, which is composed of the base components text
, ctas
and image
.
section: media
text:
title: Metalsmith Company Starter
header: "h1"
subTitle: Using "sectioned" pages to build flexible page layouts
prose: This starter is build in the style of a company marketing site. The components on this site are bare-bone interpretations of common information presentation patterns that can be found on many corporate websites. [The source code for this site can be found on GitHub](https://github.com/wernerglinka/metalsmith-company-starter).
hasCtas: true
ctas:
- url: "https://github.com/wernerglinka/ms-components"
label: Get the Starter
isExternal: true
isButton: true
buttonStyle: "primary"
image:
src: "v1647546742/tgc2022/corporate_ip4qbt.jpg"
alt: "Metalsmith Javascript"
aspectRatio: "56.25"
caption: "Photo by Josh Hild from Pexels"
A simplified media template that consumes this data looks like this. Note that the template calls base components to render the text, image and the CTAs.
{% from "../partials/ctas.njk" import ctas %}
{% from "../partials/responsive-image.njk" import responsiveImage %}
{% from "../partials/text.njk" import text %}
<section class="section-media>
<div class="content">
<div class="prose">
{{ text(params.text)}}
{% if params.hasCtas %}
{{ ctas(params.ctas) }}
{% endif %}
</div>
<div class="media">
{{ responsiveImage(params.image, site) }}
</div>
</div>
</section>
And this is the rendered page section:
Metalsmith Company Starter
Using "sectioned" pages to build flexible page layouts
This starter is build in the style of a company marketing site. The components on this site are bare-bone interpretations of common information presentation patterns that can be found on many corporate websites. The source code for this site can be found on GitHub.
This website code is available at GitHub.