fix: scroll bug due to incorrect toggle state (#186)

* fix: add mobile menu overlay to toggle body scroll

* chore: update styles

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
   "features": {
     "ghcr.io/devcontainers/features/hugo:1": {
       "extended": true,
-      "version": "0.116.1"
+      "version": "0.119.0"
     },
     "ghcr.io/devcontainers/features/node:1": {}
   },

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Description**
+
+<!-- Provide a clear and concise description of the bug -->
+
+**Steps To Reproduce**
+
+1. 
+2. 
+3. 
+
+**Expected Behavior**
+
+<!-- What should have happened? -->
+
+**Actual Behavior**
+
+<!-- What happened instead? -->
+
+**Screenshots**
+
+<!-- If applicable, add screenshots to help explain your problem -->
+
+**Environment**
+
+- Hugo Version: [e.g., 0.85.0]
+- Browser/OS: [e.g., Chrome, MacOS]
+- Theme Version: [e.g., v2.0]
+
+**Additional Context**
+
+<!-- Add any other context about the problem here -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Feature Description**
+
+<!-- Provide a clear and concise description of the feature -->
+
+**Problem/Solution**
+
+<!-- What problem will this feature solve? Or what new capability will it add? -->
+
+**Alternatives Considered**
+
+<!-- Have you considered any alternative solutions or workarounds? -->
+
+**Additional Context**
+
+<!-- Add any other context or screenshots about the feature request here -->

README.md

@@ -17,10 +17,10 @@ Demo → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
 ## Features
 
 - **Beautiful Design** - Inspired by Nextra, Hextra utilizes Tailwind CSS to offer a modern design that makes your site look outstanding.
-- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accomodate various lighting conditions.
+- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile to desktop. Dark mode is also supported to accommodate various lighting conditions.
-- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No Javascript or Node.js are needed to use it.
+- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No JavaScript or Node.js are needed to use it.
-- **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no additional configuration required.
+- **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no extra configuration required.
-- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcumbs, pagination, sidebar navigation and more are all automatically generated.
+- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated.
 - **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
 
 ## Quick Start
@@ -39,7 +39,7 @@ Refer to the [documentation](https://imfing.github.io/hextra/docs) for more info
 
 ## Contributing
 
-Contributions are welcome!
+Contributions are welcome.
 Check out the [contributing guide](.github/CONTRIBUTING.md) to get started.
 
 ## License

assets/css/compiled/main.css

@@ -499,6 +499,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
   position: absolute;
 }
@@ -508,6 +511,9 @@ video {
 .sticky {
   position: sticky;
 }
+.inset-0 {
+  inset: 0px;
+}
 .inset-x-0 {
   left: 0px;
   right: 0px;
@@ -543,6 +549,9 @@ video {
 .top-full {
   top: 100%;
 }
+.z-10 {
+  z-index: 10;
+}
 .z-20 {
   z-index: 20;
 }
@@ -697,6 +706,12 @@ video {
 .h-2 {
   height: 0.5rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -941,6 +956,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 .border-orange-100 {
   --tw-border-opacity: 1;
   border-color: rgb(255 237 213 / var(--tw-border-opacity));
@@ -956,6 +975,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(254 249 195 / var(--tw-border-opacity));
 }
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
 .bg-black\/\[\.05\] {
   background-color: rgb(0 0 0 / .05);
 }
@@ -977,18 +999,18 @@ video {
 }
 .bg-primary-100 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
 }
 .bg-primary-400 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity));
 }
 .bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
 .bg-primary-700\/5 {
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
 }
 .bg-red-100 {
   --tw-bg-opacity: 1;
@@ -1126,9 +1148,6 @@ video {
 .pr-\[max\(env\(safe-area-inset-right\)\2c 1\.5rem\)\] {
   padding-right: max(env(safe-area-inset-right),1.5rem);
 }
-.pt-1 {
-  padding-top: 0.25rem;
-}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1251,7 +1270,7 @@ video {
 }
 .text-primary-800 {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
 }
 .text-red-900 {
   --tw-text-opacity: 1;
@@ -1370,12 +1389,12 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
+.duration-75 {
+  transition-duration: 75ms;
+}
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
 .\[-webkit-tap-highlight-color\:transparent\] {
   -webkit-tap-highlight-color: transparent;
 }
@@ -1392,10 +1411,13 @@ video {
 .\[text-underline-position\:from-font\] {
   text-underline-position: from-font;
 }
+.\[transition\:background-color_1\.5s_ease\] {
+  transition: background-color 1.5s ease;
+}
 .\[word-break\:break-word\] {
   word-break: break-word;
 }
-.content h1 {
+.content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 0.5rem;
   font-size: 2.25rem;
   font-weight: 700;
@@ -1403,11 +1425,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h1) {
+:is(html[class~="dark"] .content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h2 {
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2.5rem;
   border-bottom-width: 1px;
   border-color: rgb(229 229 229 / 0.7);
@@ -1420,24 +1442,24 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content h2 {
+  .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-:is(html[class~="dark"] .content h2) {
+:is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
-  border-color: hsl(var(--primary-hue) 100% 94% / 0.1);
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content h2) {
+  :is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-.content h3 {
+.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.5rem;
   font-weight: 600;
@@ -1445,11 +1467,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h3) {
+:is(html[class~="dark"] .content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h4 {
+.content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.25rem;
   font-weight: 600;
@@ -1457,11 +1479,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h4) {
+:is(html[class~="dark"] .content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h5 {
+.content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.125rem;
   font-weight: 600;
@@ -1469,11 +1491,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h5) {
+:is(html[class~="dark"] .content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h6 {
+.content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1rem;
   font-weight: 600;
@@ -1481,29 +1503,25 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h6) {
+:is(html[class~="dark"] .content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content p {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   line-height: 1.75rem;
 }
-.content p:first-child {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content a {
+.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-decoration-thickness: from-font;
   text-underline-position: from-font;
 }
-.content .not-prose a {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-  color: currentColor;
-  text-decoration-line: none;
-}
-.content blockquote {
   margin-top: 1.5rem;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1511,28 +1529,28 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.content blockquote:first-child {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content blockquote) {
+:is([dir="ltr"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-left-width: 2px;
   padding-left: 1.5rem;
 }
-:is([dir="rtl"] .content blockquote) {
+:is([dir="rtl"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-right-width: 2px;
   padding-right: 1.5rem;
 }
-:is(html[class~="dark"] .content blockquote) {
+:is(html[class~="dark"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.content pre:not(.code-block pre) {
+.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   margin-bottom: 1rem;
   overflow-x: auto;
   border-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-size: .9em;
@@ -1542,23 +1560,23 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content pre:not(.code-block pre) {
+  .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     border-width: 1px;
-    border-color: hsl(var(--primary-hue) 100% 24% / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre)) {
+:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content pre:not(.code-block pre)) {
+  :is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
-    border-color: hsl(var(--primary-hue) 100% 94% / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
   }
 }
-.content code:not(.code-block code) {
+.content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1572,38 +1590,38 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content code:not(.code-block code)) {
+:is(html[class~="dark"] .content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content table:not(.code-block table) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   display: block;
   overflow-x: auto;
   padding: 0px;
 }
-.content table:not(.code-block table):first-child {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content table:not(.code-block table) tr {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
   margin: 0px;
   border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   padding: 0px;
 }
-.content table:not(.code-block table) tr:nth-child(even) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
   background-color: rgb(75 85 99 / 0.2);
 }
-.content table:not(.code-block table) th {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1614,11 +1632,11 @@ video {
   padding-bottom: 0.5rem;
   font-weight: 600;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) th) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content table:not(.code-block table) td {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1628,52 +1646,45 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) td) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content ol {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: decimal;
 }
-.content ol:first-child {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ol) {
+:is([dir="ltr"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ol) {
+:is([dir="rtl"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ol li {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content ul {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: disc;
 }
-.content ul:first-child {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ul) {
+:is([dir="ltr"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ul) {
+:is([dir="rtl"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ul li {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content .not-prose ul, .content .not-prose ol {
+.content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-  margin: 0px;
-  list-style-type: none;
-}
-.content .not-prose ul li, .content .not-prose ol li {
-  margin: 0px;
-}
-.content kbd {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1687,29 +1698,25 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content kbd) {
+:is(html[class~="dark"] .content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content pre:not(.code-block pre).mermaid {
+.content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   border-radius: 0px;
   background-color: transparent;
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) {
+:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
   background-color: transparent;
 }
-.content img {
+.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 0.375rem;
 }
-.content .not-prose img {
+.content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption {
-  margin: 0px;
-  border-radius: 0px;
-}
-.content figure figcaption {
   margin-top: 0.5rem;
   display: block;
   text-align: center;
@@ -1717,7 +1724,7 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content figure figcaption) {
+:is(html[class~="dark"] .content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
@@ -1766,50 +1773,6 @@ span:target + .subheading-anchor:after {
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-}
-article.typesetting-article h1 {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
-    font-size: 2.5rem;
-}
-article.typesetting-article h2 {
-  border-style: none;
-}
-article.typesetting-article a {
-  text-decoration-line: none;
-}
-article.typesetting-article a:hover {
-  text-decoration-line: underline;
-}
-article.typesetting-article p {
-  line-height: 2rem;
-}
-article.typesetting-article code {
-  border-style: none;
-}
-:is(html[class~="dark"] article.typesetting-article code) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-:is(html[class~="dark"] article.typesetting-article pre code) {
-  background-color: transparent;
-}
-article.typesetting-article .subheading-anchor + a {
-  text-decoration-line: none;
-}
-article.typesetting-article .subheading-anchor + a::after {
-  content: var(--tw-content);
-  display: none;
-}
-article.typesetting-article .subheading-anchor + a:hover {
-  text-decoration-line: none;
-}
 article details > summary::-webkit-details-marker {
   display: none;
 }
@@ -2151,7 +2114,7 @@ article details > summary::before {
 }
 .code-block pre {
   overflow-x: auto;
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
   font-size: .9em;
   font-weight: 500;
   -webkit-font-smoothing: auto;
@@ -2161,18 +2124,18 @@ article details > summary::before {
 
   .code-block pre {
     border-width: 1px;
-    border-color: hsl(var(--primary-hue) 100% 24% / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
 :is(html[class~="dark"] .code-block pre) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 @media (prefers-contrast: more) {
 
   :is(html[class~="dark"] .code-block pre) {
-    border-color: hsl(var(--primary-hue) 100% 94% / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
   }
 }
 .code-block .filename {
@@ -2185,7 +2148,7 @@ article details > summary::before {
   white-space: nowrap;
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
@@ -2195,7 +2158,7 @@ article details > summary::before {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .code-block .filename) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
@@ -2224,7 +2187,7 @@ article details > summary::before {
 }
 .chroma .ln,
   .chroma .lnt:not(.hl > .lnt),
-  .chroma .hl {
+  .chroma .hl:not(.line) {
   min-width: 2.6rem;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2233,7 +2196,7 @@ article details > summary::before {
 }
 :is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] 
   .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] 
-  .chroma .hl) {
+  .chroma .hl:not(.line)) {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity));
 }
@@ -2248,7 +2211,7 @@ article details > summary::before {
 .chroma .hl {
   display: block;
   width: 100%;
-  background-color: hsl(var(--primary-hue) 100% 32% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
 }
 .hextra-cards {
   grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
@@ -2340,13 +2303,13 @@ article details > summary::before {
 }
 .search-wrapper li .active {
   border-radius: 0.375rem;
-  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
 @media (prefers-contrast: more) {
 
   .search-wrapper li .active {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
   }
 }
 .search-wrapper .no-result {
@@ -2433,7 +2396,7 @@ article details > summary::before {
   }
 .search-wrapper .match {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 @media (max-width: 767px) {
   .sidebar-container {
@@ -2463,6 +2426,7 @@ article details > summary::before {
 }
 .sidebar-container li.open > div {
   height: auto;
+  padding-top: 0.25rem;
 }
 .sidebar-container li.open > a > span > svg > path {
   --tw-rotate: 90deg;
@@ -2552,6 +2516,19 @@ nav .search-wrapper {
   --tw-shadow-color: rgb(115 115 115 / 0.4);
   --tw-shadow: var(--tw-shadow-colored);
 }
+@supports (
+  ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
+) {
+  .code-copy-btn {
+    --tw-bg-opacity: .85;
+    --tw-backdrop-blur: blur(12px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  :is(html[class~="dark"] .code-copy-btn) {
+    --tw-bg-opacity: 0.8;
+  }
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
@@ -2572,11 +2549,13 @@ body {
 }
 :root {
   --primary-hue: 212deg;
+  --primary-saturation: 100%;
   --navbar-height: 4rem;
   --menu-height: 3.75rem;
 }
 .dark {
   --primary-hue: 204deg;
+  --primary-saturation: 100%;
 }
 .placeholder\:text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
@@ -2660,6 +2639,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.hover\:border-gray-900:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2669,11 +2652,11 @@ body {
 }
 .hover\:bg-primary-50:hover {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
 }
 .hover\:bg-primary-700:hover {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
@@ -2693,7 +2676,7 @@ body {
 }
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .hover\:opacity-60:hover {
   opacity: 0.6;
@@ -2730,7 +2713,7 @@ body {
 }
 .focus\:ring-primary-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
 }
 .active\:bg-gray-400\/20:active {
   background-color: rgb(156 163 175 / 0.2);
@@ -2772,11 +2755,11 @@ body {
 }
 .data-\[state\=selected\]\:border-primary-500[data-state=selected] {
   --tw-border-opacity: 1;
-  border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
 }
 .data-\[state\=selected\]\:text-primary-600[data-state=selected] {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden {
   display: none;
@@ -2918,6 +2901,11 @@ body {
     border-color: currentColor;
   }
 
+  .contrast-more\:border-gray-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(31 41 55 / var(--tw-border-opacity));
+  }
+
   .contrast-more\:border-gray-900 {
     --tw-border-opacity: 1;
     border-color: rgb(17 24 39 / var(--tw-border-opacity));
@@ -2930,7 +2918,7 @@ body {
 
   .contrast-more\:border-primary-500 {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
   }
 
   .contrast-more\:border-transparent {
@@ -2993,6 +2981,10 @@ body {
 :is(html[class~="dark"] .dark\:border-gray-100\/20) {
   border-color: rgb(243 244 246 / 0.2);
 }
+:is(html[class~="dark"] .dark\:border-gray-400) {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 :is(html[class~="dark"] .dark\:border-neutral-700) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -3013,6 +3005,9 @@ body {
 :is(html[class~="dark"] .dark\:border-yellow-200\/30) {
   border-color: rgb(254 240 138 / 0.3);
 }
+:is(html[class~="dark"] .dark\:bg-black\/60) {
+  background-color: rgb(0 0 0 / 0.6);
+}
 :is(html[class~="dark"] .dark\:bg-blue-900\/30) {
   background-color: rgb(30 58 138 / 0.3);
 }
@@ -3038,14 +3033,14 @@ body {
   background-color: rgb(251 146 60 / 0.2);
 }
 :is(html[class~="dark"] .dark\:bg-primary-300\/10) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 :is(html[class~="dark"] .dark\:bg-primary-400\/10) {
-  background-color: hsl(var(--primary-hue) 100% 66% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
 }
 :is(html[class~="dark"] .dark\:bg-primary-600) {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .dark\:bg-red-900\/30) {
   background-color: rgb(127 29 29 / 0.3);
@@ -3099,7 +3094,7 @@ body {
 }
 :is(html[class~="dark"] .dark\:text-primary-600) {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .dark\:text-red-200) {
   --tw-text-opacity: 1;
@@ -3152,6 +3147,10 @@ body {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+:is(html[class~="dark"] .dark\:hover\:border-gray-100:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
 :is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -3184,14 +3183,14 @@ body {
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) {
-  background-color: hsl(var(--primary-hue) 100% 94% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
 }
 :is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
-  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
 :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
   --tw-text-opacity: 1;
@@ -3219,7 +3218,7 @@ body {
 }
 :is(html[class~="dark"] .hover\:dark\:text-primary-600):hover {
   --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
   --tw-shadow: 0 0 #0000;
@@ -3232,7 +3231,7 @@ body {
 }
 :is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) {
   --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
 }
 @media (prefers-contrast: more) {
 
@@ -3252,7 +3251,7 @@ body {
 
   :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) {
     --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
   }
 
   :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) {

assets/css/components/code-copy.css

@@ -0,0 +1,7 @@
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .code-copy-btn {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+  }
+}

assets/css/components/sidebar.css

@@ -13,7 +13,7 @@
     @apply h-0;
   }
   li.open > div {
-    @apply h-auto;
+    @apply h-auto pt-1;
   }
   li.open > a > span > svg > path {
     @apply rotate-90;

assets/css/highlight.css

@@ -32,7 +32,7 @@
   }
   .ln,
   .lnt:not(.hl > .lnt),
-  .hl {
+  .hl:not(.line) {
     @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
   }
   .lntd {

assets/css/styles.css

@@ -8,6 +8,7 @@
 @import "components/sidebar.css";
 @import "components/navbar.css";
 @import "components/scrollbar.css";
+@import "components/code-copy.css";
 
 html {
   @apply text-base antialiased;
@@ -21,10 +22,12 @@ body {
 
 :root {
   --primary-hue: 212deg;
+  --primary-saturation: 100%;
   --navbar-height: 4rem;
   --menu-height: 3.75rem;
 }
 
 .dark {
   --primary-hue: 204deg;
+  --primary-saturation: 100%;
 }

assets/css/typography.css

@@ -1,41 +1,38 @@
 .content {
-  h1 {
+  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
   }
-  h2 {
+  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
   }
-  h3 {
+  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
   }
-  h4 {
+  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
   }
-  h5 {
+  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
   }
-  h6 {
+  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
   }
-  p {
+  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 leading-7 first:mt-0;
   }
-  a {
+  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
   }
-  .not-prose a {
+  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply text-current no-underline;
-  }
-  blockquote {
     @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
   }
-  pre:not(.code-block pre) {
+  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
   }
-  code:not(.code-block code) {
+  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  table:not(.code-block table) {
+  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
     @apply block overflow-x-auto mt-6 p-0 first:mt-0;
 
     tr {
@@ -48,37 +45,28 @@
       @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
     }
   }
-  ol {
+  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  ul {
+  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  .not-prose ul, .not-prose ol {
+  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply m-0 list-none;
-    li {
-      @apply m-0;
-    }
-  }
-  kbd {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  pre:not(.code-block pre).mermaid {
+  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-transparent rounded-none dark:bg-transparent;
   }
-  img {
+  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mx-auto my-4 rounded-md;
   }
-  .not-prose img {
+  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply m-0 rounded-none;
-  }
-  figure {
     figcaption {
       @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
     }
@@ -112,35 +100,6 @@
   }
 }
 
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-  h1 {
-    @apply mt-6 mb-4 text-center;
-    font-size: 2.5rem;
-  }
-  h2 {
-    @apply border-none;
-  }
-  a {
-    @apply no-underline hover:underline;
-  }
-  p {
-    @apply leading-8;
-  }
-  code {
-    @apply border-none dark:bg-neutral-700;
-  }
-  pre code {
-    @apply dark:bg-transparent;
-  }
-  .subheading-anchor + a {
-    @apply no-underline hover:no-underline after:hidden;
-  }
-}
-
 article details > summary {
   &::-webkit-details-marker {
     @apply hidden;

assets/js/back-to-top.js

@@ -0,0 +1,22 @@
+// Back to top button
+
+document.addEventListener("DOMContentLoaded", function () {
+  const backToTop = document.querySelector("#backToTop");
+  if (backToTop) {
+    document.addEventListener("scroll", (e) => {
+      if (window.scrollY > 300) {
+        backToTop.classList.remove("opacity-0");
+      } else {
+        backToTop.classList.add("opacity-0");
+      }
+    });
+  }
+});
+
+function scrollUp() {
+  window.scroll({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+}

assets/js/code-copy.js

@@ -1,30 +1,63 @@
-document.querySelectorAll('.code-copy-btn').forEach(function (button) {
+// Copy button for code blocks
-  button.addEventListener('click', function (e) {
+
-    e.preventDefault();
+document.addEventListener('DOMContentLoaded', function () {
-    const targetId = button.getAttribute('data-clipboard-target');
+  const getCopyIcon = () => {
-    const target = document.querySelector(targetId);
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    let codeElement;
+    svg.innerHTML = `
-    if (target.tagName === 'CODE') {
+      <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-      codeElement = target;
+    `;
-    } else {
+    svg.setAttribute('fill', 'none');
-      // Select the last code element in case line numbers are present
+    svg.setAttribute('viewBox', '0 0 24 24');
-      const codeElements = target.querySelectorAll('code');
+    svg.setAttribute('stroke', 'currentColor');
-      codeElement = codeElements[codeElements.length - 1];
+    svg.setAttribute('stroke-width', '2');
-    }
+    return svg;
-    if (codeElement) {
+  }
-      // Replace double newlines with single newlines in the innerText
+
-      // as each line inside <span> has trailing newline '\n'
+  const getSuccessIcon = () => {
-      const code = codeElement.innerText.replace(/\n\n/g, '\n');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      navigator.clipboard.writeText(code).then(function () {
+    svg.innerHTML = `
-        button.classList.add('copied');
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-        setTimeout(function () {
+    `;
-          button.classList.remove('copied');
+    svg.setAttribute('fill', 'none');
-        }, 500);
+    svg.setAttribute('viewBox', '0 0 24 24');
-      }).catch(function (err) {
+    svg.setAttribute('stroke', 'currentColor');
-        console.error('Failed to copy text: ', err);
+    svg.setAttribute('stroke-width', '2');
-      });
+    return svg;
-    } else {
+  }
-      console.error('Target element not found');
+
-    }
+  document.querySelectorAll('.code-copy-btn').forEach(function (button) {
+    // Add copy and success icons
+    button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
+    button.querySelector('.success-icon')?.appendChild(getSuccessIcon());
+
+    // Add click event listener for copy button
+    button.addEventListener('click', function (e) {
+      e.preventDefault();
+      const targetId = button.getAttribute('data-clipboard-target');
+      const target = document.querySelector(targetId);
+      let codeElement;
+      if (target.tagName === 'CODE') {
+        codeElement = target;
+      } else {
+        // Select the last code element in case line numbers are present
+        const codeElements = target.querySelectorAll('code');
+        codeElement = codeElements[codeElements.length - 1];
+      }
+      if (codeElement) {
+        // Replace double newlines with single newlines in the innerText
+        // as each line inside <span> has trailing newline '\n'
+        const code = codeElement.innerText.replace(/\n\n/g, '\n');
+        navigator.clipboard.writeText(code).then(function () {
+          button.classList.add('copied');
+          setTimeout(function () {
+            button.classList.remove('copied');
+          }, 500);
+        }).catch(function (err) {
+          console.error('Failed to copy text: ', err);
+        });
+      } else {
+        console.error('Target element not found');
+      }
+    });
   });
 });

assets/js/menu.js

@@ -1,19 +1,49 @@
 // Hamburger menu for mobile navigation
 
-const menu = document.querySelector('.hamburger-menu');
+document.addEventListener('DOMContentLoaded', function () {
-
+  const menu = document.querySelector('.hamburger-menu');
-menu.addEventListener('click', (e) => {
+  const overlay = document.querySelector('.mobile-menu-overlay');
-  e.preventDefault();
   const sidebarContainer = document.querySelector('.sidebar-container');
 
-  // Toggle the hamburger menu
+  // Initialize the overlay
-  menu.querySelector('svg').classList.toggle('open');
+  const overlayClasses = ['fixed', 'inset-0', 'z-10', 'bg-black/80', 'dark:bg-black/60'];
+  overlay.classList.add('bg-transparent');
+  overlay.classList.remove("hidden", ...overlayClasses);
 
-  // When the menu is open, we want to show the navigation sidebar
+  function toggleMenu() {
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
+    // Toggle the hamburger menu
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+    menu.querySelector('svg').classList.toggle('open');
 
-  // When the menu is open, we want to prevent the body from scrolling
+    // When the menu is open, we want to show the navigation sidebar
-  document.body.classList.toggle('overflow-hidden');
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
-  document.body.classList.toggle('md:overflow-auto');
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+
+    // When the menu is open, we want to prevent the body from scrolling
+    document.body.classList.toggle('overflow-hidden');
+    document.body.classList.toggle('md:overflow-auto');
+  }
+
+  menu.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    if (overlay.classList.contains('bg-transparent')) {
+      // Show the overlay
+      overlay.classList.add(...overlayClasses);
+      overlay.classList.remove('bg-transparent');
+    } else {
+      // Hide the overlay
+      overlay.classList.remove(...overlayClasses);
+      overlay.classList.add('bg-transparent');
+    }
+  });
+
+  overlay.addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleMenu();
+
+    // Hide the overlay
+    overlay.classList.remove(...overlayClasses);
+    overlay.classList.add('bg-transparent');
+  });
 });

assets/js/theme.js

@@ -1,40 +1,51 @@
-// Dark theme toggle
+// Light / Dark theme toggle
+(function () {
+  const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
 
-const themeToggleButtons = document.querySelectorAll(".theme-toggle");
+  const themeToggleButtons = document.querySelectorAll(".theme-toggle");
 
-// Change the icons inside the button based on previous settings
+  // Change the icons of the buttons based on previous settings or system theme
-if (
+  if (
-  localStorage.getItem("color-theme") === "dark" ||
+    localStorage.getItem("color-theme") === "dark" ||
-  (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    (!("color-theme" in localStorage) &&
-) {
+      ((window.matchMedia("(prefers-color-scheme: dark)").matches && defaultTheme === "system") || defaultTheme === "dark"))
-  themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
+  ) {
-} else {
+    themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
-  themeToggleButtons.forEach((el) => el.dataset.theme = "light");
+  } else {
-}
+    themeToggleButtons.forEach((el) => el.dataset.theme = "light");
+  }
 
-themeToggleButtons.forEach((el) => {
+  // Add click event handler to the buttons
-  el.addEventListener("click", function () {
+  themeToggleButtons.forEach((el) => {
-    if (localStorage.getItem("color-theme")) {
+    el.addEventListener("click", function () {
-      if (localStorage.getItem("color-theme") === "light") {
+      if (localStorage.getItem("color-theme")) {
-        document.documentElement.classList.add("dark");
+        if (localStorage.getItem("color-theme") === "light") {
-        document.documentElement.style.colorScheme = "dark";
+          setDarkTheme();
-        localStorage.setItem("color-theme", "dark");
+          localStorage.setItem("color-theme", "dark");
+        } else {
+          setLightTheme();
+          localStorage.setItem("color-theme", "light");
+        }
       } else {
-        document.documentElement.classList.remove("dark");
+        if (document.documentElement.classList.contains("dark")) {
-        document.documentElement.style.colorScheme = "light";
+          setLightTheme();
-        localStorage.setItem("color-theme", "light");
+          localStorage.setItem("color-theme", "light");
+        } else {
+          setDarkTheme();
+          localStorage.setItem("color-theme", "dark");
+        }
       }
-    } else {
+      el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
-      if (document.documentElement.classList.contains("dark")) {
+    });
-        document.documentElement.classList.remove("dark");
-        document.documentElement.style.colorScheme = "light";
-        localStorage.setItem("color-theme", "light");
-      } else {
-        document.documentElement.classList.add("dark");
-        document.documentElement.style.colorScheme = "dark";
-        localStorage.setItem("color-theme", "dark");
-      }
-    }
-    el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
   });
-});
+
+  // Listen for system theme changes
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    if (defaultTheme === "system" && !("color-theme" in localStorage)) {
+      e.matches ? setDarkTheme() : setLightTheme();
+      themeToggleButtons.forEach((el) =>
+        el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
+      );
+    }
+  });
+})();

assets/json/search-data.json

@@ -1,3 +1,10 @@
+{{/* FlexSearch Index Data */}}
+{{- $indexType := site.Params.search.flexsearch.index | default "content" -}}
+
+{{- if not (in (slice "content" "summary" "heading" "title" ) $indexType) -}}
+  {{- errorf "unknown flexsearch index type: %s" $indexType -}}
+{{- end -}}
+
 {{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
 {{- $pages = where $pages "Params.excludeSearch" "!=" true -}}
 {{- $pages = where $pages "Content" "!=" "" -}}
@@ -7,7 +14,7 @@
 {{- range $index, $page := $pages -}}
   {{- $pageTitle := $page.LinkTitle | default $page.File.BaseFileName -}}
   {{- $pageLink := $page.RelPermalink -}}
-  {{- $data := partial "utils/fragments" $page -}}
+  {{- $data := partial "utils/fragments" (dict "context" $page "type" $indexType) -}}
   {{- $output = $output | merge (dict $pageLink (dict "title" $pageTitle "data" $data)) -}}
 {{- end -}}
 

data/icons.yaml

@@ -270,3 +270,4 @@ twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill=
 mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path></svg>
 youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
 x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

exampleSite/content/_index.md

@@ -57,7 +57,7 @@ layout: hextra-home
     subtitle="No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
   >}}
   {{< hextra/feature-card
-    title="Reponsive with Dark Mode Included"
+    title="Responsive with Dark Mode Included"
     subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
   >}}
   {{< hextra/feature-card

exampleSite/content/_index.zh-cn.md

@@ -0,0 +1,76 @@
+---
+title: Hextra 主题
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <span>免费 开源</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="mt-6 mb-6">
+{{< hextra/hero-headline >}}
+  创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="mb-12">
+{{< hextra/hero-subtitle >}}
+  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="mb-6">
+{{< hextra/hero-button text="现在开始" link="docs" >}}
+</div>
+
+<div class="mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="快速且功能全面"
+    subtitle="简单易用，功能强大丰富。"
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Markdown 写作"
+    subtitle="只需使用 Markdown 进行编辑。多样的 Shortcode 组件开箱即用。"
+    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="全文搜索"
+    subtitle="内置 FlexSearch 全文搜索，无需额外设置。"
+    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="轻如羽毛"
+    subtitle="使用 Hextra 无需依赖 Node.js。由 Hugo 提供支持，Hugo 是最快的静态网站生成器之一，只需一个二进制文件即可在数秒内创建网站。"
+  >}}
+  {{< hextra/feature-card
+    title="响应式布局，暗黑模式"
+    subtitle="适应不同的屏幕尺寸。内置暗黑模式支持，并根据用户的系统偏好自动切换。"
+  >}}
+  {{< hextra/feature-card
+    title="免费构建和托管"
+    subtitle="使用 GitHub Actions 进行构建，并在 GitHub Pages 上免费托管。也可以托管在任何静态托管服务上。"
+  >}}
+  {{< hextra/feature-card
+    title="多语言轻松实现"
+    subtitle="仅需通过在 Markdown 文件后添加语言代码即可创建多语言页面。向您的站点添加 i18n 支持直观易行。"
+  >}}
+  {{< hextra/feature-card
+    title="还有更多..."
+    icon="sparkles"
+    subtitle="代码高亮 / 目录 / SEO / RSS / LaTeX 公式 / Mermaid 图标 / 自定义 / 等等..."
+  >}}
+{{< /hextra/feature-grid >}}

exampleSite/content/about/index.ja.md

@@ -1,20 +0,0 @@
----
-title: "このサイトについて"
-toc: false
----
-
-Hextraは、現代的な静的ウェブサイトを構築するためのシンプルで高速で柔軟なテーマとして設計されています。特にドキュメンテーションウェブサイトに適していますが、ブログ、ポートフォリオなどのさまざまなタイプのサイトにも使用できます。
-
-Hugoは、Jekyllと同様に静的サイトジェネレーターです。Hugoの特徴は、単一のバイナリであることで、さまざまなプラットフォームで簡単にインストールして実行できることです。また、数千ページのサイトをミリ秒単位でレンダリングできるほど非常に高速で信頼性があります。
-
-Hextraは、最小限のフットプリントに焦点を当てた考え方で構築されています。始めるためには、Node.jsのような追加の依存関係は必要ありません。必要なのは、単一のYAML設定ファイルと、Markdownのコンテンツだけです。そのため、ツールのセットアップではなく、質の高いコンテンツの作成に集中できます。
-
-## クレジット
-
-Hextraをビルドするには、次のツールとインスピレーションが必要です：
-
-- [Hugo](https://gohugo.io/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Heroicons](https://heroicons.com/)
-- [Nextra](https://nextra.vercel.app/)
-- [Next.js](https://nextjs.org/)

exampleSite/content/blog/_index.md

@@ -1,3 +1,10 @@
 ---
 title: "Blog"
 ---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS Feed</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>

exampleSite/content/blog/markdown.md

@@ -4,6 +4,10 @@ date: 2020-01-01
 authors:
   - name: John Doe
     link: https://example.com/johndoe
+tags:
+  - Markdown
+  - Example
+  - Guide
 excludeSearch: true
 ---
 

exampleSite/content/docs/_index.ja.md

@@ -1,17 +0,0 @@
----
-linkTitle: "ドキュメンテーション"
-title: Hextraへようこそ
----
-
-👋 こんにちは！Hextraドキュメンテーションへようこそ！
-
-<!--more-->
-
-## Hextraとは？
-
-Hextraは、[Hugo][hugo]テーマの一つで、[Tailwind CSS][tailwind-css]を使用して作られた、現代的で高速なバッテリー内蔵のテーマです。
-ドキュメンテーション、ブログ、ウェブサイトの美しいウェブサイトを構築するために設計され、様々な要件に対応するための機能と柔軟性を提供します。
-
-[hugo]: https://gohugo.io/
-[flex-search]: https://github.com/nextapps-de/flexsearch
-[tailwind-css]: https://tailwindcss.com/

exampleSite/content/docs/_index.md

@@ -10,15 +10,15 @@ title: Introduction
 ## What is Hextra?
 
 Hextra is a modern, fast and batteries-included [Hugo][hugo] theme built with [Tailwind CSS][tailwind-css].
-Designed for building beautiful websites for documentation, blogs and websites, it provides out-of-the-box features and flexibility to meet various requirements.
+Designed for building beautiful websites for documentation, blogs, and websites, it provides out-of-the-box features and flexibility to meet various requirements.
 
 ## Features
 
 - **Beautiful Design** - Inspired by Nextra, Hextra utilizes Tailwind CSS to offer a modern design that makes your site look outstanding.
-- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accomodate various lighting conditions.
+- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accommodate various lighting conditions.
-- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No Javascript or Node.js are needed to use it.
+- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No JavaScript or Node.js are needed to use it.
 - **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no additional configuration required.
-- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcumbs, pagination, sidebar navigation and more are all automatically generated.
+- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated.
 - **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
 
 ## Questions or Feedback?

exampleSite/content/docs/advanced/customization.md

@@ -34,11 +34,12 @@ The color of text mixed with `other text` can customized with:
 
 ### Primary Color
 
-The primary color of the theme can be customized by setting the `--primary-hue` variable:
+The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:
 
 ```css {filename="assets/css/custom.css"}
 :root {
   --primary-hue: 100deg;
+  --primary-saturation: 90%;
 }
 ```
 

exampleSite/content/docs/getting-started.ja.md

@@ -1,6 +0,0 @@
----
-title: はじめに
-weight: 1
----
-
-プロジェクトの紹介。

exampleSite/content/docs/getting-started.md

@@ -9,28 +9,40 @@ prev: /docs
 
 {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
 
-You will be able to quickly get started by using the above template repository.
+You could quickly get started by using the above template repository.
 
 <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
 
 We have provided a [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) which can help automatically build and deploy your site to GitHub Pages, and host it for free.
+For more options, check out [Deploy Site](../guide/deploy-site).
 
 [🌐 Demo ↗](https://imfing.github.io/hextra-starter-template/)
 
 ## Start as New Project
 
-### Prerequisites
+There are two main ways to add the Hextra theme to your Hugo project:
 
-Before we start, make sure we have [Hugo](https://gohugo.io/) installed.
+1. **Hugo Modules (Recommended)**: The simplest and recommended method. [Hugo modules](https://gohugo.io/hugo-modules/) let you pull in the theme directly from its online source. Theme is downloaded automatically and managed by Hugo.
-Please refer to Hugo's [official installation guide](https://gohugo.io/installation/) for more details.
 
-[Hugo modules](https://gohugo.io/hugo-modules/) are the recommended way to manage Hugo themes. To use Hugo modules, we need to install [Git](https://git-scm.com/) and [Go](https://go.dev/).
+2. **Git Submodule**: Alternatively, add Hextra as a [Git Submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules). The theme is downloaded by Git and stored in your project's `themes` folder.
+
+### Setup Hextra as Hugo module
+
+#### Prerequisites
+
+Before starting, you need to have the following software installed:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### Steps
 
 {{% steps %}}
 
 ### Initialize a new Hugo site
 
-```bash
+```shell
 $ hugo new site my-site --format=yaml
 ```
 
@@ -45,7 +57,7 @@ $ hugo mod init github.com/username/my-site
 $ hugo mod get github.com/imfing/hextra
 ```
 
-Edit `hugo.yaml` to enable Hextra theme:
+Configure `hugo.yaml` to use Hextra theme by adding the following:
 
 ```yaml
 module:
@@ -55,7 +67,7 @@ module:
 
 ### Create your first content pages
 
-Let's create a new content page for the home page and the documentation page:
+Create new content page for the home page and the documentation page:
 
 ```shell
 $ hugo new content/_index.md
@@ -68,25 +80,106 @@ $ hugo new content/docs/_index.md
 $ hugo server --buildDrafts --disableFastRender
 ```
 
-Voila! You can see your new site at `http://localhost:1313/`.
+Voila, your new site preview is available at `http://localhost:1313/`.
 
 {{% /steps %}}
 
 
-## Update Theme
-
 {{% details title="How to update theme?" %}}
 
-To update the theme to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
+To update all Hugo modules in your project to their latest versions, run the following command:
 
 ```shell
 $ hugo mod get -u
 ```
 
+To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
 See [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) for more details.
 
 {{% /details %}}
 
+### Setup Hextra as Git submodule
+
+#### Prerequisites
+
+Before starting, you need to have the following software installed:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### Steps
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```shell
+$ hugo new site my-site --format=yaml
+```
+
+### Add Hextra theme as a Git submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+Configure `hugo.yaml` to use Hextra theme by adding the following:
+
+```yaml
+theme: hextra
+```
+
+### Create your first content pages
+
+Create new content page for the home page and the documentation page:
+
+```shell
+$ hugo new content/_index.md
+$ hugo new content/docs/_index.md
+```
+
+### Preview the site locally
+
+```shell
+$ hugo server --buildDrafts --disableFastRender
+```
+
+Your new site preview is available at `http://localhost:1313/`.
+
+{{% /steps %}}
+
+
+When using [CI/CD](https://en.wikipedia.org/wiki/CI/CD) for Hugo website deployment, it's essential to ensure that the following command is executed before running the `hugo` command.
+
+```shell
+git submodule update --init
+```
+
+Failure to run this command results in the theme folder not being populated with Hextra theme files, leading to a build failure.
+
+
+{{% details title="How to update theme?" %}}
+
+To update all submodules in your repository to their latest commits, run the following command:
+
+```shell
+$ git submodule update --remote
+```
+
+To update Hextra to the latest commit, run the following command:
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+See [Git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules) for more details.
+
+{{% /details %}}
 
 ## Next
 

exampleSite/content/docs/guide/_index.md

@@ -7,7 +7,7 @@ sidebar:
   open: true
 ---
 
-Explore the following sections to learn to compose content using Hextra:
+Explore the following sections to learn how to use Hextra:
 
 <!--more-->
 
@@ -19,4 +19,5 @@ Explore the following sections to learn to compose content using Hextra:
   {{< card link="latex" title="LaTeX" icon="variable" >}}
   {{< card link="diagrams" title="Diagrams" icon="chart-square-bar" >}}
   {{< card link="shortcodes" title="Shortcodes" icon="template" >}}
+  {{< card link="deploy-site" title="Deploy Site" icon="server" >}}
 {{< /cards >}}

exampleSite/content/docs/guide/configuration.md

@@ -5,7 +5,7 @@ weight: 2
 
 Hugo reads its configuration from `hugo.yaml` in the root of your Hugo site.
 The config file is where you can configure all aspects of your site.
-You can find the config file for this site in `exampleSite/hugo.yaml` as a good starting point.
+Check out the config file for this site [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) on GitHub to get a comprehensive idea of available settings and best practices.
 
 <!--more-->
 
@@ -132,7 +132,7 @@ params:
     base: "https://github.com/your-username/your-repo/edit/main"
 ```
 
-The edit links will be automatically generated for each page.
+The edit links will be automatically generated for each page based on the provided url as root directory.
 If you want to set edit link for a specific page, you can set the `params.editURL` parameter in the front matter of the page:
 
 ```yaml {filename="content/docs/guide/configuration.md"}
@@ -181,6 +181,26 @@ Include both `favicon.ico` and `favicon.svg` files in your project to ensure you
 While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
 Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.
 
+### Theme Configuration
+
+Use the `theme` setting to configure the default theme mode and toggle button, allowing visitors to switch between light or dark mode.
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+Options for `theme.default`:
+
+- `light` - always use light mode
+- `dark` - always use dark mode
+- `system` - sync with the operating system setting (default)
+
+The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
+When set to `true`, visitors can switch between light or dark mode, overriding the default setting.
 
 ### Page Width
 
@@ -193,16 +213,49 @@ params:
     width: wide
 ```
 
-There are three available options: `full`, `wide`, and `normal`.
+There are three available options: `full`, `wide`, and `normal`. By default, the page width is set to `normal`.
-By default, the page width is set to `normal`.
 
 Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
 
+### Search Index
+
+Full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch) is enabled by default.
+To customize the search index, set the `params.search.flexsearch.index` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+
+Options for `flexsearch.index`:
+
+- `content` - full content of the page (default)
+- `summary` - summary of the page, see [Hugo Content Summaries](https://gohugo.io/content-management/summaries/) for more details
+- `heading` - level 1 and level 2 headings
+- `title` - only include the page title
+
+To exclude a page from the search index, set the `excludeSearch: true` in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+excludeSearch: true
+---
+```
 
 ### Google Analytics
 
-To enable Google Analytics, set the `googleAnalytics` parameter in the config file:
+To enable [Google Analytics](https://marketingplatform.google.com/about/analytics/), set `services.googleAnalytics.ID` flag in `hugo.yaml`:
 
 ```yaml {filename="hugo.yaml"}
-googleAnalytics: G-XXXXXXXXXX
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
 ```

exampleSite/content/docs/guide/deploy-site.md

@@ -0,0 +1,161 @@
+---
+title: Deploy Site
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo generates static websites, allowing for flexible hosting options.
+This page provides guides for deploying your Hextra site on various platforms.
+
+<!--more-->
+
+
+## GitHub Pages
+
+[GitHub Pages](https://docs.github.com/pages) is the recommended way to deploy and host your website for free.
+
+If you bootstrap the site using [hextra-starter-template](https://github.com/imfing/hextra-starter-template), it has provided GitHub Actions workflow out-of-the-box that helps automatically deploy to GitHub Pages.
+
+{{% details title="GitHub Actions Configuration" closed="true" %}}
+
+Below is an example configuration from [hextra-starter-template](https://github.com/imfing/hextra-starter-template):
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.117.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21'
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.117.0'
+          extended: true
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+By default, the above GitHub Actions workflow `.github/workflows/pages.yaml` assumes that the site is deploying to `https://<USERNAME>.github.io/<REPO>/`.
+
+If you are deploying to `https://<USERNAME>.github.io/` then modify the `--baseURL`:
+
+```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
+run: |
+  hugo \
+    --gc --minify \
+    --baseURL "https://${{ github.repository_owner }}.github.io/"
+```
+
+If you are deploying to your own domain, please change the `--baseURL` value accordingly.
+
+
+## Cloudflare Pages
+
+1. Put your site source code in a Git repository (e.g. GitHub)
+2. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account
+3. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
+4. Select the repository, and in the **Set up builds and deployments** section, provide the following information:
+
+| Configuration     | Value                |
+| ----------------- | -------------------- |
+| Production branch | `main`               |
+| Build command     | `hugo --gc --minify` |
+| Build directory   | `public`             |
+
+For more details, check out:
+- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
+- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
+
+
+## Netlify
+
+1. Push your code to your Git repository (GitHub, GitLab, etc.)
+2. [Import the project](https://app.netlify.com/start) to Netlify
+3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
+   - Configure the Build command to `hugo --gc --minify`
+   - Specify the Publish directory to `public`
+   - Add Environment variable `HUGO_VERSION` and set to `0.119.0`
+4. Deploy!
+
+Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
+
+
+## Vercel
+
+1. Push your code to your Git repository (GitHub, GitLab, etc.)
+2. Go to [Vercel Dashboard](https://vercel.com/dashboard) and import your Hugo project
+3. Configure the project, select Hugo as Framework Preset
+4. Override the Build Command and Install command:
+   1. Set Build Command to `hugo --gc --minify`
+   2. Set Install Command to `yum install golang`
+
+![Vercel Deployment Configuration](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

exampleSite/content/docs/guide/diagrams.zh-cn.md

@@ -4,7 +4,7 @@ weight: 6
 next: /docs/guide/shortcodes
 ---
 
-目前，Hextra 支持 [Mermain](#mermaid) 的图表。
+目前，Hextra 支持 [Mermaid](#mermaid) 的图表。
 
 <!--more-->
 
@@ -12,7 +12,7 @@ next: /docs/guide/shortcodes
 
 [Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具，它的文本定义和 Markdown 类似，可在浏览器中动态创建图表。例如：流程图、序列图、饼图等。
 
-在 Hextra 中使用 Mermain 就像使用代码块一样简单：
+在 Hextra 中使用 Mermaid 就像使用代码块一样简单：
 
 ````markdown
 ```mermaid

exampleSite/content/docs/guide/organize-files.md

@@ -7,7 +7,7 @@ prev: /docs/guide
 ## Directory Structure
 
 By default, Hugo searches for Markdown files in the `content` directory, and the structure of the directory determines the final output structure of your website.
-Take the example site as an example:
+Take this site as an example:
 
 <!--more-->
 
@@ -45,6 +45,28 @@ content
     └── post-1.md // <- /blog/post-1/
 ```
 
+## Layouts
+
+Hextra offers three layouts for different content types:
+
+| Layout    | Directory             | Features                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | Ideal for structured documentation, same as this section.        |
+| `blog`    | `content/blog/`       | For blog postings, with both listing and detailed article views. |
+| `default` | All other directories | Single-page article view without sidebar.                        |
+
+To customize a section to mirror the behavior of a built-in layout, specify the desired type in the front matter of the section's `_index.md`.
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: My Docs
+cascade:
+  type: docs
+---
+```
+
+The above example configuration ensures that the content files inside `content/my-docs/` will be treated as documentation (`docs` type) by default.
+
 ## Sidebar Navigation
 
 The sidebar navigation is generated automatically based on the content organization alphabetically. To manually configure the sidebar order, we can use the `weight` parameter in the front matter of the Markdown files.
@@ -62,7 +84,8 @@ weight: 2
 
 ## Configure Content Directory
 
-If we need to use a different directory for our content, we can do so by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in our site configuration file.
+By default, the root `content/` directory is used by Hugo to build the site.
+If you need to use a different directory for content, for example `docs/`, this can be done by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in the site configuration `hugo.yaml`.
 
 ## Add Images
 

exampleSite/content/docs/guide/shortcodes/_index.ja.md

@@ -1,6 +0,0 @@
----
-title: コンポーネント
-weight: 2
----
-
-Hextraは、[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/)に基づいたさまざまな組み込みコンポーネントを提供しています。

exampleSite/content/docs/guide/shortcodes/icon.md

@@ -8,7 +8,9 @@ To use this shortcode inline, inline shortcode needs to be enabled in the config
 enableInlineShortcodes: true
 ```
 
-The list of available icons can be found in `data/icons.yaml`.
+List of available icons can be found in [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
+
+<!--more-->
 
 ## Example
 
@@ -25,14 +27,20 @@ The list of available icons can be found in `data/icons.yaml`.
 
 [Heroicons](https://v1.heroicons.com/) v1 outline icons are available out of the box.
 
-You can also add your own icons by adding them to `data/icon.yaml`:
+### How to add your own icons
 
-```yaml {filename="data/icon.yaml"}
+Create `data/icons.yaml` file, then add your own SVG icons in the following format:
+
+```yaml {filename="data/icons.yaml"}
 your-icon: <svg>your icon svg content</svg>
 ```
 
-which can then be used like this:
+It then can be used in the shortcode like this:
 
 ```
 {{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
 ```
+
+Tip: [Iconify Design](https://iconify.design/) is a great place to find SVG icons for your site.

exampleSite/content/docs/guide/shortcodes/tabs.md

@@ -1,6 +1,6 @@
 ---
 title: Tabs
-next: /docs/advanced/
+next: /docs/guide/deploy-site
 ---
 
 ## Example

exampleSite/content/docs/guide/syntax-highlighting.md

@@ -86,4 +86,4 @@ By default, copy button is enabled for code blocks.
 
 ## Supported Languages
 
-For a list of supported languages, please see [Chroma's documentation](https://github.com/alecthomas/chroma#supported-languages).
+For a list of supported languages, please see the [Chroma documentation](https://github.com/alecthomas/chroma#supported-languages).

exampleSite/content/showcase/index.zh-cn.md

@@ -0,0 +1,18 @@
+---
+title: 项目展示
+description: "由 Hextra 驱动的开源网站和项目。"
+toc: false
+layout: wide
+---
+
+<div class="mt-4"></div>
+
+<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+由 Hextra 驱动的开源网站和项目。
+</p>
+
+{{< cards >}}
+  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< /cards >}}

exampleSite/hugo.yaml

@@ -7,7 +7,9 @@ enableGitInfo: true
 # enableEmoji: false
 hasCJKLanguage: true
 
-# googleAnalytics: G-XXXXXXXXXX
+# services:
+#   googleAnalytics:
+#     ID: G-MEASUREMENT_ID
 
 outputs:
   home: [HTML]
@@ -20,14 +22,10 @@ languages:
     languageName: English
     weight: 1
     title: Hextra
-  ja:
-    languageName: 日本語
-    weight: 2
-    title: "Hextra テーマ"
   zh-cn:
     languageName: 简体中文
     languageCode: zh-CN
-    weight: 3
+    weight: 2
     title: Hextra
 
 module:
@@ -109,7 +107,13 @@ params:
     # full (100%), wide (90rem), normal (1280px)
     width: normal
 
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+
   footer:
+    enable: true
     displayCopyright: true
     displayPoweredBy: true
     width: normal
@@ -117,13 +121,24 @@ params:
   displayUpdatedDate: true
   dateFormat: "January 2, 2006"
 
+  # Search
+  # flexsearch is enabled by default
   search:
     enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
 
   editURL:
     enable: true
     base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"
 
+  blog:
+    list:
+      displayTags: true
+
   comments:
     enable: false
     type: giscus

exampleSite/hugo_stats.json

@@ -67,6 +67,7 @@
       "[counter-reset:step]",
       "[hyphens:auto]",
       "[text-underline-position:from-font]",
+      "[transition:background-color_1.5s_ease]",
       "[word-break:break-word]",
       "absolute",
       "active:bg-gray-400/20",
@@ -90,6 +91,7 @@
       "before:pointer-events-none",
       "before:transition-transform",
       "before:w-px",
+      "bg-black/80",
       "bg-black/[.05]",
       "bg-blue-100",
       "bg-clip-text",
@@ -112,6 +114,7 @@
       "border-black/5",
       "border-blue-200",
       "border-gray-200",
+      "border-gray-500",
       "border-l",
       "border-orange-100",
       "border-red-200",
@@ -127,6 +130,7 @@
       "content",
       "contrast-more:border",
       "contrast-more:border-current",
+      "contrast-more:border-gray-800",
       "contrast-more:border-gray-900",
       "contrast-more:border-neutral-400",
       "contrast-more:border-primary-500",
@@ -152,10 +156,12 @@
       "contrast-more:text-gray-800",
       "contrast-more:text-gray-900",
       "contrast-more:underline",
+      "copy-icon",
       "cursor-default",
       "cursor-pointer",
       "dark:before:bg-neutral-800",
       "dark:before:invert",
+      "dark:bg-black/60",
       "dark:bg-blue-900/30",
       "dark:bg-dark",
       "dark:bg-dark/50",
@@ -171,6 +177,7 @@
       "dark:block",
       "dark:border-blue-200/30",
       "dark:border-gray-100/20",
+      "dark:border-gray-400",
       "dark:border-neutral-700",
       "dark:border-neutral-800",
       "dark:border-orange-400/30",
@@ -188,6 +195,7 @@
       "dark:hover:bg-neutral-900",
       "dark:hover:bg-primary-100/5",
       "dark:hover:bg-primary-700",
+      "dark:hover:border-gray-100",
       "dark:hover:border-gray-600",
       "dark:hover:border-neutral-500",
       "dark:hover:border-neutral-700",
@@ -226,10 +234,11 @@
       "data-[state=selected]:text-primary-600",
       "decoration-from-font",
       "duration-200",
+      "duration-75",
       "ease-in",
-      "ease-in-out",
       "filename",
       "first:mt-0",
+      "fixed",
       "flex",
       "flex-col",
       "focus:bg-white",
@@ -264,6 +273,7 @@
       "h-0",
       "h-16",
       "h-2",
+      "h-3.5",
       "h-4",
       "h-5",
       "h-7",
@@ -289,6 +299,7 @@
       "hover:border-gray-200",
       "hover:border-gray-300",
       "hover:border-gray-400",
+      "hover:border-gray-900",
       "hover:dark:bg-primary-500/10",
       "hover:dark:text-primary-600",
       "hover:opacity-60",
@@ -304,6 +315,7 @@
       "inline",
       "inline-block",
       "inline-flex",
+      "inset-0",
       "inset-x-0",
       "inset-y-0",
       "items-center",
@@ -394,7 +406,9 @@
       "min-w-full",
       "ml-1",
       "ml-4",
+      "mobile-menu-overlay",
       "mr-2",
+      "mt-1",
       "mt-1.5",
       "mt-12",
       "mt-16",
@@ -447,7 +461,6 @@
       "pr-[max(env(safe-area-inset-right),1.5rem)]",
       "print:bg-transparent",
       "print:hidden",
-      "pt-1",
       "pt-4",
       "pt-6",
       "pt-8",
@@ -578,6 +591,7 @@
       "w-screen",
       "whitespace-nowrap",
       "xl:block",
+      "z-10",
       "z-20",
       "z-[-1]"
     ],

exampleSite/i18n/zh-cn.yaml

@@ -0,0 +1,6 @@
+documentation: "文档"
+showcase: "项目展示"
+blog: "博客"
+about: "关于"
+more: "更多"
+hugoDocs: "Hugo 文档 ↗"

i18n/en.yaml

@@ -1,5 +1,13 @@
-onThisPage: "On this page"
+backToTop: "Scroll to top"
+changeLanguage: "Change language"
+changeTheme: "Change theme"
+copyright: "© 2023 Hextra Project."
+dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
-
+light: "Light"
-copyright: "© 2023 Hextra Project."
+noResultsFound: "No results found."
+onThisPage: "On this page"
+poweredBy: "Powered by Hextra"
+readMore: "Read more →"
+searchPlaceholder: "Search..."

i18n/es.yaml

@@ -0,0 +1,13 @@
+backToTop: "Subir al inicio"
+changeLanguage: "Cambiar idioma"
+changeTheme: "Cambiar tema"
+copyright: "© 2023 Proyecto Hextra."
+dark: "Oscuro"
+editThisPage: "Edita esta página en GitHub →"
+lastUpdated: "Última actualización"
+light: "Claro"
+noResultsFound: "No hubo resultados."
+onThisPage: "En esta página"
+poweredBy: "Con tecnología de Hextra"
+readMore: "Leer más →"
+searchPlaceholder: "Buscar..."

i18n/fr.yaml

@@ -0,0 +1,13 @@
+backToTop: "Revenir en haut"
+changeLanguage: "Changer la langue"
+changeTheme: "Thème d'affichage"
+copyright: "© 2023 Hextra Project."
+dark: "Sombre"
+editThisPage: "Modifier cette page sur GitHub →"
+lastUpdated: "Dernière modification"
+light: "Clair"
+noResultsFound: "Pas de résultats trouvés"
+onThisPage: "Sur cette page"
+poweredBy: "Propulsé par Hextra"
+readMore: "Lire plus →"
+searchPlaceholder: "Rechercher..."

i18n/ja.yaml

@@ -1,16 +1,13 @@
-# Navbar
+backToTop: "トップにスクロール"
-documentation: "ドキュメンテーション"
+changeLanguage: "言語を変更"
-blog: "ブログ"
+changeTheme: "テーマを変更"
-about: "このサイトについて"
+copyright: "© 2023 Hextra プロジェクト。"
-
+dark: "ダーク"
-more: "もっと"
+editThisPage: "このページをGitHubで編集 →"
-hugoDocs: "Hugoドキュメント ↗"
-
-searchPlaceholder: "検索ドキュメント..."
-noResultsFound: "検索結果が見つかりませんでした"
-
-onThisPage: "このページでは"
-editThisPage: "このページをGitHubで編集する →"
 lastUpdated: "最終更新日"
-
+light: "ライト"
-copyright: "© 2023 Hextra Project."
+noResultsFound: "結果が見つかりませんでした。"
+onThisPage: "このページの内容"
+poweredBy: "提供元 Hextra"
+readMore: "もっと読む →"
+searchPlaceholder: "検索..."

i18n/ko.yaml

@@ -0,0 +1,13 @@
+backToTop: "맨위로 스크롤"
+changeLanguage: "언어변경"
+changeTheme: "테마변경"
+copyright: "© 2023 Hextra Project."
+dark: "어두운 테마"
+editThisPage: "Github에서 편집하기 →"
+lastUpdated: "마지막 수정일자"
+light: "밝은 테마"
+noResultsFound: "결과 없음"
+onThisPage: "페이지 목차"
+poweredBy: "제공 Hextra"
+readMore: "더보기 →"
+searchPlaceholder: "검색..."

i18n/nb.yaml

@@ -0,0 +1,13 @@
+backToTop: "Gå til toppen"
+changeLanguage: "Endre språk"
+changeTheme: "Endre tema"
+copyright: "© 2023 Hextra-prosjektet."
+dark: "Mørk"
+editThisPage: "Rediger denne siden på GitHub →"
+lastUpdated: "Sist oppdatert"
+light: "Lys"
+noResultsFound: "Fant ingen treff."
+onThisPage: "På denne siden"
+poweredBy: "Powered by Hextra"
+readMore: "Les mer →"
+searchPlaceholder: "Søk..."

i18n/nn.yaml

@@ -0,0 +1,13 @@
+backToTop: "Gå til toppen"
+changeLanguage: "Endre språk"
+changeTheme: "Endre tema"
+copyright: "© 2023 Hextra-prosjektet."
+dark: "Mørk"
+editThisPage: "Rediger denne sida på GitHub →"
+lastUpdated: "Sist oppdatert"
+light: "Ljos"
+noResultsFound: "Fann ingen treff."
+onThisPage: "På denne sida"
+poweredBy: "Powered by Hextra"
+readMore: "Les meir →"
+searchPlaceholder: "Søk..."

i18n/pt.yaml

@@ -0,0 +1,13 @@
+backToTop: "Voltar ao topo"
+changeLanguage: "Mudar a língua"
+changeTheme: "Mudar tema"
+copyright: "© 2023 Projecto Hextra."
+dark: "Escuro"
+editThisPage: "Edita esta página no GitHub →"
+lastUpdated: "Última modificação"
+light: "Claro"
+noResultsFound: "Nenhum resultado encontrado"
+onThisPage: "Nesta página"
+poweredBy: "Com a tecnologia de Hextra"
+readMore: "Ler mais →"
+searchPlaceholder: "Procurar..."

i18n/sw.yaml

@@ -0,0 +1,13 @@
+backToTop: "Tembeza hadi juu"
+changeLanguage: "Badilisha lugha"
+changeTheme: "Badilisha mandhari"
+copyright: "© 2023 Hextra Project."
+dark: "Meusi"
+editThisPage: "Hariri ukurasa huu kwenye GitHub →"
+lastUpdated: "Ilisasishwa mwisho"
+light: "Nuru"
+noResultsFound: "Hakuna matokeo yalipopatikana."
+onThisPage: "Kwenye ukurasa huu"
+poweredBy: "Inaendeshwa na Hextra"
+readMore: "Soma zaidi →"
+searchPlaceholder: "Tafuta..."

i18n/vi.yaml

@@ -0,0 +1,13 @@
+backToTop: "Lướt lên đầu trang"
+changeLanguage: "Đổi ngôn ngữ"
+changeTheme: "Đổi chủ đề"
+copyright: "© 2023 Hextra Project."
+dark: "Tối"
+editThisPage: "Sửa trang này trên GitHub →"
+lastUpdated: "Lần cuối cập nhật lúc"
+light: "Sáng"
+noResultsFound: "Không tìm thấy kết quả."
+onThisPage: "Ở trang này"
+poweredBy: "Chạy bởi Hextra"
+readMore: "Đọc thêm →"
+searchPlaceholder: "Tìm kiếm..."

i18n/zh-cn.yaml

@@ -1,15 +1,13 @@
-documentation: "文档"
+backToTop: "返回顶部"
-blog: "博客"
+changeLanguage: "切换语言"
-about: "关于"
+changeTheme: "切换主题"
-
+copyright: "© 2023 Hextra Project."
-more: "更多"
+dark: "深色"
-hugoDocs: "Hugo 文档 ↗"
-
-searchPlaceholder: "搜索文档..."
-noResultsFound: "无结果"
-
-onThisPage: "此页上"
 editThisPage: "在 GitHub 上编辑此页 →"
 lastUpdated: "最后更新于"
-
+light: "浅色"
-copyright: "© 2023 Hextra Project."
+noResultsFound: "无结果"
+onThisPage: "此页上"
+poweredBy: "由 Hextra 驱动"
+readMore: "更多 →"
+searchPlaceholder: "搜索文档..."

i18n/zh-tw.yaml

@@ -1,15 +1,13 @@
-documentation: "文檔"
+backToTop: "返回頂部"
-blog: "博客"
+changeLanguage: "切換語言"
-about: "關於"
+changeTheme: "切換主題"
-
+copyright: "© 2023 Hextra Project."
-more: "更多"
+dark: "深色"
-hugoDocs: "Hugo 文檔 ↗"
-
-searchPlaceholder: "搜索文檔..."
-noResultsFound: "無結果"
-
-onThisPage: "此頁上"
 editThisPage: "在 GitHub 上編輯此頁 →"
 lastUpdated: "最後更新於"
-
+light: "淺色"
-copyright: "© 2023 Hextra Project."
+noResultsFound: "無結果"
+onThisPage: "此頁上"
+poweredBy: "由 Hextra 驅動"
+readMore: "更多 →"
+searchPlaceholder: "搜尋文檔..."

layouts/_default/_markup/render-codeblock.html

@@ -15,9 +15,13 @@
     <pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre>
   {{- end -}}
   <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
-    <button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">
+    <button
-      {{ partial "utils/icon.html" (dict "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
+      class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
-      {{ partial "utils/icon.html" (dict "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
+      title="Copy code"
+      data-clipboard-target="#code-block-{{ .Ordinal }}"
+    >
+      <div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
+      <div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>
     </button>
   </div>
 </div>

layouts/_default/baseof.html

@@ -4,7 +4,9 @@
   <body dir="ltr">
     {{- partial "navbar.html" . -}}
     {{- block "main" . }}{{ end -}}
-    {{- if (.Site.Params.footer.enable | default true) }}{{ partial "footer.html" . }}{{ end }}
+    {{- if or (eq .Site.Params.footer.enable nil) (.Site.Params.footer.enable) }}
+      {{ partial "footer.html" . }}
+    {{ end }}
   </body>
   {{ partial "scripts.html" . }}
 </html>

layouts/blog/list.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  {{- $readMore := (T "readMore") | default "Read more →" -}}
+  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
@@ -9,11 +10,20 @@
         {{ range .Pages.ByDate.Reverse }}
           <div class="mb-10">
             <h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-            <p class="opacity-80 mt-6 leading-7">
+            {{- if site.Params.blog.list.displayTags -}}
-              {{- partial "utils/page-description" . }}
+              {{ with .Params.tags }}
-              <span class="inline-block"> <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">Read more →</a> </span>
+                <p class="opacity-50 text-sm leading-7">
+                  {{- range . }}<a class="inline-block mr-2">#{{ . }}</a>{{ end -}}
+                </p>
+              {{ end -}}
+            {{- end -}}
+            <p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
+            <p class="opacity-80 mt-1 leading-7">
+              <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
+                {{- $readMore -}}
+              </a>
             </p>
-            <p class="opacity-50 text-sm mt-6 leading-7">{{ partial "utils/format-date" .Date }}</p>
+            <p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
           </div>
         {{ end }}
       </main>

layouts/partials/components/pager.html

@@ -5,15 +5,23 @@
 {{- $prev := cond $reversePagination .PrevInSection .NextInSection -}}
 {{- $next := cond $reversePagination .NextInSection .PrevInSection -}}
 
-{{- with .Params.prev -}}
+{{- if eq .Params.prev false }}
-  {{- with $.Site.GetPage . -}}
+  {{- if $reversePagination }}{{ $next = false }}{{ else }}{{ $prev = false }}{{ end -}}
-    {{- if $reversePagination }}{{ $next = . }}{{ else }}{{ $prev = . }}{{ end -}}
+{{ else }}
+  {{- with .Params.prev -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $next = . }}{{ else }}{{ $prev = . }}{{ end -}}
+    {{- end -}}
   {{- end -}}
 {{- end -}}
 
-{{- with .Params.next -}}
+{{- if eq .Params.next false }}
-  {{- with $.Site.GetPage . -}}
+  {{- if $reversePagination }}{{ $prev = false }}{{ else }}{{ $next = false }}{{ end -}}
-    {{- if $reversePagination }}{{ $prev = . }}{{ else }}{{ $next = . }}{{ end -}}
+{{ else }}
+  {{- with .Params.next -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $prev = . }}{{ else }}{{ $next = . }}{{ end -}}
+    {{- end -}}
   {{- end -}}
 {{- end -}}
 

layouts/partials/footer.html

@@ -1,6 +1,8 @@
 {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
+{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
 
 {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
+{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
 
 {{- $footerWidth := "max-w-screen-xl" -}}
 {{- with .Site.Params.footer.width -}}
@@ -11,19 +13,22 @@
   {{ end -}}
 {{- end -}}
 
+
 <footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
-  {{- if $enableFooterSwitches }}
+  {{- if $enableFooterSwitches -}}
-    <div class='mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}'>
+    <div class="mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}">
       {{- partial "language-switch.html" (dict "context" .) -}}
-      {{- partial "theme-toggle.html" -}}
+      {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
     </div>
-  {{ end -}}
+    {{- if or site.IsMultiLingual $displayThemeToggle -}}
-  <hr class="dark:border-neutral-800" />
+      <hr class="dark:border-neutral-800" />
+    {{- end -}}
+  {{- end -}}
   <div
-    class='{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start'
+    class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
   >
     <div class="flex w-full flex-col items-center sm:items-start">
-      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}
+      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
       {{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
     </div>
   </div>
@@ -32,7 +37,7 @@
 {{- define "theme-credit" -}}
   <a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
     <span
-      >Powered by Hextra
+      >{{ . | safeHTML }}
       {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
     </span>
   </a>

layouts/partials/google-analytics.html

@@ -1,4 +1,10 @@
-{{ with .Site.GoogleAnalytics }}
+{{/* site.GoogleAnalytics is deprecated in Hugo v0.120.0 */}}
+{{/* it will be removed in a future version */}}
+{{- $gtagID := "" -}}
+{{- with site.GoogleAnalytics -}}{{ $gtagID = . }}{{- end -}}
+{{- with site.Config.Services.GoogleAnalytics.ID -}}{{ $gtagID = . }}{{- end -}}
+
+{{- with $gtagID }}
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
   <script>
@@ -10,4 +16,4 @@
 
     gtag("config", "{{ . }}");
   </script>
-{{ end }}
+{{ end -}}

layouts/partials/head.html

@@ -25,7 +25,7 @@
 
 
   <!-- Google Analytics -->
-  {{- if and .Site.GoogleAnalytics (eq hugo.Environment "production") }}
+  {{- if and (eq hugo.Environment "production") (or .Site.GoogleAnalytics .Site.Config.Services.GoogleAnalytics.ID) }}
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
     {{ partial "google-analytics.html" . }}
   {{- end }}
@@ -33,13 +33,25 @@
 
   <script>
     /* Initialize light/dark mode */
-    if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    const defaultTheme = '{{ site.Params.theme.default | default `system`}}';
+
+    const setDarkTheme = () => {
       document.documentElement.classList.add("dark");
       document.documentElement.style.colorScheme = "dark";
-    } else {
+    }
+    const setLightTheme = () => {
       document.documentElement.classList.remove("dark");
       document.documentElement.style.colorScheme = "light";
     }
+
+    if ("color-theme" in localStorage) {
+      localStorage.getItem("color-theme") === "dark" ? setDarkTheme() : setLightTheme();
+    } else {
+      defaultTheme === "dark" ? setDarkTheme() : setLightTheme();
+      if (defaultTheme === "system") {
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? setDarkTheme() : setLightTheme();
+      }
+    }
   </script>
 
   {{ partial "custom/head-end.html" . }}

layouts/partials/scripts.html

@@ -1,27 +1,34 @@
-{{- $jsTheme := resources.Get "js/theme.js" -}}
+{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
 {{- $jsMenu := resources.Get "js/menu.js" -}}
 {{- $jsTabs := resources.Get "js/tabs.js" -}}
 {{- $jsLang := resources.Get "js/lang.js" -}}
 {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
 {{- $jsSidebar := resources.Get "js/sidebar.js" -}}
+{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
 
-{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar | resources.Concat "js/main.js" -}}
+{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
   {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}
 <script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
 
-{{/* FlexSearch */}}
+
+{{/* Search */}}
 {{- if (site.Params.search.enable | default true) -}}
-  {{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
+  {{- $searchType := site.Params.search.type | default "flexsearch" -}}
-  {{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
+  {{- if eq $searchType "flexsearch" -}}
-  {{- if hugo.IsProduction -}}
+    {{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
-    {{- $jsSearch = $jsSearch | minify | fingerprint -}}
+    {{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
+    {{- if hugo.IsProduction -}}
+      {{- $jsSearch = $jsSearch | minify | fingerprint -}}
+    {{- end -}}
+    {{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
+    <script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
+    <script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
+  {{- else -}}
+    {{- warnf `search type "%s" is not supported` $searchType -}}
   {{- end -}}
-  {{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
-  <script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
-  <script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
 {{- end -}}
 
 {{/* Mermaid */}}

layouts/partials/sidebar.html

@@ -10,6 +10,7 @@
 {{- $pageURL := $context.RelPermalink -}}
 
 
+<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
 <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   <!-- Search bar on small screen -->
   <div class="px-4 pt-4 md:hidden">
@@ -34,17 +35,21 @@
     {{ end -}}
   </div>
   {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $switchesClass := cond $disableSidebar "md:hidden" "" }}
+  {{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
-  <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
+  {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
-    {{- with site.IsMultiLingual }}
+
-      {{ partial "language-switch" (dict "context" $context "grow" true) }}
+  {{ if or site.IsMultiLingual $displayThemeToggle }}
-      {{ partial "theme-toggle" (dict "hideLabel" true) }}
+    <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
-    {{ else }}
+      {{- with site.IsMultiLingual -}}
-      <div class="flex grow flex-col">
+        {{- partial "language-switch" (dict "context" $context "grow" true) -}}
-        {{ partial "theme-toggle" }}
+        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
-      </div>
+      {{- else -}}
-    {{ end -}}
+        {{- with $displayThemeToggle -}}
-  </div>
+          <div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
+        {{- end -}}
+      {{- end -}}
+    </div>
+  {{- end -}}
 </aside>
 
 {{- define "sidebar-main" -}}
@@ -76,13 +81,13 @@
         </li>
       {{- end -}}
     {{- else -}}
-      <div class="pt-1 ltr:pr-0 overflow-hidden transition-all ease-in-out duration-200">
+      <div class="ltr:pr-0 overflow-hidden">
         <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
           {{- range $items.ByWeight }}
             {{- $active := eq $pageURL .RelPermalink -}}
             {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
             {{- $title := .LinkTitle | default .File.BaseFileName -}}
-            <li class="flex flex-col gap-1 {{ if $shouldOpen }}open{{ end }}">
+            <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
               {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
               {{- if and $toc $active -}}
                 {{ template "sidebar-toc" dict "page" . }}

layouts/partials/theme-toggle.html

@@ -1,6 +1,8 @@
 {{- $hideLabel := .hideLabel | default false -}}
 
 {{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
+{{- $light := (T "light") | default "Light" -}}
+{{- $dark := (T "dark") | default "Dark" -}}
 
 
 <button
@@ -8,12 +10,12 @@
   data-theme="light"
   class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
   type="button"
-  aria-label="Toggle Dark Mode"
+  aria-label="{{ $changeTheme }}"
 >
   <div class="flex items-center gap-2 capitalize">
     {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">Light</span>{{ end -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
     {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">Dark</span>{{ end -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
   </div>
 </button>

layouts/partials/toc.html

@@ -3,6 +3,7 @@
 {{- $toc := .Params.toc | default true -}}
 {{- $onThisPage := (T "onThisPage") | default "On this page"}}
 {{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
+{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
 
 <nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
   {{- if $toc }}
@@ -25,10 +26,19 @@
       <div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
         {{- if site.Params.editURL.enable -}}
           {{- $editURL := site.Params.editURL.base | default "" -}}
-          {{- with .File -}}{{ $editURL = urls.JoinPath $editURL .Path }}{{- end -}}
+          {{- with .File -}}{{ $editURL = urls.JoinPath $editURL (replace .Path "\\" "/") }}{{- end -}}
           {{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
           <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
         {{- end -}}
+        {{/* Scroll To Top */}}
+        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50">
+          <span>
+            {{- $backToTop -}}
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+          </svg>
+        </button>
       </div>
     </div>
   {{ end -}}
@@ -49,7 +59,7 @@
     {{- if .Title }}
       <li class="my-2 scroll-my-6 scroll-py-6">
         <a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
-          {{- .Title | safeHTML }}
+          {{- .Title | safeHTML | plainify }}
         </a>
       </li>
     {{- end -}}

layouts/partials/utils/fragments.html

@@ -1,5 +1,6 @@
 {{/* Split page raw content into fragments */}}
-{{ $page := . }}
+{{ $page := .context }}
+{{ $type := .type | default "content" }}
 
 {{ $headingKeys := slice }}
 {{ $headingTitles := slice }}
@@ -22,24 +23,40 @@
 {{ $len := len $headingKeys }}
 {{ $data := dict }}
 
-{{ if eq $len 0 }}
+{{ if eq $type "content" }}
-  {{ $data = $data | merge (dict "" $page.Plain) }}
+  {{/* Include full content of the page */}}
-{{ else }}
+  {{ if eq $len 0 }}
-  {{ range seq $len }}
+    {{ $data = $data | merge (dict "" ($page.Plain | htmlUnescape | chomp)) }}
-    {{ $i := sub $len . }}
+  {{ else }}
-    {{ $headingKey := index $headingKeys $i }}
+    {{/* Split the raw content from bottom to top */}}
-    {{ $headingTitle := index $headingTitles $i }}
+    {{ range seq $len }}
+      {{ $i := sub $len . }}
+      {{ $headingKey := index $headingKeys $i }}
+      {{ $headingTitle := index $headingTitles $i }}
 
-    {{ if eq $i 0 }}
+      {{ if eq $i 0 }}
-      {{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify)) }}
+        {{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify | htmlUnescape | chomp)) }}
-    {{ else }}
+      {{ else }}
-      {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
+        {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
-      {{ $lastPart := index $parts (sub (len $parts) 1) }}
+        {{ $lastPart := index $parts (sub (len $parts) 1) }}
 
-      {{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | plainify)) }}
+        {{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | plainify | htmlUnescape | chomp)) }}
-      {{ $content = strings.TrimSuffix $lastPart $content }}
+        {{ $content = strings.TrimSuffix $lastPart $content }}
-      {{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
+        {{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
+      {{ end }}
     {{ end }}
   {{ end }}
+{{ else if (eq $type "heading" ) }}
+  {{/* Put heading keys with empty content to the data object */}}
+  {{ $data = dict "" "" }}
+  {{ range $headingKeys }}
+    {{ $data = $data | merge (dict . "") }}
+  {{ end }}
+{{ else if (eq $type "title") }}
+  {{/* Use empty data object since title is included in search-data.json */}}
+  {{ $data = $data | merge (dict "" "") }}
+{{ else if (eq $type "summary" ) }}
+  {{ $data = $data | merge (dict "" ($page.Summary | plainify | htmlUnescape | chomp)) }}
 {{ end }}
+
 {{ return $data }}

layouts/shortcodes/callout.html

@@ -5,20 +5,33 @@
 {{ if eq $emoji "" }}
   {{ $emoji = index $calloutEmojiDict $type }}
 {{ end }}
+{{/* Also allow using "icon" */}}
+{{ $icon := .Get "icon" }}
 
 {{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
 {{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
 {{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
 {{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
 
-
 {{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
 
+
 <div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
-  <div class="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2" style='font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";'>{{ $emoji }}</div>
+  <div class="ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
+    {{- with $emoji -}}
+      <div class="select-none text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{ . }}
+      </div>
+    {{- else -}}
+      {{- with $icon }}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="inline-block align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
   <div class="w-full min-w-0 leading-7">
-    <p class="mt-6 leading-7 first:mt-0">
+    <div class="mt-6 leading-7 first:mt-0">
       {{ .Inner | markdownify }}
-    </p>
+    </div>
   </div>
 </div>

layouts/shortcodes/card.html

@@ -49,9 +49,8 @@
 
 <a
   class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
-  href="{{ $href }}"
+  {{- if $link -}}
-  {{- if $external }}
+    href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
-    target="_blank" rel="noreferrer"
   {{- end -}}
 >
   {{- with $image -}}

layouts/shortcodes/hextra/feature-card.html

@@ -5,11 +5,15 @@
 {{- $imageClass := .Get "imageClass" -}}
 {{- $style := .Get "style" -}}
 {{- $icon := .Get "icon" -}}
+{{- $link := .Get "link" -}}
 
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
 
-<div
+<a
+  {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
-  class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
+  class="{{ $class }} hextra-feature-card not-prose block relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
 >
   <div class="relative w-full p-6">
     <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
@@ -25,4 +29,4 @@
   {{- with $image -}}
     <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
   {{- end -}}
-</div>
+</a>

layouts/shortcodes/hextra/feature-grid.html

@@ -2,7 +2,7 @@
 
 
 <div
-  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full"
+  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner }}

layouts/shortcodes/hextra/hero-badge.html

@@ -6,8 +6,8 @@
 
 
 <a
-  href="{{ $href }}"
+  {{ if $link }}href="{{ $href }}"{{ end }}
-  class="{{ $class }} inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
+  class="{{ $class }} not-prose inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >

layouts/shortcodes/hextra/hero-button.html

@@ -7,7 +7,7 @@
 
 <a
   href="{{ $href }}"
-  class="font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
+  class="not-prose font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >

layouts/shortcodes/hextra/hero-headline.html

@@ -2,7 +2,7 @@
 
 
 <h1
-  class="text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
+  class="not-prose text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}

layouts/shortcodes/hextra/hero-subtitle.html

@@ -2,7 +2,7 @@
 
 
 <p
-  class="text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
+  class="not-prose text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}

package-lock.json

@@ -7,7 +7,7 @@
       "devDependencies": {
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "autoprefixer": "^10.4.14",
-        "postcss": "^8.4.23",
+        "postcss": "^8.4.31",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
         "prettier": "^2.8.8",
@@ -958,9 +958,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.27",
+      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {

package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "prettier": "^2.8.8",

tailwind.config.js

@@ -3,10 +3,10 @@ const colors = require('tailwindcss/colors')
 const makePrimaryColor =
   l =>
     ({ opacityValue }) => {
-      if (opacityValue === undefined) {
+      return (
-        return `hsl(var(--primary-hue) 100% ${l}%)`
+        `hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
-      }
+        (opacityValue ? ` / ${opacityValue})` : ')')
-      return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})`
+      )
     }
 
 /** @type {import('tailwindcss').Config} */