feat: option to show tags for blog list (#161 )

* feat: option to show tags for blog list * chore: update hugo_stats.json
docs: fix some spelling mistakes (#159 )
2025-07-01 13:37:22 -04:00 · 2023-10-28 15:56:58 +01:00 · 2023-10-27 23:15:06 +01:00 · 2023-10-27 23:09:38 +01:00 · 2023-10-27 14:57:48 +01:00 · 2023-10-27 14:56:39 +01:00
89 changed files with 1760 additions and 447 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/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@ -34,7 +34,7 @@ jobs:
      HUGO_VERSION: 0.117.0
    steps:
      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
      - name: Setup Go
--- 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
@ -613,6 +613,9 @@ video {
 .mb-4 {
  margin-bottom: 1rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .mb-8 {
  margin-bottom: 2rem;
 }
@ -694,6 +697,12 @@ video {
 .h-2 {
  height: 0.5rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
  height: 1rem;
 }
@ -779,6 +788,9 @@ video {
 .max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] {
  max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-none {
  max-width: none;
 }
@ -935,6 +947,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));
@ -971,18 +987,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;
@ -999,17 +1015,9 @@ video {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
-.bg-gradient-to-b {
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.from-gray-800 {
-  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-gray-900 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
@ -1113,18 +1121,21 @@ video {
 .pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
  padding-left: max(env(safe-area-inset-left),1.5rem);
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pr-4 {
  padding-right: 1rem;
 }
 .pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] {
  padding-right: calc(env(safe-area-inset-right) - 1.5rem);
 }
+.pr-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
+  padding-right: max(env(safe-area-inset-left),1.5rem);
+}
 .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;
 }
@ -1197,6 +1208,9 @@ video {
 .leading-7 {
  line-height: 1.75rem;
 }
+.leading-none {
+  line-height: 1;
+}
 .leading-tight {
  line-height: 1.25;
 }
@ -1244,7 +1258,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;
@ -1363,8 +1377,11 @@ video {
 .duration-200 {
  transition-duration: 200ms;
 }
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+.duration-75 {
+  transition-duration: 75ms;
+}
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .\[-webkit-tap-highlight-color\:transparent\] {
  -webkit-tap-highlight-color: transparent;
@ -1416,7 +1433,7 @@ video {
  }
 }
 :is(html[class~="dark"] .content h2) {
-  border-color: hsl(var(--primary-hue) 100% 94% / 0.1);
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity));
 }
@ -1482,9 +1499,13 @@ video {
 .content p:first-child {
  margin-top: 0px;
 }
+.content .not-prose p {
+  margin-top: 0px;
+  line-height: 1.5;
+}
 .content a {
  --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;
@ -1522,7 +1543,7 @@ video {
  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;
@ -1534,18 +1555,18 @@ video {

  .content pre:not(.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"] .content pre:not(.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"] .content pre:not(.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);
  }
 }
 .content code:not(.code-block code) {
@ -2141,7 +2162,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;
@ -2151,18 +2172,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 {
@ -2175,7 +2196,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;
@ -2185,7 +2206,7 @@ article details > summary::before {
  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .code-block .filename) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
 }
@ -2214,7 +2235,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;
@ -2223,7 +2244,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));
 }
@ -2238,7 +2259,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));
@ -2330,13 +2351,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 {
@ -2423,7 +2444,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 {
@ -2453,6 +2474,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;
@ -2515,6 +2537,33 @@ nav .search-wrapper {
 .hamburger-menu svg.open > g:nth-of-type(2) path {
        transform: translate3d(0, -4px, 0);
      }
+.hextra-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
+
+  scrollbar-gutter: stable;
+}
+.hextra-scrollbar::-webkit-scrollbar {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+.hextra-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.hextra-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    --tw-shadow-color: rgb(115 115 115 / 0.2);
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  --tw-shadow-color: rgb(115 115 115 / 0.4);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 html {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
@ -2535,11 +2584,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;
@ -2623,6 +2674,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));
@ -2632,11 +2687,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;
@ -2656,7 +2711,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;
@ -2693,7 +2748,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);
@ -2735,11 +2790,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;
@ -2881,6 +2936,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));
@ -2893,7 +2953,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 {
@ -2956,6 +3016,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));
@ -3001,14 +3065,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);
@ -3062,7 +3126,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;
@ -3115,6 +3179,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));
@ -3147,14 +3215,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;
@ -3182,7 +3250,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;
@ -3195,7 +3263,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) {

@ -3215,7 +3283,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) {
@ -3317,11 +3385,6 @@ body {
    align-items: flex-start;
  }

-  .sm\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
  .sm\:text-xl {
    font-size: 1.25rem;
  }
--- a/assets/css/components/scrollbar.css
+++ b/assets/css/components/scrollbar.css
@ -0,0 +1,21 @@
+.hextra-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
+
+  scrollbar-gutter: stable;
+  &::-webkit-scrollbar {
+    @apply w-3 h-3;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[10px];
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+  }
+}
--- 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
@ -32,7 +32,7 @@
  }
  .ln,
  .lnt:not(.hl > .lnt),
-  .hl {
+  .hl:not(.line) {
    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
  }
  .lntd {
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -7,6 +7,7 @@
@import "components/search.css";
@import "components/sidebar.css";
@import "components/navbar.css";
+@import "components/scrollbar.css";

 html {
  @apply text-base antialiased;
@ -20,10 +21,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
@ -20,6 +20,9 @@
  p {
    @apply mt-6 leading-7 first:mt-0;
  }
+  .not-prose p {
+    @apply mt-0 leading-normal;
+  }
  a {
    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
  }
--- 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,4 +1,36 @@
-document.querySelectorAll('.code-copy-btn').forEach(function (button) {
+// 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();
      const targetId = button.getAttribute('data-clipboard-target');
@ -27,4 +59,5 @@ document.querySelectorAll('.code-copy-btn').forEach(function (button) {
        console.error('Target element not found');
      }
    });
+  });
 });
--- a/assets/js/flexsearch.js
+++ b/assets/js/flexsearch.js
@ -1,5 +1,16 @@
 // Search functionality using FlexSearch.

+// Change shortcut key to cmd+k on Mac, iPad or iPhone.
+document.addEventListener("DOMContentLoaded", function () {
+  if (/iPad|iPhone|Macintosh/.test(navigator.userAgent)) {
+    // select the kbd element under the .search-wrapper class
+    const keys = document.querySelectorAll(".search-wrapper kbd");
+    keys.forEach(key => {
+      key.innerHTML = '<span class="text-xs">⌘</span>K';
+    });
+  }
+});
+
 // Render the search data as JSON.
 // {{ $searchDataFile := printf "%s.search-data.json" .Language.Lang }}
 // {{ $searchData := resources.Get "json/search-data.json" | resources.ExecuteAsTemplate $searchDataFile . }}
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@ -1,36 +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 (
+  // 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)
-) {
+    (!("color-theme" in localStorage) &&
+      ((window.matchMedia("(prefers-color-scheme: dark)").matches && defaultTheme === "system") || defaultTheme === "dark"))
+  ) {
    themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
-} else {
+  } else {
    themeToggleButtons.forEach((el) => el.dataset.theme = "light");
-}
+  }

