chore: add example sidebar data file

- update docs
- replace original sidebar template with new sidebar template
- update references names
This commit is contained in:
Xin 2024-12-29 00:33:09 +00:00
parent 2acfb3b877
commit b01c8ee405
16 changed files with 147 additions and 353 deletions

View File

@ -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;

View File

@ -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

View File

@ -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/

View File

@ -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

View File

@ -76,40 +76,29 @@
"active:hx-shadow-sm",
"before:hx-absolute",
"before:hx-bg-glass-gradient",
"before:hx-bg-gray-200",
"before:hx-content-[\"\"]",
"before:hx-content-['#']",
"before:hx-content-['']",
"before:hx-inline-block",
"before:hx-inset-0",
"before:hx-inset-y-1",
"before:hx-mr-1",
"before:hx-opacity-25",
"before:hx-pointer-events-none",
"before:hx-transition-transform",
"before:hx-w-px",
"chroma",
"content",
"contrast-more:dark:hover:hx-border-gray-50",
"contrast-more:dark:hx-border-current",
"contrast-more:dark:hx-border-gray-50",
"contrast-more:dark:hx-border-neutral-400",
"contrast-more:dark:hx-border-primary-500",
"contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]",
"contrast-more:dark:hx-shadow-none",
"contrast-more:dark:hx-text-current",
"contrast-more:dark:hx-text-gray-100",
"contrast-more:dark:hx-text-gray-300",
"contrast-more:dark:hx-text-gray-50",
"contrast-more:hover:hx-border-gray-900",
"contrast-more:hx-border",
"contrast-more:hx-border-current",
"contrast-more:hx-border-gray-800",
"contrast-more:hx-border-gray-900",
"contrast-more:hx-border-neutral-400",
"contrast-more:hx-border-primary-500",
"contrast-more:hx-border-t",
"contrast-more:hx-border-transparent",
"contrast-more:hx-font-bold",
"contrast-more:hx-shadow-[0_0_0_1px_#000]",
"contrast-more:hx-shadow-none",
@ -119,7 +108,6 @@
"contrast-more:hx-text-gray-900",
"contrast-more:hx-underline",
"copy-icon",
"dark:before:hx-bg-neutral-800",
"dark:before:hx-invert",
"dark:contrast-more:hx-border-neutral-400",
"dark:focus:hx-bg-dark",
@ -154,7 +142,6 @@
"dark:hx-bg-neutral-900",
"dark:hx-bg-orange-400/20",
"dark:hx-bg-primary-300/10",
"dark:hx-bg-primary-400/10",
"dark:hx-bg-primary-600",
"dark:hx-bg-red-900/30",
"dark:hx-bg-yellow-700/30",
@ -188,9 +175,7 @@
"dark:hx-text-green-200",
"dark:hx-text-indigo-200",
"dark:hx-text-neutral-200",
"dark:hx-text-neutral-400",
"dark:hx-text-orange-300",
"dark:hx-text-primary-600",
"dark:hx-text-red-200",
"dark:hx-text-slate-100",
"dark:hx-text-yellow-200",
@ -288,7 +273,6 @@
"hx-bg-indigo-100",
"hx-bg-neutral-50",
"hx-bg-orange-50",
"hx-bg-primary-100",
"hx-bg-primary-400",
"hx-bg-primary-600",
"hx-bg-primary-700/5",
@ -360,7 +344,6 @@
"hx-inset-y-0",
"hx-items-center",
"hx-items-start",
"hx-justify-between",
"hx-justify-center",
"hx-justify-end",
"hx-justify-items-start",
@ -509,7 +492,6 @@
"hx-text-left",
"hx-text-lg",
"hx-text-orange-800",
"hx-text-primary-800",
"hx-text-red-900",
"hx-text-slate-900",
"hx-text-sm",
@ -553,11 +535,9 @@
"last-of-type:hx-mb-0",
"lntable",
"lntd",
"ltr:before:hx-left-0",
"ltr:hx--mr-4",
"ltr:hx-border-l",
"ltr:hx-ml-1",
"ltr:hx-ml-3",
"ltr:hx-ml-auto",
"ltr:hx-mr-auto",
"ltr:hx-pl-12",
@ -609,7 +589,6 @@
"print:hx-bg-transparent",
"print:hx-hidden",
"rtl:-hx-rotate-180",
"rtl:before:hx-right-0",
"rtl:before:hx-rotate-180",
"rtl:hx--ml-4",
"rtl:hx-border-r",
@ -617,7 +596,6 @@
"rtl:hx-left-3",
"rtl:hx-ml-auto",
"rtl:hx-mr-1",
"rtl:hx-mr-3",
"rtl:hx-mr-auto",
"rtl:hx-pl-2",
"rtl:hx-pl-4",
@ -634,8 +612,6 @@
"search-input",
"search-results",
"search-wrapper",
"sidebar-active-item",
"sidebar-container",
"sm:hx-block",
"sm:hx-flex",
"sm:hx-items-start",

