chore: add example sidebar data file

- update docs
- replace original sidebar template with new sidebar template
- update references names

Author: imfing

assets/css/compiled/main.css

@@ -860,9 +860,6 @@ video {
 .hx-justify-center {
   justify-content: center;
 }
-.hx-justify-between {
-  justify-content: space-between;
-}
 .hx-justify-items-start {
   justify-items: start;
 }
@@ -1028,10 +1025,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
 }
-.hx-bg-primary-100 {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
-}
 .hx-bg-primary-400 {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
@@ -1311,10 +1304,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(154 52 18 / var(--tw-text-opacity));
 }
-.hx-text-primary-800 {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
-}
 .hx-text-red-900 {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
@@ -2813,11 +2802,6 @@ body:is(html[class~="dark"] *) {
   content: var(--tw-content);
   inset: 0px;
 }
-.before\:hx-inset-y-1::before {
-  content: var(--tw-content);
-  top: 0.25rem;
-  bottom: 0.25rem;
-}
 .before\:hx-mr-1::before {
   content: var(--tw-content);
   margin-right: 0.25rem;
@@ -2826,37 +2810,16 @@ body:is(html[class~="dark"] *) {
   content: var(--tw-content);
   display: inline-block;
 }
-.before\:hx-w-px::before {
-  content: var(--tw-content);
-  width: 1px;
-}
-.before\:hx-bg-gray-200::before {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-.before\:hx-opacity-25::before {
-  content: var(--tw-content);
-  opacity: 0.25;
-}
 .before\:hx-transition-transform::before {
   content: var(--tw-content);
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.before\:hx-content-\[\'\#\'\]::before {
-  --tw-content: '#';
-  content: var(--tw-content);
-}
 .before\:hx-content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
 }
-.before\:hx-content-\[\\\"\\\"\]::before {
-  --tw-content: \"\";
-  content: var(--tw-content);
-}
 .first\:hx-mt-0:first-child {
   margin-top: 0px;
 }
@@ -3035,15 +2998,6 @@ body:is(html[class~="dark"] *) {
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 
-  .contrast-more\:hx-border-primary-500 {
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
-  }
-
-  .contrast-more\:hx-border-transparent {
-    border-color: transparent;
-  }
-
   .contrast-more\:hx-font-bold {
     font-weight: 700;
   }
@@ -3082,11 +3036,6 @@ body:is(html[class~="dark"] *) {
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
-  .contrast-more\:hover\:hx-border-gray-900:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(17 24 39 / var(--tw-border-opacity));
-  }
 }
 .dark\:hx-block:is(html[class~="dark"] *) {
   display: block;
@@ -3172,9 +3121,6 @@ body:is(html[class~="dark"] *) {
 .dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
 }
-.dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
-}
 .dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
@@ -3233,18 +3179,10 @@ body:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity));
 }
-.dark\:hx-text-neutral-400:is(html[class~="dark"] *) {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
 .dark\:hx-text-orange-300:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(253 186 116 / var(--tw-text-opacity));
 }
-.dark\:hx-text-primary-600:is(html[class~="dark"] *) {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
-}
 .dark\:hx-text-red-200:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity));