-themeToggleButtons.forEach((el) => {
+  // 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") {
-        document.documentElement.classList.add("dark");
+          setDarkTheme();
          localStorage.setItem("color-theme", "dark");
        } else {
-        document.documentElement.classList.remove("dark");
+          setLightTheme();
          localStorage.setItem("color-theme", "light");
        }
      } else {
        if (document.documentElement.classList.contains("dark")) {
-        document.documentElement.classList.remove("dark");
+          setLightTheme();
          localStorage.setItem("color-theme", "light");
        } else {
-        document.documentElement.classList.add("dark");
+          setDarkTheme();
          localStorage.setItem("color-theme", "dark");
        }
      }
      el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
    });
-});
+  });
+
+  // Listen for system theme changes
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    if (defaultTheme === "system" && !("color-theme" in localStorage)) {
+      e.matches ? setDarkTheme() : setLightTheme();
+      themeToggleButtons.forEach((el) =>
+        el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
+      );
+    }
+  });
+})();
--- 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/dev.toml
+++ b/dev.toml
@ -18,6 +18,9 @@
    target = '$1'

 [module]
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
  [[module.mounts]]
    source = "hugo_stats.json"
    target = "assets/watching/hugo_stats.json"
--- a/exampleSite/assets/images/space.jpg
+++ b/exampleSite/assets/images/space.jpg
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@ -2,3 +2,75 @@
 title: Hextra Theme
 layout: hextra-home
 ---
+
+{{< hextra/hero-badge >}}
+  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <span>Free, open source</span>
+  {{< icon name="arrow-circle-right" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="mt-6 mb-6">
+{{< hextra/hero-headline >}}
+  Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="mb-12">
+{{< hextra/hero-subtitle >}}
+  Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="mb-6">
+{{< hextra/hero-button text="Get Started" link="docs" >}}
+</div>
+
+<div class="mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="Fast and Full-featured"
+    subtitle="Simple and easy to use, yet powerful and feature-rich."
+    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 is All You Need"
+    subtitle="Compose with just Markdown. Enrich with Shortcode components."
+    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="Full Text Search"
+    subtitle="Built-in full text search with FlexSearch, no extra setup required."
+    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="Lightweight as a Feather"
+    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"
+    subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
+  >}}
+  {{< hextra/feature-card
+    title="Build and Host for Free"
+    subtitle="Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service."
+  >}}
+  {{< hextra/feature-card
+    title="Multi-Language Made Easy"
+    subtitle="Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive."
+  >}}
+  {{< hextra/feature-card
+    title="And Much More..."
+    icon="sparkles"
+    subtitle="Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..."
+  >}}
+{{< /hextra/feature-grid >}}
--- 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/blog/markdown.md
+++ b/exampleSite/content/blog/markdown.md
@ -4,6 +4,10 @@ date: 2020-01-01
 authors:
  - name: John Doe
    link: https://example.com/johndoe
+tags:
+  - Markdown
+  - Example
+  - Guide
 excludeSearch: true
 ---

--- 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/_index.md
+++ b/exampleSite/content/docs/advanced/_index.md
@ -12,4 +12,5 @@ This section covers some advanced topics of the theme.
 {{< cards >}}
  {{< card link="multi-language" title="Multi-language" icon="translate" >}}
  {{< card link="customization" title="Customization" icon="pencil" >}}
+  {{< card link="comments" title="Comments System" icon="chat-alt" >}}
 {{< /cards >}}
