Merge pull request #6 from neilherbertuk/main

Changable Sidebar Component

blog/2021-10-18-archived.md

@@ -7,6 +7,7 @@ tags: ['archived']
 categories: ['archived']
 thumbnail: ./archived.png
 is_archived: true
+sidebar: Alternative
 ---
 
 ## How to Archive Post

gridsome.server.js

@@ -36,4 +36,19 @@ module.exports = function (api) {
   api.createPages(({ createPage }) => {
     // Use the Pages API here: https://gridsome.org/docs/pages-api/
   })
+
+  api.loadSource(({ addSchemaResolvers }) => {
+    // Schema API here: https://gridsome.org/docs/schema-api/
+    // Create a default value for "sidebar" to prevent Cannot query errors if not used
+    addSchemaResolvers({
+      Post: {
+        sidebar: {
+          type: 'String',
+          resolve(obj) {
+            return (obj.sidebar === undefined ? 'Default' : obj.sidebar)
+          }
+        }
+      }
+    })
+  })
 }

src/components/parts/AppSidebar.vue

@@ -1,10 +1,19 @@
 <template>
-  <div class="w-full flex flex-col my-4">
-    <p class="text-xl font-semibold pb-5">Sidebar</p>
-    <p class="pb-2">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis
-      est eu odio sagittis tristique. Vestibulum ut finibus leo. In hac
-      habitasse platea dictumst.
-    </p>
-  </div>
+  <component :is="component" />
 </template>
+
+<script>
+export default {
+  name: 'sidebar',
+  props: {
+    sidebar: {
+      default: 'Default'
+    }
+  },
+  computed: {
+    component() {
+      return () => import(`~/components/sidebars/${this.sidebar}`)
+    }
+  }
+}
+</script>

src/components/sidebars/Alternative.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="w-full flex flex-col my-4">
+    <p class="text-xl font-semibold pb-5">Alt Sidebar</p>
+    <p class="pb-2">
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </div>
+</template>

src/components/sidebars/Categories.vue

@@ -0,0 +1,29 @@
+<template>
+  <div className="w-full flex flex-col my-4">
+    <h2 class="title-font text-lg font-medium mb-3">CATEGORIES</h2>
+    <nav class="list-none mb-5">
+      <ul v-for="category in $static.category.edges">
+        <li>
+          <g-link :to="category.node.path">{{ category.node.title | capitalise }} ({{ category.node.belongsTo.totalCount }})</g-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<static-query>
+query {
+  category: allCategory(sortBy: "title", order: ASC) {
+    edges {
+      node {
+        id
+        title
+        path
+        belongsTo {
+          totalCount
+        }
+      }
+    }
+  }
+}
+</static-query>

src/components/sidebars/Default.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="w-full flex flex-col my-4">
+    <p class="text-xl font-semibold pb-5">Sidebar</p>
+    <p class="pb-2">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis
+      est eu odio sagittis tristique. Vestibulum ut finibus leo. In hac
+      habitasse platea dictumst.
+    </p>
+  </div>
+</template>

src/main.js

@@ -29,4 +29,17 @@ export default function (Vue, { router, head, isClient }) {
     perPage: process.env.VSSUE_GRIDSOME_PERPAGE || 15,
     autoCreateIssue: process.env.GRIDSOME_VSSUE_OWNER || false,
   })
+
+  // Add vue filter to capitalise the first letter of each word
+  Vue.filter('capitalise', function (value) {
+      let output = []
+      value.split(' ').forEach(word => {
+        output.push(
+          word.charAt(0).toUpperCase() +
+          word.slice(1).toLowerCase()
+        )
+      })
+      return output.join(' ')
+    }
+  )
 }

src/pages/Blog.vue

@@ -31,7 +31,7 @@
             dark:border-gray-700
           "
         >
-          <app-sidebar />
+          <app-sidebar sidebar="Categories" />
         </aside>
       </div>
     </section>

src/templates/Category.vue

@@ -34,7 +34,7 @@
               dark:border-gray-700
             "
           >
-            <app-sidebar />
+            <app-sidebar sidebar="Categories" />
           </aside>
         </div>
       </div>

src/templates/Post.vue

@@ -134,7 +134,7 @@
         "
         aria-label="right-sidebar"
       >
-        <app-sidebar />
+        <app-sidebar :sidebar="$page.post.sidebar" />
       </aside>
     </div>
   </Layout>
@@ -146,6 +146,7 @@ query Post ($path: String!) {
     title
     summary
     is_archived
+    sidebar
     thumbnail
     path
     date (format: "MMMM D, Y")