Is the front matter available to the javascript code that runs on a page?

[gisle]

I'm considering putting some data there that I will use to drive HTML generation on the page. The nice thing about the front matter is that it's YAML, while loading yaml from a file isn't supported directly (as FileAttachment('data.yml').yaml()). I really don't want to maintain the data in any other syntax.

[Fil]

I agree, this should be a feature request — or maybe three feature requests, considering:

1. accessing the front matter from JS (fenced blocks & interpolated), maybe in a meta variable?,
2. accessing front matter from SSR when building the page, and
3. supporting FileAttachment('data.yml').yaml()

[gisle]

My current workaround is to have a data.json.js file besides the data.yml that contains:

import fs from 'fs';
import yaml from 'js-yaml';

try {
  const fileContents = fs.readFileSync('docs/data.yml', 'utf8');
  const data = yaml.load(fileContents);
  const json = JSON.stringify(data, null, 2);
  console.log(json);
} catch (e) {
  console.error(e);
}

One of the problems with this is that the data doesn't automatically update live in the dev instance when data.yml is edited. I have to touch the data.json.js file to have it reload. Another feature request could be to have a way to state dependencies like this.

[mythmon]

One of the nice things about Framework is that it is relatively easy to load new libraries. You can load the file attachment as text, and then parse it with an off-the-shelf yaml parser:

index.md

# Hello, yaml!

```js
import yaml from "npm:yaml";
```

```js
const yamlText = await FileAttachment("./data.yml").text();
const data = yaml.parse(yamlText);
```

```js
display(data);
```

Of course, this doesn't get you the front matter. But it does let you load arbitrary yaml.