chore: cache tree branch without leaf

chore: move inline template to partial
chore: add back mobile nav
2025-07-01 20:07:16 -04:00 · 2023-10-24 22:52:10 +01:00 · 2023-10-24 22:22:57 +01:00 · 2023-10-24 21:39:43 +01:00 · 2023-10-24 20:41:50 +01:00 · 2023-10-24 20:41:28 +01:00
54 changed files with 993 additions and 345 deletions
--- 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/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -697,6 +697,12 @@ video {
 .h-2 {
  height: 0.5rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
  height: 1rem;
 }
@ -941,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));
@ -977,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;
@ -1251,7 +1261,7 @@ video {
 }
 .text-primary-800 {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
 }
 .text-red-900 {
  --tw-text-opacity: 1;
@ -1370,6 +1380,9 @@ video {
 .duration-200 {
  transition-duration: 200ms;
 }
+.duration-75 {
+  transition-duration: 75ms;
+}
 .ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@ -1426,7 +1439,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));
 }
@ -1492,9 +1505,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;
@ -1532,7 +1549,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;
@ -1544,18 +1561,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) {
@ -2151,7 +2168,7 @@ article details > summary::before {
 }
 .code-block pre {
  overflow-x: auto;
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
  font-size: .9em;
  font-weight: 500;
  -webkit-font-smoothing: auto;
@ -2161,18 +2178,18 @@ article details > summary::before {

  .code-block pre {
    border-width: 1px;
-    border-color: hsl(var(--primary-hue) 100% 24% / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
    --tw-contrast: contrast(1.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
 }
 :is(html[class~="dark"] .code-block pre) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
@media (prefers-contrast: more) {

  :is(html[class~="dark"] .code-block pre) {
-    border-color: hsl(var(--primary-hue) 100% 94% / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
  }
 }
 .code-block .filename {
@ -2185,7 +2202,7 @@ article details > summary::before {
  white-space: nowrap;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
@ -2195,7 +2212,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));
 }
@ -2248,7 +2265,7 @@ article details > summary::before {
 .chroma .hl {
  display: block;
  width: 100%;
-  background-color: hsl(var(--primary-hue) 100% 32% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
 }
 .hextra-cards {
  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
@ -2340,13 +2357,13 @@ article details > summary::before {
 }
 .search-wrapper li .active {
  border-radius: 0.375rem;
-  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
@media (prefers-contrast: more) {

  .search-wrapper li .active {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }
 }
 .search-wrapper .no-result {
@ -2433,7 +2450,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 {
@ -2572,11 +2589,13 @@ body {
 }
 :root {
  --primary-hue: 212deg;
+  --primary-saturation: 100%;
  --navbar-height: 4rem;
  --menu-height: 3.75rem;
 }
 .dark {
  --primary-hue: 204deg;
+  --primary-saturation: 100%;
 }
 .placeholder\:text-gray-500::-moz-placeholder {
  --tw-text-opacity: 1;
@ -2660,6 +2679,10 @@ body {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.hover\:border-gray-900:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
 .hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@ -2669,11 +2692,11 @@ body {
 }
 .hover\:bg-primary-50:hover {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
 }
 .hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 .hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
@ -2693,7 +2716,7 @@ body {
 }
 .hover\:text-primary-600:hover {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .hover\:opacity-60:hover {
  opacity: 0.6;
@ -2730,7 +2753,7 @@ body {
 }
 .focus\:ring-primary-300:focus {
  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
 }
 .active\:bg-gray-400\/20:active {
  background-color: rgb(156 163 175 / 0.2);
@ -2772,11 +2795,11 @@ body {
 }
 .data-\[state\=selected\]\:border-primary-500[data-state=selected] {
  --tw-border-opacity: 1;
-  border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
 }
 .data-\[state\=selected\]\:text-primary-600[data-state=selected] {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden {
  display: none;
@ -2918,6 +2941,11 @@ body {
    border-color: currentColor;
  }

+  .contrast-more\:border-gray-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(31 41 55 / var(--tw-border-opacity));
+  }
+
  .contrast-more\:border-gray-900 {
    --tw-border-opacity: 1;
    border-color: rgb(17 24 39 / var(--tw-border-opacity));
@ -2930,7 +2958,7 @@ body {

  .contrast-more\:border-primary-500 {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }

  .contrast-more\:border-transparent {
@ -2993,6 +3021,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));
@ -3038,14 +3070,14 @@ body {
  background-color: rgb(251 146 60 / 0.2);
 }
 :is(html[class~="dark"] .dark\:bg-primary-300\/10) {
-  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 :is(html[class~="dark"] .dark\:bg-primary-400\/10) {
-  background-color: hsl(var(--primary-hue) 100% 66% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
 }
 :is(html[class~="dark"] .dark\:bg-primary-600) {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .dark\:bg-red-900\/30) {
  background-color: rgb(127 29 29 / 0.3);
@ -3099,7 +3131,7 @@ body {
 }
 :is(html[class~="dark"] .dark\:text-primary-600) {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .dark\:text-red-200) {
  --tw-text-opacity: 1;
@ -3152,6 +3184,10 @@ body {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+:is(html[class~="dark"] .dark\:hover\:border-gray-100:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
 :is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
@ -3184,14 +3220,14 @@ body {
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) {
-  background-color: hsl(var(--primary-hue) 100% 94% / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
 }
 :is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
-  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
 :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
  --tw-text-opacity: 1;
@ -3219,7 +3255,7 @@ body {
 }
 :is(html[class~="dark"] .hover\:dark\:text-primary-600):hover {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
  --tw-shadow: 0 0 #0000;
@ -3232,7 +3268,7 @@ body {
 }
 :is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) {
  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
 }
@media (prefers-contrast: more) {

@ -3252,7 +3288,7 @@ body {

  :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }

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

-const themeToggleButtons = document.querySelectorAll(".theme-toggle");
+  const themeToggleButtons = document.querySelectorAll(".theme-toggle");

-// Change the icons inside the button based on previous settings
-if (
-  localStorage.getItem("color-theme") === "dark" ||
-  (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-) {
-  themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
-} else {
-  themeToggleButtons.forEach((el) => el.dataset.theme = "light");
-}
+  // Change the icons of the buttons based on previous settings or system theme
+  if (
+    localStorage.getItem("color-theme") === "dark" ||
+    (!("color-theme" in localStorage) &&
+      ((window.matchMedia("(prefers-color-scheme: dark)").matches && defaultTheme === "system") || defaultTheme === "dark"))
+  ) {
+    themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
+  } else {
+    themeToggleButtons.forEach((el) => el.dataset.theme = "light");
+  }

-themeToggleButtons.forEach((el) => {
-  el.addEventListener("click", function () {
-    if (localStorage.getItem("color-theme")) {
-      if (localStorage.getItem("color-theme") === "light") {
-        document.documentElement.classList.add("dark");
-        document.documentElement.style.colorScheme = "dark";
-        localStorage.setItem("color-theme", "dark");
+  // Add click event handler to the buttons
+  themeToggleButtons.forEach((el) => {
+    el.addEventListener("click", function () {
+      if (localStorage.getItem("color-theme")) {
+        if (localStorage.getItem("color-theme") === "light") {
+          setDarkTheme();
+          localStorage.setItem("color-theme", "dark");
+        } else {
+          setLightTheme();
+          localStorage.setItem("color-theme", "light");
+        }
      } else {
-        document.documentElement.classList.remove("dark");
-        document.documentElement.style.colorScheme = "light";
-        localStorage.setItem("color-theme", "light");
+        if (document.documentElement.classList.contains("dark")) {
+          setLightTheme();
+          localStorage.setItem("color-theme", "light");
+        } else {
+          setDarkTheme();
+          localStorage.setItem("color-theme", "dark");
+        }
      }
-    } else {
-      if (document.documentElement.classList.contains("dark")) {
-        document.documentElement.classList.remove("dark");
-        document.documentElement.style.colorScheme = "light";
-        localStorage.setItem("color-theme", "light");
-      } else {
-        document.documentElement.classList.add("dark");
-        document.documentElement.style.colorScheme = "dark";
-        localStorage.setItem("color-theme", "dark");
-      }
-    }
-    el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+    });
  });
-});
+
+  // Listen for system theme changes
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    if (defaultTheme === "system" && !("color-theme" in localStorage)) {
+      e.matches ? setDarkTheme() : setLightTheme();
+      themeToggleButtons.forEach((el) =>
+        el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
+      );
+    }
+  });
+})();
--- a/assets/json/search-data.json
+++ b/assets/json/search-data.json
@ -1,3 +1,10 @@
+{{/* FlexSearch Index Data */}}
+{{- $indexType := site.Params.search.flexsearch.index | default "content" -}}
+
+{{- if not (in (slice "content" "summary" "heading" "title" ) $indexType) -}}
+  {{- errorf "unknown flexsearch index type: %s" $indexType -}}
+{{- end -}}
+
 {{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
 {{- $pages = where $pages "Params.excludeSearch" "!=" true -}}
 {{- $pages = where $pages "Content" "!=" "" -}}
@ -7,7 +14,7 @@
 {{- range $index, $page := $pages -}}
  {{- $pageTitle := $page.LinkTitle | default $page.File.BaseFileName -}}
  {{- $pageLink := $page.RelPermalink -}}
-  {{- $data := partial "utils/fragments" $page -}}
+  {{- $data := partial "utils/fragments" (dict "context" $page "type" $indexType) -}}
  {{- $output = $output | merge (dict $pageLink (dict "title" $pageTitle "data" $data)) -}}
 {{- end -}}

--- a/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
@ -34,11 +34,12 @@ The color of text mixed with `other text` can customized with:

 ### Primary Color

-The primary color of the theme can be customized by setting the `--primary-hue` variable:
+The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:

 ```css {filename="assets/css/custom.css"}
 :root {
  --primary-hue: 100deg;
+  --primary-saturation: 90%;
 }
 ```

--- a/exampleSite/content/docs/getting-started.md
+++ b/exampleSite/content/docs/getting-started.md
@ -19,18 +19,29 @@ We have provided a [GitHub Actions workflow](https://docs.github.com/en/pages/ge

 ## 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 will be 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 softwares 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 +56,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 +66,7 @@ module:

 ### Create your first content pages

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

 ```shell
 $ hugo new content/_index.md
@ -73,20 +84,101 @@ Voila! You can see your new site 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 only 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 softwares 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
+
+Let's 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
+```
+
+Voila! You can see your new site 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 will result 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 only 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/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-->

@ -181,6 +181,26 @@ Include both `favicon.ico` and `favicon.svg` files in your project to ensure you
 While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
 Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.

+### Theme Configuration
+
+Use the `theme` setting to configure the default theme mode and toggle button, allowing visitors to switch between light or dark mode.
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+Options for `theme.default`:
+
+- `light` - always use light mode
+- `dark` - always use dark mode
+- `system` - sync with the operating system setting (default)
+
+The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
+When set to `true`, visitors can switch between light or dark mode, overriding the default setting.

 ### Page Width

@ -193,11 +213,42 @@ params:
    width: wide
 ```

-There are three available options: `full`, `wide`, and `normal`.
-By default, the page width is set to `normal`.
+There are three available options: `full`, `wide`, and `normal`. By default, the page width is set to `normal`.

 Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.

+### Search Index
+
+Full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch) is enabled by default.
+To customize the search index, set the `params.search.flexsearch.index` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+
+Options for `flexsearch.index`:
+
+- `content` - full content of the page (default)
+- `summary` - summary of the page, see [Hugo Content Summaries](https://gohugo.io/content-management/summaries/) for more details
+- `heading` - level 1 and level 2 headings
+- `title` - only include the page title
+
+To exclude a page from the search index, set the `excludeSearch: true` in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+excludeSearch: true
+---
+```

 ### Google Analytics

--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -26,6 +26,7 @@ languages:
    title: "Hextra テーマ"
  zh-cn:
    languageName: 简体中文
+    languageCode: zh-CN
    weight: 3
    title: Hextra

@ -108,6 +109,11 @@ params:
    # full (100%), wide (90rem), normal (1280px)
    width: normal

+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+
  footer:
    displayCopyright: true
    displayPoweredBy: true
@ -116,9 +122,33 @@ params:
  displayUpdatedDate: true
  dateFormat: "January 2, 2006"

+  # Search
+  # flexsearch is enabled by default
  search:
    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content

  editURL:
    enable: true
    base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"
+
+  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
@ -112,6 +112,7 @@
      "border-black/5",
      "border-blue-200",
      "border-gray-200",
+      "border-gray-500",
      "border-l",
      "border-orange-100",
      "border-red-200",
@ -127,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",
@ -152,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",
@ -171,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",
@ -188,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",
@ -226,6 +231,7 @@
      "data-[state=selected]:text-primary-600",
      "decoration-from-font",
      "duration-200",
+      "duration-75",
      "ease-in",
      "ease-in-out",
      "filename",
@ -264,6 +270,7 @@
      "h-0",
      "h-16",
      "h-2",
+      "h-3.5",
      "h-4",
      "h-5",
      "h-7",
@ -289,6 +296,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",
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,5 +1,9 @@
-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."
+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
@ -12,4 +12,6 @@ onThisPage: "此页上"
 editThisPage: "在 GitHub 上编辑此页 →"
 lastUpdated: "最后更新于"

+backToTop: "返回顶部"
+
 copyright: "© 2023 Hextra Project."
--- 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/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
-  {{- partial "head.html" . -}}
+  {{ partial "head.html" . -}}
  <body dir="ltr">
-    {{- partial "navbar.html" . -}}
+    {{ 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" . }}
+  {{ partialCached "scripts.html" . }}
+  {{ partial "third-party/scripts.html" . }}
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -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/single.html
+++ b/layouts/_default/single.html
@ -10,6 +10,8 @@
        <div class="content">
          {{ .Content }}
        </div>
+        <div class="mt-16"></div>
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -1,4 +1,5 @@
 {{ define "main" }}
+{{- $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)]">
@ -11,7 +12,7 @@
            <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>
+              <span class="inline-block"> <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">{{ $readMore }}</a> </span>
            </p>
            <p class="opacity-50 text-sm mt-6 leading-7">{{ partial "utils/format-date" .Date }}</p>
          </div>
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -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
@ -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
@ -11,6 +11,7 @@
        </div>
        {{ partial "components/last-updated.html" . }}
        {{ partial "components/pager.html" . }}
+        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
--- 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,15 +5,23 @@
 {{- $prev := cond $reversePagination .PrevInSection .NextInSection -}}
 {{- $next := cond $reversePagination .NextInSection .PrevInSection -}}

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

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

--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,4 +1,5 @@
 {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
+{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}

 {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}

@ -11,20 +12,23 @@
  {{ end -}}
 {{- end -}}

+
 <footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
-  {{- if $enableFooterSwitches }}
-    <div class='mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}'>
+  {{- if $enableFooterSwitches -}}
+    <div class="mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}">
      {{- partial "language-switch.html" (dict "context" .) -}}
-      {{- partial "theme-toggle.html" -}}
+      {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
    </div>
-  {{ end -}}
-  <hr class="dark:border-neutral-800" />
+    {{- if or site.IsMultiLingual $displayThemeToggle -}}
+      <hr class="dark:border-neutral-800" />
+    {{- end -}}
+  {{- end -}}
  <div
-    class='{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start'
+    class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
  >
    <div class="flex w-full flex-col items-center sm:items-start">
      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}
-      {{- if .Site.Params.footer.displayCopyright }}<p class="mt-6 text-xs">{{ $copyright | markdownify }}</p>{{ end }}
+      {{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
    </div>
  </div>
 </footer>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -33,13 +33,25 @@

  <script>
    /* Initialize light/dark mode */
-    if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    const defaultTheme = '{{ site.Params.theme.default | default `system`}}';
+
+    const setDarkTheme = () => {
      document.documentElement.classList.add("dark");
      document.documentElement.style.colorScheme = "dark";
-    } else {
+    }
+    const setLightTheme = () => {
      document.documentElement.classList.remove("dark");
      document.documentElement.style.colorScheme = "light";
    }
+
+    if ("color-theme" in localStorage) {
+      localStorage.getItem("color-theme") === "dark" ? setDarkTheme() : setLightTheme();
+    } else {
+      defaultTheme === "dark" ? setDarkTheme() : setLightTheme();
+      if (defaultTheme === "system") {
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? setDarkTheme() : setLightTheme();
+      }
+    }
  </script>

  {{ partial "custom/head-end.html" . }}
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@ -30,7 +30,7 @@
    {{- $currentPage := . -}}
    {{- range .Site.Menus.main -}}
      {{- if eq .Params.type "search" -}}
-        {{- partial "search.html" (dict "params" .Params) -}}
+        {{- partialCached "search.html" $currentPage -}}
      {{- else -}}
        {{- $external := strings.HasPrefix .URL "http" -}}
        {{/* Display icon menu item */}}
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@ -1,68 +1,32 @@
-{{- $jsTheme := resources.Get "js/theme.js" -}}
+{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
 {{- $jsMenu := resources.Get "js/menu.js" -}}
 {{- $jsTabs := resources.Get "js/tabs.js" -}}
 {{- $jsLang := resources.Get "js/lang.js" -}}
 {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
 {{- $jsSidebar := resources.Get "js/sidebar.js" -}}
+{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}

-{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar | resources.Concat "js/main.js" -}}
+{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
  {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}
 <script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>

-{{/* FlexSearch */}}
+
+{{/* Search */}}
 {{- if (site.Params.search.enable | default true) -}}
-  {{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
-  {{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
-  {{- if hugo.IsProduction -}}
-    {{- $jsSearch = $jsSearch | minify | fingerprint -}}
+  {{- $searchType := site.Params.search.type | default "flexsearch" -}}
+  {{- if eq $searchType "flexsearch" -}}
+    {{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
+    {{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
+    {{- if hugo.IsProduction -}}
+      {{- $jsSearch = $jsSearch | minify | fingerprint -}}
+    {{- end -}}
+    {{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
+    <script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
+    <script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
+  {{- else -}}
+    {{- errorf `search type "%s" is not supported` $searchType -}}
  {{- end -}}
-  {{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
-  <script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
-  <script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
 {{- end -}}
-
-{{/* Mermaid */}}
-{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
-{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
-  {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
-  <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
-      mermaid.initialize({ startOnLoad: true, theme: theme });
-    });
-  </script>
-{{- end -}}
-
-{{/* KaTex */}}
-{{- if .Page.Params.math -}}
-  {{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
-  {{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
-  {{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
-  {{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
-  <link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
-  <script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
-  <script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
-  <script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
-  {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
-  {{- range $katexFonts -}}
-    {{ .Publish }}
-  {{- end -}}
-  <script>
-    // TODO: make render options configurable
-    document.addEventListener("DOMContentLoaded", function () {
-      renderMathInElement(document.body, {
-        delimiters: [
-          { left: "$$", right: "$$", display: true },
-          { left: "$", right: "$", display: false },
-          { left: "\\(", right: "\\)", display: false },
-          { left: "\\[", right: "\\]", display: true },
-        ],
-        throwOnError: false,
-      });
-    });
-  </script>
-{{ end }}
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@ -13,7 +13,7 @@
    <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>

--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -6,134 +6,40 @@
 {{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}

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


 <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
-  <!-- Search bar on small screen -->
-  <div class="px-4 pt-4 md:hidden">
-    {{ partial "search.html" }}
-  </div>
+  {{/* Search bar on small screen */}}
+  {{- partialCached "sidebar/mobile-search" . -}}
+
  <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) -}}
-      {{ template "sidebar-footer" }}
+      {{/* Mobile Navigation */}}
+      {{ $treeMobile := partialCached "sidebar/section-tree" site.Home site.Home }}
+      {{ partial "sidebar/render-tree" (dict "context" site.Home "page" $context "tree" ($treeMobile | unmarshal)) }}
+      {{ partialCached "sidebar/extra" $context }}
    </ul>

-    <!-- Sidebar on large screen -->
-    {{- if $disableSidebar -}}
-      {{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
-      {{ .context.Scratch.Set "enableFooterSwitches" true }}
-    {{- else -}}
-      <ul class="flex flex-col gap-1 max-md:hidden">
-        {{ template "sidebar-main" (dict "context" $navRoot "page" $context  "pageURL" $pageURL) }}
-        {{ template "sidebar-footer" }}
-      </ul>
-    {{ end -}}
-  </div>
-  {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $switchesClass := cond $disableSidebar "md:hidden" "" }}
-  <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
-    {{- with site.IsMultiLingual }}
-      {{ partial "language-switch" (dict "context" $context "grow" true) }}
-      {{ partial "theme-toggle" (dict "hideLabel" true) }}
-    {{ else }}
-      <div class="flex grow flex-col">
-        {{ partial "theme-toggle" }}
-      </div>
-    {{ end -}}
+    {{/* Sidebar on large screen */}}
+    <ul class="flex flex-col gap-1 max-md:hidden">
+      {{ $tree := partialCached "sidebar/section-tree" $navRoot $navRoot }}
+      {{ partial "sidebar/render-tree" (dict "context" $navRoot "page" $context "tree" ($tree | unmarshal)) }}
+      {{ partialCached "sidebar/extra" $context }}
+    </ul>
  </div>
+
+  {{ partial "sidebar/switches" (dict "context" $context "disableSidebar" $disableSidebar) }}
 </aside>

-{{- define "sidebar-main" -}}
-  {{ template "sidebar-tree" (dict "context" .context "level" 0 "page" .page "pageURL" .pageURL "toc" (.toc | default false)) }}
-{{- end -}}
-
-{{- define "sidebar-tree" -}}
-  {{- if ge .level 4 -}}
-    {{- return -}}
-  {{- end -}}
-
-  {{- $context := .context -}}
-  {{- $page := .page }}
-  {{- $pageURL := .page.RelPermalink -}}
-  {{- $level := .level -}}
-  {{- $toc := .toc | default false -}}
-
-  {{- with $items := union .context.RegularPages .context.Sections -}}
-    {{- if eq $level 0 -}}
-      {{- range $items.ByWeight }}
-        {{- $active := eq $pageURL .RelPermalink -}}
-        {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
-        <li class="{{ if $shouldOpen }}open{{ end }}">
-          {{- template "sidebar-item-link" dict "context" . "active" $active "title" .LinkTitle "link" .RelPermalink -}}
-          {{- if and $toc $active -}}
-            {{- template "sidebar-toc" dict "page" . -}}
-          {{- end -}}
-          {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
-        </li>
-      {{- end -}}
-    {{- else -}}
-      <div class="pt-1 ltr:pr-0 overflow-hidden transition-all ease-in-out duration-200">
-        <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 }}">
-              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
-              {{- if and $toc $active -}}
-                {{ template "sidebar-toc" dict "page" . }}
-              {{- end }}
-              {{ template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }}
-            </li>
-          {{- end -}}
-        </ul>
-      </div>
-    {{- end -}}
-  {{- end }}
-{{- end -}}
-
-{{- define "sidebar-toc" -}}
-  {{ $page := .page }}
-  {{ with $page.Fragments.Headings }}
-    <ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
-      {{- range . }}
-        {{- with .Headings }}
-          {{- range . -}}
-            <li>
-              <a
-                href="#{{ anchorize .ID }}"
-                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border flex gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
-              >
-                {{- .Title -}}
-              </a>
-            </li>
-          {{ end -}}
-        {{ end -}}
-      {{ end -}}
-    </ul>
-  {{ end }}
-{{- end -}}
-
-{{- define "sidebar-footer" -}}
-  {{- range site.Menus.sidebar -}}
-    {{- $name := or (T .Identifier) .Name -}}
-    {{ if eq .Params.type "separator" }}
-      <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
-        <span class="cursor-default">{{ $name }}</span>
-      </li>
-    {{ else }}
-      <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
-    {{ end }}
-  {{- end -}}
+{{- define "partials/sidebar/mobile-search" -}}
+  <div class="px-4 pt-4 md:hidden">
+    {{- partialCached "search.html" . -}}
+  </div>
 {{- end -}}

 {{- define "sidebar-item-link" -}}
  {{- $external := strings.HasPrefix .link "http" -}}
-  {{- $open := .open | default true -}}
  <a
    class="flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
    {{- if .active }}
@ -144,21 +50,30 @@
    href="{{ .link }}"
    {{ if $external }}target="_blank" rel="noreferer"{{ end }}
  >
-    {{- .title -}}
+    {{- .title | htmlUnescape | safeHTML -}}
    {{- with .context }}
-      {{- if or .RegularPages .Sections }}
-        <span class="hextra-sidebar-collapsible-button">
-          {{- template "sidebear-collapsible-button" -}}
-        </span>
-      {{- end }}
+      {{- if or .RegularPages .Sections .section }}{{ partialCached "sidebar/collapsible-button" . }}{{ end -}}
    {{ end -}}
  </a>
 {{- end -}}

-{{- define "sidebar-separator" -}}
-  <div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
-{{- end -}}
+{{- define "partials/sidebar/switches" -}}
+  {{- $context := .context -}}
+  {{- $disableSidebar := .disableSidebar -}}
+  {{/* Hide theme switch when sidebar is disabled */}}
+  {{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
+  {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}

-{{- define "sidebear-collapsible-button" -}}
-  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
+  {{ if or site.IsMultiLingual $displayThemeToggle }}
+    <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
+      {{- with site.IsMultiLingual -}}
+        {{- partial "language-switch" (dict "context" $context "grow" true) -}}
+        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
+      {{- else -}}
+        {{- with $displayThemeToggle -}}
+          <div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
+        {{- end -}}
+      {{- end -}}
+    </div>
+  {{- end -}}
 {{- end -}}
--- a/layouts/partials/sidebar/collapsible-button.html
+++ b/layouts/partials/sidebar/collapsible-button.html
@ -0,0 +1,3 @@
+<span class="hextra-sidebar-collapsible-button">
+  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
+</span>
--- a/layouts/partials/sidebar/extra.html
+++ b/layouts/partials/sidebar/extra.html
@ -0,0 +1,10 @@
+{{- range site.Menus.sidebar -}}
+  {{- $name := or (T .Identifier) .Name -}}
+  {{ if eq .Params.type "separator" }}
+    <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
+      <span class="cursor-default">{{ $name }}</span>
+    </li>
+  {{ else }}
+    <li>{{ template "sidebar-item-link" (dict "active" false "title" $name "link" (.URL | relLangURL)) }}</li>
+  {{ end }}
+{{- end -}}
--- a/layouts/partials/sidebar/render-tree-branch-without-leaf.html
+++ b/layouts/partials/sidebar/render-tree-branch-without-leaf.html
@ -0,0 +1,15 @@
+{{- $entry := . -}}
+
+<div class="pt-1 ltr:pr-0 overflow-hidden transition-all ease-in-out duration-200">
+  <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 $entry }}
+      {{- $shouldOpen := .open | default false }}
+      <li class="flex flex-col gap-1 {{ if $shouldOpen }}open{{ end }}">
+        {{- template "sidebar-item-link" (dict "context" . "active" false "title" .title "link" .link) -}}
+        {{- if .section -}}
+          {{- partial "sidebar/render-tree-branch-without-leaf" .section -}}
+        {{- end -}}
+      </li>
+    {{- end -}}
+  </ul>
+</div>
--- a/layouts/partials/sidebar/render-tree-branch.html
+++ b/layouts/partials/sidebar/render-tree-branch.html
@ -0,0 +1,19 @@
+{{- $context := .context -}}
+{{- $page := .page -}}
+{{- $entry := .entry -}}
+{{- $pageLink := .page.RelPermalink -}}
+
+<div class="pt-1 ltr:pr-0 overflow-hidden transition-all ease-in-out duration-200">
+  <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 $entry }}
+      {{- $active := eq $pageLink .link -}}
+      {{- $shouldOpen := or (.open) (hasPrefix $pageLink .link) $active | default true }}
+      <li class="flex flex-col gap-1 {{ if $shouldOpen }}open{{ end }}">
+        {{- template "sidebar-item-link" (dict "context" . "active" $active "title" .title "link" .link) -}}
+        {{- if .section -}}
+          {{- partial "sidebar/render-tree-branch" (dict "context" $context "entry" .section "page" $page) -}}
+        {{- end -}}
+      </li>
+    {{- end -}}
+  </ul>
+</div>
--- a/layouts/partials/sidebar/render-tree.html
+++ b/layouts/partials/sidebar/render-tree.html
@ -0,0 +1,18 @@
+{{- $context := .context -}}
+{{- $page := .page -}}
+{{- $pageLink := .page.RelPermalink -}}
+{{- range .tree -}}
+  {{- $active := eq $pageLink .link -}}
+  {{- $containsPage := hasPrefix $pageLink .link -}}
+  {{- $shouldOpen := or (.open) $containsPage $active | default false }}
+  <li class="{{ if $shouldOpen }}open{{ end }}">
+    {{- template "sidebar-item-link" (dict "context" . "active" $active "title" .title "link" .link) -}}
+    {{- if .section -}}
+      {{- if not $containsPage -}}
+        {{- partialCached "sidebar/render-tree-branch-without-leaf" .section .section -}}
+      {{- else -}}
+        {{- partial "sidebar/render-tree-branch" (dict "context" $context "entry" .section "page" $page) -}}
+      {{- end -}}
+    {{- end -}}
+  </li>
+{{ end }}
--- a/layouts/partials/sidebar/section-tree.html
+++ b/layouts/partials/sidebar/section-tree.html
@ -0,0 +1,51 @@
+{{ $context := . -}}
+
+{{- $pages := union .RegularPages .Sections -}}
+{{- $pages = where $pages "Params.sidebar.exclude" "!=" true -}}
+
+{{- $data := slice -}}
+
+{{- range $pages.ByWeight -}}
+  {{ $structure := (partial "sidebar/section-walk" .) | unmarshal -}}
+  {{ $data = $data | append $structure -}}
+{{ end -}}
+
+{{- define "partials/sidebar/section-walk" -}}
+  {{- with . -}}
+  {
+    "title": "{{ .LinkTitle | default .File.BaseFileName }}",
+    "link": "{{ .RelPermalink }}",
+    "toc": {{ partial "sidebar/section-page-toc" . }},
+    "open": {{ .Params.sidebar.open | default false }}
+    {{- if .IsSection }},
+    "section": [
+      {{ $pages := union .RegularPages .Sections -}}
+      {{ $pages = where $pages "Params.sidebar.exclude" "!=" true -}}
+      {{ range $index, $page := $pages.ByWeight -}}
+        {{ partial "sidebar/section-walk" . }}{{ if not (ge $index (sub (len $pages) 1)) }},{{ end -}}
+      {{ end -}}
+    ]
+    {{ end -}}
+  }
+  {{- end }}
+{{- end -}}
+
+{{- define "partials/sidebar/section-page-toc" -}}
+  {{/* Get level 2 headings list used mainly for mobile navigation */}}
+  [
+    {{- with .Fragments.Headings -}}
+      {{/* Loop over level 1 headings */}}
+      {{- range . }}
+        {{- with .Headings }}
+          {{ $headings := . }}
+          {{- range $index, $heading := $headings }}
+            {{ $heading.Title | jsonify (dict "noHTMLEscape" true) }}
+            {{- if not (ge $index (sub (len $headings) 1)) }},{{ end -}}
+          {{ end -}}
+        {{- end -}}
+      {{ end -}}
+    {{- end -}}
+  ]
+{{- end -}}
+
+{{ return ($data | jsonify (dict "noHTMLEscape" true)) }}
--- a/layouts/partials/sidebar/toc.html
+++ b/layouts/partials/sidebar/toc.html
@ -0,0 +1,21 @@
+{{ $page := . }}
+{{ with $page.Fragments.Headings }}
+  <ul
+    class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'
+  >
+    {{- range . }}
+      {{- with .Headings }}
+        {{- range . -}}
+          <li>
+            <a
+              href="#{{ anchorize .ID }}"
+              class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
+            >
+              {{- .Title -}}
+            </a>
+          </li>
+        {{ end -}}
+      {{ end -}}
+    {{ end -}}
+  </ul>
+{{ end }}
--- a/layouts/partials/third-party/scripts.html
+++ b/layouts/partials/third-party/scripts.html
@ -0,0 +1,42 @@
+{{/* Mermaid */}}
+{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
+{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
+  {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
+  <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+      mermaid.initialize({ startOnLoad: true, theme: theme });
+    });
+  </script>
+{{- end -}}
+
+{{/* KaTex */}}
+{{- if .Page.Params.math -}}
+  {{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
+  {{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
+  {{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
+  {{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
+  <link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
+  <script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
+  <script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
+  <script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
+  {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
+  {{- range $katexFonts -}}
+    {{ .Publish }}
+  {{- end -}}
+  <script>
+    // TODO: make render options configurable
+    document.addEventListener("DOMContentLoaded", function () {
+      renderMathInElement(document.body, {
+        delimiters: [
+          { left: "$$", right: "$$", display: true },
+          { left: "$", right: "$", display: false },
+          { left: "\\(", right: "\\)", display: false },
+          { left: "\\[", right: "\\]", display: true },
+        ],
+        throwOnError: false,
+      });
+    });
+  </script>
+{{ end }}
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -3,6 +3,7 @@
 {{- $toc := .Params.toc | default true -}}
 {{- $onThisPage := (T "onThisPage") | default "On this page"}}
 {{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
+{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}

 <nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
  {{- if $toc }}
@ -25,10 +26,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 }}
-  {{ range seq $len }}
-    {{ $i := sub $len . }}
-    {{ $headingKey := index $headingKeys $i }}
-    {{ $headingTitle := index $headingTitles $i }}
+{{ if eq $type "content" }}
+  {{/* Include full content of the page */}}
+  {{ if eq $len 0 }}
+    {{ $data = $data | merge (dict "" ($page.Plain | htmlUnescape | chomp)) }}
+  {{ else }}
+    {{/* Split the raw content from bottom to top */}}
+    {{ range seq $len }}
+      {{ $i := sub $len . }}
+      {{ $headingKey := index $headingKeys $i }}
+      {{ $headingTitle := index $headingTitles $i }}

-    {{ if eq $i 0 }}
-      {{ $data = $data | merge (dict $headingKey ($content | markdownify | plainify)) }}
-    {{ else }}
-      {{ $parts := split $content (printf "\n%s\n" $headingTitle) }}
-      {{ $lastPart := index $parts (sub (len $parts) 1) }}
+      {{ if eq $i 0 }}
+        {{ $data = $data | merge (dict $headingKey ($content | 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)) }}
-      {{ $content = strings.TrimSuffix $lastPart $content }}
-      {{ $content = strings.TrimSuffix (printf "\n%s\n" $headingTitle) $content }}
+        {{ $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/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/package.json
+++ b/package.json
@ -3,7 +3,8 @@
    "dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
    "dev": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
    "build:css": "npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css",
-    "build": "hugo --gc --minify --themesDir=../.. --source=exampleSite"
+    "build": "hugo --gc --minify --themesDir=../.. --source=exampleSite",
+    "metrics": "hugo --themesDir=../.. --source=exampleSite --templateMetrics --templateMetricsHints"
  },
  "devDependencies": {
    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,10 +3,10 @@ const colors = require('tailwindcss/colors')
 const makePrimaryColor =
  l =>
    ({ opacityValue }) => {
-      if (opacityValue === undefined) {
-        return `hsl(var(--primary-hue) 100% ${l}%)`
-      }
-      return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})`
+      return (
+        `hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
+        (opacityValue ? ` / ${opacityValue})` : ')')
+      )
    }

 /** @type {import('tailwindcss').Config} */
Author	SHA1	Message	Date
Xin	9fc253dff5	chore: cache tree branch without leaf	2023-10-24 22:52:10 +01:00
Xin	0125822785	chore: move inline template to partial	2023-10-24 22:22:57 +01:00
Xin	1e1d1c8716	chore: add back mobile nav	2023-10-24 21:39:43 +01:00
Xin	1048ee47d7	fix: unescape html for link title	2023-10-24 20:41:50 +01:00
Xin	5842f893a3	chore: add toc in section tree json	2023-10-24 20:41:28 +01:00
Xin	78ce7c2f2e	fix: link in sidebar extra component	2023-10-24 20:17:39 +01:00
Xin	0652772c15	refactor: pre-calculate section tree structure json	2023-10-24 00:17:48 +01:00
Xin	13e4eb3414	chore: add section-tree.html	2023-10-23 21:59:26 +01:00
Xin	529fcd8a62	chore: add metric command	2023-10-23 19:44:18 +01:00
Xin	21a13c49f9	chore: inline partial sidebar switches	2023-10-22 13:57:55 +01:00
Xin	98d0a3dc73	refactor: split out sidebar elements into partials	2023-10-22 11:17:26 +01:00
Xin	24f3178ea8	perf: cache scripts	2023-10-22 11:01:19 +01:00
Xin	230cc438b7	perf: cache sidebar footer	2023-10-21 23:22:45 +01:00
Xin	214cb7994f	perf: cache sidebear-collapsible-button	2023-10-21 23:18:42 +01:00
Xin	792ad4b569	perf: cache partial "search.html"	2023-10-21 23:13:30 +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