View File

@ -1,7 +1,7 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{- if not (in (slice "taxonomy" "term") .Kind) -}}
{{- partial "sidebar-ng.html" (dict "context" .) -}}
{{- partial "sidebar.html" (dict "context" .) -}}
{{- end -}}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class="hx-mx-auto hx-flex hx-max-w-[90rem]">
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
<article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
<br class="hx-mt-1.5 hx-text-sm" />
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}

View File

@ -1,7 +1,7 @@
{{ define "main" }}
{{- $readMore := (T "readMore") | default "Read more →" -}}
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar-ng.html" (dict "context" .) }}
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar-ng.html" (dict "context" .) }}
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
<div class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pb-8 hx-pt-8 md:hx-pt-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
<div class="hx-flex hx-flex-col hx-items-start">
{{ .Content }}

View File

@ -1,6 +1,6 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar-ng.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,92 +0,0 @@
{{- $context := .context -}}
{{- $disableSidebar := .disableSidebar | default false -}}
{{- $displayPlaceholder := .displayPlaceholder | default false -}}
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
{{- $pageURL := $context.RelPermalink -}}
{{- $data := slice -}}
{{- $dataMobile := slice -}}
{{- if (eq site.Params.page.sidebar.source "data") -}}
{{ $data = partialCached "components/sidebar/get-section-data" $context $context.Section }}
{{- $dataMobile = $data -}}
{{- else -}}
{{- $data = (partialCached "components/sidebar/generate-section-data" $navRoot $navRoot) | unmarshal -}}
{{- $dataMobile = (partialCached "components/sidebar/generate-section-data" site.Home site.Home) | unmarshal -}}
{{- end -}}
{{- $shouldCache := site.Params.page.sidebar.cache | default false -}}
{{/* EXPERIMENTAL */}}
{{- if .context.Params.sidebar.hide -}}
{{- $disableSidebar = true -}}
{{- $displayPlaceholder = true -}}
{{- end -}}
<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
<aside class="hextra-sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
{{/* Search bar on small screen */}}
{{- partialCached "components/sidebar/mobile-search" . -}}
<div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
{{/* Mobile Navigation */}}
<ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
{{- with $dataMobile -}}{{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}{{- end -}}
</ul>
{{/* Sidebar on large screen */}}
{{- if $disableSidebar -}}
{{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
{{ .context.Scratch.Set "enableFooterSwitches" true }}
{{- else -}}
<ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
{{- with $data -}}
{{- if $shouldCache -}}
{{- partialCached "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) $navRoot -}}
{{- else -}}
{{- partial "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) -}}
{{- end -}}
{{- end -}}
{{- partialCached "components/sidebar/bottom" $context site.Home -}}
</ul>
{{ end -}}
<div style="position: absolute; top: 10px; right: 0; font-size: 10px; color: #888;">new</div>
</div>
{{- partial "components/sidebar/switches" (dict "context" $context "disableSidebar" $disableSidebar) -}}
</aside>
{{- define "partials/components/sidebar/mobile-search" -}}
<div class="hx-px-4 hx-pt-4 md:hx-hidden">
{{- partialCached "search.html" . -}}
</div>
{{- end -}}
{{- define "partials/components/sidebar/switches" -}}
{{- $context := .context -}}
{{- $disableSidebar := .disableSidebar -}}
{{/* Hide theme switch when sidebar is disabled */}}
{{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
{{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
{{ if or hugo.IsMultilingual $displayThemeToggle }}
<div
class="{{ $switchesClass }} {{ with hugo.IsMultilingual -}}
hx-justify-end
{{- end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
data-toggle-animation="show"
>
{{- with hugo.IsMultilingual -}}
{{- partial "language-switch" (dict "context" $context "grow" true) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
{{- else -}}
{{- with $displayThemeToggle -}}
<div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
{{- end -}}
{{- end -}}
</div>
{{- end -}}
{{- end -}}

View File

@ -3,48 +3,89 @@
{{- $disableSidebar := .disableSidebar | default false -}}
{{- $displayPlaceholder := .displayPlaceholder | default false -}}
{{/* EXPERIMENTAL - allow hiding sidebar on a per-page basis */}}
{{- if $context.Params.sidebar.hide -}}
{{- $disableSidebar = true -}}
{{- $displayPlaceholder = true -}}
{{- end -}}
{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
{{- $pageURL := $context.RelPermalink -}}
{{/* EXPERIMENTAL */}}
{{- if .context.Params.sidebar.hide -}}
{{- $disableSidebar = true -}}
{{- $displayPlaceholder = true -}}
{{- $data := slice -}}
{{- $dataMobile := slice -}}
{{- if (eq site.Params.page.sidebar.source "data") -}}
{{/* Get sidebar data from Hugo `data` directory */}}
{{- $data = partialCached "components/sidebar/get-section-data" $context $context.Section -}}
{{- $dataMobile = $data -}}
{{- else -}}
{{/* Generate and cache sidebar data in memory */}}
{{- $data = (partialCached "components/sidebar/generate-section-data" $navRoot $navRoot) | unmarshal -}}
{{- $dataMobile = (partialCached "components/sidebar/generate-section-data" site.Home site.Home) | unmarshal -}}
{{- end -}}
{{- if not (hugo.IsProduction) -}}
{{ with $data }}{{ warnf "%v" (debug.Dump .) }}{{ end }}
{{- end -}}
{{/* Cache rendered sidebar */}}
{{- $shouldCache := site.Params.page.sidebar.cache | default false -}}
<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
<!-- Search bar on small screen -->
<div class="hx-px-4 hx-pt-4 md:hx-hidden">
{{ partial "search.html" }}
</div>
<aside class="hextra-sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
{{/* Search bar on small screen */}}
{{- partialCached "components/sidebar/mobile-search" . -}}
<div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
{{/* Mobile Navigation */}}
<ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
<!-- Nav -->
{{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
{{ template "sidebar-footer" }}
{{- with $dataMobile -}}{{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}{{- end -}}
</ul>
<!-- Sidebar on large screen -->
{{/* Sidebar on large screen */}}
{{- if $disableSidebar -}}
{{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
{{ .context.Scratch.Set "enableFooterSwitches" true }}
{{- else -}}
<ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
{{ template "sidebar-main" (dict "context" $navRoot "page" $context "pageURL" $pageURL) }}
{{ template "sidebar-footer" }}
{{- with $data -}}
{{- if $shouldCache -}}
{{- partialCached "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) $navRoot -}}
{{- else -}}
{{- partial "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) -}}
{{- end -}}
{{- end -}}
{{- partialCached "components/sidebar/bottom" $context site.Home -}}
</ul>
{{ end -}}
<div style="position: absolute; top: 10px; right: 0; font-size: 10px; color: #888;">new</div>
</div>
{{- partial "components/sidebar/switches" (dict "context" $context "disableSidebar" $disableSidebar) -}}
</aside>
{{- define "partials/components/sidebar/mobile-search" -}}
<div class="hx-px-4 hx-pt-4 md:hx-hidden">
{{- partialCached "search.html" . -}}
</div>
{{- end -}}
{{- define "partials/components/sidebar/switches" -}}
{{- $context := .context -}}
{{- $disableSidebar := .disableSidebar -}}
{{/* Hide theme switch when sidebar is disabled */}}
{{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
{{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
{{ if or hugo.IsMultilingual $displayThemeToggle }}
<div class="{{ $switchesClass }} {{ with hugo.IsMultilingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show">
<div
class="{{ $switchesClass }} {{ with hugo.IsMultilingual -}}
hx-justify-end
{{- end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
data-toggle-animation="show"
>
{{- with hugo.IsMultilingual -}}
{{- partial "language-switch" (dict "context" $context "grow" true) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
@ -55,124 +96,4 @@
{{- end -}}
</div>
{{- end -}}
</aside>
{{- define "sidebar-main" -}}
{{ template "sidebar-tree" (dict "context" .context "level" 0 "page" .page "pageURL" .pageURL "toc" (.toc | default false)) }}
{{- end -}}
{{- define "sidebar-tree" -}}
{{- if ge .level 4 -}}
{{- return -}}
{{- end -}}
{{- $context := .context -}}
{{- $page := .page }}
{{- $pageURL := .page.RelPermalink -}}
{{- $level := .level -}}
{{- $toc := .toc | default false -}}
{{- with $items := union .context.RegularPages .context.Sections -}}
{{- $items = where $items "Params.sidebar.exclude" "!=" true -}}
{{- if eq $level 0 -}}
{{- range $items.ByWeight }}
{{- if .Params.sidebar.separator -}}
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
<span class="hx-cursor-default">{{ partial "utils/title" . }}</span>
</li>
{{- else -}}
{{- $active := eq $pageURL .RelPermalink -}}
{{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
<li class="{{ if $shouldOpen }}open{{ end }}">
{{- $linkTitle := partial "utils/title" . -}}
{{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
{{- if and $toc $active -}}
{{- template "sidebar-toc" dict "page" . -}}
{{- end -}}
{{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
</li>
{{- end -}}
{{- end -}}
{{- else -}}
<div class="ltr:hx-pr-0 hx-overflow-hidden">
<ul class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'>
{{- range $items.ByWeight }}
{{- $active := eq $pageURL .RelPermalink -}}
{{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
{{- $linkTitle := partial "utils/title" . -}}
<li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
{{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
{{- if and $toc $active -}}
{{ template "sidebar-toc" dict "page" . }}
{{- end }}
{{ template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }}
</li>
{{- end -}}
</ul>
</div>
{{- end -}}
{{- end }}
{{- end -}}
{{- define "sidebar-toc" -}}
{{ $page := .page }}
{{ with $page.Fragments.Headings }}
<ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'>
{{- range . }}
{{- with .Headings }}
{{- range . -}}
<li>
<a
href="#{{ anchorize .ID }}"
class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50"
>
{{- .Title -}}
</a>
</li>
{{ end -}}
{{ end -}}
{{ end -}}
</ul>
{{ end }}
{{- end -}}
{{- define "sidebar-footer" -}}
{{- range site.Menus.sidebar -}}
{{- $name := or (T .Identifier) .Name -}}
{{ if eq .Params.type "separator" }}
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
<span class="hx-cursor-default">{{ $name }}</span>
</li>
{{ else }}
<li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
{{ end }}
{{- end -}}
{{- end -}}
{{- define "sidebar-item-link" -}}
{{- $external := strings.HasPrefix .link "http" -}}
{{- $open := .open | default true -}}
<a
class="hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
{{- if .active }}
sidebar-active-item hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500
{{- else }}
hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
{{- end -}}"
href="{{ .link }}"
{{ if $external }}target="_blank" rel="noreferrer"{{ end }}
>
{{- .title -}}
{{- with .context }}
{{- if or .RegularPages .Sections }}
<span class="hextra-sidebar-collapsible-button">
{{- template "sidebar-collapsible-button" -}}
</span>
{{- end }}
{{ end -}}
</a>
{{- end -}}
{{- define "sidebar-collapsible-button" -}}
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg>
{{- end -}}