Add reference to languages

Sidebar on `/languages/:language` lists pages referencing the language
grouped by category.

Author: kazk

content/languages/javascript/testing.md

@@ -0,0 +1,9 @@
+---
+category: guides
+tags:
+  - testing
+languages:
+  - javascript
+---
+
+# Testing JavaScript

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`.

data/categories.yml

@@ -2,3 +2,9 @@
 - id: docs
   name: Docs
   description: Docs
+
+- id: guides
+  name: Guides
+- id: references
+  name: References
+  description: Reference Manuals

data/tags.yml

@@ -9,3 +9,6 @@
   name: Content
 - id: codewars
   name: Codewars
+
+- id: testing
+  name: Testing

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",
+          },
         },
       },
     },

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;
 

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">

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,12 +83,14 @@
       </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>
 
 <page-query>
-query($id: ID!) {
+query($id: ID!, $page: Int) {
   language(id: $id) {
     id
     path
@@ -111,6 +113,34 @@ query($id: ID!) {
         url
       }
     }
+
+    belongsTo(perPage: 4, page: $page, sortBy: "title", order: ASC) @paginate {
+      totalCount
+
+      pageInfo {
+        totalPages
+        currentPage
+      }
+
+      edges {
+        node {
+          ... on MarkdownPage {
+            title
+            excerpt
+            path
+            category {
+              id
+              name
+            }
+            tags {
+              id
+              name
+              path
+            }
+          }
+        }
+      }
+    }
   }
 
   allLanguage {
@@ -124,7 +154,12 @@ query($id: ID!) {
 </page-query>
 
 <script>
+import NextPrevLinks from "@/components/NextPrevLinks";
+
 export default {
+  components: {
+    NextPrevLinks,
+  },
   computed: {
     language() {
       return this.$page.language;
@@ -138,6 +173,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: {

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"