Add taxonomy collections

assets/css/_core/_layout.scss

@@ -11,18 +11,15 @@
     aside {
       flex: 1;
       padding-inline: 0.5rem;
-
-      &:first-child {
-        order: 2;
-      }
     }
-
 
     &.container {
       display: flex;
       align-items: flex-start;
       justify-content: center;
-      padding: 0 1rem;
+      padding-inline: 1rem;
+      // TODO remove watermark from container
+      // gap: 0.5rem;
 
       &.container-reverse {
         flex-direction: row-reverse;
@@ -35,7 +32,7 @@
   }
 }
 
-@import "_core/header";
-@import "_core/breadcrumb";
-@import "_core/footer";
-@import "_core/pagination";
+@import "_header";
+@import "_breadcrumb";
+@import "_footer";
+@import "_pagination";

assets/css/_page/_single.scss

@@ -1,5 +1,6 @@
 @import '../_partials/_single/toc';
 @import '../_partials/_single/fixit-decryptor';
+@import '../_partials/_single/collections';
 
 .single {
   .single-title {

assets/css/_partials/_single/_collections.scss

@@ -0,0 +1,185 @@
+// Collection Navigation
+.collection-card {
+  font-size: 0.875rem;
+  background-color: darken($global-background-color, 3%);
+  margin-top: 0.5rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+  @include border-radius($global-border-radius * 1.5);
+  @include user-select(none);
+
+  [data-theme='dark'] & {
+    background-color: lighten($global-background-color-dark, 3%);
+  }
+
+  &:has(.collection-nav-item:nth-child(2))::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0.75rem;
+    width: 1px;
+    height: 2rem;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
+
+    [data-theme='dark'] & {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.03),
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0.03) 100%
+      );
+    }
+  }
+
+  .collection-title {
+    @include link(false, false);
+  }
+
+  .collection-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &:not(:empty) {
+      margin-top: 0.5rem;
+    }
+
+    .collection-nav-item {
+      flex-grow: 1;
+      max-width: 50%;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      @include transition(all 0.3s ease-out);
+
+      &:only-child {
+        max-width: 100%;
+      }
+
+      i {
+        flex-shrink: 0;
+      }
+
+      span {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &[rel='next'] {
+        text-align: right;
+      }
+
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
+
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
+    }
+  }
+}
+
+// Collection List
+.collection-details {
+
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  &.open {
+    .collection-summary {
+      background-color: darken($global-background-color, 4%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 4%);
+      }
+    }
+  }
+
+  .collection-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.2rem 0.5rem;
+    background-color: darken($global-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 3%);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    .collection-name {
+      font-weight: bold;
+    }
+
+    @include user-select(none);
+  }
+
+  .collection-content {
+    font-size: $toc-content-font-size;
+    background-color: darken($global-background-color, 2%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 2%);
+    }
+
+    .collection-list {
+      margin: 0;
+      padding-inline: 1.6rem 0.8rem;
+      padding-block: 0.4rem;
+      text-indent: -0.8rem;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      .collection-item > a::before,
+      .collection-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5rem;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      .active {
+        font-weight: bold;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+
+    .collection-nav-simple {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      background-color: darken($global-background-color, 3%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 3%);
+      }
+
+      > i.collection-nav-item {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

assets/css/_partials/_single/_toc.scss

@@ -17,6 +17,8 @@
         content: '|';
         font-weight: bolder;
         margin-right: 0.5rem;
+        position: relative;
+        bottom: 2px;
         color: $single-link-color;
 
         [data-theme='dark'] & {
@@ -71,6 +73,8 @@
       content: '|';
       font-weight: bolder;
       margin-right: 0.5rem;
+      position: relative;
+      bottom: 2px;
       color: $global-border-color;
 
       [data-theme='dark'] & {

assets/js/theme.js

@@ -482,7 +482,7 @@ class FixIt {
       $tocCore.parentElement.replaceChild($newTocCore, $tocCore);
       $tocCore = $newTocCore;
     }
-    if (document.getElementById('toc-static').dataset.kept === true || this.util.isTocStatic()) {
+    if (document.getElementById('toc-static').dataset.kept === 'true' || this.util.isTocStatic()) {
       const $tocContentStatic = document.getElementById('toc-content-static');
       if ($tocCore.parentElement !== $tocContentStatic) {
         $tocCore.parentElement.removeChild($tocCore);

hugo.toml

@@ -428,6 +428,10 @@ enableEmoji = true
     endFlag = ""
     # FixIt 0.2.18 | NEW whether to enable instant.page
     instantPage = false
+    # FixIt 0.3.0 | NEW whether to enable collection list at the sidebar
+    collectionList = false
+    # FixIt 0.3.0 | NEW whether to enable collection navigation at the end of the post
+    collectionNavigation = false
 
     # FixIt 0.2.15 | NEW Repost config
     [params.page.repost]
@@ -991,3 +995,14 @@ enableEmoji = true
   section = ["HTML", "RSS"]
   taxonomy = ["HTML"]
   term = ["HTML", "RSS"]
+
+# -------------------------------------------------------------------------------------
+# Taxonomies Configuration
+# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
+# -------------------------------------------------------------------------------------
+
+[taxonomies]
+  # series = "series"
+  category = "categories"
+  tag = "tags"
+  collections = "collections"

i18n/de.toml

@@ -29,6 +29,12 @@ other = "Kategorie"
 [categories]
 other = "Kategorien"
 
+[collection]
+other = ""
+
+[collections]
+other = ""
+
 [tag]
 other = "Tag"
 
@@ -100,7 +106,6 @@ other = "Teilen auf"
 contents= "Inhalt"
 repost= ""
 publishedOnDate= "veröffentlicht an {{ .Date }}"
-includedInCategories= "enthalten in {{ .Categories }}"
 views = "Aufrufe"
 comments = "Kommentare"
 author = "Autor"
@@ -116,6 +121,11 @@ encryptedMessage = ""
 password = "Passwort"
 encryptyAgain = ""
 
+[single.includedIn]
+categories = "enthalten in {{ .Categories }}"
+collections = "enthalten in {{ .Collections }}"
+both = "enthalten in {{ .Categories }} und {{ .Collections }}"
+
 [single.wordCount]
 one = "Ein Wort"
 other = "{{ .Count }} Wörter"

i18n/en.toml

@@ -27,6 +27,12 @@ other = "Category"
 [categories]
 other = "Categories"
 
+[collection]
+other = "Collection"
+
+[collections]
+other = "Collections"
+
 [tag]
 other = "Tag"
 
@@ -96,10 +102,9 @@ other = "Share on"
 
 # === posts/single.html ===
 [single]
-contents= "Contents"
-repost= "Repost"
-publishedOnDate= "published on {{ .Date }}"
-includedInCategories= "included in {{ .Categories }}"
+contents = "Contents"
+repost = "Repost"
+publishedOnDate = "published on {{ .Date }}"
 views = "views"
 comments = "comments"
 author = "Author"
@@ -115,6 +120,11 @@ encryptedMessage = "Please enter the password"
 password = "Password"
 encryptyAgain = "Encrypt again"
 
+[single.includedIn]
+categories = "included in {{ .Categories }}"
+collections = "included in {{ .Collections }}"
+both = "included in {{ .Categories }} and {{ .Collections }}"
+
 [single.wordCount]
 one = "One word"
 other = "{{ .Count }} words"

i18n/es.toml

@@ -29,6 +29,12 @@ other = "Categoría"
 [categories]
 other = "Categorías"
 
+[collection]
+other = ""
+
+[collections]
+other = ""
+
 [tag]
 other = "Etiqueta"
 
@@ -100,7 +106,6 @@ other = "Compartir en"
 contents= "Contenido"
 repost= ""
 publishedOnDate= "publicado el {{ .Date }}"
-includedInCategories= "incluido en {{ .Categories }}"
 views = "vistas"
 comments = "Comentarios"
 author = "Autor"
@@ -116,6 +121,11 @@ encryptedMessage = ""
 password = "Contraseña"
 encryptyAgain = ""
 
+[single.includedIn]
+categories = "incluido en {{ .Categories }}"
+collections = "incluido en {{ .Collections }}"
+both = "incluido en {{ .Categories }} y {{ .Collections }}"
+
 [single.wordCount]
 one = "Una palabra"
 other = "{{ .Count }} palabras"