https://markdoc.dev/_next/static/chunks/pages/docs/frontmatter-ae60ffd4836cb3bc.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[973],{3468:function(n,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/frontmatter",function(){return e(2505)}])},2505:function(n,t,e){"use strict";e.r(t),e.d(t,{__N_SSG:function(){return h},default:function(){return y},markdoc:function(){return k}});var a=e(7294),o=e(1272),r=e(4211),s=e(4266),i=e(9266),c=e(8057),u=e(3695);let m={tags:(0,s.w)(i),nodes:(0,s.w)(c),functions:(0,s.w)(u),...(0,s.w)({})},d=new r.ZP.Tokenizer({allowComments:!0}).tokenize('---\ntitle: Frontmatter\ndescription:\n---\n\n# {% $markdoc.frontmatter.title %}\n\nUse frontmatter to apply page-level metadata to Markdoc documents, like `title` and `description`. Markdoc doesn\'t have an opinion about how you format your frontmatter, you can use YAML, TOML, JSON, GraphQL—pretty much any data format you want.\n\n## Examples\n\nWhile not a comprehensive list, the examples below give you an idea of how you can structure frontmatter in various formats.\n\n### YAML\n\n```yaml\n---\ntitle: Authoring in Markdoc\ndescription: Quickly author amazing content with Markdoc syntax, a superset of Markdown.\ndate: 2022-04-01\n---\n```\n\n### TOML\n\n```toml\n---\ntitle       = "Authoring in Markdoc"\ndescription = "Quickly author amazing content with Markdoc syntax, a superset of Markdown."\ndate        = "2022-04-01"\n---\n```\n\n### JSON\n\n```json\n---\n{\n  "title": "Authoring in Markdown",\n  "description": "Quickly author amazing content with Markdoc syntax, a superset of Markdown.",\n  "date": "2022-04-01"\n}\n---\n```\n\n### GraphQL\n\n```graphql\n---\n{\n  page {\n    title\n    description\n    date\n  }\n}\n---\n```\n\n## Access frontmatter values\n\nTo access frontmatter content in your document, you have to pass the values to Markdoc as [variables](/docs/variables).\n\n### Parse the document\n\nParse your document to access the frontmatter content:\n\n{% example %}\n\n```js\nconst doc = `\n---\ntitle: My title\n---\n\n# {% $frontmatter.title %} \n`;\n\nconst ast = Markdoc.parse(doc);\n```\n\n{% /example %}\n\n### Parse the frontmatter\n\nParse the frontmatter attribute using your preferred format and pass it in the `variables` field of your [`config` object](/docs/config).\n\n```js\nimport yaml from \'js-yaml\'; // or \'toml\', etc.\n\nconst frontmatter = ast.attributes.frontmatter\n  ? yaml.load(ast.attributes.frontmatter)\n  : {};\n\n/** @type {import(\'@markdoc/markdoc\').Config} */\nconst config = {\n  variables: {\n    frontmatter\n  }\n};\n```\n\n### Use frontmatter values\n\nAfter passing the parsed frontmatter to `variables`, you can access the values using `$frontmatter`:\n\n{% sideBySide %}\n\n{% example %}\n\n```md\n# {% $frontmatter.title %}\n```\n\n{% /example %}\n\n# {% $markdoc.frontmatter.title %}\n\n{% /sideBySide %}\n'),l=r.ZP.parse(d,{slots:!1}),f=l.attributes.frontmatter?o.ZP.load(l.attributes.frontmatter):{},{components:p}=(0,s.J)(m);var h=!0;let k={frontmatter:f};function y(n){let t=n.markdoc;return r.RZ.react(t.content,a,{components:{...p,...n.components}})}}},function(n){n.O(0,[126,649,60,963,888,774,179],function(){return n(n.s=3468)}),_N_E=n.O()}]);