From c63127cc1ed4124ea6061dddb0120aeea72737a8 Mon Sep 17 00:00:00 2001
From: kazk <kazk.dev@gmail.com>
Date: Mon, 6 Jul 2020 14:54:06 -0700
Subject: [PATCH 1/4] Decouple NextPrevLinks

---
 src/components/NextPrevLinks.vue | 39 +++++---------------------------
 src/templates/MarkdownPage.vue   | 26 ++++++++++++++++++++-
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/components/NextPrevLinks.vue b/src/components/NextPrevLinks.vue
index 7c94fc2c..60971a4d 100644
--- a/src/components/NextPrevLinks.vue
+++ b/src/components/NextPrevLinks.vue
@@ -22,29 +22,18 @@
   </div>
 </template>
 
-<static-query>
-query {
-  allMarkdownPage {
-    edges {
-      node {
-        path
-        title
-      }
-    }
-  }
-}
-</static-query>
-
 <script>
 import { ArrowLeftIcon, ArrowRightIcon } from "vue-feather-icons";
 
 export default {
   props: {
-    prevPath: {
-      type: String,
+    prev: {
+      // {path: string; title: string}
+      type: Object,
     },
-    nextPath: {
-      type: String,
+    next: {
+      // {path: string; title: string}
+      type: Object,
     },
   },
 
@@ -52,21 +41,5 @@ export default {
     ArrowLeftIcon,
     ArrowRightIcon,
   },
-
-  computed: {
-    pages() {
-      return this.$static.allMarkdownPage.edges.map((edge) => edge.node);
-    },
-    next() {
-      if (!this.nextPath) return false;
-
-      return this.pages.find((page) => page.path === this.nextPath);
-    },
-    prev() {
-      if (!this.prevPath) return false;
-
-      return this.pages.find((page) => page.path === this.prevPath);
-    },
-  },
 };
 </script>
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index ab1997b5..8d6e70eb 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -12,7 +12,7 @@
         <div class="content" v-html="$page.markdownPage.content" />
 
         <div class="mt-8 pt-8 lg:mt-12 lg:pt-12 border-t border-ui-border">
-          <NextPrevLinks :prevPath="page.prev" :nextPath="page.next" />
+          <NextPrevLinks :prev="prev" :next="next" />
         </div>
       </div>
     </div>
@@ -37,6 +37,15 @@ query($id: ID!) {
       anchor
     }
   }
+
+  allPages: allMarkdownPage {
+    edges {
+      node {
+        path
+        title
+      }
+    }
+  }
 }
 </page-query>
 
@@ -57,6 +66,21 @@ export default {
     headings() {
       return this.page.headings.filter((h) => h.depth > 1);
     },
+
+    pages() {
+      return this.$page.allPages.edges.map((edge) => edge.node);
+    },
+
+    next() {
+      if (!this.page.next) return null;
+
+      return this.pages.find((page) => page.path === this.page.next);
+    },
+    prev() {
+      if (!this.page.prev) return null;
+
+      return this.pages.find((page) => page.path === this.page.prev);
+    },
   },
 
   metaInfo() {

From 8ce06f46f0375add098e749697d7a1495cf4b6e2 Mon Sep 17 00:00:00 2001
From: kazk <kazk.dev@gmail.com>
Date: Mon, 6 Jul 2020 15:20:54 -0700
Subject: [PATCH 2/4] Rewrite Sidebar to take list of sections

---
 src/components/Sidebar.vue | 59 ++++----------------------------------
 src/layouts/Default.vue    | 38 +++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 54 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 3a3a136a..20367fba 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     ref="sidebar"
-    v-if="showSidebar"
+    v-if="sidebarSections"
     class="px-4 pt-8 lg:pt-12 divide-y divide-ui-border"
   >
-    <div v-for="section of sidebar.sections" :key="section.title" class="py-4">
+    <div v-for="section of sidebarSections" :key="section.title" class="py-4">
       <h3
         class="pt-0 mt-0 mb-1 font-black text-sm leading-snug tracking-tight uppercase border-none text-ui-typo"
       >
@@ -13,7 +13,7 @@
 
       <ul class="max-w-full pl-2 mb-0">
         <li
-          v-for="page in findPages(section.items)"
+          v-for="page in section.items"
           :id="page.path"
           :key="page.path"
           :class="getClassesForAnchor(page.path)"
@@ -34,31 +34,6 @@
   </div>
 </template>
 
-<static-query>
-query Sidebar {
-  metadata {
-    settings {
-      sidebar {
-        name
-        sections {
-          title
-          items
-        }
-      }
-    }
-  }
-
-  allMarkdownPage {
-    edges {
-      node {
-        path
-        title
-      }
-    }
-  }
-}
-</static-query>
-
 <script>
 export default {
   props: {
@@ -66,28 +41,9 @@ export default {
       type: String,
       required: true,
     },
-    // Name of the sidebar.
-    name: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      expanded: [],
-    };
-  },
-  computed: {
-    pages() {
-      return this.$static.allMarkdownPage.edges.map((edge) => edge.node);
-    },
-    sidebar() {
-      const name = this.name;
-      return this.$static.metadata.settings.sidebar.find(
-        (sidebar) => sidebar.name === name
-      );
-    },
-    showSidebar() {
-      return this.name && this.sidebar;
+    sidebarSections: {
+      // Array of sections
+      type: Array,
     },
   },
   methods: {
@@ -98,9 +54,6 @@ export default {
         "transition transform hover:translate-x-1 hover:text-ui-primary": !current,
       };
     },
-    findPages(links) {
-      return links.map((link) => this.pages.find((page) => page.path === link));
-    },
   },
 };
 </script>
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index af0ad8a0..66dcf9d0 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -21,7 +21,7 @@
           <div class="w-full pb-16 bg-ui-background">
             <Sidebar
               @navigate="sidebarOpen = false"
