Changable Sidebar Component

[neilherbertuk]

I've back ported some changes I made to the template on a site I'm working on as I thought it might be useful.

Summary: This will allow users to have different sidebars on different pages

Detailed: Over the series of commits I've allowed users of the template to specify different sidebars for different parts of the site and made an opinionated change to the default setup.

• I've moved the current sidebar from src/components/parts/AppSidebar.vue into it's own file src/components/sidebars/Default.vue
• Added a dynamically loadable component to src/components/parts/AppSidebar.vue and a prop to accept which sidebar to load
• Making use of the graph schema api, I've added a default value for sidebar to the Post Schema and set this to "Default". This prevents any Cannot query "sidebar" on "Posts" errors if no posts contain the sidebar parameter
• I've added an alternative sidebar src/components/sidebars/Alternative.vue and sidebar: Alternative to the archived post as an example on how to specify a different sidebar to show.
• I've created a Categories sidebar src/components/sidebars/Categories.vue - this lists all categories in alphabetical order and shows the number of posts in each category.
• I've added a Vue Filter to capitalise the first letter of each word to format the category title's in the Categories sidebar
• I've set the sidebar on src/pages/Blog.vue and src/templates/Category.vue to the Categories sidebar. This might not be a wanted default but thought this was a nice touch.

I was wondering whether to change the sidebar used within src/templates/Tag.vue but feel that a tags sidebar could potentially get very messy when a large number of tags are used.

Usage:

Within posts, if the user wants a different sidebar they simply add the following to the post's front matter

---
sidebar: SidebarFileName
---

For other pages they would need to modify the prop for the <app-sidebar /> html tag

<app-sidebar sidebar="SidebarFileName" />

Default Sidebar

Alternative Sidebar

Categories Sidebar on the Blog page

Categories Sidebar on the Category page

[netlify[bot]]

✔️ Deploy Preview for gridsome-geek-blog ready!

🔨 Explore the source changes: e1b2961e223e5cde985eef6fea9735510cc7597f

🔍 Inspect the deploy log: https://app.netlify.com/sites/gridsome-geek-blog/deploys/621816c0f7a50b00089cf0f9

😎 Browse the preview: https://deploy-preview-6--gridsome-geek-blog.netlify.app

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[xqsit94]

Great Work! @neilherbertuk. Thanks for your contribution! 🥳