Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(markdown): add support for TOML frontmatter in Markdown files. #12850

Merged
merged 3 commits into from
Jan 29, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/lazy-pandas-love.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
'@astrojs/markdown-remark': minor
---

Adds support for TOML frontmatter in `.md` and `.mdx` files

Astro 5.2 automatically identifies the format of your Markdown and MDX frontmatter based on the delimiter used. With `+++` as a delimiter (instead of the `---` YAML code fence), your frontmatter will automatically be recognized and parsed as [TOML](https://toml.io).

This is useful for adding existing content files with TOML frontmatter to your project from another framework such as Hugo.

TOML frontmatter can also be used with [content collections](https://docs.astro.build/guides/content-collections/), and files with different frontmatter languages can live together in the same project.

No configuration is required to use TOML frontmatter in your content files. Your delimiter will indicate your chosen frontmatter language:

```md
+++
date = 2025-01-30
title = 'Use TOML frontmatter in Astro!'
[author]
name = 'Colin Bate'
+++

# Support for TOML frontmatter is here!
```
1 change: 1 addition & 0 deletions packages/markdown/remark/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"remark-rehype": "^11.1.1",
"remark-smartypants": "^3.0.2",
"shiki": "^1.29.1",
"smol-toml": "^1.3.1",
"unified": "^11.0.5",
"unist-util-remove-position": "^5.0.0",
"unist-util-visit": "^5.0.0",
Expand Down
23 changes: 14 additions & 9 deletions packages/markdown/remark/src/frontmatter.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import yaml from 'js-yaml';
import * as toml from 'smol-toml';

export function isFrontmatterValid(frontmatter: Record<string, any>) {
try {
Expand All @@ -10,15 +11,19 @@ export function isFrontmatterValid(frontmatter: Record<string, any>) {
return typeof frontmatter === 'object' && frontmatter !== null;
}

// Capture frontmatter wrapped with `---`, including any characters and new lines within it.
// Only capture if `---` exists near the top of the file, including:
// Capture frontmatter wrapped with `---` or `+++`, including any characters and new lines within it.
// Only capture if `---` or `+++` exists near the top of the file, including:
// 1. Start of file (including if has BOM encoding)
// 2. Start of file with any whitespace (but `---` must still start on a new line)
const frontmatterRE = /(?:^\uFEFF?|^\s*\n)---([\s\S]*?\n)---/;
// 2. Start of file with any whitespace (but `---` or `+++` must still start on a new line)
const frontmatterRE = /(?:^\uFEFF?|^\s*\n)(?:---|\+\+\+)([\s\S]*?\n)(?:---|\+\+\+)/;
const frontmatterTypeRE = /(?:^\uFEFF?|^\s*\n)(---|\+\+\+)/;
export function extractFrontmatter(code: string): string | undefined {
return frontmatterRE.exec(code)?.[1];
}

function getFrontmatterParser(code: string): [string, (str: string) => unknown] {
return frontmatterTypeRE.exec(code)?.[1] === '+++' ? ['+++', toml.parse] : ['---', yaml.load];
}
export interface ParseFrontmatterOptions {
/**
* How the frontmatter should be handled in the returned `content` string.
Expand Down Expand Up @@ -47,8 +52,8 @@ export function parseFrontmatter(
if (rawFrontmatter == null) {
return { frontmatter: {}, rawFrontmatter: '', content: code };
}

const parsed = yaml.load(rawFrontmatter);
const [delims, parser] = getFrontmatterParser(code);
const parsed = parser(rawFrontmatter);
const frontmatter = (parsed && typeof parsed === 'object' ? parsed : {}) as Record<string, any>;

let content: string;
Expand All @@ -57,16 +62,16 @@ export function parseFrontmatter(
content = code;
break;
case 'remove':
content = code.replace(`---${rawFrontmatter}---`, '');
content = code.replace(`${delims}${rawFrontmatter}${delims}`, '');
break;
case 'empty-with-spaces':
content = code.replace(
`---${rawFrontmatter}---`,
`${delims}${rawFrontmatter}${delims}`,
` ${rawFrontmatter.replace(/[^\r\n]/g, ' ')} `,
);
break;
case 'empty-with-lines':
content = code.replace(`---${rawFrontmatter}---`, rawFrontmatter.replace(/[^\r\n]/g, ''));
content = code.replace(`${delims}${rawFrontmatter}${delims}`, rawFrontmatter.replace(/[^\r\n]/g, ''));
break;
}

Expand Down
96 changes: 93 additions & 3 deletions packages/markdown/remark/test/frontmatter.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { extractFrontmatter, parseFrontmatter } from '../dist/index.js';
const bom = '\uFEFF';

describe('extractFrontmatter', () => {
it('works', () => {
it('handles YAML', () => {
const yaml = `\nfoo: bar\n`;
assert.equal(extractFrontmatter(`---${yaml}---`), yaml);
assert.equal(extractFrontmatter(`${bom}---${yaml}---`), yaml);
Expand All @@ -19,10 +19,25 @@ describe('extractFrontmatter', () => {
assert.equal(extractFrontmatter(`---${yaml} ---`), undefined);
assert.equal(extractFrontmatter(`text\n---${yaml}---\n\ncontent`), undefined);
});

it('handles TOML', () => {
const toml = `\nfoo = "bar"\n`;
assert.equal(extractFrontmatter(`+++${toml}+++`), toml);
assert.equal(extractFrontmatter(`${bom}+++${toml}+++`), toml);
assert.equal(extractFrontmatter(`\n+++${toml}+++`), toml);
assert.equal(extractFrontmatter(`\n \n+++${toml}+++`), toml);
assert.equal(extractFrontmatter(`+++${toml}+++\ncontent`), toml);
assert.equal(extractFrontmatter(`${bom}+++${toml}+++\ncontent`), toml);
assert.equal(extractFrontmatter(`\n\n+++${toml}+++\n\ncontent`), toml);
assert.equal(extractFrontmatter(`\n \n+++${toml}+++\n\ncontent`), toml);
assert.equal(extractFrontmatter(` +++${toml}+++`), undefined);
assert.equal(extractFrontmatter(`+++${toml} +++`), undefined);
assert.equal(extractFrontmatter(`text\n+++${toml}+++\n\ncontent`), undefined);
});
});

describe('parseFrontmatter', () => {
it('works', () => {
it('works for YAML', () => {
const yaml = `\nfoo: bar\n`;
assert.deepEqual(parseFrontmatter(`---${yaml}---`), {
frontmatter: { foo: 'bar' },
Expand Down Expand Up @@ -81,7 +96,66 @@ describe('parseFrontmatter', () => {
});
});

it('frontmatter style', () => {
it('works for TOML', () => {
const toml = `\nfoo = "bar"\n`;
assert.deepEqual(parseFrontmatter(`+++${toml}+++`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '',
});
assert.deepEqual(parseFrontmatter(`${bom}+++${toml}+++`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: bom,
});
assert.deepEqual(parseFrontmatter(`\n+++${toml}+++`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '\n',
});
assert.deepEqual(parseFrontmatter(`\n \n+++${toml}+++`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '\n \n',
});
assert.deepEqual(parseFrontmatter(`+++${toml}+++\ncontent`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '\ncontent',
});
assert.deepEqual(parseFrontmatter(`${bom}+++${toml}+++\ncontent`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: `${bom}\ncontent`,
});
assert.deepEqual(parseFrontmatter(`\n\n+++${toml}+++\n\ncontent`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '\n\n\n\ncontent',
});
assert.deepEqual(parseFrontmatter(`\n \n+++${toml}+++\n\ncontent`), {
frontmatter: { foo: 'bar' },
rawFrontmatter: toml,
content: '\n \n\n\ncontent',
});
assert.deepEqual(parseFrontmatter(` +++${toml}+++`), {
frontmatter: {},
rawFrontmatter: '',
content: ` +++${toml}+++`,
});
assert.deepEqual(parseFrontmatter(`+++${toml} +++`), {
frontmatter: {},
rawFrontmatter: '',
content: `+++${toml} +++`,
});
assert.deepEqual(parseFrontmatter(`text\n+++${toml}+++\n\ncontent`), {
frontmatter: {},
rawFrontmatter: '',
content: `text\n+++${toml}+++\n\ncontent`,
});
});

it('frontmatter style for YAML', () => {
const yaml = `\nfoo: bar\n`;
const parse1 = (style) => parseFrontmatter(`---${yaml}---`, { frontmatter: style }).content;
assert.deepEqual(parse1('preserve'), `---${yaml}---`);
Expand All @@ -96,4 +170,20 @@ describe('parseFrontmatter', () => {
assert.deepEqual(parse2('empty-with-spaces'), `\n \n \n \n \n\ncontent`);
assert.deepEqual(parse2('empty-with-lines'), `\n \n\n\n\n\ncontent`);
});

it('frontmatter style for TOML', () => {
const toml = `\nfoo = "bar"\n`;
const parse1 = (style) => parseFrontmatter(`+++${toml}+++`, { frontmatter: style }).content;
assert.deepEqual(parse1('preserve'), `+++${toml}+++`);
assert.deepEqual(parse1('remove'), '');
assert.deepEqual(parse1('empty-with-spaces'), ` \n \n `);
assert.deepEqual(parse1('empty-with-lines'), `\n\n`);

const parse2 = (style) =>
parseFrontmatter(`\n \n+++${toml}+++\n\ncontent`, { frontmatter: style }).content;
assert.deepEqual(parse2('preserve'), `\n \n+++${toml}+++\n\ncontent`);
assert.deepEqual(parse2('remove'), '\n \n\n\ncontent');
assert.deepEqual(parse2('empty-with-spaces'), `\n \n \n \n \n\ncontent`);
assert.deepEqual(parse2('empty-with-lines'), `\n \n\n\n\n\ncontent`);
});
});
9 changes: 9 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading