Use collections to improve the tabs

_config.yml

@@ -17,8 +17,8 @@ description: >-                        # used by seo meta and the atom feed
   bootstrap Jekyll theme with responsive web design
   and focuses on text presentation.
 
-# Replace with the website url, e.g. 'https://username.github.io'
+# fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
-url: 'protocol://domain'
+url: ''
 
 author: your_full_name                  # change to your full name
 
@@ -80,7 +80,7 @@ disqus:
 #
 theme_mode: dual
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
 paginate: 10
@@ -105,16 +105,21 @@ kramdown:
 # or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
+collections:
+  tabs:
+    output: true
+    sort_by: order
+
+
 defaults:
   -
     scope:
-      path: ""          # An empty string here means all files in the project
+      path: ''          # An empty string here means all files in the project
       type: posts
     values:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      location: Post
       breadcrumb:
         -
           label: Posts
@@ -128,8 +133,6 @@ defaults:
     scope:
       path: tags
     values:
-      tab_active: Tags
-      location: Tag
       breadcrumb:
         -
           label: Home
@@ -141,8 +144,6 @@ defaults:
     scope:
       path: categories
     values:
-      tab_active: Categories
-      location: Category
       breadcrumb:
         -
           label: Home
@@ -152,7 +153,8 @@ defaults:
           url: /tabs/categories/
   -
     scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
       dynamic_title: true    # Hide title in mobile screens.

_data/tabs.yml

@@ -1,30 +0,0 @@
-#  The tab data.
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-
--
-  name: Home
-  icon: "fas fa-home"
--
-  name: Categories
-  icon: "fas fa-stream"
-  path: tabs
-  url: categories
--
-  name: "Tags"
-  icon: "fas fa-tags"
-  path: tabs
-  url: tags
--
-  name: "Archives"
-  path: tabs
-  url: archives
-  icon: "fas fa-archive"
--
-  name: "About"
-  icon: "fas fa-info"
-  path: tabs
-  url: about

_includes/css-selector.html

@@ -12,20 +12,21 @@
 
 {% elsif page.layout == 'page' %}
 
-  {% if page.type == 'categories' %}
+  {% if page.collection == 'tabs' and page.title != 'About' %}
 
-    <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+    {% if page.title == 'Categories' %}
-    <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
+      <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+      <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
    
-  {% elsif page.type == 'tags' %}
+    {% elsif page.title == 'Tags' %}
+      <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
+      <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
    
-    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
+    {% elsif page.title == 'Archives'%}
-    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
+      <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
+      <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
    
-  {% elsif page.type == 'archives' %}
+    {% endif %}
-
-    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
 
   {% else %}
 

_includes/js-selector.html

@@ -22,7 +22,7 @@
 
 {% elsif page.layout == 'page' %}
 
-  {% if page.type == 'categories' %}
+  {% if page.title == 'Categories' and page.collection == 'tabs' %}
     <script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
   {% else %}
     <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>

_includes/sidebar.html

@@ -7,6 +7,7 @@
 -->
 
 <div id="nav-wrapper">
+
   <div id="profile-wrapper" class="d-flex flex-column">
     <div id="avatar" class="d-flex justify-content-center">
       <a href="{{ site.baseurl }}/" alt="avatar">
@@ -25,31 +26,25 @@
       </div>
       <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
-  </div>
+  </div><!-- #profile-wrapper -->
 
   <ul class="nav flex-column">
-  {% assign page_urls = page.url | split: "/" %}
+    <!-- home -->
-
+    <li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
-  {% for item in site.data.tabs %}
+      <a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
-    {% assign ref = site.baseurl | append: "/" %}
+        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-
+        <span>{{ "HOME" }}</span>
-    {% if item.path %}
+      </a>
-      {% assign ref = ref | append: item.path | append: "/" %}
+    </li>
-      {% if item.url %}
+    <!-- the real tabs -->
-        {% assign ref = ref | append: item.url | append: "/" %}
+    {% for tab in site.tabs %}
-      {% endif %}
+    <li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
-    {% endif %}
+      <a href="{{ tab.url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-
+        <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-    <li class="nav-item d-flex justify-content-center
+        <span>{{ tab.title | upcase }}</span>
-      {% if item.url == page_urls.last
-        or item.name == page.tab_active
-        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
-      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
-  {% endfor %}
+    {% endfor %}
 
   </ul> <!-- ul.nav.flex-column -->
 

_includes/topbar.html

@@ -29,13 +29,13 @@
     <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
 
     <div id="topbar-title">
-    {% if page.location %}
+      {% if page.layout == 'home' %}
-      {{- page.location -}}
+        {{- site.title -}}
-    {% elsif page.layout == "home" %}
+      {% elsif page.collection == 'tabs' %}
-      {{- site.title -}}
+        {{- page.title -}}
-    {% else %}
+      {% else %}
-      {{- page.title -}}
+        {{- page.layout | capitalize -}}
-    {% endif %}
+      {% endif %}
     </div>
 
     <i id="search-trigger" class="fas fa-search fa-fw"></i>

_tabs/about.md

@@ -1,5 +1,7 @@
 ---
 title: About
+icon: fas fa-info
+order: 4
 
 # The About page
 # v2.0
@@ -8,4 +10,5 @@ title: About
 # MIT License
 ---
 
-> **Note**: Add Markdown syntax content to file `tabs/about.md` and it will show up on this page.
+
+> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.

_tabs/archives.md

@@ -1,6 +1,8 @@
 ---
 title: Archives
-type: archives
+icon: fas fa-archive
+order: 3
+
 # The Archives of posts.
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy

_tabs/categories.md

@@ -1,6 +1,8 @@
 ---
 title: Categories
-type: categories
+icon: fas fa-stream
+order: 1
+
 # All the Categories of posts
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy

_tabs/tags.md

@@ -1,6 +1,8 @@
 ---
 title: Tags
-type: tags
+icon: fas fa-tags
+order: 2
+
 # All the Tags of posts.
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy

assets/css/_addon/main.scss

@@ -64,7 +64,7 @@ body {
 
 /*--- sidebar layout ---*/
 
-$tab-count: {{ site.data.tabs | size }};
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
 
 $sidebar-display: "sidebar-display";