Front matter

When you create a Markdown file (.md or .mdx) in src/pages/, you can define variables to provide additional information about that page. This information is called front matter and is set between triple dashes starting on the first line of the file:

---
title: Example title
---

Doctocat recognizes some specific front matter variables described below.

Title and description

title is used to render the page heading and generate the page title. description is used to create a meta description tag which is important for SEO. We recommend setting title and description for every page:

---
title: My page title
description: My page description
---

Component metadata

To auto-populate the title and description of a component page using metadata from the primer/component-metadata repository, add the componentId frontmatter variable:

---
componentId: avatar
---

Status

You can add a status label to any page by setting a status variable in the frontmatter:

---
status: Stable
---

Doctocat comes with a few predefined statuses that have colors associated with them:

Custom statuses will render a gray dot:

Source

Sometimes it's useful to provide quick access to relevant source code. You can use the source front matter variable to do that:

---
source: https://github.com/path/to/code
---

If the source front matter variable is defined, Doctocat will add a source code link to the top of the page, like this:

Storybook

You can use the storybook front matter variable to link to Storybook stories:

---
storybook: https://primer.style/view-components/stories/?path=/story/primer-avatar-component
---

If the storybook front matter variable is defined, Doctocat will add a storybook link to the top of the page, like this:

Lookbook

You can use the lookbook front matter variable to link to Lookbook previews:

---
lookbook: https://primer.style/view-components/lookbook/inspect/primer/avatar
---

If the lookbook front matter variable is defined, Doctocat will add a lookbook link to the top of the page, like this:

Additional contributors

If you have the repository in package.json and repoRootPath in gatsby-config.js setup correctly (as described in the customization guide), Doctocat will automatically display contributors on the bottom of every page. These contributors are determined by commits. However, we know that commits aren't the only way to contribute. To give credit to people who aren't listed in the commit history but still contributed, use the additionalContributors front matter variable to list their GitHub usernames, for example:

---
additionalContributors:
  - ashygee
  - emplums
---