Skip to content

active-frontmatter.md

Latest commit

 

History

History
117 lines (83 loc) · 2.63 KB

active-frontmatter.md

File metadata and controls

117 lines (83 loc) · 2.63 KB
layout docs
order 5
tocHeading 2

Active Frontmatter

Active Frontmatter enables the ability to apply static substitutions in your pages and layouts based on the frontmatter content of your pages, and inspired by JavaScript template literals syntax.

Really useful for passing page content or collections as attributes to a custom element.

Usage

Given some frontmatter in a markdown file:

---
layout: post
title: Git Explorer
published: 04.07.2020
description: Local git repository viewer
author: Owen Buckley
image: /assets/blog-post-images/git.png
---

It can be accessed and substituted statically in either markdown:

# My Blog Post

Published: ${globalThis.page.data.published}

Lorum Ipsum.

Or HTML:

<html>
  <head>
    <title>My Blog - ${globalThis.page.title}</title>
    <meta name="author" content="${globalThis.page.data.author}" />
    <meta property="og:title" content="My Blog - ${globalThis.page.title}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.myblog.dev" />
    <meta property="og:image" content="https://www.myblog.dev/${globalThis.page.data.image}" />
    <meta property="og:description" content="My Blog - ${globalThis.page.data.description}" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Data Client

You can also access this content using our data client:

import { getContentByCollection } from "@greenwood/cli/src/data/client.js";

export default class Navigation extends HTMLElement {
  async connectedCallback() {
    const items = await getContentByCollection("nav");

    this.innerHTML = `
      <nav role="main navigation">
        <ul>
          ${items.maps((item) => {
            const { label, route } = item;

            return `
              <li>
                <a href="${route}">${label}</a>
              </li>
            `;
          })}
        </ul>
      </nav>
    `;
  }
}