fix: resolve padding issue for code blocks with filenames but without lang highlight (#297 )

* fix: resolve padding issue for code blocks with filenames but without lang highlighting * chore: run `npm run build:css` * chore: update `node_modules/caniuse-lite`
chore(i18n): add Persian translation (#294 )
2025-07-01 02:47:18 -04:00 · 2024-02-17 23:06:46 +00:00 · 2024-02-17 18:51:40 +00:00 · 2024-02-13 09:29:35 +00:00 · 2024-02-06 22:04:37 +00:00 · 2024-02-03 09:09:16 -05:00
88 changed files with 1807 additions and 626 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.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": {}
  },
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.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 -->
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.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 -->
--- a/README.md
+++ b/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.
- **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.
+- **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.
+- **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, 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
--- a/assets/css/compiled/main.css
+++ b/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;
 }
@ -625,6 +634,9 @@ video {
 .ml-4 {
  margin-left: 1rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
  margin-right: 0.5rem;
 }
@ -697,6 +709,12 @@ video {
 .h-2 {
  height: 0.5rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
  height: 1rem;
 }
@ -833,6 +851,9 @@ video {
 .flex-col {
  flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-start {
  align-items: flex-start;
 }
@ -863,6 +884,17 @@ video {
 .gap-4 {
  gap: 1rem;
 }
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
 .overflow-auto {
  overflow: auto;
 }
@ -941,6 +973,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 +992,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 +1016,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 +1165,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;
 }
@ -1147,6 +1183,9 @@ video {
 .align-text-bottom {
  vertical-align: text-bottom;
 }
+.align-\[-2\.5px\] {
+  vertical-align: -2.5px;
+}
 .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@ -1251,7 +1290,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 +1409,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;
 }
@ -1389,13 +1428,13 @@ video {
  -webkit-hyphens: auto;
          hyphens: auto;
 }
-.\[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 +1442,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 +1459,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) {
-  border-color: hsl(var(--primary-hue) 100% 94% / 0.1);
+:is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  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 +1484,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 +1496,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 +1508,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 +1520,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 {
-  color: currentColor;
-  text-decoration-line: none;
-}
-.content blockquote {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 1.5rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
@ -1511,28 +1546,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 +1577,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)) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
+  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)) {
-    border-color: hsl(var(--primary-hue) 100% 94% / 0.4);
+  :is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
+    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 +1607,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 +1649,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 +1663,51 @@ 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 {
-  margin: 0px;
-  list-style-type: none;
+/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
+     inside the list item (li) of any parent ul or ol. 
+     The rule sets the top margin of the selected list to zero. */
+.content :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 0px;
 }
-.content .not-prose ul li, .content .not-prose ol li {
-  margin: 0px;
-}
-.content kbd {
+.content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
  overflow-wrap: break-word;
  border-radius: 0.375rem;
  border-width: 1px;
@ -1687,29 +1721,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 {
-  margin: 0px;
-  border-radius: 0px;
-}
-.content figure figcaption {
+.content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption {
  margin-top: 0.5rem;
  display: block;
  text-align: center;
@ -1717,7 +1747,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 +1796,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;
 }
@ -1818,6 +1804,7 @@ article details > summary::before {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -4px;
+    padding: 0 0.6em;
  }
 /* Code syntax highlight */
 /* Light theme for syntax highlight */
@ -2151,7 +2138,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 +2148,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 +2172,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,10 +2182,14 @@ 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));
 }
+.code-block .filename + pre:not(.lntable pre) {
+    /* Override padding for code blocks with filename but no highlight */
+    padding-top: 3rem;
+  }
 .code-block pre:not(.lntable pre) {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
@ -2224,7 +2215,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 +2224,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 +2239,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 +2331,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 +2424,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 +2454,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 +2544,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 +2577,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 +2667,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 +2680,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 +2704,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 +2741,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);
@ -2752,6 +2763,9 @@ body {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.group:hover .group-hover\:underline {
+  text-decoration-line: underline;
+}
 .group\/code:hover .group-hover\/code\:opacity-100 {
  opacity: 1;
 }
@ -2772,11 +2786,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 +2932,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 +2949,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 +3012,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 +3036,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 +3064,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 +3125,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 +3178,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 +3214,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 +3249,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 +3262,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 +3282,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) {
--- a/assets/css/components/code-copy.css
+++ b/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;
+  }
+}
--- a/assets/css/components/sidebar.css
+++ b/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;
--- a/assets/css/highlight.css
+++ b/assets/css/highlight.css
@ -12,6 +12,11 @@
  .filename {
    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
  }
+
+  .filename + pre:not(.lntable pre) {
+    /* Override padding for code blocks with filename but no highlight */
+    @apply pt-12;
+  }
 }

 .code-block pre:not(.lntable pre) {
@ -32,7 +37,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 {
--- a/assets/css/styles.css
+++ b/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%;
 }
--- a/assets/css/typography.css
+++ b/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 {
-    @apply text-current no-underline;
-  }
-  blockquote {
+  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @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,34 @@
      @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 {
-    @apply m-0 list-none;
-    li {
-      @apply m-0;
-    }
+  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
+     inside the list item (li) of any parent ul or ol. 
+     The rule sets the top margin of the selected list to zero. */
+  :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-0;
  }
-  kbd {
+  :where(kbd):not(:where([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;
  }
-  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 {
-    @apply m-0 rounded-none;
-  }
-  figure {
+  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
    figcaption {
      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
    }
@ -112,35 +106,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;
@ -150,5 +115,6 @@ article details > summary {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -4px;
+    padding: 0 0.6em;
  }
 }
--- a/assets/js/back-to-top.js
+++ b/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",
+  });
+}
--- a/assets/js/code-copy.js
+++ b/assets/js/code-copy.js
@ -1,30 +1,66 @@
-document.querySelectorAll('.code-copy-btn').forEach(function (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');
-    }
+// Copy button for code blocks
+
+document.addEventListener('DOMContentLoaded', function () {
+  const getCopyIcon = () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.innerHTML = `
+      <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" />
+    `;
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    return svg;
+  }
+
+  const getSuccessIcon = () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.innerHTML = `
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+    `;
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    return svg;
+  }
+
+  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();
+      // Get the code target
+      const target = button.parentElement.previousElementSibling;
+      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) {
+        let code = codeElement.innerText;
+        // Replace double newlines with single newlines in the innerText
+        // as each line inside <span> has trailing newline '\n'
+        if ("lang" in codeElement.dataset) {
+          code = code.replace(/\n\n/g, '\n');
+        }
+        navigator.clipboard.writeText(code).then(function () {
+          button.classList.add('copied');
+          setTimeout(function () {
+            button.classList.remove('copied');
+          }, 1000);
+        }).catch(function (err) {
+          console.error('Failed to copy text: ', err);
+        });
+      } else {
+        console.error('Target element not found');
+      }
+    });
  });
 });
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@ -1,19 +1,49 @@
 // Hamburger menu for mobile navigation

