Creating docsite pages

Creating pages for pie.design

Website sections

To create a new navigation section, follow these steps:

1. Create a Folder: Make a folder with the name of the section you want. For example: /src/food/.

2. Create a Root Level Markdown File: Inside this folder, create a .md file with the same name as the folder. For example: /src/food/food.md. This file stores metadata used by Eleventy Navigation to add it to the navigation.

Example:

---
eleventyNavigation:
    key: Food
    title: Food
    parent: Docs
    order: 4
title: Food
---

3. Create a JSON File: Also inside this folder, create a JSON file with the same name to house shared page data, such as an Open Graph (ogImage) preview image and title metadata prefix.

Example (/src/food/food.json):

{
  "ogImage": "landing_food.png", // make sure this exists!
  "metaTitlePrefix": "Food — "
}

4. Add a Page to the Section: Create a .md file with the name of the page you want to create. For example: /src/food/pizza.md.

Example:

---
eleventyNavigation:
    key: Pizza
    parent: Food
    order: 1
title: Pizza stuff
description: I love Pizza.
---
## Title
Yo

5. Update Navigation Icons: In /src/_includes/nav.njk, add the new section and its icon:

{# Each navigation item has a unique key that is mapped to an Icon name #}
{% set navigationIcons = {
    Accessibility: 'user-highlight',
    'All about PIE': 'pie',
    designers: 'bulb-lightning',
    Foundations: 'foundations',
    Components: 'components',
    Support: 'help-circle',
    engineers: 'engineers',
    Patterns: 'layers',
    Food: 'pizza' // The new section
} %}

Tabbed pages

To create tabbed pages within a section, follow these steps:

1. Create a Folder: Make a folder with the name of the page you want inside the section. For example: /src/foundations/foo/.

2. Create a Root Level Markdown File: Inside this folder, create a .md file with the same name as the folder. For example: /src/foundations/foo/foo.md. This file stores metadata used by Eleventy Navigation to add it to the navigation.

Example:

# /src/foundations/foo/foo.md
---
eleventyNavigation:
    key: Foo # The name of the page
    parent: Foundations # The parent section
    url: /src/foundations/foo/ # The URL for this page
    order: 3 # Position in the parent navigation section
permalink: false # This is a folder, so we don't want a permalink
---

3. Create a JSON File: Inside the same folder, create a JSON file with the same name to house shared page data such as a title, description, and a navKey.

Example:

// /src/foundations/foo/foo.json
{
  "title": "Foo",
  "navKey": "Foo", // Enables tabbed pages
  "description": "Some description."
}

The pages sharing the same navKey will be grouped together as tabs on a single page.

4. Create Tab Pages: For each tab, create a .md file with the name of the tab. For example: /src/foundations/foo/overview.md.

If this tab should be the default content shown at /src/foundations/foo, give it a permalink.

Example:

# /src/foundations/foo/overview.md

---
eleventyNavigation:
    key: Overview
    parent: Foo
    order: 1
permalink: foundations/foo/ # Default content for the page. No slash at the beginning.
---
## Some Title

Blah blah blah

5. Create Additional Tabs: For additional tabs, create more .md files. For example: /src/foundations/foo/bar.md.

Example:

---
eleventyNavigation:
    key: Bar
    parent: Foo
    order: 2
---
## Some Other Title

Blah blah blah

Omit the permalink property if you want the default path that Eleventy generates, e.g., /foundations/foo/bar/.

Resources

• Eleventy Docs
• Eleventy Navigation plugin