Merge pull request #2 from codewars/reference-languages

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/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;
   }
 }
 

src/components/NextPrevLinks.vue

@@ -22,51 +22,24 @@
   </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,
     },
   },
 
   components: {
     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>

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,60 +34,16 @@
   </div>
 </template>
 
-<static-query>
-query Sidebar {
-  metadata {
-    settings {
-      sidebar {
-        name
-        sections {
-          title
-          items
-        }
-      }
-    }
-  }
-
-  allMarkdownPage {
-    edges {
-      node {
-        path
-        title
-      }
-    }
-  }
-}
-</static-query>
-
 <script>
 export default {
   props: {
     currentPath: {
       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>

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>
@@ -66,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: {
@@ -95,6 +114,9 @@ export default {
     },
   },
   computed: {
+    pages() {
+      return this.$static.allMarkdownPage.edges.map((edge) => edge.node);
+    },
     sidebarStyle() {
       return {
         top: this.headerHeight + "px",
@@ -104,10 +126,27 @@ 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.sidebar
+      );
+      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();

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,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: {