docs: allow specifying order via front matter (#3818)

* docs: allow specifying order via front matter * Update article.js Co-authored-by: Maël Nison <nison.mael@gmail.com>
yarnpkg · Dec 1, 2021 · 4bf39c9 · 4bf39c9
1 parent 7e8c822
commit 4bf39c9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/packages/gatsby/content/getting-started/install.md b/packages/gatsby/content/getting-started/install.md
@@ -1,8 +1,9 @@
 ---
 category: getting-started
 path: /getting-started/install
-title: "2 - Installation"
+title: Installation
 description: Yarn's in-depth installation guide.
+order: 2
 ---
 
 ## Install Corepack

diff --git a/packages/gatsby/content/getting-started/intro.md b/packages/gatsby/content/getting-started/intro.md
@@ -1,8 +1,9 @@
 ---
 category: getting-started
 path: /getting-started
-title: "1 - Introduction"
+title: Introduction
 description: An introduction to Yarn, a package manager for your code.
+order: 1
 ---
 
 Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry.

diff --git a/packages/gatsby/content/getting-started/usage.md b/packages/gatsby/content/getting-started/usage.md
@@ -1,8 +1,9 @@
 ---
 category: getting-started
 path: /getting-started/usage
-title: "3 - Usage"
+title: Usage
 description: A short overview of Yarn's most used commands.
+order: 3
 ---
 
 Now that you have Yarn [installed](/getting-started/install), you can start using it! Here are some of the most common commands you'll need.

diff --git a/packages/gatsby/src/templates/article.js b/packages/gatsby/src/templates/article.js
@@ -23,16 +23,30 @@ function getGitPageUrl(postAbsolutePath) {
 }
 
 // eslint-disable-next-line arca/no-default-export
-export default function Template({data, pageContext: {category}}) {
+export default function Template({data}) {
   const {allMarkdownRemark, markdownRemark} = data;
   const {frontmatter, html, fileAbsolutePath} = markdownRemark;
 
+  const orderedItems = [];
+  const items = [];
+
+  for (const {node} of allMarkdownRemark.edges) {
+    const {path, title, order} = node.frontmatter;
+    const item = {
+      to: path,
+      name: title,
+    };
+
+    if (typeof order === `number`) {
+      orderedItems[order - 1] = item;
+    } else {
+      items.push(item);
+    }
+  }
+
   return <>
     <Global styles={GlobalStyleOverrides} />
-    <LayoutContentNav items={allMarkdownRemark.edges.map(({node}) => ({
-      to: node.frontmatter.path,
-      name: node.frontmatter.title,
-    }))}>
+    <LayoutContentNav items={orderedItems.concat(items)}>
       <SEO
         title={frontmatter.title}
         description={frontmatter.description}
@@ -56,6 +70,7 @@ export const pageQuery = graphql`
           frontmatter {
             path
             title
+            order
           }
         }
       }