@@ -3286,11 +3224,6 @@ body:is(html[class~="dark"] *) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.dark\:before\:hx-bg-neutral-800:is(html[class~="dark"] *)::before {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
 .dark\:before\:hx-invert:is(html[class~="dark"] *)::before {
   content: var(--tw-content);
   --tw-invert: invert(100%);
@@ -3406,11 +3339,6 @@ body:is(html[class~="dark"] *) {
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 
-  .contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
-    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
-  }
-
   .dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
@@ -3446,11 +3374,6 @@ body:is(html[class~="dark"] *) {
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
-  .contrast-more\:dark\:hover\:hx-border-gray-50:hover:is(html[class~="dark"] *) {
-    --tw-border-opacity: 1;
-    border-color: rgb(249 250 251 / var(--tw-border-opacity));
-  }
 }
 @media not all and (min-width: 1280px) {
 
@@ -3598,9 +3521,6 @@ body:is(html[class~="dark"] *) {
 .ltr\:hx-ml-1:where([dir="ltr"], [dir="ltr"] *) {
   margin-left: 0.25rem;
 }
-.ltr\:hx-ml-3:where([dir="ltr"], [dir="ltr"] *) {
-  margin-left: 0.75rem;
-}
 .ltr\:hx-ml-auto:where([dir="ltr"], [dir="ltr"] *) {
   margin-left: auto;
 }
@@ -3650,10 +3570,6 @@ body:is(html[class~="dark"] *) {
 .ltr\:hx-text-right:where([dir="ltr"], [dir="ltr"] *) {
   text-align: right;
 }
-.ltr\:before\:hx-left-0:where([dir="ltr"], [dir="ltr"] *)::before {
-  content: var(--tw-content);
-  left: 0px;
-}
 @media (min-width: 768px) {
 
   .ltr\:md\:hx-left-auto:where([dir="ltr"], [dir="ltr"] *) {
@@ -3675,9 +3591,6 @@ body:is(html[class~="dark"] *) {
 .rtl\:hx-mr-1:where([dir="rtl"], [dir="rtl"] *) {
   margin-right: 0.25rem;
 }
-.rtl\:hx-mr-3:where([dir="rtl"], [dir="rtl"] *) {
-  margin-right: 0.75rem;
-}
 .rtl\:hx-mr-auto:where([dir="rtl"], [dir="rtl"] *) {
   margin-right: auto;
 }
@@ -3721,10 +3634,6 @@ body:is(html[class~="dark"] *) {
 .rtl\:hx-text-left:where([dir="rtl"], [dir="rtl"] *) {
   text-align: left;
 }
-.rtl\:before\:hx-right-0:where([dir="rtl"], [dir="rtl"] *)::before {
-  content: var(--tw-content);
-  right: 0px;
-}
 .rtl\:before\:hx-rotate-180:where([dir="rtl"], [dir="rtl"] *)::before {
   content: var(--tw-content);
   --tw-rotate: 180deg;

exampleSite/content/docs/guide/configuration.md

@@ -87,7 +87,7 @@ params:
 
 ### Main Sidebar
 
-For the main sidebar, it is automatically generated from the structure of the content directory.
+By default, the main sidebar is automatically generated from the structure of the content directory.
 See the [Organize Files](/docs/guide/organize-files) page for more details.
 
 To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
@@ -119,6 +119,33 @@ menu:
       weight: 3
 ```
 
+### Sidebar from Data
+
+Alternatively, you can define the sidebar structure in the `data` directory. This gives you more flexibility to define sidebar differently than your content structure. To enable this, set the `params.sidebar.source` parameter in the config file to `data`:
+
+```yaml {filename="hugo.yaml"}
+params:
+  sidebar:
+    source: data
+```
+
+To define the sidebar data, create a file named `sidebar.yaml` in the `data` directory.
+
+```yaml {filename="data/sidebar.yaml"}
+docs:
+  - title: Documentation
+    link: /docs/
+  - title: Guide
+    link: /docs/guide/
+    open: false
+    items:
+      - title: Configuration
+        link: /docs/guide/configuration/
+  # ...
+```
+
+If your site is multilingual, you can define the sidebar data for each language, for example in `data/en/sidebar.yaml` file.
+
 ## Right Sidebar
 
 ### Table of Contents

exampleSite/data/en/sidebar.yaml

@@ -0,0 +1,49 @@
+docs:
+  - title: Documentation
+    link: /docs/
+  - title: Getting Started
+    link: /docs/getting-started/
+  - title: Guide
+    link: /docs/guide/
+    open: false
+    items:
+      - title: Organize Files
+        link: /docs/guide/organize-files/
+      - title: Configuration
+        link: /docs/guide/configuration/
+      - title: Markdown
+        link: /docs/guide/markdown/
+      - title: Syntax Highlighting
+        link: /docs/guide/syntax-highlighting/
+      - title: LaTeX
+        link: /docs/guide/latex/
+      - title: Diagrams
+        link: /docs/guide/diagrams/
+      - title: Shortcodes
+        link: /docs/guide/shortcodes/
+        items:
+          - title: Callout
+            link: /docs/guide/shortcodes/callout/
+          - title: Cards
+            link: /docs/guide/shortcodes/cards/
+          - title: Details
+            link: /docs/guide/shortcodes/details/
+          - title: FileTree
+            link: /docs/guide/shortcodes/filetree/
+          - title: Icon
+            link: /docs/guide/shortcodes/icon/
+          - title: Steps
+            link: /docs/guide/shortcodes/steps/
+          - title: Tabs
+            link: /docs/guide/shortcodes/tabs/
+      - title: Deploy Site
+        link: /docs/guide/deploy-site/
+  - title: Advanced
+    link: /docs/advanced/
+    items:
+      - title: Multi-language
+        link: /docs/advanced/multi-language/
+      - title: Comments
+        link: /docs/advanced/comments/
+      - title: Customization
+        link: /docs/advanced/customization/

exampleSite/hugo.yaml

@@ -113,6 +113,10 @@ params:
     # full (100%), wide (90rem), normal (1280px)
     width: normal
 
+    # TODO: move one level up
+    sidebar:
+      source: data
+
   theme:
     # light | dark | system
     default: system