-              :name="sidebarName"
+              :sidebarSections="sidebarSections"
               :currentPath="currentPath"
             />
           </div>
@@ -52,6 +52,24 @@
 query {
   metadata {
     siteName
+    settings {
+      sidebar {
+        name
+        sections {
+          title
+          items
+        }
+      }
+    }
+  }
+
+  allMarkdownPage {
+    edges {
+      node {
+        path
+        title
+      }
+    }
   }
 }
 </static-query>
@@ -95,6 +113,9 @@ export default {
     },
   },
   computed: {
+    pages() {
+      return this.$static.allMarkdownPage.edges.map((edge) => edge.node);
+    },
     sidebarStyle() {
       return {
         top: this.headerHeight + "px",
@@ -108,6 +129,21 @@ export default {
         this.headerHeight > 0
       );
     },
+    sidebarSections() {
+      const def = this.$static.metadata.settings.sidebar.find(
+        (sidebar) => sidebar.name === this.sidebarName
+      );
+      if (!def) return null;
+
+      return def.sections.map((section) => {
+        return {
+          title: section.title,
+          items: section.items.map((link) =>
+            this.pages.find((page) => page.path === link)
+          ),
+        };
+      });
+    },
   },
   mounted() {
     this.setHeaderHeight();

From 3d18ba839a7731539c3d1775f93fe04c1f353374 Mon Sep 17 00:00:00 2001
From: kazk <kazk.dev@gmail.com>
Date: Mon, 6 Jul 2020 15:22:26 -0700
Subject: [PATCH 3/4] Fix code block style

---
 src/assets/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 344593b2..e6287e64 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -149,7 +149,7 @@ pre[class*="language-"] {
   }
 
   & > code[class*="language-"] {
-    @apply border-none leading-relaxed;
+    @apply border-none leading-relaxed px-0;
   }
 }
 

From eac80d178090168aefa195a0d7099c6502cee4d7 Mon Sep 17 00:00:00 2001
From: kazk <kazk.dev@gmail.com>
Date: Mon, 6 Jul 2020 18:19:18 -0700
Subject: [PATCH 4/4] Add reference to languages

Sidebar on `/languages/:language` lists pages referencing the language
grouped by category.
---
 content/languages/javascript/testing.md |  9 +++++
 content/refs/javascript-ref.md          | 10 +++++
 data/categories.yml                     |  6 +++
 data/tags.yml                           |  3 ++
 gridsome.config.js                      |  6 +--
 src/layouts/Default.vue                 | 11 +++--
 src/pages/Languages.vue                 |  2 +-
 src/templates/Language.vue              | 54 ++++++++++++++++++++++++-
 src/templates/MarkdownPage.vue          |  2 +-
 9 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 content/languages/javascript/testing.md
 create mode 100644 content/refs/javascript-ref.md

diff --git a/content/languages/javascript/testing.md b/content/languages/javascript/testing.md
new file mode 100644
index 00000000..597c9316
--- /dev/null
+++ b/content/languages/javascript/testing.md
@@ -0,0 +1,9 @@
+---
+category: guides
+tags:
+  - testing
+languages:
+  - javascript
+---
+
+# Testing JavaScript
diff --git a/content/refs/javascript-ref.md b/content/refs/javascript-ref.md
new file mode 100644
index 00000000..205ad015
--- /dev/null
+++ b/content/refs/javascript-ref.md
@@ -0,0 +1,10 @@
+---
+category: references
+languages: [javascript]
+---
+
+# Sample JavaScript Reference
+
+> TODO Remove this file
+
+This file exists to show how the sidebar on language pages are automatically populated and grouped by `category`.
diff --git a/data/categories.yml b/data/categories.yml
index 9463c380..bf7978b2 100644
--- a/data/categories.yml
+++ b/data/categories.yml
@@ -2,3 +2,9 @@
 - id: docs
   name: Docs
   description: Docs
+
+- id: guides
+  name: Guides
+- id: references
+  name: References
+  description: Reference Manuals
diff --git a/data/tags.yml b/data/tags.yml
index 26cae916..b5e70879 100644
--- a/data/tags.yml
+++ b/data/tags.yml
@@ -9,3 +9,6 @@
   name: Content
 - id: codewars
   name: Codewars
+
+- id: testing
+  name: Testing
diff --git a/gridsome.config.js b/gridsome.config.js
index 75aa1b1c..292f5c2e 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -61,9 +61,9 @@ module.exports = {
             typeName: "Tag",
           },
           // Can reference multiple languages to be listed on the language page.
-          // languages: {
-          //   typeName: "Language",
-          // },
+          languages: {
+            typeName: "Language",
+          },
         },
       },
     },
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 66dcf9d0..a2aacaf7 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -84,8 +84,9 @@ export default {
     currentPath: {
       type: String,
     },
-    sidebarName: {
-      type: String,
+    sidebar: {
+      // Name of the sidebar defined in settings or array of sections.
+      type: [String, Array],
     },
   },
   components: {
@@ -125,13 +126,15 @@ export default {
     hasSidebar() {
       return (
         this.$page &&
-        (this.$page.markdownPage || this.sidebarName) &&
+        (this.$page.markdownPage || this.sidebar) &&
         this.headerHeight > 0
       );
     },
     sidebarSections() {
+      if (Array.isArray(this.sidebar)) return this.sidebar;
+
       const def = this.$static.metadata.settings.sidebar.find(
-        (sidebar) => sidebar.name === this.sidebarName
+        (sidebar) => sidebar.name === this.sidebar
       );
       if (!def) return null;
 
diff --git a/src/pages/Languages.vue b/src/pages/Languages.vue
index 73ececcf..0a9d1955 100644
--- a/src/pages/Languages.vue
+++ b/src/pages/Languages.vue
@@ -1,5 +1,5 @@
 <template>
-  <Layout currentPath="/languages/" sidebarName="docs">
+  <Layout currentPath="/languages/" sidebar="docs">
     <div class="w-full md:w-2/3">
       <div class="content">
         <h1 id="supported-languages">
diff --git a/src/templates/Language.vue b/src/templates/Language.vue
index 8b790343..480b87ac 100644
--- a/src/templates/Language.vue
+++ b/src/templates/Language.vue
@@ -1,5 +1,5 @@
 <template>
-  <Layout :currentPath="language.path" sidebarName="docs">
+  <Layout :currentPath="language.path" :sidebar="sidebarSections">
     <h1
       class="mt-4 text-4xl font-black text-ui-typo leading-snug tracking-tighter text-center"
     >
@@ -83,7 +83,9 @@
       </template>
     </div>
 
-    <!-- TODO List documents related to this language. Let MarkdownPage refernce by `language` frontmatter -->
+    <div class="mt-8 pt-8 lg:mt-12 lg:pt-12 border-t border-ui-border">
+      <NextPrevLinks :prev="{ title: 'Languages', path: '/languages/' }" />
+    </div>
   </Layout>
 </template>
 
@@ -111,6 +113,29 @@ query($id: ID!) {
         url
       }
     }
+
+    belongsTo(sortBy: "title", order: ASC) {
+      totalCount
+
+      edges {
+        node {
+          ... on MarkdownPage {
+            title
+            excerpt
+            path
+            category {
+              id
+              name
+            }
+            tags {
+              id
+              name
+              path
+            }
+          }
+        }
+      }
+    }
   }
 
   allLanguage {
@@ -124,7 +149,12 @@ query($id: ID!) {
 </page-query>
 
 <script>
+import NextPrevLinks from "@/components/NextPrevLinks";
+
 export default {
+  components: {
+    NextPrevLinks,
+  },
   computed: {
     language() {
       return this.$page.language;
@@ -138,6 +168,26 @@ export default {
     anyPackages() {
       return this.versionsWithPackages.length > 0;
     },
+    pages() {
+      return this.language.belongsTo.edges.map((e) => e.node);
+    },
+    // Sidebar of language page lists all pages referencing the language grouped by category
+    sidebarSections() {
+      const pages = this.pages;
+      if (pages.length === 0) return "docs";
+
+      const groups = {};
+      for (const p of pages) {
+        const key = p.category.name;
+        if (!groups[key]) groups[key] = [];
+        groups[key].push(p);
+      }
+      const sections = [];
+      for (const name of Object.keys(groups)) {
+        sections.push({ title: name, items: groups[name] });
+      }
+      return sections;
+    },
   },
 
   methods: {
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index 8d6e70eb..98077243 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <Layout :sidebarName="page.sidebar" :currentPath="page.path">
+  <Layout :sidebar="page.sidebar" :currentPath="page.path">
     <div class="flex flex-wrap items-start justify-start">
       <div
         class="order-2 w-full md:w-1/3 sm:pl-4 md:pl-6 lg:pl-8 sticky top-0 pt-16"