-const menu = document.querySelector('.hamburger-menu');
-
-menu.addEventListener('click', (e) => {
-  e.preventDefault();
+document.addEventListener('DOMContentLoaded', function () {
+  const menu = document.querySelector('.hamburger-menu');
+  const overlay = document.querySelector('.mobile-menu-overlay');
  const sidebarContainer = document.querySelector('.sidebar-container');

-  // Toggle the hamburger menu
-  menu.querySelector('svg').classList.toggle('open');
+  // Initialize the overlay
+  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
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
-  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+  function toggleMenu() {
+    // Toggle the hamburger menu
+    menu.querySelector('svg').classList.toggle('open');

-  // 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');
+    // When the menu is open, we want to show the navigation sidebar
+    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
+    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');
+  });
 });
--- a/assets/js/theme.js
+++ b/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
-if (
-  localStorage.getItem("color-theme") === "dark" ||
-  (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-) {
-  themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
-} else {
-  themeToggleButtons.forEach((el) => el.dataset.theme = "light");
-}
+  // Change the icons of the buttons based on previous settings or system theme
+  if (
+    localStorage.getItem("color-theme") === "dark" ||
+    (!("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 = "light");
+  }

-themeToggleButtons.forEach((el) => {
-  el.addEventListener("click", function () {
-    if (localStorage.getItem("color-theme")) {
-      if (localStorage.getItem("color-theme") === "light") {
-        document.documentElement.classList.add("dark");
-        document.documentElement.style.colorScheme = "dark";
-        localStorage.setItem("color-theme", "dark");
+  // Add click event handler to the buttons
+  themeToggleButtons.forEach((el) => {
+    el.addEventListener("click", function () {
+      if (localStorage.getItem("color-theme")) {
+        if (localStorage.getItem("color-theme") === "light") {
+          setDarkTheme();
+          localStorage.setItem("color-theme", "dark");
+        } else {
+          setLightTheme();
+          localStorage.setItem("color-theme", "light");
+        }
      } else {
-        document.documentElement.classList.remove("dark");
-        document.documentElement.style.colorScheme = "light";
-        localStorage.setItem("color-theme", "light");
+        if (document.documentElement.classList.contains("dark")) {
+          setLightTheme();
+          localStorage.setItem("color-theme", "light");
+        } else {
+          setDarkTheme();
+          localStorage.setItem("color-theme", "dark");
+        }
      }
-    } else {
-      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";
+      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"
+      );
+    }
+  });
+})();
--- a/assets/json/search-data.json
+++ b/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 -}}

--- a/data/icons.yaml
+++ b/data/icons.yaml
@ -9,6 +9,16 @@ github: >
    <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
  </svg>

+codeberg: >
+  <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/>
+  </svg>
+
+gitlab: >
+  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="m23.6 9.593l-.033-.086L20.3.98a.851.851 0 0 0-.336-.405a.875.875 0 0 0-1 .054a.875.875 0 0 0-.29.44L16.47 7.818H7.537L5.333 1.07a.857.857 0 0 0-.29-.441a.875.875 0 0 0-1-.054a.859.859 0 0 0-.336.405L.433 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009l.03.021l4.977 3.727l2.462 1.863l1.5 1.132a1.009 1.009 0 0 0 1.22 0l1.499-1.132l2.461-1.863l5.006-3.75l.013-.01a6.068 6.068 0 0 0 2.01-7.002"/>
+  </svg>
+  
 hextra: <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="m 105.50024,22.224647 c -9.59169,-5.537563 -21.40871,-5.537563 -31.000093,0 L 39.054693,42.689119 C 29.463353,48.226675 23.55484,58.460531 23.55484,69.535642 v 40.928918 c 0,11.07542 5.908513,21.3092 15.499853,26.84652 l 35.445453,20.46446 c 9.591313,5.53732 21.408404,5.53732 31.000094,0 l 35.44507,-20.46446 c 9.59131,-5.53732 15.49985,-15.7711 15.49985,-26.84652 V 69.535642 c 0,-11.075111 -5.90854,-21.308967 -15.49985,-26.846523 z M 34.112797,85.737639 c -1.384445,2.397827 -1.384445,5.352099 0,7.749927 l 24.781554,42.922974 c 1.38437,2.39783 3.942853,3.87496 6.711592,3.87496 h 49.563107 c 2.76905,0 5.3273,-1.47713 6.71144,-3.87496 l 24.78194,-42.922974 c 1.38414,-2.397828 1.38414,-5.3521 0,-7.749927 L 121.88049,42.814746 c -1.38414,-2.397828 -3.94239,-3.874964 -6.71144,-3.874964 H 65.605944 c -2.768739,0 -5.327223,1.477059 -6.711592,3.874964 z" style="stroke-width:0.774993" /></svg>

 hugo: <svg viewBox="0 0 370 391" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m207.5 22.4 114.4 66.6c13.5 7.9 21.9 22.4 21.9 38v136.4c0 17.3-9.3 33.3-24.5 41.8l-113.5 63.9a49.06 49.06 0 0 1 -48.5-.2l-104.5-60.1c-16.4-9.5-26.6-27-26.6-45.9v-129.5c0-19.1 9.9-36.8 26.1-46.8l102.8-63.5c16-9.9 36.2-10.1 52.4-.7z" fill="#ff4088" stroke="#c9177e" stroke-width="27" /><path d="m105.6 298.2v-207.2h43.4v75.5h71.9v-75.5h43.5v207.2h-43.5v-90.6h-71.9v90.6z" fill="#fff" /></g></svg>
@ -270,3 +280,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>
--- a/exampleSite/content/_index.md
+++ b/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
--- a/exampleSite/content/_index.zh-cn.md
+++ b/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 >}}
--- a/exampleSite/content/about/index.ja.md
+++ b/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/)
--- a/exampleSite/content/blog/_index.md
+++ b/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>
--- a/exampleSite/content/blog/markdown.md
+++ b/exampleSite/content/blog/markdown.md
@ -2,8 +2,16 @@
 title: Markdown Syntax Guide
 date: 2020-01-01
 authors:
-  - name: John Doe
-    link: https://example.com/johndoe
+  - name: imfing
+    link: https://github.com/imfing
+    image: https://github.com/imfing.png
+  - name: Octocat
+    link: https://github.com/octocat
+    image: https://github.com/octocat.png
+tags:
+  - Markdown
+  - Example
+  - Guide
 excludeSearch: true
 ---

--- a/exampleSite/content/docs/_index.ja.md
+++ b/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/
--- a/exampleSite/content/docs/_index.md
+++ b/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.
- **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.
+- **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.
 - **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?
--- a/exampleSite/content/docs/advanced/comments.zh-cn.md
+++ b/exampleSite/content/docs/advanced/comments.zh-cn.md
@ -0,0 +1,39 @@
+---
+title: 评论系统
+linkTitle: Comments
+---
+
+Hextra 支持在你的网站中添加评论系统。
+目前已经支持 [giscus](https://giscus.app/).
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) 是由 [GitHub Discussions](https://docs.github.com/en/discussions)驱动的评论系统。Giscus 免费并且开源。
+
+如需启用 Giscus, 你需要在配置文件中添加以下内容：
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <repository>
+      repoId: <repository ID>
+      category: <category>
+      categoryId: <category ID>
+```
+
+Giscus 配置可以参考 [giscus.app](https://giscus.app/)，还可以在那里找到更多详细信息。
+
+可以在 front matter 中启用或禁用特定页面的评论：
+
+```yaml {filename="content/docs/about.md"}
+---
+title: About
+comments: true
+---
+```
--- a/exampleSite/content/docs/advanced/customization.md
+++ b/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%;
 }
 ```

@ -46,8 +47,8 @@ The primary color of the theme can be customized by setting the `--primary-hue`

 List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:

-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```

 To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
@ -69,4 +70,4 @@ For further information, refer to the [Hugo Templates](https://gohugo.io/templat

 ## Further Customization

-Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!
+Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!
--- a/exampleSite/content/docs/advanced/customization.zh-cn.md
+++ b/exampleSite/content/docs/advanced/customization.zh-cn.md
@ -30,10 +30,10 @@ Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题。

 ### 代码高亮

-代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。 可以使用以下命令生成样式表：
+代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：

-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```

 可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式。
@ -55,4 +55,4 @@ layouts/partials/custom/head-end.html

 ## 进一步定制 Hextra

-没有找到你想修改的东西？在 GitHub 上[创建 Issues](https://github.com/imfing/hextra/issues) 或为 Hextra 贡献你的智慧！
+没有找到你想修改的内容？在 GitHub 上[创建 Discussion](https://github.com/imfing/hextra/discussions) 或为 Hextra 贡献你的智慧！
--- a/exampleSite/content/docs/getting-started.ja.md
+++ b/exampleSite/content/docs/getting-started.ja.md
@ -1,6 +0,0 @@
---
-title: はじめに
-weight: 1
---
-
-プロジェクトの紹介。
--- a/exampleSite/content/docs/getting-started.md
+++ b/exampleSite/content/docs/getting-started.md
@ -9,43 +9,55 @@ 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.
-Please refer to Hugo's [official installation guide](https://gohugo.io/installation/) for more details.
+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.

-[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
-$ hugo new site my-site --format=yaml
+```shell
+hugo new site my-site --format=yaml
 ```

 ### Configure Hextra theme via module

 ```shell
 # initialize hugo module
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site

 # add Hextra theme
-$ hugo mod get github.com/imfing/hextra
+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,38 +67,119 @@ 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
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```

 ### Preview the site locally

 ```shell
-$ hugo server --buildDrafts --disableFastRender
+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
+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

--- a/exampleSite/content/docs/getting-started.zh-cn.md
+++ b/exampleSite/content/docs/getting-started.zh-cn.md
@ -26,23 +26,21 @@ prev: /docs

 [Hugo 模块](https://gohugo.io/hugo-modules/)是管理 Hugo 主题的推荐方式。要使用 Hugo 模块，我们需要安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/)。

-{{% steps %}}
-
 ### 初始化 Hugo 站点

-```bash
-$ hugo new site my-site --format=yaml
+```shell
+hugo new site my-site --format=yaml
 ```

-### 通过模块配置 Hextra 主题
+### 通过 Hugo Module 安装

 ```shell
 # 初始化 Hugo 模块
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site

 # 添加 Hextra 
-$ hugo mod get github.com/imfing/hextra
+hugo mod get github.com/imfing/hextra
 ```

 编辑 `hugo.yaml` 以启用 Hextra：
@ -53,31 +51,92 @@ module:
    - path: github.com/imfing/hextra
 ```

+### 通过 Git Submodule 安装
+
+#### 先决条件
+
+在我们开始之前，你必须先确保以下软件已经安装：
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 步骤
+
+{{% steps %}}
+
+### 初始化 Hugo 站点
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### 将 Hextra 添加为 Git Submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+添加以下内容来配置 `hugo.yaml` 以使用 Hextra：
+
+```yaml
+theme: hextra
+```
+
 ### 创建你的第一个内容页

 让我们为主页和文档页面创建一个新的内容页面：

 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```

 ### 在本地预览站点

 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```

 瞧！你现在可以在 `http://localhost:1313/` 看到你的新站点。

 {{% /steps %}}

+
+
+
+使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 进行部署时，必须确保在运行 `hugo` 命令之前执行以下命令。
+
+```shell
+git submodule update --init
+```
+
+如果不运行此命令，theme 中将不会存在 Hextra 文件，进而导致构建失败。
+
+
+{{% details title="如何更新主题？" %}}
+
+如需把项目中所有的 Hugo Modules 都升级到最新，在终端中运行此命令：
+
+```shell
+hugo mod get -u
+```
+
+如需把 Hextra 升级到[最新的发行版本](https://github.com/imfing/hextra/releases), 在终端中运行此命令：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+如果你需要获得更多信息，参见 [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules).
+
+{{% /details %}}
+
 ## 接下来

-你可以探索以下部分来添加更多内容：
+探索这些文档以便添加更多内容：

 {{< cards >}}
-  {{< card link="../guide/organize-files" title="目录结构" icon="document-duplicate" >}}
-  {{< card link="../guide/configuration" title="配置文件指南" icon="adjustments" >}}
+  {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
 {{< /cards >}}
--- a/exampleSite/content/docs/guide/_index.md
+++ b/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 >}}
--- a/exampleSite/content/docs/guide/configuration.md
+++ b/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-->

@ -90,6 +90,16 @@ params:
 For the main sidebar, it is automatically generated from the structure of the content directory.
 See the [Organize Files](/docs/guide/organize-files) page for more details.

+To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+sidebar:
+  exclude: true
+---
+```
+
 ### Extra Links

 Sidebar extra links are defined under the `menu.sidebar` section in the config file:
@ -129,17 +139,17 @@ To configure the page edit link, we can set the `params.editURL.base` parameter
 ```yaml {filename="hugo.yaml"}
 params:
  editURL:
+    enable: true
    base: "https://github.com/your-username/your-repo/edit/main"
 ```

-The edit links will be automatically generated for each page.
-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:
+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 `editURL` parameter in the front matter of the page:

 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
 title: Configuration
-params:
-  editURL: "https://example.com/edit/this/page"
+editURL: "https://example.com/edit/this/page"
 ---
 ```

@ -181,6 +191,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 +223,49 @@ params:
    width: wide
 ```

-There are three available options: `full`, `wide`, and `normal`.
-By default, the page width is set to `normal`.
+There are three available options: `full`, `wide`, and `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
 ```
--- a/exampleSite/content/docs/guide/configuration.zh-cn.md
+++ b/exampleSite/content/docs/guide/configuration.zh-cn.md
@ -38,7 +38,7 @@ menu:
        icon: github
 ```

-有几种不同类型的菜单项: 
+有几种不同类型的菜单项：

 1. Link to a page in the site with `pageRef`
    ```yaml
@ -114,12 +114,126 @@ params:
 ```

 将为每个页面自动生成编辑链接。
-如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `params.editURL`：
+如需为特定页面设置编辑链接，可以在页面的 `front matter` 中设置 `editURL`：

 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
 title: Configuration
-params:
-  editURL: "https://example.com/edit/this/page"
+editURL: "https://example.com/edit/this/page"
 ---
 ```
+## Footer
+
+### 版权声明
+
+如需修改网站页脚中显示的版权文本，您需要创建一个名为“i18n/en.yaml”的文件。
+在此文件中，填写新的版权文本，像这样：
+
+```yaml {filename="i18n/en.yaml"}
+copyright: "© 2023 YOUR TEXT HERE"
+```
+你可以在 GitHub 存储库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。另外，你可以在版权文本中使用 Markdown 格式。
+
+## 其他
+
+### Favicon
+
+如需自定义 [favicon](https://en.wikipedia.org/wiki/Favicon)，请将图标文件放在 `static` 文件夹下以覆盖 [主题中的默认 favicon](https://github.com/imfing/hextra/tree/main/static)：
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/file name="android-chrome-192x192.png" >}}
+    {{< filetree/file name="android-chrome-512x512.png" >}}
+    {{< filetree/file name="apple-touch-icon.png" >}}
+    {{< filetree/file name="favicon-16x16.png" >}}
+    {{< filetree/file name="favicon-32x32.png" >}}
+    {{< filetree/file name="favicon-dark.svg" >}}
+    {{< filetree/file name="favicon.ico" >}}
+    {{< filetree/file name="favicon.svg" >}}
+    {{< filetree/file name="site.webmanifest" >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+在您的项目中包含 `favicon.ico` 和 `favicon.svg` 文件，以确保网站的网站图标正确显示。
+
+虽然 `favicon.ico` 通常适用于较旧的浏览器，但 `favicon.svg` 受到现代浏览器的支持，所以更现代的做法是添加 `favicon-dark.svg` 以便在黑暗模式下提供较好的体验体验。
+
+请随意使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具来生成这些图标。
+
+### 颜色主题配置
+
+使用`theme`设置来配置默认主题模式和切换按钮，允许访问者在浅色或深色模式之间切换。
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+`theme.default` 的可选项：
+
+- `light` - 仅使用浅色模式
+- `dark` - 仅使用神色模式
+- `system` - 跟随系统
+
+`theme.displayToggle` 控制显示用于更改主题的切换按钮。
+当设置为“true”时，访问者可以在浅色或深色模式之间切换，覆盖默认设置。
+
+### 页宽
+
+页面的宽度可以通过配置文件中的`params.page.width`参数来调整：
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+有三个可选项：`full`, `wide`, and `normal`. 默认的页宽模式是 `normal`.
+
+同样的，导航栏和 `footer` 的宽度也可通过 `params.navbar.width` 和 `params.footer.width` 调整。
+
+### 搜索
+
+默认情况下启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供全文搜索。
+要自定义搜索索引，请在配置文件中设置 `params.search.flexsearch.index` ：
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+`flexsearch.index` 的可选项：
+
+- `content` - 全内容搜索
+- `summary` - 概述 [Hugo Content Summaries](https://gohugo.io/content-management/summaries/)
+- `heading` - 一级和二级标题
+- `title` - 仅搜索标题
+
+要从搜索索引中排除页面，更改 front matter 中的 `excludeSearch: true`:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+excludeSearch: true
+---
+```
+
+### Google Analytics
+
+要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，设置 `services.googleAnalytics.ID`:
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```
--- a/exampleSite/content/docs/guide/deploy-site.md
+++ b/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)
--- a/exampleSite/content/docs/guide/diagrams.zh-cn.md
+++ b/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
--- a/exampleSite/content/docs/guide/organize-files.md
+++ b/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

--- a/exampleSite/content/docs/guide/shortcodes/_index.ja.md
+++ b/exampleSite/content/docs/guide/shortcodes/_index.ja.md
@ -1,6 +0,0 @@
---
-title: コンポーネント
-weight: 2
---
-
-Hextraは、[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/)に基づいたさまざまな組み込みコンポーネントを提供しています。
--- a/exampleSite/content/docs/guide/shortcodes/details.md
+++ b/exampleSite/content/docs/guide/shortcodes/details.md
@ -24,7 +24,7 @@ This will be hidden by default.

 ## Usage

-````
+````markdown
 {{%/* details title="Details" */%}}

 This is the content of the details.
@ -34,7 +34,7 @@ Markdown is **supported**.
 {{%/* /details */%}}
 ````

-````
+````markdown
 {{%/* details title="Click me to reveal" closed="true" */%}}

 This will be hidden by default.
--- a/exampleSite/content/docs/guide/shortcodes/icon.md
+++ b/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.
--- a/exampleSite/content/docs/guide/shortcodes/tabs.md
+++ b/exampleSite/content/docs/guide/shortcodes/tabs.md
@ -1,6 +1,6 @@
 ---
 title: Tabs
-next: /docs/advanced/
+next: /docs/guide/deploy-site
 ---

 ## Example
--- a/exampleSite/content/docs/guide/syntax-highlighting.md
+++ b/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).
--- a/exampleSite/content/showcase/index.md
+++ b/exampleSite/content/showcase/index.md
@ -12,7 +12,9 @@ Open source projects powered by Hextra.
 </p>

 {{< cards >}}
+  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
  {{< 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="/" 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;" >}}
+  {{< 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;" >}}
+  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}
--- a/exampleSite/content/showcase/index.zh-cn.md
+++ b/exampleSite/content/showcase/index.zh-cn.md
@ -0,0 +1,19 @@
+---
+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://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< 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 >}}
--- a/exampleSite/hugo.yaml
+++ b/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
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -66,13 +66,14 @@
      "[-webkit-touch-callout:none]",
      "[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",
      "active:opacity-50",
      "active:shadow-gray-200",
      "active:shadow-sm",
+      "align-[-2.5px]",
      "align-text-bottom",
      "appearance-none",
      "aspect-auto",
@ -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,12 +234,14 @@
      "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",
+      "flex-wrap",
      "focus:bg-white",
      "focus:outline-none",
      "focus:ring-4",
@ -249,6 +259,8 @@
      "gap-1",
      "gap-2",
      "gap-4",
+      "gap-x-1.5",
+      "gap-y-2",
      "grid",
      "grid-cols-1",
      "group",
@ -257,6 +269,7 @@
      "group-data-[theme=dark]:hidden",
      "group-data-[theme=light]:hidden",
      "group-hover/code:opacity-100",
+      "group-hover:underline",
      "group-open:before:rotate-90",
      "group/code",
      "group/copybtn",
@ -264,6 +277,7 @@
      "h-0",
      "h-16",
      "h-2",
+      "h-3.5",
      "h-4",
      "h-5",
      "h-7",
@ -289,6 +303,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 +319,7 @@
      "inline",
      "inline-block",
      "inline-flex",
+      "inset-0",
      "inset-x-0",
      "inset-y-0",
      "items-center",
@ -394,7 +410,10 @@
      "min-w-full",
      "ml-1",
      "ml-4",
+      "mobile-menu-overlay",
+      "mr-1",
      "mr-2",
+      "mt-1",
      "mt-1.5",
      "mt-12",
      "mt-16",
@ -447,7 +466,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 +596,7 @@
      "w-screen",
      "whitespace-nowrap",
      "xl:block",
+      "z-10",
      "z-20",
      "z-[-1]"
    ],
--- a/exampleSite/i18n/zh-cn.yaml
+++ b/exampleSite/i18n/zh-cn.yaml
@ -0,0 +1,6 @@
+documentation: "文档"
+showcase: "项目展示"
+blog: "博客"
+about: "关于"
+more: "更多"
+hugoDocs: "Hugo 文档 ↗"
--- a/i18n/cs.yaml
+++ b/i18n/cs.yaml
@ -0,0 +1,14 @@
+backToTop: "Zpět nahoru"
+changeLanguage: "Změnit jazyk"
+changeTheme: "Změnit vzhled"
+copyCode: "Zkopírovat kód"
+copyright: "© 2023 Hextra Project."
+dark: "Tmavý"
+editThisPage: "Upravit tuto stránku na GitHubu →"
+lastUpdated: "Naposledy změněno"
+light: "Světlý"
+noResultsFound: "Nebylo nic nalezeno."
+onThisPage: "Na této stránce"
+poweredBy: "Powered by Hextra"
+readMore: "Přečíst víc →"
+searchPlaceholder: "Hledat..."
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -0,0 +1,14 @@
+backToTop: "Nach oben"
+changeLanguage: "Sprache ändern"
+changeTheme: "Darstellung ändern"
+copyCode: "Code kopieren"
+copyright: "© 2024 Hextra Project."
+dark: "Dunkel"
+editThisPage: "Diese Seite auf Github bearbeiten →"
+lastUpdated: "Zuletzt aktualisiert am"
+light: "Hell"
+noResultsFound: "Keine Ergebnisse gefunden."
+onThisPage: "Auf dieser Seite"
+poweredBy: "Unterstützt durch Hextra"
+readMore: "Mehr lesen →"
+searchPlaceholder: "Suchen..."
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,5 +1,14 @@
-onThisPage: "On this page"
+backToTop: "Scroll to top"
+changeLanguage: "Change language"
+changeTheme: "Change theme"
+copyCode: "Copy code"
+copyright: "© 2023 Hextra Project."
+dark: "Dark"
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
-
-copyright: "© 2023 Hextra Project."
+light: "Light"
+noResultsFound: "No results found."
+onThisPage: "On this page"
+poweredBy: "Powered by Hextra"
+readMore: "Read more →"
+searchPlaceholder: "Search..."
--- a/i18n/es.yaml
+++ b/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..."
--- a/i18n/fa.yaml
+++ b/i18n/fa.yaml
@ -0,0 +1,14 @@
+backToTop: "به بالا بروید"
+changeLanguage: "تغییر زبان"
+changeTheme: "تغییر تم"
+copyCode: "کپی کد"
+copyright: "© ۲۰۲۴ پروژه هگزترا."
+dark: "تیره"
+editThisPage: "ویرایش این صفحه در گیت‌هاب ←"
+lastUpdated: "آخرین به‌روزرسانی در"
+light: "روشن"
+noResultsFound: "هیچ نتیجه‌ای پیدا نشد."
+onThisPage: "در این صفحه"
+poweredBy: "طراحی شده توسط هگزترا"
+readMore: "ادامه مطلب ←"
+searchPlaceholder: "جستجو..."
--- a/i18n/fr.yaml
+++ b/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..."
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -1,16 +1,13 @@
-# Navbar
-documentation: "ドキュメンテーション"
-blog: "ブログ"
-about: "このサイトについて"
-
-more: "もっと"
-hugoDocs: "Hugoドキュメント ↗"
-
-searchPlaceholder: "検索ドキュメント..."
-noResultsFound: "検索結果が見つかりませんでした"
-
-onThisPage: "このページでは"
-editThisPage: "このページをGitHubで編集する →"
+backToTop: "トップにスクロール"
+changeLanguage: "言語を変更"
+changeTheme: "テーマを変更"
+copyright: "© 2023 Hextra プロジェクト。"
+dark: "ダーク"
+editThisPage: "このページをGitHubで編集 →"
 lastUpdated: "最終更新日"
-
-copyright: "© 2023 Hextra Project."
+light: "ライト"
+noResultsFound: "結果が見つかりませんでした。"
+onThisPage: "このページの内容"
+poweredBy: "提供元 Hextra"
+readMore: "もっと読む →"
+searchPlaceholder: "検索..."
--- a/i18n/ko.yaml
+++ b/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: "검색..."
--- a/i18n/nb.yaml
+++ b/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..."
--- a/i18n/nn.yaml
+++ b/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..."
--- a/i18n/pt.yaml
+++ b/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..."
--- a/i18n/sw.yaml
+++ b/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..."
--- a/i18n/vi.yaml
+++ b/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..."
--- a/i18n/zh-cn.yaml
+++ b/i18n/zh-cn.yaml
@ -1,15 +1,13 @@
-documentation: "文档"
-blog: "博客"
-about: "关于"
-
-more: "更多"
-hugoDocs: "Hugo 文档 ↗"
-
-searchPlaceholder: "搜索文档..."
-noResultsFound: "无结果"
-
-onThisPage: "此页上"
+backToTop: "返回顶部"
+changeLanguage: "切换语言"
+changeTheme: "切换主题"
+copyright: "© 2023 Hextra Project."
+dark: "深色"
 editThisPage: "在 GitHub 上编辑此页 →"
 lastUpdated: "最后更新于"
-
-copyright: "© 2023 Hextra Project."
+light: "浅色"
+noResultsFound: "无结果"
+onThisPage: "此页上"
+poweredBy: "由 Hextra 驱动"
+readMore: "更多 →"
+searchPlaceholder: "搜索文档..."
--- a/i18n/zh-tw.yaml
+++ b/i18n/zh-tw.yaml
@ -1,15 +1,13 @@
-documentation: "文檔"
-blog: "博客"
-about: "關於"
-
-more: "更多"
-hugoDocs: "Hugo 文檔 ↗"
-
-searchPlaceholder: "搜索文檔..."
-noResultsFound: "無結果"
-
-onThisPage: "此頁上"
+backToTop: "返回頂部"
+changeLanguage: "切換語言"
+changeTheme: "切換主題"
+copyright: "© 2023 Hextra Project."
+dark: "深色"
 editThisPage: "在 GitHub 上編輯此頁 →"
 lastUpdated: "最後更新於"
-
-copyright: "© 2023 Hextra Project."
+light: "淺色"
+noResultsFound: "無結果"
+onThisPage: "此頁上"
+poweredBy: "由 Hextra 驅動"
+readMore: "更多 →"
+searchPlaceholder: "搜尋文檔..."
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@ -1,6 +1,7 @@
 {{- $class := .Attributes.class | default "" -}}
 {{- $filename := .Attributes.filename | default "" -}}
 {{- $lang := .Attributes.lang | default .Type -}}
+{{- $copyCode := (T "copyCode") | default "Copy code" -}}


 <div class="code-block relative mt-6 first:mt-0 group/code">
@ -8,16 +9,17 @@
    <div class="filename">{{ $filename }}</div>
  {{- end -}}
  {{- if transform.CanHighlight $lang -}}
-    <div id="code-block-{{ .Ordinal }}">
-      {{- highlight .Inner $lang .Options -}}
-    </div>
+    <div>{{- highlight .Inner $lang .Options -}}</div>
  {{- else -}}
-    <pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre>
+    <pre><code>{{ .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 }}">
-      {{ partial "utils/icon.html" (dict "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
-      {{ partial "utils/icon.html" (dict "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
+    <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="{{ $copyCode }}"
+    >
+      <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>
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -1,13 +1,13 @@
 {{- $alt := .PlainText | safeHTML -}}
-{{- $lazyLoading := .Page.Site.Params.enableImagelazyLoading | default true -}}
+{{- $lazyLoading := .Page.Site.Params.enableImageLazyLoading | default true -}}
 {{- $dest := .Destination -}}

-{{- $isRemote := not (urls.Parse $dest).Scheme -}}
+{{- $isLocal := not (urls.Parse $dest).Scheme -}}
 {{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}}
 {{- $startsWithSlash := hasPrefix $dest "/" -}}
 {{- $startsWithRelative := hasPrefix $dest "../" -}}

-{{- if and $dest $isRemote -}}
+{{- if and $dest $isLocal -}}
  {{- if $startsWithSlash -}}
    {{/* Images under static directory */}}
    {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
--- a/layouts/_default/baseof.html
+++ b/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>
--- a/layouts/blog/list.html
+++ b/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">
-              {{- partial "utils/page-description" . }}
-              <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>
+            {{- if site.Params.blog.list.displayTags -}}
+              {{ with .Params.tags }}
+                <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>
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -1,27 +1,40 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" . }}
    <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">
        {{ partial "breadcrumb.html" . }}
        <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
-        {{ with $date := .Date }}
-          <div class="mt-4 mb-16 text-gray-500 text-sm">
-            {{ partial "utils/format-date" $date }}
-            {{- if $.Params.authors }}&nbsp;by&nbsp;{{ end -}}
-            {{- with $.Params.authors -}}
-              {{- range $i, $author := . -}}
-                {{- if $i }},{{ end -}}
-                {{- if $author.link -}}
-                  <a href="{{ $author.link }}" target="_blank" class="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font">{{ $author.name }}</a>
-                {{- else -}}
-                  <span>{{ $author.name }}</span>
-                {{- end -}}
+        <div class="mt-4 mb-16 text-gray-500 text-sm flex items-center flex-wrap gap-y-2">
+          {{- with $date := .Date }}<span class="mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
+          {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
+          {{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
+          {{- with $.Params.authors -}}
+            {{- range $i, $author := . -}}
+              {{- if reflect.IsMap $author -}}
+                {{- if and $i (not $author.image) }}<span class="mr-1">,</span>{{ end -}}
+                <a
+                  {{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
+                  class="group inline-flex items-center text-current gap-x-1.5 mx-1"
+                  {{ with $author.name }}title="{{ . }}"{{ end }}
+                >
+                  {{- with $image := $author.image }}
+                    {{- $isLocal := not (urls.Parse $image).Scheme -}}
+                    {{- $startsWithSlash := hasPrefix $image "/" -}}
+                    {{- if and $isLocal $startsWithSlash }}
+                      {{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
+                    {{ end -}}
+                    <img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="inline-block h-4 w-4 rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
+                  {{ end -}}
+                  <div class="group-hover:underline">{{ $author.name }}</div>
+                </a>
+              {{- else -}}
+                {{- if $i }}<span class="mr-1">,</span>{{ end -}}<span class="mx-1">{{ $author }}</span>
              {{- end -}}
            {{- end -}}
-          </div>
-        {{ end }}
+          {{- end -}}
+        </div>
        <div class="content">
          {{ .Content }}
        </div>
--- a/layouts/partials/components/pager.html
+++ b/layouts/partials/components/pager.html
@ -5,15 +5,23 @@
 {{- $prev := cond $reversePagination .PrevInSection .NextInSection -}}
 {{- $next := cond $reversePagination .NextInSection .PrevInSection -}}

-{{- with .Params.prev -}}
-  {{- with $.Site.GetPage . -}}
-    {{- if $reversePagination }}{{ $next = . }}{{ else }}{{ $prev = . }}{{ end -}}
+{{- if eq .Params.prev false }}
+  {{- if $reversePagination }}{{ $next = false }}{{ else }}{{ $prev = false }}{{ end -}}
+{{ else }}
+  {{- with .Params.prev -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $next = . }}{{ else }}{{ $prev = . }}{{ end -}}
+    {{- end -}}
  {{- end -}}
 {{- end -}}

-{{- with .Params.next -}}
-  {{- with $.Site.GetPage . -}}
-    {{- if $reversePagination }}{{ $prev = . }}{{ else }}{{ $next = . }}{{ end -}}
+{{- if eq .Params.next false }}
+  {{- if $reversePagination }}{{ $prev = false }}{{ else }}{{ $next = false }}{{ end -}}
+{{ else }}
+  {{- with .Params.next -}}
+    {{- with $.Site.GetPage . -}}
+      {{- if $reversePagination }}{{ $prev = . }}{{ else }}{{ $next = . }}{{ end -}}
+    {{- end -}}
  {{- end -}}
 {{- end -}}

--- a/layouts/partials/footer.html
+++ b/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 }}
-    <div class='mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}'>
+  {{- if $enableFooterSwitches -}}
+    <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 -}}
-  <hr class="dark:border-neutral-800" />
+    {{- if or site.IsMultiLingual $displayThemeToggle -}}
+      <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>
@ -31,9 +36,11 @@

 {{- 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
-      {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
+    <span>
+      {{- . | markdownify -}}
+      {{- if strings.Contains . "Hextra" -}}
+        {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="inline-block ml-1 align-[-2.5px]"`) -}}
+      {{- end -}}
    </span>
  </a>
 {{- end -}}
--- a/layouts/partials/google-analytics.html
+++ b/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 -}}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -16,6 +16,12 @@
    {{ end -}}
  </title>
  <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
+  
+  {{ with .Params.canonical }}
+    <link rel="canonical" href="{{ . }}" itemprop="url" />
+  {{ else }}
+    <link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
+  {{ end }}

  {{ partial "opengraph.html" . }}
  {{ template "_internal/schema.html" . -}}
@ -25,7 +31,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 +39,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" . }}
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@ -32,10 +32,18 @@
      {{- if eq .Params.type "search" -}}
        {{- partial "search.html" (dict "params" .Params) -}}
      {{- else -}}
-        {{- $external := strings.HasPrefix .URL "http" -}}
+        {{- $link := .URL -}}
+        {{- $external := strings.HasPrefix $link "http" -}}
+        {{- with .PageRef -}}
+          {{- if hasPrefix . "/" -}}
+            {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+          {{- end -}}
+        {{- end -}}
+
        {{/* Display icon menu item */}}
        {{- if .Params.icon -}}
-          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | relLangURL }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
+          {{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
+          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
            {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
            <span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
          </a>
@ -44,7 +52,7 @@
          {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
          <a
            title="{{ or (T .Identifier) .Name | safeHTML }}"
-            href="{{ .URL | relLangURL }}"
+            href="{{ $link }}"
            {{ if $external }}target="_blank" rel="noreferer"{{ end }}
            class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
          >
--- a/layouts/partials/scripts.html
+++ b/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 -}}
-  {{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
-  {{- if hugo.IsProduction -}}
-    {{- $jsSearch = $jsSearch | minify | fingerprint -}}
+  {{- $searchType := site.Params.search.type | default "flexsearch" -}}
+  {{- if eq $searchType "flexsearch" -}}
+    {{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
+    {{- $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 */}}
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -6,10 +6,16 @@
 {{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}

 {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
-{{- $navPages := union $navRoot.RegularPages $navRoot.Sections -}}
 {{- $pageURL := $context.RelPermalink -}}

+{{/* EXPERIMENTAL */}}
+{{- if .context.Params.sidebar.hide -}}
+  {{- $disableSidebar = true -}}
+  {{- $displayPlaceholder = true -}}
+{{- end -}}

+
+<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 +40,21 @@
    {{ end -}}
  </div>
  {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $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">
-    {{- with site.IsMultiLingual }}
-      {{ partial "language-switch" (dict "context" $context "grow" true) }}
-      {{ partial "theme-toggle" (dict "hideLabel" true) }}
-    {{ else }}
-      <div class="flex grow flex-col">
-        {{ partial "theme-toggle" }}
-      </div>
-    {{ end -}}
-  </div>
+  {{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
+  {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
+
+  {{ if or site.IsMultiLingual $displayThemeToggle }}
+    <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">
+      {{- with site.IsMultiLingual -}}
+        {{- partial "language-switch" (dict "context" $context "grow" true) -}}
+        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
+      {{- else -}}
+        {{- with $displayThemeToggle -}}
+          <div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
+        {{- end -}}
+      {{- end -}}
+    </div>
+  {{- end -}}
 </aside>

 {{- define "sidebar-main" -}}
@ -63,26 +73,33 @@
  {{- $toc := .toc | default false -}}

  {{- with $items := union .context.RegularPages .context.Sections -}}
+    {{- $items = where $items "Params.sidebar.exclude" "!=" true -}}
    {{- if eq $level 0 -}}
      {{- range $items.ByWeight }}
-        {{- $active := eq $pageURL .RelPermalink -}}
-        {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
-        <li class="{{ if $shouldOpen }}open{{ end }}">
-          {{- template "sidebar-item-link" dict "context" . "active" $active "title" .LinkTitle "link" .RelPermalink -}}
-          {{- if and $toc $active -}}
-            {{- template "sidebar-toc" dict "page" . -}}
-          {{- end -}}
-          {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
-        </li>
+        {{- if .Params.sidebar.separator -}}
+          <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
+            <span class="cursor-default">{{ .LinkTitle }}</span>
+          </li>
+        {{- else -}}
+          {{- $active := eq $pageURL .RelPermalink -}}
+          {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
+          <li class="{{ if $shouldOpen }}open{{ end }}">
+            {{- template "sidebar-item-link" dict "context" . "active" $active "title" .LinkTitle "link" .RelPermalink -}}
+            {{- if and $toc $active -}}
+              {{- template "sidebar-toc" dict "page" . -}}
+            {{- end -}}
+            {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
+          </li>
+        {{- end -}}
      {{- 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" . }}
@ -106,7 +123,7 @@
            <li>
              <a
                href="#{{ anchorize .ID }}"
-                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border flex gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
+                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
              >
                {{- .Title -}}
              </a>
@ -148,17 +165,13 @@
    {{- with .context }}
      {{- if or .RegularPages .Sections }}
        <span class="hextra-sidebar-collapsible-button">
-          {{- template "sidebear-collapsible-button" -}}
+          {{- template "sidebar-collapsible-button" -}}
        </span>
      {{- end }}
    {{ end -}}
  </a>
 {{- end -}}

-{{- define "sidebar-separator" -}}
-  <div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
-{{- end -}}
-
-{{- define "sidebear-collapsible-button" -}}
+{{- define "sidebar-collapsible-button" -}}
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
 {{- end -}}
--- a/layouts/partials/theme-toggle.html
+++ b/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>
--- a/layouts/partials/toc.html
+++ b/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,29 @@
      <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 .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
+          {{- with .Params.editURL -}}
+            {{/* if `editURL` is set in the front matter */}}
+            {{- $editURL = . -}}
+          {{- else -}}
+            {{- with .File -}}
+              {{/* `.FileInfo.Meta.SourceRoot` is a Hugo internal field, e.g. `/path/to/repo/content/en/` */}}
+              {{- $sourceDir := replace (strings.TrimPrefix .FileInfo.Meta.BaseDir .FileInfo.Meta.SourceRoot) "\\" "/" -}}
+              {{- $sourceDir = strings.TrimPrefix "/content" $sourceDir -}}
+              {{- $path := replace .Path "\\" "/" -}}
+              {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
+            {{- end -}}
+          {{- 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 +69,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 | htmlUnescape }}
        </a>
      </li>
    {{- end -}}
--- a/layouts/partials/utils/fragments.html
+++ b/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 }}
-  {{ $data = $data | merge (dict "" $page.Plain) }}
-{{ else }}
-  {{ range seq $len }}
-    {{ $i := sub $len . }}
-    {{ $headingKey := index $headingKeys $i }}
-    {{ $headingTitle := index $headingTitles $i }}
+{{ if eq $type "content" }}
+  {{/* Include full content of the page */}}
+  {{ if eq $len 0 }}
+    {{ $data = $data | merge (dict "" ($page.Plain | htmlUnescape | chomp)) }}
+  {{ else }}
+    {{/* Split the raw content from bottom to top */}}
+    {{ range seq $len }}
+      {{ $i := sub $len . }}
+      {{ $headingKey := index $headingKeys $i }}
+      {{ $headingTitle := index $headingTitles $i }}

-    {{ if eq $i 0 }}
-      {{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify)) }}
-    {{ else }}
-      {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
-      {{ $lastPart := index $parts (sub (len $parts) 1) }}
+      {{ if eq $i 0 }}
+        {{ $data = $data | merge (dict $headingKey ($content | $page.RenderString | plainify | htmlUnescape | chomp)) }}
+      {{ else }}
+        {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
+        {{ $lastPart := index $parts (sub (len $parts) 1) }}

-      {{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | plainify)) }}
-      {{ $content = strings.TrimSuffix $lastPart $content }}
-      {{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
+        {{ $data = $data | merge (dict $headingKey ($lastPart | $page.RenderString | plainify | htmlUnescape | chomp)) }}
+        {{ $content = strings.TrimSuffix $lastPart $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 }}
--- a/layouts/shortcodes/callout.html
+++ b/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>
--- a/layouts/shortcodes/card.html
+++ b/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 $external }}
-    target="_blank" rel="noreferrer"
+  {{- if $link -}}
+    href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
  {{- end -}}
 >
  {{- with $image -}}
@ -80,3 +79,4 @@
    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
  {{- end -}}
 </a>
+{{- /* Strip trailing newline. */ -}}
--- a/layouts/shortcodes/cards.html
+++ b/layouts/shortcodes/cards.html
@ -1,5 +1,5 @@
 {{ $rows := .Get "rows" | default "3" }}

 <div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: {{ $rows }};">
-  {{ .Inner }}
+  {{- .Inner -}}
 </div>
--- a/layouts/shortcodes/hextra/feature-card.html
+++ b/layouts/shortcodes/hextra/feature-card.html
@ -5,11 +5,19 @@
 {{- $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
+{{- if hasPrefix $image "/" -}}
+  {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+{{- end -}}
+
+<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 +33,4 @@
  {{- with $image -}}
    <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
  {{- end -}}
-</div>
+</a>
--- a/layouts/shortcodes/hextra/feature-grid.html
+++ b/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 }}
--- a/layouts/shortcodes/hextra/hero-badge.html
+++ b/layouts/shortcodes/hextra/hero-badge.html
@ -6,8 +6,8 @@


 <a
-  href="{{ $href }}"
-  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"
+  {{ if $link }}href="{{ $href }}"{{ end }}
+  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 -}}
 >
--- a/layouts/shortcodes/hextra/hero-button.html
+++ b/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 -}}
 >
--- a/layouts/shortcodes/hextra/hero-headline.html
+++ b/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 }}
--- a/layouts/shortcodes/hextra/hero-subtitle.html
+++ b/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 }}
--- a/layouts/shortcodes/include.html
+++ b/layouts/shortcodes/include.html
@ -0,0 +1,22 @@
+{{- /*
+https://github.com/gohugoio/gohugoioTheme/blob/master/layouts/shortcodes/include.html
+
+Renders the page using the RenderShortcode method on the Page object.
+
+You must call this shortcode using the {{% %}} notation.
+
+@param {string} (postional parameter 0) The path to the page, relative to the content directory.
+@returns template.HTML
+
+@example {{% include "functions/_common/glob-patterns" %}}
+*/}}
+
+{{- with .Get 0 }}
+  {{- with site.GetPage . }}
+    {{- .RenderShortcodes }}
+  {{- else }}
+    {{- errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
+  {{- end }}
+{{- else }}
+  {{- errorf "The %q shortcode requires a positional parameter indicating the path of the file to include. See %s" .Name .Position }}
+{{- end }}
--- a/package-lock.json
+++ b/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",
@ -308,9 +308,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001517",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+      "version": "1.0.30001587",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
      "dev": true,
      "funding": [
        {
@ -958,9 +958,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.27",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
-      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "funding": [
        {
--- a/package.json
+++ b/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",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,10 +3,10 @@ const colors = require('tailwindcss/colors')
 const makePrimaryColor =
  l =>
    ({ opacityValue }) => {
-      if (opacityValue === undefined) {
-        return `hsl(var(--primary-hue) 100% ${l}%)`
-      }
-      return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})`
+      return (
+        `hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
+        (opacityValue ? ` / ${opacityValue})` : ')')
+      )
    }

 /** @type {import('tailwindcss').Config} */
Author	SHA1	Message	Date
Xin	10907cdc25	fix: resolve padding issue for code blocks with filenames but without lang highlight (#297 ) * fix: resolve padding issue for code blocks with filenames but without lang highlighting * chore: run `npm run build:css` * chore: update `node_modules/caniuse-lite`	2024-02-17 23:06:46 +00:00
Goudarz Jafari	6bd2cfbd6b	chore(i18n): add Persian translation (#294 )	2024-02-17 18:51:40 +00:00
vinnciane	2d8f42f4c5	chore: add gitlab icon to icons.yaml (#285 ) Gitlab svg icon with fill to curentColor has been added to the icon set.	2024-02-13 09:29:35 +00:00
Xin	716af59393	fix: clear top margin for nested list recursively (#280 ) * fix: clear top margin for nested list children * chore: run `npm run build:css`	2024-02-06 22:04:37 +00:00
Xin	7191e25958	fix: set top margin to zero for nested list (#276 )	2024-02-03 09:09:16 -05:00
Xin	c630805511	fix: details toggle display issue (#273 ) when more than two lines of summary are provided	2024-02-02 23:37:54 +00:00
mafendi	cb274c8ac5	feat: add canonical to head.html (#269 ) By adding `canonical` parameter to the front matter and specifying the URL, the canonical URL is added. If no canonical URL is needed to be specified, the layout will use the current page address for canonical tag. Example: ``` --- title: "Page Title" description: "Page description" canonical: "https://canonicalurl.com" ---	2024-02-01 22:52:41 +00:00
Achim Krämer	fbe1aac123	i18n: add german translation (#271 ) Signed-off-by: Achim Krämer <39946364+pxlfrk@users.noreply.github.com>	2024-02-01 22:48:22 +00:00
Xin	ff8f2537ca	fix: accurate `editURL` resolution in translated sites (#264 )	2024-01-21 10:33:49 +00:00
David Legrand	728fe21ef1	chore: add canonical URL to head template (#261 )	2024-01-19 21:56:21 +00:00
Julia March	fc964f11a6	showcase: clever cloud documentation (#262 )	2024-01-19 21:34:32 +00:00
Pavel Francírek	09e9f52019	chore(i18n): add Czech translation (#246 ) Czech translation	2024-01-10 14:52:58 +00:00
verbumfeit	f5e4283961	chore: add rel="me" attribute to Mastodon navbar icon (#243 ) * Add rel="me" attribute to Mastodon navbar icon The rel="me" attribute enables verified links on the linked Mastodon profile * Set $rel based on icon name	2024-01-08 18:25:54 +00:00
纳兰音韵	10f1d85ab4	docs: update zh-cn translation (#236 ) * Update customization.zh-cn.md * Translate: Update translation of outdated docs * Fix error	2024-01-08 18:24:38 +00:00
John Hogenmiller	fd9a87a86a	fix(docs): add editURL.enable = true (#245 ) The MR documents the requirement to enable editURL setting. [A prior commit](`04a5c7378a (diff-5311bf4e1519696010f8298385d9de30210dfcd9dee8785f6deba3a084b62eecL26)`) the behavior changed from a default of "disable = false" to a default of "enabled = false".	2024-01-08 18:22:15 +00:00
verbumfeit	1f9e7c8b39	chore: add Codeberg icon (#244 )	2024-01-08 18:19:37 +00:00
longlin li	7772313a53	docs: correct editURL config instruction (#215 ) * docs: fix the documentation error about editURL * docs: fix the documentation error about editURL * Update configuration.md * Update configuration.zh-cn.md --------- Co-authored-by: Xin <xin@imfing.com>	2023-11-21 20:50:29 +00:00
Arnaud Levy	7f0a35ab48	chore: add Osuny to showcase (#218 )	2023-11-21 08:36:06 -05:00
c2tz	35c733b7ee	chore: increase time for "copied" animation duration (#214 ) * align-logo-footer add vertical align 2px for logo footer * modify logo align in footer * noobie things * modify logo & vertical align * build css * revert change in icons.yaml * increase duration for copied button effect * Update hugo_stats.json * Update main.css * Update footer.html * modify timeout to 1000 (1sec)	2023-11-21 00:07:14 +00:00
c2tz	aad68d8afd	chore(style): better footer logo alignment (#212 )	2023-11-18 15:31:30 +00:00
Xin	d58a8b5469	feat: exclude page from sidebar (#209 ) * feat: allow excluding page from sidebar * chore: tidy up * docs: add instruction for excluding a page from sidebar * feat: allow hiding sidebar for pages * chore: add comment	2023-11-17 23:00:05 +00:00
Xin	64ac97b2d6	feat: allow overriding poweredBy in footer (#207 )	2023-11-17 02:03:40 +00:00
Xin	27c976bcc1	feat: display author avatar images in blog post (#204 ) * feat: support displaying author images in blog post * chore: fix typo * chore: run build:css * refactor: support both plain author list * chore: run build:css * chore: add support for local avatar images * chore: update css classes	2023-11-17 01:49:18 +00:00
Xin	d675d3bc7b	feat: support separator in sidebar (#199 ) * feat: support adding pages as separator for sidebar * Update sidebar.html	2023-11-12 14:03:30 +00:00
xiln7	456c96921a	typo: fix typos in sidebar.html (#203 ) @OliverWu515 finds this issue, I help pr this. Hope it helps. The theme helps a lot for our org to build our documents. We found this issue when we use it.	2023-11-12 13:47:20 +00:00
Xin	c2d7ba8ce5	fix: code copy issue for code blocks in shortcode (#201 ) * chore: add translation key for copy code button title * chore: remove id from code block elements * fix: copy the correct code target in code-copy.js * chore: update details.md * chore: remove console.log :) * chore: remove `$` in shell commands * chore: update docs	2023-11-12 01:14:39 +00:00
Xin	8801a04ebe	feat: add `include` shortcode (#198 )	2023-11-11 00:10:32 +00:00
Xin	21b0acdec5	chore: improve cards compatibility with steps (#197 )	2023-11-10 23:45:42 +00:00
Xin	c0a1bc32dd	fix: ensure relref in search index is properly rendered (#196 ) * fix: ensure relref in search index is properly rendered * chore: remove empty whitespace	2023-11-10 22:21:54 +00:00
Xin	4ea18168e3	fix: correctly set editURL in front-matter (#195 )	2023-11-10 22:03:08 +00:00
Xin	23c84e124c	fix: navbar url for multi-lang site (#193 ) * fix: image URL in feature card * fix: use relLangURL of pageRef for navbar entries	2023-11-10 17:45:44 +00:00
Xin	678f0b86ee	fix: htmlUnescape toc title (#190 )	2023-11-05 10:26:00 +00:00
Saurabh Mishra	defc9bc11b	fix(docs): showcase starter template URL (#189 ) * Update URl for Hextra Starter Template * Update index.md --------- Co-authored-by: Saurabh Mishra <saurabh.m@mailfence.com> Co-authored-by: Xin <xin@imfing.com>	2023-11-05 10:09:58 +00:00
Xin	363c8c91ee	fix: scroll bug due to incorrect toggle state (#186 ) * fix: add mobile menu overlay to toggle body scroll * chore: update styles	2023-11-03 20:39:36 +00:00
Xin	088e9f7821	fix(style): add backdrop to code copy button (#185 ) * fix(style): add backdrop to code copy button * chore: run build:css	2023-11-02 22:43:50 +00:00
Tehuel	7be079f504	i18n: update es.yaml (#180 ) * Update es.yaml Update spanish translations, using keys from `zh-cn.yaml`. * Update es.yaml --------- Co-authored-by: Xin <xin@imfing.com>	2023-11-01 20:28:29 +00:00
Xin	10ba5533e5	i18n: refactor translations for docs site (#181 ) * i18n: move some translations under example site * chore: update i18n/ja.yaml * i18n: update zh-tw.yaml * i18n: update fr.yaml * i18n: update pt.yaml * i18n: update ko.yaml * i18n: update nb.yaml and nn.yaml * i18n: update sw.yaml * i18n: update vi.yaml * i18n: update sw.yaml * docs: clean up ja site as it's incomplete	2023-11-01 20:26:54 +00:00
Xin	433beed666	fix: plainify Toc headings (#178 )	2023-10-31 23:14:42 +00:00
Pedro Lima	56a87e559d	i18n: update pt.yaml (#174 ) Update the Portuguese translation.	2023-10-31 09:15:51 +00:00
Xin	9d68f7c71a	docs: minor update deploy site doc	2023-10-31 09:14:46 +00:00
Xin	e3f6069968	chore: support `services.googleAnalytics.ID` (#173 ) * chore: support `services.googleAnalytics.ID` and deprecate `site.googleAnalytics` * chore: remove warning	2023-10-30 23:48:48 +00:00
Bjørn Erik Pedersen	de1286c7fc	i18n: Add language strings for Norwegian bokmål and Norwegian nynorsk (#172 ) The two main written languages in Norway.	2023-10-30 22:42:30 +00:00
c2tz	c0a1d5cb67	chore(i18n): add French translation (#166 ) * Create fr-fr.yaml * Rename fr-fr.yaml to fr.yaml * Modify Showcase showcase ressemble a vitrine mais je pense que laissé showcase n'est pas problématique * Remove comments * Resolve duplicate duplicate Co-authored-by: Xin <fuxin1997@gmail.com> * correction résultats à la place de résulats (classique) Co-authored-by: Xin <fuxin1997@gmail.com> --------- Co-authored-by: Xin <fuxin1997@gmail.com>	2023-10-29 17:57:45 +00:00
Xin	50f1b084ae	chore(icons): add linkedin [skip ci]	2023-10-29 17:55:27 +00:00
Xin	0d629b67b9	docs: add instructions for configuring layouts (#167 )	2023-10-29 17:52:34 +00:00
Xin	7c902b4eb9	chore(style): enhance not-prose elements styling (#163 ) * chore(css): improve not-prose tags styling * fix: typo * chore(style): improve appearance in prose * feat: support icon in callout shortcode * chore: add RSS badge to blog list page * chore: run build:css * chore: run build:css * chore: remove unused CSS * chore: add footer.enable explicitly to config * chore: use `where` pseudo class for more prose elements * chore: run build:css * chore: remove blank space * chore: rebuild css * chore: update figure css	2023-10-29 15:19:31 +00:00
Xin	9744b4d727	feat: option to show tags for blog list (#161 ) * feat: option to show tags for blog list * chore: update hugo_stats.json	2023-10-28 15:56:58 +01:00
Xin	34aecec9d4	docs: fix some spelling mistakes (#159 ) * chore: fix README.md * docs: minor fix the docs site	2023-10-27 23:15:06 +01:00
Xin	15ea31c389	docs: add Deploy Site page (#158 ) * docs: add Deploy Site page * docs: update deploy-site.md	2023-10-27 23:09:38 +01:00
Xin	141e0d8f8c	fix(style): remove sidebar item extra padding and gap (#155 ) * fix: remove sidebar item extra padding and gap * chore: run build:css	2023-10-27 14:57:48 +01:00
Xin	2d2e8aec4c	fix(style): remove padding for highlighted code (#157 ) * fix(style): remove padding for highlighted lines * chore: run build:css	2023-10-27 14:56:39 +01:00
rwxguo	c6f432566d	docs: update editURL description (#154 )	2023-10-27 05:39:31 -04:00
LLL	ae01ac08b6	feat: improve Cards link behaviour (#153 ) * clickable feature-card when a link is provided * unclickable card when no link is provided --------- Co-authored-by: Xin <xin@imfing.com>	2023-10-26 23:13:24 +01:00
Xin	b5ab4ecdcb	chore(i18n): support translation for theme toggle (#152 )	2023-10-26 04:02:47 -04:00
Xin	cf7b669278	docs: add zh-cn translation for home page (#151 ) * i8n: add noResultsFound and clean up zh-cn.yaml * i8n: add translation for home page * i18n: translate showcase for zh-cn	2023-10-25 23:32:33 +01:00
Xin	53b688f014	chore(devcontainer): bump hugo to version v0.119.0 [skip ci]	2023-10-25 21:55:40 +01:00
dependabot[bot]	8ad5a0cf0e	chore(deps-dev): bump postcss from 8.4.27 to 8.4.31 (#150 ) Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.27...8.4.31) [skip ci] --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-25 21:53:47 +01:00
Xin	e135f5a6b4	docs: improve icon shortcode documentation (#149 )	2023-10-25 20:50:15 +01:00
Xin	97e6945c04	feat: add option to set default theme and hide toggle button (#146 ) resolves #135 Light / dark theme can be configured via: ```yaml theme: # light \| dark \| system default: system displayToggle: true ```	2023-10-21 22:18:04 +01:00
Xin	93cb788e52	feat(search): support different search index types (#145 ) * add support for different search index types: `content \| summary \| heading \| title` * resolves #139	2023-10-21 21:00:39 +01:00
Jinuk Im	88b0f1b2ab	fix: broken "edit this page" link in windows (#143 )	2023-10-18 22:33:36 +01:00
Jinuk Im	a31b46f5e3	chore(i18n): add translations of Korean (#144 ) * chore(i18n): add translations of Korean * Update ko.yaml --------- Co-authored-by: Xin <xin@imfing.com>	2023-10-18 22:32:28 +01:00
Sid	6641d36b98	docs: add using Hextra as Git submodule (#137 ) * docs: update docs relating to getting started and Hugo modules * docs: add docs to use Hextra as Git submodule, closes #107 * chore: use paragraph instead of callout, refactor docs * Update getting-started.md * Update getting-started.md --------- Co-authored-by: Xin <xin@imfing.com>	2023-10-16 14:28:28 +01:00
Jinuk Im	e42d01898a	fix: add missing translations (#142 ) * fix: add missing translation in blog list * fix: add translatable variables * Update en.yaml --------- Co-authored-by: Xin <xin@imfing.com>	2023-10-16 13:30:31 +01:00
Xin	6cd4c55613	fix: callout styling issue with markdown content (#141 )	2023-10-13 00:09:57 +01:00
Xin	cb09b7ce1e	fix: skip scroll event if no backToTop element (#138 )	2023-10-12 23:25:34 +01:00
纳兰音韵	96c6ff073f	chore(i18n): update zh-cn.yaml (#136 )	2023-10-11 23:22:07 +01:00
Xin	28a20e1e7e	chore: add code copy button icons in js (#133 )	2023-10-07 20:01:19 +01:00
Xin	5f4c7423d0	chore: add feature request issue template [skip ci]	2023-10-04 20:54:29 +01:00
Xin	2bc4ed19e3	chore: add issue bug report template [skip ci]	2023-10-04 20:51:22 +01:00
Xin	8aa6439132	feat: support custom primary saturation (#131 ) * feat: support custom primary saturation * chore: run npm run build:css * docs: update instruction for customizing primary color	2023-10-04 20:41:59 +01:00
Jinuk Im	b7558aca44	feat: support empty prev/next pagination (#130 ) [skip ci]	2023-10-04 20:13:49 +01:00
Xin	55ff819dae	fix: not-prose p tag inconsistent style (#126 ) * fix: not-prose p tag should reset styles * chore: compile CSS	2023-10-03 09:12:30 +01:00
Xin	924d8508d0	fix: footer enable flag logic issue (#125 )	2023-10-03 08:51:41 +01:00
Quang Thắng	1b932f260a	chore: add Vietnamese translation (#123 ) [skip ci]	2023-10-03 08:36:35 +01:00
Pedro Lima	5768ed4695	chore: add Portuguese translation (#119 )	2023-10-02 23:53:53 +01:00
morfismo	f4cea168b1	chore: spanish translations es.yaml (#114 ) [skip ci]	2023-10-02 11:57:12 +01:00
calalloo	e2d00fdcd0	chore: add Swahili translation (#113 ) [skip ci]	2023-10-01 23:13:18 +01:00
Xin	103faa24f3	chore: re-compile CSS	2023-10-01 09:25:02 +00:00
Remy Sheppard	d1bed05843	feat: Back To Top (#105 ) * Scroll to top * Update scripts.html --------- Co-authored-by: Xin <xin@imfing.com>	2023-10-01 10:06:28 +01:00