Access mdx metadata

[wary swan]

Is it possible to access mdx metadata like defined in the examples?
e.g.

---
title: Something
thing: thang
---

Example content

And access that thang from that thing in a parent layout component? This would make it easier to implement standard header components for example.

I'm guessing this is part of remark-gfm using https://github.com/remarkjs/remark-frontmatter

[hoary cargo]

I wrote a script that would walk through all my mdx files, grab the meta data, and saved them into a JSON file at build time then exposed it with a loader$.
I used that to create pagination and do some custom stuff in a layout file

[wary swan]

Yeah I was thinking of a similar approach, but I'd like to use SSG just like the docs website does. Weird, because metadata is encoded in the docs but I don't see it used anywhere

---

for now stuff like

<span q:slot="title">Testing</span>

works but this is rather bad

[hoary cargo]

you could always import the JSON without a loader then?

[wary swan]

Yeah regular import could work, hmm

Probably better, since the content is static anyway.
I'll look into making a singular "data" file from which I can export individual content,
thanks for the pointers 😁

Should be part of the page bundle, rendered on the server and complete on browser

[hoary cargo]

Sure not a problem! im happy to share my script. it isnt pretty but gets the job done haha

[wary swan]

Yeah it's a lot of trying and guessing with newer frameworks haha

I'll consider this complete for now, probably a good idea as a feature to make that frontmatter metadata available, but its more a feature request.

Thanks a lot again btw 😄

I'll see if I can format this nicely for a feature request

[wary swan]

@hoary cargo After some poking around in the code, seems like there was a PR previously to include it in the export.

You can access it via the useDocumentHead() hook as the frontmatter object.

[hoary cargo]

ooooh

nice!

ill take a look thanks!

[wary swan]

Be aware that certain keys are filtered though, it seems like title and author for example are filtered.
Weird, but able to circumvent via title_ and author_, probably need to file an issue about that. 🤔

Have a nice evening!

---
title: test
title_: Test
author_:
  name: frammie
  avatar: me.png
words: 4032
---

[rugged walrus]

You can access both title and author via useDocumentHead(). Author is available in the meta object. And title is available in the title key.

Assuming, const head = useDocumentHead();
You can access the title with head.title and the the author with head.meta.filter((v) => v.name=='author')[0].content. Not sure if there is a better way to get the author.