--- a/exampleSite/content/docs/advanced/comments.md
+++ b/exampleSite/content/docs/advanced/comments.md
@ -0,0 +1,39 @@
+---
+title: Comments System
+linkTitle: Comments
+---
+
+Hextra supports adding comments system to your site.
+Currently [giscus](https://giscus.app/) is supported.
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) is a comments system powered by [GitHub Discussions](https://docs.github.com/en/discussions). It is free and open source.
+
+To enable giscus, you need to add the following to the site configuration file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <repository>
+      repoId: <repository ID>
+      category: <category>
+      categoryId: <category ID>
+```
+
+The giscus configurations can be constructed from the [giscus.app](https://giscus.app/) website. More details can also be found there.
+
+Comments can be enabled or disabled for a specific page in the page 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
@ -10,7 +10,11 @@ This page describes the available options and how to customize the theme further

 ## Custom CSS

-To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file. For example, customize the font family of the content:
+To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
+
+### Font Family
+
+The font family of the content can be customized using:

 ```css {filename="assets/css/custom.css"}
 .content {
@ -18,13 +22,24 @@ To add custom CSS, we need to create a file `assets/css/custom.css` in our site.
 }
 ```

+### Inline Code Element
+
+The color of text mixed with `other text` can customized with:
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
 ### 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%;
 }
 ```

--- a/exampleSite/content/docs/getting-started.md
+++ b/exampleSite/content/docs/getting-started.md
@ -9,28 +9,40 @@ prev: /docs

 {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)

-You will be able to quickly get started by using the above template repository.
+You could quickly get started by using the above template repository.

 <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">

 We have provided a [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) which can help automatically build and deploy your site to GitHub Pages, and host it for free.
+For more options, check out [Deploy Site](../guide/deploy-site).

 [🌐 Demo ↗](https://imfing.github.io/hextra-starter-template/)

 ## Start as New Project

-### Prerequisites
+There are two main ways to add the Hextra theme to your Hugo project:

-Before we start, make sure we have [Hugo](https://gohugo.io/) installed.
-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
+```shell
 $ hugo new site my-site --format=yaml
 ```

@ -45,7 +57,7 @@ $ hugo mod init github.com/username/my-site
 $ hugo mod get github.com/imfing/hextra
 ```

-Edit `hugo.yaml` to enable Hextra theme:
+Configure `hugo.yaml` to use Hextra theme by adding the following:

 ```yaml
 module:
@ -55,7 +67,7 @@ module:

 ### Create your first content pages

-Let's create a new content page for the home page and the documentation page:
+Create new content page for the home page and the documentation page:

 ```shell
 $ hugo new content/_index.md
@ -68,25 +80,106 @@ $ hugo new content/docs/_index.md
 $ hugo server --buildDrafts --disableFastRender
 ```

-Voila! You can see your new site at `http://localhost:1313/`.
+Voila, your new site preview is available at `http://localhost:1313/`.

 {{% /steps %}}


-## Update Theme
-
 {{% details title="How to update theme?" %}}

-To update the theme to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
+To update all Hugo modules in your project to their latest versions, run the following command:

 ```shell
 $ hugo mod get -u
 ```

+To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
 See [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) for more details.

 {{% /details %}}

+### Setup Hextra as Git submodule
+
+#### Prerequisites
+
+Before starting, you need to have the following software installed:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### Steps
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```shell
+$ hugo new site my-site --format=yaml
+```
+
+### Add Hextra theme as a Git submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+Configure `hugo.yaml` to use Hextra theme by adding the following:
+
+```yaml
+theme: hextra
+```
+
+### Create your first content pages
+
+Create new content page for the home page and the documentation page:
+
+```shell
+$ hugo new content/_index.md
+$ hugo new content/docs/_index.md
+```
+
+### Preview the site locally
+
+```shell
+$ hugo server --buildDrafts --disableFastRender
+```
+
+Your new site preview is available at `http://localhost:1313/`.
+
+{{% /steps %}}
+
+
+When using [CI/CD](https://en.wikipedia.org/wiki/CI/CD) for Hugo website deployment, it's essential to ensure that the following command is executed before running the `hugo` command.
+
+```shell
+git submodule update --init
+```
+
+Failure to run this command results in the theme folder not being populated with Hextra theme files, leading to a build failure.
+
+
+{{% details title="How to update theme?" %}}
+
+To update all submodules in your repository to their latest commits, run the following command:
+
+```shell
+$ git submodule update --remote
+```
+
+To update Hextra to the latest commit, run the following command:
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+See [Git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules) for more details.
+
+{{% /details %}}

 ## Next

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

@ -132,7 +132,7 @@ params:
    base: "https://github.com/your-username/your-repo/edit/main"
 ```

-The edit links will be automatically generated for each page.
+The edit links will be automatically generated for each page based on the provided url as root directory.
 If you want to set edit link for a specific page, you can set the `params.editURL` parameter in the front matter of the page:

 ```yaml {filename="content/docs/guide/configuration.md"}
@ -180,3 +180,80 @@ 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
+
+The width of the page can be customized by the `params.page.width` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+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:
+
+```yaml {filename="hugo.yaml"}
+googleAnalytics: G-XXXXXXXXXX
+```
--- a/exampleSite/content/docs/guide/deploy-site.md
+++ b/exampleSite/content/docs/guide/deploy-site.md
@ -0,0 +1,163 @@
+---
+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][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][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 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`
+
+![image](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)
+
+[hextra-starter-template]: https://github.com/imfing/hextra-starter-template
--- 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
@ -63,3 +63,63 @@ 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.
+
+## Add Images
+
+To add images, the easiest way is to put the image files in the same directory as the Markdown file.
+For example, add an image file `image.png` alongside the `my-page.md` file:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Then, we can use the following Markdown syntax to add the image to the content:
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+We can also utilize the [page bundles][page-bundles] feature of Hugo to organize the image files together with the Markdown file. To achieve that, turn the `my-page.md` file into a directory `my-page` and put the content into a file named `index.md`, and put the image files inside the `my-page` directory:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/folder name="my-page" >}}
+            {{< filetree/file name="index.md" >}}
+            {{< filetree/file name="image.png" >}}
+        {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+```markdown {filename="content/docs/my-page/index.md"}
+![](image.png)
+```
+
+Alternatively, we can also put the image files in the `static` directory, which will make the images available for all pages:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/folder name="images" >}}
+        {{< filetree/file name="image.png" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" >}}
+        {{< filetree/file name="my-page.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+Note that the image path begins with a slash `/` and is relative to the static directory:
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
--- a/exampleSite/content/docs/guide/shortcodes/cards.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.md
@ -12,9 +12,10 @@ linkTitle: Cards

 {{< cards >}}
  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
+  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
 {{< /cards >}}

-
 ## Usage

 ```
@ -27,5 +28,37 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
+  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
 {{</* /cards */>}}
 ```
+
+## Card Parameters
+
+| Parameter  | Description                           |
+|----------- |---------------------------------------|
+| `link`     | URL (internal or external).           |
+| `title`    | Title heading for the card.           |
+| `subtitle` | Subtitle heading (supports Markdown). |
+| `icon`     | Name of the icon.                     |
+
+## Image Card
+
+Additionally, the card supports adding image and processing through these parameters:
+
+| Parameter  | Description                                 |
+|----------- |---------------------------------------------|
+| `image`    | Specifies the image URL for the card.       |
+| `method`   | Sets Hugo's image processing method.        |
+| `options`  | Configures Hugo's image processing options. |
+
+Card supports three kinds of images:
+
+1. Remote image: the full URL in the `image` parameter.
+2. Static image: use the relative path in Hugo's `static/` directory.
+3. Processed image: use the relative path in Hugo's `assets/` directory.
+
+Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
+It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
+
+For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
--- 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
@ -0,0 +1,18 @@
+---
+title: Showcase
+description: "Open source projects powered by 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">
+Open source projects powered by Hextra.
+</p>
+
+{{< cards >}}
+  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="/" 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/content/showcase/index.zh-cn.md
+++ b/exampleSite/content/showcase/index.zh-cn.md
@ -0,0 +1,18 @@
+---
+title: 项目展示
+description: "由 Hextra 驱动的开源网站和项目。"
+toc: false
+layout: wide
+---
+
+<div class="mt-4"></div>
+
+<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+由 Hextra 驱动的开源网站和项目。
+</p>
+
+{{< cards >}}
+  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< /cards >}}
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -7,6 +7,8 @@ enableGitInfo: true
 # enableEmoji: false
 hasCJKLanguage: true

+# googleAnalytics: G-XXXXXXXXXX
+
 outputs:
  home: [HTML]
  page: [HTML]
@ -24,13 +26,14 @@ languages:
    title: "Hextra テーマ"
  zh-cn:
    languageName: 简体中文
+    languageCode: zh-CN
    weight: 3
    title: Hextra

 module:
  hugoVersion:
    extended: true
-    min: "0.111.0"
+    min: "0.112.0"

  workspace: hugo.work
  imports:
@ -51,20 +54,24 @@ menu:
      name: Documentation
      pageRef: /docs
      weight: 1
+    - identifier: showcase
+      name: Showcase
+      pageRef: /showcase
+      weight: 2
    - identifier: blog
      name: Blog
      pageRef: /blog
-      weight: 2
+      weight: 3
    - identifier: about
      name: About
      pageRef: /about
-      weight: 3
-    - name: Search
      weight: 4
+    - name: Search
+      weight: 5
      params:
        type: search
    - name: GitHub
-      weight: 5
+      weight: 6
      url: "https://github.com/imfing/hextra"
      params:
        icon: github
@ -93,20 +100,59 @@ params:
    logo:
      path: images/logo.svg
      dark: images/logo-dark.svg
-      # link: /
      # width: 40
      # height: 20
+      # link: /
+    width: wide
+
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: normal
+
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true

  footer:
    displayCopyright: true
    displayPoweredBy: true
+    width: normal

  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
+
+    # https://giscus.app/
+    giscus:
+      repo: imfing/hextra
+      repoId: R_kgDOJ9fJag
+      category: General
+      categoryId: DIC_kwDOJ9fJas4CY7gW
+      # mapping: pathname
+      # strict: 0
+      # reactionsEnabled: 1
+      # emitMetadata: 0
+      # inputPosition: top
+      # lang: en
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -40,7 +40,6 @@
      "path",
      "pre",
      "script",
-      "section",
      "span",
      "strong",
      "style",
@ -94,7 +93,6 @@
      "bg-black/[.05]",
      "bg-blue-100",
      "bg-clip-text",
-      "bg-gradient-to-b",
      "bg-gradient-to-r",
      "bg-gray-100",
      "bg-neutral-50",
@ -114,6 +112,7 @@
      "border-black/5",
      "border-blue-200",
      "border-gray-200",
+      "border-gray-500",
      "border-l",
      "border-orange-100",
      "border-red-200",
@ -129,6 +128,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",
@ -154,6 +154,7 @@
      "contrast-more:text-gray-800",
      "contrast-more:text-gray-900",
      "contrast-more:underline",
+      "copy-icon",
      "cursor-default",
      "cursor-pointer",
      "dark:before:bg-neutral-800",
@ -173,6 +174,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",
@ -190,6 +192,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",
@ -228,7 +231,8 @@
      "data-[state=selected]:text-primary-600",
      "decoration-from-font",
      "duration-200",
-      "ease-in-out",
+      "duration-75",
+      "ease-in",
      "filename",
      "first:mt-0",
      "flex",
@ -246,7 +250,6 @@
      "footnote-backref",
      "footnote-ref",
      "footnotes",
-      "from-gray-800",
      "from-gray-900",
      "gap-1",
      "gap-2",
@ -266,6 +269,7 @@
      "h-0",
      "h-16",
      "h-2",
+      "h-3.5",
      "h-4",
      "h-5",
      "h-7",
@ -274,9 +278,11 @@
      "hamburger-menu",
      "hextra-card",
      "hextra-cards",
+      "hextra-feature-card",
      "hextra-filetree",
      "hextra-filetree-folder",
      "hextra-footer",
+      "hextra-scrollbar",
      "hextra-sidebar-collapsible-button",
      "hextra-toc",
      "hidden",
@ -289,6 +295,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",
@ -319,6 +326,7 @@
      "leading-5",
      "leading-6",
      "leading-7",
+      "leading-none",
      "leading-tight",
      "left-[24px]",
      "left-[36px]",
@ -366,6 +374,7 @@
      "mb-16",
      "mb-2",
      "mb-4",
+      "mb-6",
      "mb-8",
      "md:aspect-[1.1/1]",
      "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
@ -393,6 +402,7 @@
      "ml-1",
      "ml-4",
      "mr-2",
+      "mt-1",
      "mt-1.5",
      "mt-12",
      "mt-16",
@ -438,12 +448,13 @@
      "pl-[max(env(safe-area-inset-left),1.5rem)]",
      "placeholder:text-gray-500",
      "pointer-events-none",
+      "pr-2",
      "pr-4",
      "pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+      "pr-[max(env(safe-area-inset-left),1.5rem)]",
      "pr-[max(env(safe-area-inset-right),1.5rem)]",
      "print:bg-transparent",
      "print:hidden",
-      "pt-1",
      "pt-4",
      "pt-6",
      "pt-8",
@ -511,7 +522,6 @@
      "sm:flex",
      "sm:grid-cols-2",
      "sm:items-start",
-      "sm:px-4",
      "sm:text-xl",
      "sm:w-[110%]",
      "sr-only",
--- a/exampleSite/static/images/card-image-unprocessed.jpg
+++ b/exampleSite/static/images/card-image-unprocessed.jpg
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,5 +1,10 @@
-onThisPage: "On this page"
+backToTop: "Scroll to top"
+changeLanguage: "Change language"
+changeTheme: "Change theme"
+copyright: "© 2023 Hextra Project."
 editThisPage: "Edit this page on GitHub →"
 lastUpdated: "Last updated on"
-
-copyright: "© 2023 Hextra Project."
+noResultsFound: "No results found."
+onThisPage: "On this page"
+readMore: "Read more →"
+searchPlaceholder: "Search..."
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@ -0,0 +1,7 @@
+onThisPage: "En esta página"
+editThisPage: "Edita esta página en GitHub →"
+lastUpdated: "Última actualización"
+
+backToTop: "Subir al inicio"
+
+copyright: "© 2023 Hextra Project."
--- a/i18n/ko.yaml
+++ b/i18n/ko.yaml
@ -0,0 +1,9 @@
+backToTop: "맨위로 스크롤"
+changeLanguage: "언어변경"
+changeTheme: "테마변경"
+copyright: "© 2023 Hextra Project."
+editThisPage: "Github에서 편집하기 →"
+lastUpdated: "마지막 수정일자"
+onThisPage: "페이지 목차"
+readMore: "더보기 →"
+searchPlaceholder: "검색..."
--- a/i18n/pt.yaml
+++ b/i18n/pt.yaml
@ -0,0 +1,7 @@
+onThisPage: "Nesta página"
+editThisPage: "Edita esta página no GitHub →"
+lastUpdated: "Última actualização"
+
+backToTop: "Voltar ao topo"
+
+copyright: "© 2023 Projecto Hextra."
--- a/i18n/sw.yaml
+++ b/i18n/sw.yaml
@ -0,0 +1,5 @@
+onThisPage: "Kwenye ukurasa huu"
+editThisPage: "Hariri ukurasa huu kwenye GitHub →"
+lastUpdated: "Ilisasishwa mwisho"
+backToTop: "Tembeza hadi juu"
+copyright: "© 2023 Hextra Project."
--- a/i18n/vi.yaml
+++ b/i18n/vi.yaml
@ -0,0 +1,7 @@
+onThisPage: "Ở trang này"
+editThisPage: "Sửa trang này trên GitHub →"
+lastUpdated: "Lần cuối cập nhật lúc"
+
+backToTop: "Lướt lên đầu trang"
+
+copyright: "© 2023 Hextra Project."
--- a/i18n/zh-cn.yaml
+++ b/i18n/zh-cn.yaml
@ -1,15 +1,20 @@
 documentation: "文档"
+showcase: "项目展示"
 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
@ -15,9 +15,13 @@
    <pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre>
  {{- end -}}
  <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
-    <button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">
-      {{ 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="Copy code"
+      data-clipboard-target="#code-block-{{ .Ordinal }}"
+    >
+      <div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
+      <div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>
    </button>
  </div>
 </div>
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -1,8 +1,27 @@
-{{- if .Title -}}
+{{- $alt := .PlainText | safeHTML -}}
+{{- $lazyLoading := .Page.Site.Params.enableImagelazyLoading | default true -}}
+{{- $dest := .Destination -}}
+
+{{- $isRemote := 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 $startsWithSlash -}}
+    {{/* Images under static directory */}}
+    {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
+  {{- else if and $isPage (not $startsWithRelative) -}}
+    {{/* Images that are sibling to the individual page file */}}
+    {{ $dest = (printf "../%s" $dest) }}
+  {{- end -}}
+{{- end -}}
+
+{{- with .Title -}}
  <figure>
-    <img src="{{ .Destination | safeURL }}" title="{{ .Title }}" alt="{{ .PlainText | safeHTML }}" loading="lazy" />
-    <figcaption>{{ .Title }}</figcaption>
+    <img src="{{ $dest | safeURL }}" title="{{ . }}" alt="{{ $alt }}" {{ if $lazyLoading }}loading="lazy"{{ end }} />
+    <figcaption>{{ . }}</figcaption>
  </figure>
 {{- else -}}
-  <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText | safeHTML }}" loading="lazy" />
+  <img src="{{ $dest | safeURL }}" alt="{{ $alt }}" {{ if $lazyLoading }}loading="lazy"{{ end }} />
 {{- end -}}
--- 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/_default/list.html
+++ b/layouts/_default/list.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ 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)]">
@ -10,6 +10,7 @@
        </div>
        <div class="mt-16"></div>
        {{ partial "components/last-updated.html" . }}
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/_default/list.rss.xml
+++ b/layouts/_default/list.rss.xml
@ -0,0 +1,43 @@
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ .Site.Title }} – {{ .Title }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{ with .OutputFormats.Get "RSS" }}
+	  {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{ end }}
+    {{ if not $.Section }}
+      {{ $sections := .Site.Params.rss.sections | default (slice "blog") }}
+      {{ .Scratch.Set "rssPages" (first 50 (where $.Site.RegularPages "Type" "in" $sections )) }}
+    {{ else }}
+      {{ if $.Parent.IsHome }}
+        {{ .Scratch.Set "rssPages" (first 50 (where $.Site.RegularPages "Type" $.Section )) }}
+      {{ else }}
+        {{ .Scratch.Set "rssPages" (first 50 $.Pages) }}
+      {{ end }}
+    {{ end }}
+    {{ range (.Scratch.Get "rssPages")  }}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>
+        {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+        {{ with $img }}
+        {{ $img := .Resize "640x" }}
+        {{ printf "<![CDATA[<img src=\"%s\" width=\"%d\" height=\"%d\"/>]]>" $img.Permalink $img.Width $img.Height | safeHTML }}
+        {{ end }}
+        {{ .Content | html }}
+      </description>
+    </item>
+    {{ end }}
+  </channel>
+</rss>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <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)]">
@ -10,6 +10,8 @@
        <div class="content">
          {{ .Content }}
        </div>
+        <div class="mt-16"></div>
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/_default/wide.html
+++ b/layouts/_default/wide.html
@ -0,0 +1,12 @@
+{{ define "main" }}
+  <div class="mx-auto flex max-w-[90rem]">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
+    <article class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pt-4 pb-8 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
+      <br class="mt-1.5 text-sm" />
+      <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
+      <div class="content">
+        {{ .Content }}
+      </div>
+    </article>
+  </div>
+{{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -1,19 +1,29 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  {{- $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">
        <br class="mt-1.5 text-sm" />
        <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
        <div class="content">{{ .Content }}</div>
-        {{ range .Pages.ByDate }}
+        {{ 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>
-            <p class="opacity-50 text-sm mt-6 leading-7">{{ partial "utils/format-date" .Date }}</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-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
          </div>
        {{ end }}
      </main>
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <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)]">
@ -28,6 +28,7 @@
        {{ partial "components/last-updated.html" . }}
        {{ .Scratch.Set "reversePagination" true }}
        {{ partial "components/pager.html" . }}
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ 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)]">
@ -9,9 +9,9 @@
          <h1>{{ .Title }}</h1>
          {{ .Content }}
        </div>
-        <div class="mt-16"></div>
        {{ partial "components/last-updated.html" . }}
        {{ partial "components/pager.html" . }}
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ 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)]">
@ -11,6 +11,7 @@
        </div>
        {{ partial "components/last-updated.html" . }}
        {{ partial "components/pager.html" . }}
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/hextra-home.html
+++ b/layouts/hextra-home.html
@ -1,118 +1,10 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-screen-xl">
+  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
-    <div class="w-full break-words flex flex-col min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12">
-        <a
-          href="https://github.com/imfing/hextra"
-          target="_blank"
-          rel="noreferrer"
-          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"
-        >
-          <div class="w-2 h-2 rounded-full bg-primary-400"></div>
-          <span>Free, open source</span>
-          {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}}
-        </a>
-        <h1
-          class="text-4xl font-bold leading-tight tracking-tighter md:text-5xl mt-6 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
-        >
-          Build modern websites&nbsp;<br class="sm:block hidden" />
-          with Markdown and Hugo
-        </h1>
-        <p class="mt-4 text-xl text-gray-600 dark:text-gray-400 sm:text-xl">
-          Fast, batteries-included Hugo theme <br class="sm:block hidden" />
-          for creating beautiful static websites.
-        </p>
-        <div class="mt-8">
-          {{- $docsURL := "docs" | relURL -}}
-          <a
-            href="{{ $docsURL }}"
-            class="font-medium cursor-pointer px-6 py-3 text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 rounded-full text-center mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-          >
-            Get Started
-          </a>
+    <div class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pb-8 pt-8 md:pt-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
+      <div class="flex flex-col items-start">
+        {{ .Content }}
      </div>
-      </section>
-      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 pb-8">
-        <h2 class="mt-12 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-600 dark:from-gray-100 dark:to-gray-400">What's in Hextra?</h2>
-        <div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full">
-          {{ template "hextra-feature-card" (dict
-            "title" "Fast and Full-featured"
-            "subtitle" "Simple and easy to use, yet powerful and feature-rich. "
-            "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));"
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Markdown is All You Need"
-            "subtitle" "Compose with just Markdown. Enrich with Shortcode components."
-            "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));"
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Full Text Search"
-            "subtitle" "Built-in full text search with FlexSearch, no extra setup required."
-            "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));"
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Lightweight as a Feather"
-            "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."
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Reponsive 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."
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Build and Host for Free"
-            "subtitle" "Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service."
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "Multi-Language Made Easy"
-            "subtitle" "Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive."
-            )
-          }}
-          {{ template "hextra-feature-card" (dict
-            "title" "And Much More..."
-            "subtitle" "Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..."
-            )
-          }}
-        </div>
-      </section>
    </div>
  </div>
 {{ end }}
-
-{{- define "hextra-feature-card" -}}
-  {{- $title := .title -}}
-  {{- $subtitle := .subtitle -}}
-  {{- $class := .class -}}
-  {{- $image := .image -}}
-  {{- $imageClass := .imageClass -}}
-  {{- $style := .style -}}
-
-
-  <div
-    {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
-    class="{{ $class }} 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">{{ $title }}</h3>
-      <p class="text-gray-500 text-sm leading-6">{{ $subtitle | markdownify }}</p>
-    </div>
-    {{- with $image -}}
-      <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
-    {{- end -}}
-  </div>
-{{- end -}}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-[90rem]">
+  <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)]">
--- a/layouts/partials/components/comments.html
+++ b/layouts/partials/components/comments.html
@ -0,0 +1,11 @@
+{{- $enableComments := site.Params.comments.enable | default false -}}
+
+{{ if not (eq .Params.comments nil) }}
+  {{ $enableComments = .Params.comments }}
+{{ end }}
+
+{{- if $enableComments -}}
+  {{- if eq site.Params.comments.type "giscus" -}}
+    {{ partial "components/giscus.html" . }}
+  {{- end -}}
+{{- end -}}
--- a/layouts/partials/components/giscus.html
+++ b/layouts/partials/components/giscus.html
@ -0,0 +1,62 @@
+{{- $lang := site.Language.LanguageCode | default `en` -}}
+
+{{- with site.Params.comments.giscus -}}
+<script>
+  /*
+   * "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
+   * but, hugo's theme switch function works by using "color-theme" in local storage.
+   * This solution was created with reference to:
+   * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
+  */
+  function getGiscusTheme() {
+    return localStorage.getItem("color-theme");
+  }
+
+  function setGiscusTheme() {
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+    sendMessage({
+      setConfig: {
+        theme: getGiscusTheme(),
+      },
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ .repo }}",
+      "data-repo-id": "{{ .repoId }}",
+      "data-category": "{{ .category }}",
+      "data-category-id": "{{ .categoryId }}",
+      "data-mapping": "{{ .mapping | default `pathname` }}",
+      "data-strict": "{{ (string .strict) | default 0 }}",
+      "data-reactions-enabled": "{{ (string .reactionsEnabled) |  default 1 }}",
+      "data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
+      "data-input-position": "{{ .inputPosition | default `top` }}",
+      "data-theme": getGiscusTheme(),
+      "data-lang": "{{ .lang | default $lang }}",
+      "crossorigin": "anonymous",
+      "async": "",
+    };
+
+    // Dynamically create script tag
+    const giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById('giscus').appendChild(giscusScript);
+
+    // Update giscus theme when theme switcher is clicked
+    const toggles = document.querySelectorAll(".theme-toggle");
+    if (toggles) {
+      toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
+    }
+  });
+</script>
+
+<div id="giscus"></div>
+{{- else -}}
+  {{ warnf "giscus is not configured" }}
+{{- end -}}
--- a/layouts/partials/components/pager.html
+++ b/layouts/partials/components/pager.html
@ -5,16 +5,24 @@
 {{- $prev := cond $reversePagination .PrevInSection .NextInSection -}}
 {{- $next := cond $reversePagination .NextInSection .PrevInSection -}}

-{{- with .Params.prev -}}
+{{- 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 -}}
+{{- 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 -}}

 {{- if or $prev $next -}}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,22 +1,35 @@
 {{- $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 -}}
+  {{ if eq . "wide" -}}
+    {{ $footerWidth = "max-w-[90rem]" -}}
+  {{ else if eq . "full" -}}
+    {{ $footerWidth = "max-w-full" -}}
+  {{ 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 max-w-screen-xl gap-2 py-2 px-4">
+  {{- 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 -}}
+    {{- if or site.IsMultiLingual $displayThemeToggle -}}
      <hr class="dark:border-neutral-800" />
+    {{- end -}}
+  {{- end -}}
  <div
-    class="mx-auto flex max-w-screen-xl 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.displayCopyright }}<p class="mt-6 text-xs">{{ $copyright | markdownify }}</p>{{ 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>
 </footer>
@ -24,7 +37,7 @@
 {{- define "theme-credit" -}}
  <a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
    <span
-      >Powered by Hextra
+      >{{ . | safeHTML }}
      {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
    </span>
  </a>
--- a/layouts/partials/google-analytics.html
+++ b/layouts/partials/google-analytics.html
@ -0,0 +1,13 @@
+{{ with .Site.GoogleAnalytics }}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "{{ . }}");
+  </script>
+{{ end }}
--- a/layouts/partials/head-css.html
+++ b/layouts/partials/head-css.html
@ -7,7 +7,7 @@

  {{- if hugo.IsProduction }}
    {{- $styles = $styles | minify | fingerprint }}
-    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
+    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
  {{- else }}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -16,16 +16,41 @@
    {{ end -}}
  </title>
  <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
+
  {{ partial "opengraph.html" . }}
  {{ template "_internal/schema.html" . -}}
  {{ template "_internal/twitter_cards.html" . -}}
+
  {{ partialCached "head-css.html" . }}
+
+
+  <!-- Google Analytics -->
+  {{- if and .Site.GoogleAnalytics (eq hugo.Environment "production") }}
+    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
+    {{ partial "google-analytics.html" . }}
+  {{- end }}
+
+
  <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");
-    } else {
+      document.documentElement.style.colorScheme = "dark";
+    }
+    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>

--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@ -4,15 +4,23 @@
 {{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
 {{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}

+{{- $navWidth := "max-w-[90rem]" -}}
+{{- with .Site.Params.navbar.width -}}
+  {{ if eq . "normal" -}}
+    {{ $navWidth = "max-w-screen-xl" -}}
+  {{ else if eq . "full" -}}
+    {{ $navWidth = "max-w-full" -}}
+  {{ end -}}
+{{- end -}}

 <div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
  <div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>

-  <nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
+  <nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
    <a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
      {{- if (.Site.Params.navbar.displayLogo | default true) }}
-        <img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
-        <img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
+        <img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+        <img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
      {{- end }}
      {{- if (.Site.Params.navbar.displayTitle | default true) }}
        <span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@ -1,19 +1,23 @@
-{{- $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) -}}
+  {{- $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 -}}
@ -22,6 +26,9 @@
    {{- $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 -}}
 {{- end -}}

 {{/* Mermaid */}}
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@ -13,13 +13,13 @@
    <kbd
      class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"
    >
-      <span class="text-xs">⌘</span>K
+      CTRL K
    </kbd>
  </div>

  <div>
    <ul
-      class="search-results hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
+      class="search-results hextra-scrollbar hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
      style="transition: max-height 0.2s ease 0s;"
    ></ul>
  </div>
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -15,7 +15,7 @@
  <div class="px-4 pt-4 md:hidden">
    {{ partial "search.html" }}
  </div>
-  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
+  <div class="hextra-scrollbar overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
    <ul class="flex flex-col gap-1 md:hidden">
      <!-- Nav -->
      {{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
@ -34,17 +34,21 @@
    {{ end -}}
  </div>
  {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $switchesClass := cond $disableSidebar "md:hidden" "" }}
+  {{ $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) }}
-      {{ partial "theme-toggle" (dict "hideLabel" true) }}
-    {{ else }}
-      <div class="flex grow flex-col">
-        {{ partial "theme-toggle" }}
-      </div>
-    {{ end -}}
+      {{- 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" -}}
@ -76,13 +80,13 @@
        </li>
      {{- end -}}
    {{- else -}}
-      <div class="pt-1 ltr:pr-0 overflow-hidden transition-all ease-in-out duration-200">
+      <div class="ltr:pr-0 overflow-hidden">
        <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
          {{- range $items.ByWeight }}
            {{- $active := eq $pageURL .RelPermalink -}}
            {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
            {{- $title := .LinkTitle | default .File.BaseFileName -}}
-            <li class="flex flex-col gap-1 {{ if $shouldOpen }}open{{ end }}">
+            <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
              {{- if and $toc $active -}}
                {{ template "sidebar-toc" dict "page" . }}
--- 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,10 +3,11 @@
 {{- $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 }}
-    <div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
+    <div class="hextra-scrollbar sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
      {{- with .Fragments.Headings -}}
        <p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
        {{- range . -}}
@ -25,10 +26,19 @@
      <div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
        {{- if site.Params.editURL.enable -}}
          {{- $editURL := site.Params.editURL.base | default "" -}}
-          {{- with .File -}}{{ $editURL = urls.JoinPath $editURL .Path }}{{- end -}}
+          {{- with .File -}}{{ $editURL = urls.JoinPath $editURL (replace .Path "\\" "/") }}{{- end -}}
          {{- with .Params.editURL -}}{{ $editURL = .Params.editURL }}{{- end -}}
          <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
        {{- end -}}
+        {{/* Scroll To Top */}}
+        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50">
+          <span>
+            {{- $backToTop -}}
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+          </svg>
+        </button>
      </div>
    </div>
  {{ end -}}
--- 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 }}
+{{ 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)) }}
+        {{ $data = $data | merge (dict $headingKey ($content | markdownify | 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)) }}
+        {{ $data = $data | merge (dict $headingKey ($lastPart | markdownify | 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/partials/utils/page-description.html
+++ b/layouts/partials/utils/page-description.html
@ -1,11 +1,11 @@
-{{ with .Description | plainify -}}
+{{ with .Description | plainify | htmlUnescape -}}
  {{ . -}}
 {{ else -}}
  {{ if .IsHome -}}
-    {{ with .Site.Params.description | plainify -}}
+    {{ with .Site.Params.description | plainify | htmlUnescape -}}
      {{ . -}}
    {{ end -}}
  {{ else -}}
-    {{ .Summary | plainify | chomp -}}
+    {{ .Summary | plainify | htmlUnescape | chomp -}}
  {{ end -}}
 {{ end -}}
--- a/layouts/partials/utils/page-width.html
+++ b/layouts/partials/utils/page-width.html
@ -0,0 +1,27 @@
+{{/* Get page width from site configuration */}}
+
+{{/* Default page width */}}
+{{- $pageWidth := "" -}}
+
+{{/* Get page width setting from page front matter or site params */}}
+{{ with .Params.width -}}
+  {{ $pageWidth = . -}}
+{{ else -}}
+  {{ with .Site.Params.page.width -}}
+    {{ $pageWidth = . -}}
+  {{ end -}}
+{{ end -}}
+
+{{- with $pageWidth -}}
+  {{ if eq . "wide" -}}
+    {{ $pageWidth = "max-w-[90rem]" -}}
+  {{ else if eq . "full" -}}
+    {{ $pageWidth = "max-w-full" -}}
+  {{ else -}}
+    {{ $pageWidth = "max-w-screen-xl" -}}
+  {{ end -}}
+{{ else -}}
+  {{ $pageWidth = "max-w-screen-xl" -}}
+{{ end -}}
+
+{{ return $pageWidth }}
--- a/layouts/section/section.rss.xml
+++ b/layouts/section/section.rss.xml
@ -1,40 +0,0 @@
-{{- $pctx := . -}}
-{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
-{{- $pages := slice -}}
-{{- if or $.IsHome $.IsSection -}}
-{{- $pages = $pctx.RegularPages -}}
-{{- else -}}
-{{- $pages = $pctx.Pages -}}
-{{- end -}}
-{{- $limit := .Site.Config.Services.RSS.Limit -}}
-{{- if ge $limit 1 -}}
-{{- $pages = $pages | first $limit -}}
-{{- end -}}
-{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} of {{ end }}{{ .Site.Title }}{{ end }}</title>
-    <link>{{ .Permalink }}</link>
-    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
-    <generator>Hugo -- gohugo.io</generator>
-    <language>{{ site.Language.LanguageCode }}</language>{{ with .Site.Author.email }}
-    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
-    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
-    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
-    {{- with .OutputFormats.Get "RSS" -}}
-    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
-    {{- end -}}
-    {{ range $pages }}
-    <item>
-      <title>{{ .Title }}</title>
-      <link>{{ .Permalink }}</link>
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
-      <guid>{{ .Permalink }}</guid>
-      <description>{{ with .Description | html }}{{ . }}{{ else }}{{ .Summary | html }}{{ end -}}</description>
-      <content:encoded>{{ (printf "<![CDATA[%s]]>" .Content) | safeHTML }}</content:encoded>
-    </item>
-    {{ end }}
-  </channel>
-</rss>
--- a/layouts/shortcodes/callout.html
+++ b/layouts/shortcodes/callout.html
@ -17,8 +17,8 @@
 <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="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
@ -1,9 +1,42 @@
+{{- $context := . -}}
 {{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
-{{- $subtitle := .Get "subtitle" }}
-{{- $image := .Get "image" }}
-{{- $context := . -}}
+{{- $subtitle := .Get "subtitle" -}}
+{{- $image := .Get "image" -}}
+{{- $width := 0 -}}
+{{- $height := 0 -}}
+{{- $imageStyle := .Get "imageStyle" -}}
+
+{{/* Image processing options */}}
+{{- $method := .Get "method" | default "Resize" | humanize -}}
+{{- $options := .Get "options" | default "800x webp q80" -}}
+
+{{- if and $image (not (urls.Parse $image).Scheme) -}}
+  {{/* Process images in assets */}}
+  {{- with resources.Get $image -}}
+    {{- $processed := "" -}}
+    {{- if eq $method "Resize" -}}
+      {{- $processed = (.Resize $options) -}}
+    {{- else if eq $method "Fit" -}}
+      {{- $processed = (.Fit $options) -}}
+    {{- else if eq $method "Fill" -}}
+      {{- $processed = (.Fill $options) -}}
+    {{- else if eq $method "Crop" -}}
+      {{- $processed = (.Crop $options) -}}
+    {{- else -}}
+      {{- errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." -}}
+    {{- end -}}
+    {{- $width = $processed.Width -}}
+    {{- $height = $processed.Height -}}
+    {{- $image = $processed.RelPermalink -}}
+  {{- else -}}
+    {{/* Otherwise, use relative link of the image */}}
+    {{- if hasPrefix $image "/" -}}
+      {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}

 {{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
 {{- with $image -}}
@ -11,17 +44,25 @@
 {{- end -}}

 {{- $external := strings.HasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}


 <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="{{ $link | relURL }}"
-  {{- if $external }}
-    target="_blank" rel="noreferrer"
+  {{- if $link -}}
+    href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
  {{- end -}}
 >
  {{- with $image -}}
-    <img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image | safeURL }}" />
+    <img
+      alt="{{ $title }}"
+      loading="lazy"
+      decoding="async"
+      src="{{ $image | safeURL }}"
+      {{ with $width }}width="{{ . }}"{{ end }}
+      {{ with $height }}height="{{ . }}"{{ end }}
+      {{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
+    />
  {{- end -}}

  {{- $padding := "p-4" -}}
@ -31,10 +72,10 @@


  <span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
-    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{ end -}}
+    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
    {{- $title -}}
  </span>
  {{- with $subtitle -}}
-    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{ $subtitle }}</div>
+    <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>
--- a/layouts/shortcodes/hextra/feature-card.html
+++ b/layouts/shortcodes/hextra/feature-card.html
@ -0,0 +1,32 @@
+{{- $title := .Get "title" -}}
+{{- $subtitle := .Get "subtitle" -}}
+{{- $class := .Get "class" -}}
+{{- $image := .Get "image" -}}
+{{- $imageClass := .Get "imageClass" -}}
+{{- $style := .Get "style" -}}
+{{- $icon := .Get "icon" -}}
+{{- $link := .Get "link" -}}
+
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
+
+<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"
+>
+  <div class="relative w-full p-6">
+    <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
+      {{ with $icon -}}
+        <span class="pr-2">
+          {{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
+        </span>
+      {{ end -}}
+      <span>{{ $title }}</span>
+    </h3>
+    <p class="text-gray-500 dark:text-gray-400 text-sm leading-6">{{ $subtitle | markdownify }}</p>
+  </div>
+  {{- with $image -}}
+    <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
+  {{- end -}}
+</a>
--- a/layouts/shortcodes/hextra/feature-grid.html
+++ b/layouts/shortcodes/hextra/feature-grid.html
@ -0,0 +1,9 @@
+{{- $style := .Get "style" -}}
+
+
+<div
+  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner }}
+</div>
--- a/layouts/shortcodes/hextra/hero-badge.html
+++ b/layouts/shortcodes/hextra/hero-badge.html
@ -0,0 +1,15 @@
+{{- $link := .Get "link" -}}
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
+{{- $class := .Get "class" }}
+{{- $style := .Get "style" -}}
+
+
+<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"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
+>
+  {{ .Inner | markdownify }}
+</a>
--- a/layouts/shortcodes/hextra/hero-button.html
+++ b/layouts/shortcodes/hextra/hero-button.html
@ -0,0 +1,15 @@
+{{- $link := .Get "link" -}}
+{{- $text := .Get "text" -}}
+{{- $style := .Get "style" -}}
+
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
+
+<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"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
+>
+  {{- $text -}}
+</a>
--- a/layouts/shortcodes/hextra/hero-headline.html
+++ b/layouts/shortcodes/hextra/hero-headline.html
@ -0,0 +1,9 @@
+{{- $style := .Get "style" -}}
+
+
+<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"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</h1>
--- a/layouts/shortcodes/hextra/hero-subtitle.html
+++ b/layouts/shortcodes/hextra/hero-subtitle.html
@ -0,0 +1,9 @@
+{{- $style := .Get "style" -}}
+
+
+<p
+  class="text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</p>
--- a/layouts/shortcodes/icon.html
+++ b/layouts/shortcodes/icon.html
@ -1,9 +1,9 @@
 {{- $name := .Get "name" | default (.Get 0) -}}
-{{- $icon := index site.Data.icons (.Get 0) -}}
-{{- $attributes := "height=1em"}}
+{{- $icon := index site.Data.icons $name -}}
+{{- $attributes := .Get "attributes" | default "height=1em"}}

 {{- if not $icon -}}
-  {{ errorf "icon %q not found" (.Get 0) }}
+  {{ errorf "icon %q not found" $name }}
 {{- end -}}

 {{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
--- 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",
@ -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} */
@ -14,6 +14,11 @@ module.exports = {
  content: [
    './**/hugo_stats.json',
  ],
+  safelist: [
+    'max-w-screen-xl',
+    'max-w-[90rem]',
+    'max-w-full'
+  ],
  theme: {
    screens: {
      sm: '640px',
Author	SHA1	Message	Date
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
Xin	2df3c563bf	fix: use div for copyright container in footer (#104 )	2023-09-27 20:40:35 +01:00
Xin	ec02eb34fe	fix: search shortcut based on user platform (#101 ) * fix: search shortcut based on user platform * chore: make it work with iPad and iPhone as well	2023-09-27 19:47:20 +01:00
Xin	46dea718e6	docs: add giscus comments system (#96 ) * chore: rename comment to comments * docs: add giscus comments * docs: update	2023-09-26 23:33:27 +01:00
Xin	adf5a113fc	fix: giscus theme and language display issues (#95 ) * chore: minor update giscus template * fix: theme toggle should select all * chore: example configs for giscus * fix: language code in giscus	2023-09-26 22:12:38 +01:00
Jinuk Im	6a19ac31c0	feat: add giscus support (#92 ) * feat: add giscus support #89 * Update comment.html * Update giscus.html * Update giscus.html --------- Co-authored-by: Xin <xin@imfing.com>	2023-09-26 20:47:22 +01:00
Xin	3c4ede96df	feat: add shortcodes to build Hextra home page (#90 ) * feat: add feature grid and card shortcodes * feat: add markdown content to hextra home * chore: add button for hextra home * chore: add heading and subtitle * chore: finish moving hextra home to shortcodes * chore: regenerate css * chore: improve hextra home layout shortcodes * chore: update css * chore: decrease button size	2023-09-26 08:15:31 +01:00
Xin	01f7e3a425	docs: add showcase page (#86 ) * docs: add showcase page * chore: update compiled CSS * chore: add showcase to navbar * chore: reorder show case on navbar * chore: update card image style * chore: update showcase images * chore: update showcase card image	2023-09-24 15:30:17 +01:00
Jinuk Im	da5a087891	fix: reverse order in blog list page (#87 ) * feat: support reverse order in blog list page * chore: update blog list order --------- Co-authored-by: Xin <xin@imfing.com>	2023-09-24 14:54:38 +01:00
Xin	79883dc7cc	fix: process static image url correctly	2023-09-24 11:03:34 +01:00
Xin	b283227046	feat: enhance image resolving (#82 ) * feat: enhance image resolving * chore: don't process image path that begins with relative link * docs: add instruction for adding images * chore: update docs * chore: add filenames to images docs	2023-09-23 23:54:17 +01:00
Xin	0e9cf1a519	fix: add integrity attribute to styles css preload tag (#83 )	2023-09-23 22:42:05 +01:00
Xin	fdc30c6cd5	fix: card image not displaying correctly (#77 ) * fix: use relative URL for card images * chore: update card image processing * chore: add width and height for process image * docs: update cards docs	2023-09-23 19:25:51 +01:00
Xin	3632294706	chore: update list page RSS template (#75 ) * chore: update RSS feed template * chore: use html instead of safeHTML	2023-09-22 23:41:53 +01:00
Jinuk Im	929578192b	fix: htmlUnescape page description (#71 ) - add htmlUnescape	2023-09-21 22:46:08 +01:00
Sid	c18d5def26	ci: upgrade `actions/checkout` from `v3` to `v4` (#73 ) https://github.com/actions/checkout#checkout-v4	2023-09-21 21:42:15 +01:00
Xin	4e63aa4f14	feat: add google analytics support (#70 ) * feat: support google analytics * docs: add instruction for setting up ga	2023-09-21 08:03:35 +01:00
Xin	b51bfa3177	feat: support wide and full page modes (#69 ) * feat: add page width config and partial * feat: use page-width partial in layouts * chore: revert changes in navbar and footer * feat: customize footer width from site config * chore: update styles * docs: add page width * feat: allow overriding navbar width * fix: navbar width variable * docs: add instruction for navbar and footer	2023-09-20 23:36:00 +01:00
Remy Sheppard	c799160e86	feat: add native image processing to cards (#63 ) * Add native image processing to cards * feat: Image processing options, markdown subtitles * fixing a type * Public Domain Images * image height fix * Smaller Image * Removed fullwidth param * Smaller image from unsplash * Replaced static image as well * Update single.html * Update list.html * Update list.html * Update single.html * Update list.html * Update single.html * Update cards.md * Update cards.md --------- Co-authored-by: Xin <xin@imfing.com>	2023-09-19 00:04:48 +01:00
Remy Sheppard	00d26dee2c	fix: swap navbar logo width and height (#58 ) Height/Width swap issue.	2023-09-14 08:17:28 +01:00
Xin	e9ea9786e9	feat: enhance scrollbar style (#56 ) * feat: enhance scrollbar style * chore: set `color-scheme` for document element	2023-09-14 00:01:38 +01:00
Saurabh Mishra	84ac7fe773	docs: add example for customizing css for inline code element (#55 ) * discussion #40 * discussion #46 * corrected Go code * removed code block section * changed heading to 'Inline Code Element' --------- Co-authored-by: Saurabh Mishra <saurabh.m@mailfence.com>	2023-09-13 22:34:46 +01:00
Xin	a184cfd41e	fix: use relURL only for link starts with slash (#54 )	2023-09-13 05:40:00 -04:00