npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

micromark-extension-frontmatter

v2.0.0

Published

micromark extension to support frontmatter (YAML, TOML, etc)

Downloads

5,331,768

Readme

micromark-extension-frontmatter

Build Coverage Downloads Size Sponsors Backers Chat

micromark extensions to support frontmatter (YAML, TOML, and more).

Contents

What is this?

This package contains two extensions that add support for frontmatter syntax as often used in markdown to micromark.

Frontmatter is a metadata format in front of the content. It’s typically written in YAML and is often used with markdown. Frontmatter does not work everywhere so it makes markdown less portable.

As there is no spec for frontmatter in markdown, these extensions follow how YAML frontmatter works on github.com. It can also parse TOML frontmatter, just like YAML except that it uses a +.

When to use this

You can use these extensions when you are working with micromark already.

When you need a syntax tree, you can combine this package with mdast-util-frontmatter.

All these packages are used remark-frontmatter, which focusses on making it easier to transform content by abstracting these internals away.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install micromark-extension-frontmatter

In Deno with esm.sh:

import {frontmatter, frontmatterHtml} from 'https://esm.sh/micromark-extension-frontmatter@2'

In browsers with esm.sh:

<script type="module">
  import {frontmatter, frontmatterHtml} from 'https://esm.sh/micromark-extension-frontmatter@2?bundle'
</script>

Use

Say our module example.js looks as follows:

import {micromark} from 'micromark'
import {frontmatter, frontmatterHtml} from 'micromark-extension-frontmatter'

const output = micromark('---\na: b\n---\n# c', {
  extensions: [frontmatter()],
  htmlExtensions: [frontmatterHtml()]
})

console.log(output)

…now running node example.js yields:

<h1>c</h1>

API

This package exports the identifiers frontmatter, frontmatterHtml, and toMatters. There is no default export.

The export map supports the development condition. Run node --conditions development module.js to get instrumented dev code. Without this condition, production code is loaded.

frontmatter(options?)

Create an extension for micromark to enable frontmatter syntax.

Parameters
  • options (Options, default: ['yaml']) — configuration
Returns

Extension for micromark that can be passed in extensions, to enable frontmatter syntax (Extension).

frontmatterHtml(options?)

Create an extension for micromark to support frontmatter when serializing to HTML.

👉 Note: this makes sure nothing is generated in the output HTML for frontmatter.

Parameters
  • options (Options, default: ['yaml']) — configuration
Returns

Extension for micromark that can be passed in htmlExtensions, to support frontmatter when serializing to HTML (HtmlExtension).

toMatters(options?)

Simplify options by normalizing them to an array of matters.

Parameters
  • options (Options, default: ['yaml']) — configuration
Returns

List of matters (Array<Matter>).

Info

Sequence (TypeScript type).

Depending on how this structure is used, it reflects a marker or a fence.

Fields
  • open (string) — opening
  • close (string) — closing

Matter

Fields describing a kind of matter (TypeScript type).

👉 Note: using anywhere is a terrible idea. It’s called frontmatter, not matter-in-the-middle or so. This makes your markdown less portable.

👉 Note: marker and fence are mutually exclusive. If marker is set, fence must not be set, and vice versa.

Fields
  • type (string) — node type to tokenize as
  • marker (string or Info) — character repeated 3 times, used as complete fences
  • fence (string or Info) — complete fences
  • anywhere (boolean, default: false) — whether matter can be found anywhere in the document, normally only matter at the start of the document is recognized

Options

Configuration (TypeScript type).

Type
type Options = Array<Matter | Preset> | Matter | Preset

Preset

Known name of a frontmatter style (TypeScript type).

  • 'yaml'Matter defined as {type: 'yaml', marker: '-'}
  • 'toml'Matter defined as {type: 'toml', marker: '+'}
Type
type Preset = 'toml' | 'yaml'

Examples

Here are a couple of example of different matter objects and what frontmatter they match.

To match frontmatter with the same opening and closing fence, namely three of the same markers, use for example {type: 'yaml', marker: '-'}, which matches:

---
key: value
---

To match frontmatter with different opening and closing fences, which each use three different markers, use for example {type: 'custom', marker: {open: '<', close: '>'}}, which matches:

<<<
data
>>>

To match frontmatter with the same opening and closing fences, which both use the same custom string, use for example {type: 'custom', fence: '+=+=+=+'}, which matches:

+=+=+=+
data
+=+=+=+

To match frontmatter with different opening and closing fences, which each use different custom strings, use for example {type: 'json', fence: {open: '{', close: '}'}}, which matches:

{
  "key": "value"
}

Authoring

When authoring markdown with frontmatter, it’s recommended to use YAML frontmatter if possible. While YAML has some warts, it works in the most places, so using it guarantees the highest chance of portability.

In certain ecosystems, other flavors are widely used. For example, in the Rust ecosystem, TOML is often used. In such cases, using TOML is an okay choice.

When possible, do not use other types of frontmatter, and do not allow frontmatter anywhere.

HTML

Frontmatter does not relate to HTML elements. It is typically stripped, which is what these extensions do.

CSS

This package does not relate to CSS.

Syntax

Frontmatter forms with the following BNF:

frontmatter ::= fence_open *( eol *line ) eol fence_close
fence_open ::= sequence_open *space_or_tab
fence_close ::= sequence_close *space_or_tab
; Note: options can define custom sequences.
sequence_open ::= 3'+' | 3'-'
; Note: options can define custom sequences.
; Restriction: `sequence_close` must correspond to `sequence_open`.
sequence_close ::= 3'+' | 3'-'

; Character groups for informational purposes.
byte ::= 0x00..=0xFFFF
eol ::= '\n' | '\r' | '\r\n'
line ::= byte - eol

Frontmatter can only occur once. It cannot occur in a container. It must have a closing fence. Like flow constructs, it must be followed by an eol (line ending) or eof (end of file).

Types

This package is fully typed with TypeScript. It exports the additional types Info, Matter, Options, Preset.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, micromark-extension-frontmatter@^2, compatible with Node.js 16.

This package works with micromark version 3 and later.

Security

This package is safe.

Related

Contribute

See contributing.md in micromark/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer