chore: update doc

* regenerate css and update hugo stats json

README.fa.md

@@ -0,0 +1,47 @@
+<div align="center">
+  <h1 align="center">هگزترا</h1>
+  <p align="center">تم هیوگو مدرن، پاسخگو و دارای امکانات کامل برای ایجاد وب‌سایت‌های استاتیک زیبا.</p>
+
+نسخه‌ی نمایشی → [imfing.github.io/hextra](https://imfing.github.io/hextra/fa)
+</div>
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/5097752/263550533-c18343ca-3848-4230-b5c0-ee989d7916da.png">
+  <img alt="Hextra" src="https://user-images.githubusercontent.com/5097752/263550528-663599f9-17a1-4686-b5c4-3da233b5034d.png">
+</picture>
+
+<div align="right">
+<a href="https://github.com/imfing/hextra/actions/workflows/pages.yml"><img alt="GitHub Actions Status" src="https://github.com/imfing/hextra/actions/workflows/pages.yml/badge.svg"></a> <a href="https://app.netlify.com/sites/hugo-hextra/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/61d6e55a-2447-487e-b59f-c9537e5df175/deploy-status"></a>
+</div>
+
+## ویژگی‌ها
+
+- **طراحی زیبا** - با الهام از Nextra، هگزترا از Tailwind CSS برای ارائه یک طراحی مدرن که سایت شما را برجسته می‌کند، استفاده می‌کند.
+- **طراحی واکنش‌گرا و حالت تیره** - در تمام دستگاه‌ها، از تلفن همراه، تبلت تا دسکتاپ، عالی به نظر می‌رسد. حالت تیره نیز برای انطباق با شرایط مختلف روشنایی پشتیبانی می‌شود.
+- **سریع و سبک** - طراحی شده توسط Hugo، یک ایجادکننده سایت استاتیک سریع مثل رعد و برق که در یک فایل باینری قرار گرفته است، هگزترا ردپای خود را به حداقل می‌رساند. برای استفاده از آن به جاوااسکریپت یا Node.js نیازی ندارید.
+- **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی.
+- **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند.
+- **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است.
+
+## شروع کنید
+
+### شروع سریع از طریق Template
+
+استفاده از [Hextra Starter Template](https://github.com/imfing/hextra-starter-template) ساده‌ترین روش برای راه‌اندازی سریع یک وب‌سایت جدید با تم هگزترا است. با کلیک بر روی دکمه "Use this template" در بالای صفحه مخزن شروع کنید.
+
+مخزن تم همچنین شامل یک [گردش کار گیت‌هاب Actions](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) رای به‌کاراندازی وب‌سایت شما در گیت‌هاب Pages است.
+
+<img alt="Hextra Starter Template" src="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" width=600/>
+
+### استفاده
+
+برای اطلاعات بیشتر به بخش [مستندات](https://imfing.github.io/hextra/fa/docs) مراجعه کنید.
+
+## مشارکت کردن
+
+از مشارکت افراد جدید استقبال می‌کنیم.
+ برای شروع، [راهنمای مشارکت](.github/CONTRIBUTING.md) را بررسی کنید.
+
+## مجوز
+
+[مجوز MIT](./LICENSE)

assets/css/components/code-copy.css

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

assets/css/components/jupyter.css

@@ -0,0 +1,29 @@
+.hextra-jupyter-code-cell {
+  scrollbar-gutter: auto;
+
+  @apply hx-mt-6;
+
+  .hextra-jupyter-code-cell-source {
+    @apply hx-text-sm;
+    .chroma,
+    pre {
+      @apply hx-m-0;
+    }
+  }
+
+  .hextra-jupyter-code-cell-outputs-container {
+    @apply hx-text-xs hx-overflow-hidden hx-border hx-border-t-0 hx-rounded-b-xl dark:hx-border-neutral-800;
+
+    .hextra-jupyter-code-cell-outputs {
+      @apply hx-overflow-auto hx-max-h-[50vh];
+
+      pre {
+        @apply hx-p-4;
+      }
+    }
+  }
+}
+
+.hextra-jupyter-code-cell:has(.hextra-jupyter-code-cell-outputs) .hextra-jupyter-code-cell-source .chroma {
+  @apply hx-rounded-b-none;
+}

assets/css/components/navbar.css

@@ -1,6 +1,6 @@
 nav {
   .search-wrapper {
-    @apply hidden md:inline-block;
+    @apply hx-hidden md:hx-inline-block;
   }
 }
 
@@ -8,13 +8,13 @@ nav {
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nav-container-blur {
-    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
   }
 }
 
 .hamburger-menu svg {
   g {
-    @apply origin-center;
+    @apply hx-origin-center;
     transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   }
   path {
@@ -37,16 +37,16 @@ nav {
 
   &.open > {
     path {
-      @apply opacity-0;
+      @apply hx-opacity-0;
     }
     g:nth-of-type(1) {
-      @apply rotate-45;
+      @apply hx-rotate-45;
       path {
         transform: translate3d(0, 4px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply -rotate-45;
+      @apply -hx-rotate-45;
       path {
         transform: translate3d(0, -4px, 0);
       }

assets/css/components/scrollbar.css

@@ -1,21 +1,21 @@
-.hextra-scrollbar {
+.hextra-scrollbar, .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;
+    @apply hx-w-3 hx-h-3;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    @apply hx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply rounded-[10px];
+    @apply hx-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;
+    @apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
   }
 }

assets/css/components/search.css

@@ -1,31 +1,31 @@
 .search-wrapper {
   li {
-    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
     a {
-      @apply block scroll-m-12 px-2.5 py-2;
+      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
     }
 
     .title {
-      @apply text-base font-semibold leading-5;
+      @apply hx-text-base hx-font-semibold hx-leading-5;
     }
 
     .active {
-      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
     }
   }
 
   .no-result {
-    @apply block select-none p-8 text-center text-sm text-gray-400;
+    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
   }
 
   .prefix {
-    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
-    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
-    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
+    @apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
+    hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
+    contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
   }
 
   .excerpt {
-    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
+    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;
@@ -33,6 +33,6 @@
   }
 
   .match {
-    @apply text-primary-600;
+    @apply hx-text-primary-600;
   }
 }

assets/css/components/sidebar.css

@@ -1,6 +1,6 @@
 @media (max-width: 767px) {
   .sidebar-container {
-    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
@@ -10,12 +10,12 @@
 
 .sidebar-container {
   li > div {
-    @apply h-0;
+    @apply hx-h-0;
   }
   li.open > div {
-    @apply h-auto pt-1;
+    @apply hx-h-auto hx-pt-1;
   }
   li.open > a > span > svg > path {
-    @apply rotate-90;
+    @apply hx-rotate-90;
   }
 }

assets/css/components/steps.css

@@ -2,10 +2,16 @@
   counter-increment: step;
 
   &:before {
-    @apply absolute w-[33px] h-[33px];
-    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
-    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
-    @apply mt-[3px] ml-[-41px];
+    @apply hx-absolute hx-w-[33px] hx-h-[33px];
+    @apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
+    @apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
+    @apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
     content: counter(step);
   }
 }
+
+:lang(fa) .steps h3 {
+  &:before {
+    content: counter(step, persian);
+  }
+}

assets/css/highlight.css

@@ -2,47 +2,52 @@
 @import "chroma/light.css";
 @import "chroma/dark.css";
 
-.code-block {
-  @apply text-[.9em] leading-5;
+.hextra-code-block {
+  @apply hx-text-[.9em] hx-leading-5;
 
   pre {
-    @apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
+    @apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
   }
 
   .filename {
-    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
+    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
+  }
+
+  .filename + pre:not(.lntable pre) {
+    /* Override padding for code blocks with filename but no highlight */
+    @apply hx-pt-12;
   }
 }
 
-.code-block pre:not(.lntable pre) {
-  @apply px-4 mb-4 py-4 rounded-xl;
+.hextra-code-block pre:not(.lntable pre) {
+  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
 }
 
-.code-block div:nth-of-type(2) pre {
-  @apply pt-12 pb-4;
+.hextra-code-block div:nth-of-type(2) pre {
+  @apply hx-pt-12 hx-pb-4;
 }
 
 .chroma {
   .lntable {
-    @apply m-0 block w-auto overflow-auto rounded-xl;
+    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
 
     pre {
-      @apply pt-4 pb-4;
+      @apply hx-pt-4 hx-pb-4;
     }
   }
   .ln,
   .lnt:not(.hl > .lnt),
   .hl:not(.line) {
-    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
+    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
   }
   .lntd {
-    @apply p-0 align-top;
+    @apply hx-p-0 hx-align-top;
   }
   .lntd:last-of-type {
-    @apply w-full;
+    @apply hx-w-full;
   }
   /* LineHighlight */
   .hl {
-    @apply block w-full bg-primary-800/10;
+    @apply hx-block hx-w-full hx-bg-primary-800/10;
   }
 }

assets/css/styles.css

@@ -9,15 +9,16 @@
 @import "components/navbar.css";
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
+@import "components/jupyter.css";
 
 html {
-  @apply text-base antialiased;
+  @apply hx-text-base hx-antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
+  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
 }
 
 :root {

assets/css/typography.css

@@ -1,113 +1,124 @@
 .content {
   :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
+    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
   }
   :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
   }
   :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
   }
   :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
   }
   :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
   }
   :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
   }
   :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 leading-7 first:mt-0;
+    @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
   }
   :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
+    @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
   }
   :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
+    @apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
   }
-  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
+  :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
   }
-  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+  :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
-  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
-    @apply block overflow-x-auto mt-6 p-0 first:mt-0;
+  :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
 
     tr {
-      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
+      @apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
     }
     th {
-      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
     }
     td {
-      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
     }
   }
   :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
   :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
-  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
+     inside the list item (li) of any parent ul or ol.
+     The rule sets the top margin of the selected list to zero. */
+  :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-mt-0;
   }
-  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-transparent rounded-none dark:bg-transparent;
+  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
+  }
+  :where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
   }
   :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mx-auto my-4 rounded-md;
+    @apply hx-mx-auto hx-my-4 hx-rounded-md;
   }
   :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
-      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
+      @apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
     }
   }
   .footnotes {
-    @apply mt-12 text-sm;
+    @apply hx-mt-12 hx-text-sm;
   }
 }
 
 .subheading-anchor {
-  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
+  @apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
 
   span:target + &,
   :hover > &,
   &:focus {
-    @apply opacity-100;
+    @apply hx-opacity-100;
   }
 
   span + &,
   :hover > & {
-    @apply !no-underline;
+    @apply !hx-no-underline;
   }
 
   &:after {
-    @apply content-['#'] px-1;
-    @apply text-gray-300 dark:text-neutral-700;
+    @apply hx-content-['#'] hx-px-1;
+    @apply hx-text-gray-300 dark:hx-text-neutral-700;
     span:target + & {
-      @apply text-gray-400;
-      @apply dark:text-neutral-500;
+      @apply hx-text-gray-400;
+      @apply dark:hx-text-neutral-500;
     }
   }
 }
 
 article details > summary {
   &::-webkit-details-marker {
-    @apply hidden;
+    @apply hx-hidden;
   }
   &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
     height: 1.2em;
     width: 1.2em;
     vertical-align: -4px;
+    padding: 0 0.6em;
   }
 }
+
+:lang(fa) ol {
+  list-style-type: persian;
+}

assets/js/back-to-top.js

@@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", function () {
   if (backToTop) {
     document.addEventListener("scroll", (e) => {
       if (window.scrollY > 300) {
-        backToTop.classList.remove("opacity-0");
+        backToTop.classList.remove("hx-opacity-0");
       } else {
-        backToTop.classList.add("opacity-0");
+        backToTop.classList.add("hx-opacity-0");
       }
     });
   }

assets/js/code-copy.js

@@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
     return svg;
   }
 
-  document.querySelectorAll('.code-copy-btn').forEach(function (button) {
+  document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
     // Add copy and success icons
     button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
     button.querySelector('.success-icon')?.appendChild(getSuccessIcon());
@@ -33,8 +33,8 @@ document.addEventListener('DOMContentLoaded', function () {
     // 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);
+      // Get the code target
+      const target = button.parentElement.previousElementSibling;
       let codeElement;
       if (target.tagName === 'CODE') {
         codeElement = target;
@@ -44,14 +44,17 @@ document.addEventListener('DOMContentLoaded', function () {
         codeElement = codeElements[codeElements.length - 1];
       }
       if (codeElement) {
+        let code = codeElement.innerText;
         // Replace double newlines with single newlines in the innerText
         // as each line inside <span> has trailing newline '\n'
-        const code = codeElement.innerText.replace(/\n\n/g, '\n');
+        if ("lang" in codeElement.dataset) {
+          code = code.replace(/\n\n/g, '\n');
+        }
         navigator.clipboard.writeText(code).then(function () {
           button.classList.add('copied');
           setTimeout(function () {
             button.classList.remove('copied');
-          }, 500);
+          }, 1000);
         }).catch(function (err) {
           console.error('Failed to copy text: ', err);
         });

assets/js/flexsearch.js

@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
     // 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';
+      key.innerHTML = '<span class="hx-text-xs">⌘</span>K';
     });
   }
 });
@@ -128,7 +128,7 @@ document.addEventListener("DOMContentLoaded", function () {
   function hideSearchResults() {
     const { resultsElement } = getActiveSearchElement();
     if (!resultsElement) return;
-    resultsElement.classList.add('hidden');
+    resultsElement.classList.add('hx-hidden');
   }
 
   // Handle keyboard events.
@@ -172,8 +172,9 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Preload the search index.
   async function preloadIndex() {
+    const tokenize = '{{- site.Params.search.flexsearch.tokenize | default  "forward" -}}';
     window.pageIndex = new FlexSearch.Document({
-      tokenize: 'forward',
+      tokenize,
       cache: 100,
       document: {
         id: 'id',
@@ -183,7 +184,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     window.sectionIndex = new FlexSearch.Document({
-      tokenize: 'forward',
+      tokenize,
       cache: 100,
       document: {
         id: 'id',
@@ -250,7 +251,7 @@ document.addEventListener("DOMContentLoaded", function () {
     while (resultsElement.firstChild) {
       resultsElement.removeChild(resultsElement.firstChild);
     }
-    resultsElement.classList.remove('hidden');
+    resultsElement.classList.remove('hx-hidden');
 
     const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || [];
 

assets/js/lang.js

@@ -5,7 +5,7 @@
       e.preventDefault();
       switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
       const optionsElement = switcher.nextElementSibling;
-      optionsElement.classList.toggle('hidden');
+      optionsElement.classList.toggle('hx-hidden');
 
       // Calculate position of language options element
       const switcherRect = switcher.getBoundingClientRect();
@@ -21,7 +21,7 @@
       languageSwitchers.forEach((switcher) => {
         switcher.dataset.state = 'closed';
         const optionsElement = switcher.nextElementSibling;
-        optionsElement.classList.add('hidden');
+        optionsElement.classList.add('hx-hidden');
       });
     }
   });

assets/js/menu.js

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

data/icons.yaml

@@ -9,6 +9,21 @@ github: >
     <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
   </svg>
 
+codeberg: >
+  <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/>
+  </svg>
+
+gitlab: >
+  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="m23.6 9.593l-.033-.086L20.3.98a.851.851 0 0 0-.336-.405a.875.875 0 0 0-1 .054a.875.875 0 0 0-.29.44L16.47 7.818H7.537L5.333 1.07a.857.857 0 0 0-.29-.441a.875.875 0 0 0-1-.054a.859.859 0 0 0-.336.405L.433 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009l.03.021l4.977 3.727l2.462 1.863l1.5 1.132a1.009 1.009 0 0 0 1.22 0l1.499-1.132l2.461-1.863l5.006-3.75l.013-.01a6.068 6.068 0 0 0 2.01-7.002"/>
+  </svg>
+
+bitbucket: >
+  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z" />
+  </svg>
+
 hextra: <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="m 105.50024,22.224647 c -9.59169,-5.537563 -21.40871,-5.537563 -31.000093,0 L 39.054693,42.689119 C 29.463353,48.226675 23.55484,58.460531 23.55484,69.535642 v 40.928918 c 0,11.07542 5.908513,21.3092 15.499853,26.84652 l 35.445453,20.46446 c 9.591313,5.53732 21.408404,5.53732 31.000094,0 l 35.44507,-20.46446 c 9.59131,-5.53732 15.49985,-15.7711 15.49985,-26.84652 V 69.535642 c 0,-11.075111 -5.90854,-21.308967 -15.49985,-26.846523 z M 34.112797,85.737639 c -1.384445,2.397827 -1.384445,5.352099 0,7.749927 l 24.781554,42.922974 c 1.38437,2.39783 3.942853,3.87496 6.711592,3.87496 h 49.563107 c 2.76905,0 5.3273,-1.47713 6.71144,-3.87496 l 24.78194,-42.922974 c 1.38414,-2.397828 1.38414,-5.3521 0,-7.749927 L 121.88049,42.814746 c -1.38414,-2.397828 -3.94239,-3.874964 -6.71144,-3.874964 H 65.605944 c -2.768739,0 -5.327223,1.477059 -6.711592,3.874964 z" style="stroke-width:0.774993" /></svg>
 
 hugo: <svg viewBox="0 0 370 391" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m207.5 22.4 114.4 66.6c13.5 7.9 21.9 22.4 21.9 38v136.4c0 17.3-9.3 33.3-24.5 41.8l-113.5 63.9a49.06 49.06 0 0 1 -48.5-.2l-104.5-60.1c-16.4-9.5-26.6-27-26.6-45.9v-129.5c0-19.1 9.9-36.8 26.1-46.8l102.8-63.5c16-9.9 36.2-10.1 52.4-.7z" fill="#ff4088" stroke="#c9177e" stroke-width="27" /><path d="m105.6 298.2v-207.2h43.4v75.5h71.9v-75.5h43.5v207.2h-43.5v-90.6h-71.9v90.6z" fill="#fff" /></g></svg>
@@ -271,3 +286,4 @@ mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill
 youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
 x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
 linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+slack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.268a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523z" /></svg>

exampleSite/content/_index.fa.md

@@ -0,0 +1,76 @@
+---
+title: تم هگزترا
+layout: hextra-home
+---
+
+{{< hextra/hero-badge >}}
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
+  <span>آزاد، متن‌باز</span>
+  {{< icon name="arrow-circle-left" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+
+<div class="hx-mt-6 hx-mb-6">
+{{< hextra/hero-headline >}}
+  ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:hx-block hx-hidden" />با مارک‌داون و هیوگو
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="hx-mb-12">
+{{< hextra/hero-subtitle >}}
+  تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:hx-block hx-hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="hx-mb-6">
+{{< hextra/hero-button text="شروع کنید" link="docs" >}}
+</div>
+
+<div class="hx-mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="سریع و با امکانات کامل"
+    subtitle="ساده و آسان برای استفاده، در عین حال قدرتمند و غنی از ویژگی‌ها متنوع."
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-doc.webp"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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="مارک‌داون تنها چیزی است که شما نیاز دارید"
+    subtitle="فقط با مارک‌داون بنویسید. تکمیل و کامل با کامپوننت‌های کد کوتاه."
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
+    image="/images/hextra-markdown.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
+    image="/images/hextra-search.webp"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-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="برای استفاده از هگزترا به هیچ وابستگی یا Node.js نیاز نیست. با پشتیبانی از هیوگو، یکی از سریع‌ترین تولیدکنندگان سایت استاتیک، سایت شما را تنها در چند ثانیه با یک باینری می‌سازد."
+  >}}
+  {{< hextra/feature-card
+    title=" واکنش‌گرا با حالت تیره"
+    subtitle="در اندازه‌های مختلف صفحه نمایش عالی به نظر می‌رسد. پشتیبانی از حالت تیره داخلی، با تغییر خودکار براساس اولویت سیستم کاربر."
+  >}}
+  {{< hextra/feature-card
+    title="ساخت و میزبانی رایگان"
+    subtitle="با گیت‌هاب Actions بسازید و به صورت رایگان در گیت‌هاب Pages میزبانی کنید. یا می‌توانید آن را در هر سرویس میزبانی استاتیک میزبانی کنید."
+  >}}
+  {{< hextra/feature-card
+    title="چند زبانه آسان"
+    subtitle="فقط با افزودن پسوند محلی به پرونده مارک‌داون صفحات وب‌سایت چند زبانه ایجاد کنید. افزودن پشتیبانی i18n به سایت شما بصری است."
+  >}}
+  {{< hextra/feature-card
+    title="و خیلی بیشتر..."
+    icon="sparkles"
+    subtitle="برجسته‌کردن سینتکس / فهرست مطالب / سئو / RSS / LaTeX / Mermaid / سفارشی‌سازی / و موارد دیگر…"
+  >}}
+{{< /hextra/feature-grid >}}

exampleSite/content/_index.md

@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-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">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
+  Build modern websites&nbsp;<br class="sm:hx-block hx-hidden" />with Markdown and Hugo
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
+  Fast, batteries-included Hugo theme&nbsp;<br class="sm:hx-block hx-hidden" />for creating beautiful static websites
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="Get Started" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card

exampleSite/content/_index.zh-cn.md

@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
   <span>免费 开源</span>
   {{< icon name="arrow-circle-right" attributes="height=14" >}}
 {{< /hextra/hero-badge >}}
 
-<div class="mt-6 mb-6">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
+  创建现代化网站&nbsp;<br class="sm:hx-block hx-hidden" />由 Markdown 和 Hugo 驱动
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
+  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:hx-block hx-hidden" />为构建现代化的静态网站而生
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="现在开始" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-mt-6"></div>
 
 {{< hextra/feature-grid >}}
   {{< hextra/feature-card
     title="快速且功能全面"
     subtitle="简单易用，功能强大丰富。"
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="/images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-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]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card

exampleSite/content/about/index.fa.md

@@ -0,0 +1,22 @@
+---
+title: درباره ما
+toc: false
+---
+
+هگزترا به گونه‌ای طراحی شده است که یک موضوع ساده، سریع و انعطاف پذیر برای ساخت وب‌سایت‌های استاتیک مدرن باشد. این به ویژه برای وب‌سایت‌های مستندسازی مناسب است اما می‌تواند برای انواع مختلف سایت‌ها مانند وبلاگ‌ها، نمونه‌کار و موارد دیگر نیز استفاده شود.
+
+Hugo مانند Jekyll، یک ایجادکننده سایت استاتیک است. چیزی که Hugo را متمایز می‌کند این است که یک باینری واحد است و نصب و اجرای آن بر روی پلتفرم‌های مختلف را آسان می‌کند. همچنین بسیار سریع و قابل اعتماد است و می‌تواند یک سایت را با هزاران صفحه در میلی‌ثانیه ارائه دهد.
+
+هگزترا با ذهنیتی ساخته شده است که بر داشتن حداقل ردپا متمرکز شده است. برای شروع، هیچ وابستگی اضافی مانند بسته‌های Node.js لازم نیست. تنها چیزی که نیاز دارید یک پرونده پیکربندی YAML به همراه محتوای مارک‌داون شما است. بنابراین، شما می‌توانید به جای تنظیم ابزار، روی نوشتن محتوای با کیفیت تمرکز کنید.
+
+## اعتبار
+
+ترجمه فارسی مستندات توسط [گودرز جعفری](https://goudarzjafari.com/) انجام شده است.
+
+هگزترا بدون ابزار و الهامات زیر ساخته نمی‌شود:
+
+- [هیوگو](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)

exampleSite/content/blog/_index.fa.md

@@ -0,0 +1,10 @@
+---
+title: "وبلاگ"
+---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>خوراک RSS</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>

exampleSite/content/blog/markdown.fa.md

@@ -0,0 +1,166 @@
+---
+title: راهنمای استفاده سینتکس مارک‌داون
+date: 2024-03-03
+authors:
+  - name: imfing
+    link: https://github.com/imfing
+    image: https://github.com/imfing.png
+  - name: Octocat
+    link: https://github.com/octocat
+    image: https://github.com/octocat.png
+  - name: Goudarz Jafari
+    link: https://github.com/Goudarz
+    image: https://github.com/Goudarz.png
+tags:
+  - Markdown
+  - مثال
+  - راهنمای
+excludeSearch: true
+---
+
+این مقاله نمونه‌ای از سینتکس ابتدایی مارک‌داون را آموزش می‌دهد، که می‌توانید در پرونده‌های محتوای Hugo استفاده کنید.
+<!--more-->
+
+## سینتکس ابتدایی
+
+### سرتیترها
+
+```
+# سرتیتر ۱
+## سرتیتر ۲
+### سرتیتر ۳
+#### سرتیتر ۴
+##### سرتیتر ۵
+###### سرتیتر ۶
+```
+
+## سرتیتر ۲
+### سرتیتر ۳
+#### سرتیتر ۴
+##### سرتیتر ۵
+###### سرتیتر ۶
+
+### تاکید
+
+```text
+*این متن کج خواهد بود*
+_این متن هم کج خواهد بود_
+
+**این متن توپر خواهد بود**
+__این متن هم توپر خواهد بود__
+
+_شما **می‌توانید** آنها را ترکیب کنید_
+```
+
+*این متن کج خواهد بود*
+
+_این متن هم کج خواهد بود_
+
+**این متن توپر خواهد بود**
+
+__این متن هم توپر خواهد بود__
+
+_شما **می‌توانید** آنها را ترکیب کنید_
+
+### فهرست‌ها
+
+#### مرتب نشده
+
+```
+* مورد ۱
+* مورد ۲
+  * مورد ۱الف
+  * مورد ۲ب
+```
+
+* مورد ۱
+* مورد ۲
+  * مورد ۱الف
+  * مورد ۲ب
+
+#### مرتب شده
+
+```
+1. مورد ۱
+2. مورد ۲
+3. مورد ۳
+   1. مورد ۳الف
+   2. مورد ۳ب
+```
+
+1. مورد ۱
+2. مورد ۲
+3. مورد ۳
+   1. مورد ۳الف
+   2. مورد ۳ب
+
+### عکس‌ها
+
+```markdown
+![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+```
+
+![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### پیوندها
+
+```markdown
+[هیوگو](https://gohugo.io)
+```
+
+[هیوگو](https://gohugo.io)
+
+### بلوک نقل‌قول
+
+```markdown
+همانطور که نیوتن گفت:
+
+> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است.
+```
+
+> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است.
+
+### کد درون‌خطی
+
+```markdown
+`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است.
+```
+
+`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است.
+
+### بلوک‌های کد
+
+#### برجسته‌کردن سینتکس(Syntax)
+
+````markdown
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+````
+
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+
+### جدول‌ها
+
+```markdown
+| عنوان    | توضیحات |
+| --------- | ----------- |
+| سرتیتر    | عنوان       |
+| پاراگراف | متن        |
+```
+
+| عنوان    | توضیحات |
+| --------- | ----------- |
+| سرتیتر    | عنوان       |
+| پاراگراف | متن        |
+
+## منابع
+
+- [سینتکس مارک‌داون](https://www.markdownguide.org/basic-syntax/)
+- [مارک‌داون هیوگو](https://gohugo.io/content-management/formats/#markdown)

exampleSite/content/blog/markdown.md

@@ -2,8 +2,12 @@
 title: Markdown Syntax Guide
 date: 2020-01-01
 authors:
-  - name: John Doe
-    link: https://example.com/johndoe
+  - name: imfing
+    link: https://github.com/imfing
+    image: https://github.com/imfing.png
+  - name: Octocat
+    link: https://github.com/octocat
+    image: https://github.com/octocat.png
 tags:
   - Markdown
   - Example

exampleSite/content/docs/_index.fa.md

@@ -0,0 +1,41 @@
+---
+linkTitle: "مستندات"
+title: معرفی
+---
+
+👋 سلام! به مستندات هگزترا خوش آمدید!
+
+<!--more-->
+
+## هگزترا چیه؟
+
+هگزترا یک تم [Hugo][hugo] مدرن و سریع است که با [Tailwind CSS][tailwind-css] ساخته شده است.
+ طراحی شده برای ساخت وب‌سایت‌های زیبا برای مستندات، وبلاگ‌ها و وب‌سایت‌ها، ویژگی‌های خارج از جعبه و انعطاف‌پذیری را برای پاسخگویی نیازهای مختلف فراهم می‌کند.
+
+## ویژگی‌ها
+
+- **طراحی زیبا** - با الهام از Nextra، هگزترا از Tailwind CSS برای ارائه یک طراحی مدرن که سایت شما را برجسته می‌کند، استفاده می‌کند.
+- **طراحی واکنش‌گرا و حالت تیره** - در تمام دستگاه‌ها، از تلفن همراه، تبلت تا دسکتاپ، عالی به نظر می‌رسد. حالت تیره نیز برای انطباق با شرایط مختلف روشنایی پشتیبانی می‌شود.
+- **سریع و سبک** - طراحی شده توسط Hugo، یک ایجادکننده سایت استاتیک سریع مثل رعد و برق که در یک فایل باینری قرار گرفته است، هگزترا ردپای خود را به حداقل می‌رساند. برای استفاده از آن به جاوااسکریپت یا Node.js نیازی ندارید.
+- **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی.
+- **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند.
+- **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است.
+
+## سوال یا بازخورد؟
+
+{{< callout emoji="❓" >}}
+  هگزترا هنوز در حال توسعه است.
+ سوال یا بازخوردی دارید؟ با خیال راحت [یک موضوع را باز کنید](https://github.com/imfing/hextra/issues)!
+{{< /callout >}}
+
+## بعدی
+
+برای شروع کردن به بخش زیر مراجعه کنید:
+
+{{< cards >}}
+  {{< card link="getting-started" title="شروع کنید" icon="document-text" subtitle="یادگیری نحوه ایجاد وب‌سایت با استفاده از هگزترا" >}}
+{{< /cards >}}
+
+[hugo]: https://gohugo.io/
+[flex-search]: https://github.com/nextapps-de/flexsearch
+[tailwind-css]: https://tailwindcss.com/

exampleSite/content/docs/advanced/_index.fa.md

@@ -0,0 +1,16 @@
+---
+linkTitle: پیشرفته
+title: موضوعات پیشرفته
+prev: /docs/guide/shortcodes/steps
+next: /docs/advanced/multi-language
+---
+
+این بخش برخی از موضوعات پیشرفته تم را پوشش می‌دهد.
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="multi-language" title="چند زبانه" icon="translate" >}}
+  {{< card link="customization" title="سفارشی‌سازی" icon="pencil" >}}
+  {{< card link="comments" title="سیستم نظردهی" icon="chat-alt" >}}
+{{< /cards >}}

exampleSite/content/docs/advanced/comments.fa.md

@@ -0,0 +1,39 @@
+---
+title: سیستم نظردهی
+linkTitle: نظردهی
+---
+
+هگزترا از افزودن سیستم نظردهی به سایت شما پشتیبانی می‌کند.
+ در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود.
+
+<!--more-->
+
+## giscus
+
+[giscus](https://giscus.app/) یک سیستم نظردهی است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) طراحی شده است. رایگان و متن باز است.
+
+برای فعال کردن giscus، باید موارد زیر را به پرونده پیکربندی سایت اضافه کنید:
+
+```yaml {filename="hugo.yaml"}
+params:
+  comments:
+    enable: false
+    type: giscus
+
+    giscus:
+      repo: <repository>
+      repoId: <repository ID>
+      category: <category>
+      categoryId: <category ID>
+```
+
+تنظیمات giscus را می توانید از وب‌سایت [giscus.app](https://giscus.app/) ساخت. جزئیات بیشتر را نیز می‌توانید در آنجا ببینید.
+
+دیدگاه‌ها را می‌توانید برای یک صفحه خاص در بالای همان صفحه فعال یا غیرفعال کرد:
+
+```yaml {filename="content/docs/about.md"}
+---
+title: درباره ما
+comments: true
+---
+```

exampleSite/content/docs/advanced/comments.zh-cn.md

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

exampleSite/content/docs/advanced/customization.fa.md

@@ -0,0 +1,73 @@
+---
+title: سفارشی‌سازی هگزترا
+linkTitle: سفارشی‌سازی
+---
+
+هگزترا برخی از گزینه‌های سفارشی‌سازی پیش‌فرض را در پرونده `hugo.yaml` برای پیکربندی تم ارائه می‌کند.
+ این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
+
+<!--more-->
+
+## CSS سفارشی
+
+برای افزودن CSS سفارشی، باید یک پرونده `assets/css/custom.css` در سایت خود ایجاد کنیم. هگزترا به طور خودکار این پرونده را بارگیری خواهد کرد.
+
+### خانواده فونت
+
+خانواده فونت برای محتوا را می‌توانید با استفاده از این سفارشی کنید:
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### عنصر کد درون‌خطی
+
+رنگ متن ترکیب شده با `متن دیگر` را می‌توانید با موارد زیر سفارشی کرد:
+
+```css {filename="assets/css/custom.css"}
+.content code:not(.code-block code) {
+  color: #c97c2e;
+}
+```
+
+### رنگ اصلی
+
+رنگ اصلی تم را می‌توانید با تنظیم متغیرهای `--primary-hue` و `--primary-saturation` سفارشی کرد:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+  --primary-saturation: 90%;
+}
+```
+
+### برجسته‌کردن سینتکس
+
+فهرست تم‌های برجسته‌کردن سینتکس در دسترس [گالری Chroma Styles](https://xyproto.github.io/splash/docs/all.html) موجود است. شیوه‌نامه را می‌توانید با استفاده از دستور زیر تولید کرد:
+
+```shell
+hugo gen chromastyles --style=github
+```
+
+برای نادیده گرفتن طرح زمینه برجسته‌کردن سینتکس پیش‌فرض، می‌توانید استایل‌های تولید شده را به پرونده CSS سفارشی اضافه کنیم.
+
+## اسکریپت‌های سفارشی
+
+با افزودن پرونده زیر می‌توانید اسکریپت‌های سفارشی را برای هر صفحه به انتهای اون اضافه کنید:
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## طرح‌بندی‌های سفارشی
+
+با ایجاد پرونده‌ای با همین نام در دایرکتوری `layouts` سایت خود، می‌توانید طرح‌های تم را نادیده بگیرید.
+ به عنوان مثال، برای لغو طرح‌بندی `single.html` برای مستندات، یک پرونده`layouts/docs/single.html` در سایت خود ایجاد کنید.
+
+برای اطلاعات بیشتر، به [Templateهای هیوگو](https://gohugo.io/templates/) مراجعه کنید.
+
+## سفارشی‌سازی بیشتر
+
+چیزی را که دنبالش بودید پیدا نکردید؟ با خیال راحت [بحثی را باز کنید](https://github.com/imfing/hextra/discussions) یا به موضوع کمک کنید!

exampleSite/content/docs/advanced/customization.md

@@ -47,8 +47,8 @@ The primary color of the theme can be customized by setting the `--primary-hue`
 
 List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
 
-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```
 
 To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
@@ -70,4 +70,4 @@ For further information, refer to the [Hugo Templates](https://gohugo.io/templat
 
 ## Further Customization
 
-Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!
+Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!

exampleSite/content/docs/advanced/customization.zh-cn.md

@@ -30,10 +30,10 @@ Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题。
 
 ### 代码高亮
 
-代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。 可以使用以下命令生成样式表：
+代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
 
-```bash
-$ hugo gen chromastyles --style=github
+```shell
+hugo gen chromastyles --style=github
 ```
 
 可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式。
@@ -55,4 +55,4 @@ layouts/partials/custom/head-end.html
 
 ## 进一步定制 Hextra
 
-没有找到你想修改的东西？在 GitHub 上[创建 Issues](https://github.com/imfing/hextra/issues) 或为 Hextra 贡献你的智慧！
+没有找到你想修改的内容？在 GitHub 上[创建 Discussion](https://github.com/imfing/hextra/discussions) 或为 Hextra 贡献你的智慧！

exampleSite/content/docs/advanced/multi-language.fa.md

@@ -0,0 +1,83 @@
+---
+title: "چند زبانه"
+weight: 1
+prev: /docs/advanced
+---
+
+هگزترا از ایجاد سایت با چندین زبان با استفاده از [حالت چند زبانه](https://gohugo.io/content-management/multilingual/) Hugo پشتیبانی می‌کند.
+
+<!--more-->
+
+## فعال‌سازی چند زبانه
+
+برای اینکه سایت ما چند زبانه شود، باید زبان‌های پشتیبانی شده را به Hugo بگوییم. باید به پرونده پیکربندی سایت اضافه کنیم:
+
+```yaml {filename="hugo.yaml"}
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fa:
+    languageName: فارسی
+    weight: 2
+  ja:
+    languageName: 日本語
+    weight: 3
+```
+
+## مدیریت ترجمه‌ها بر اساس نام پرونده
+
+Hugo از مدیریت ترجمه با نام پرونده پشتیبانی می‌کند. به عنوان مثال، اگر یک پرونده `content/docs/_index.md` به زبان انگلیسی داشته باشیم، می توانیم یک پرونده `content/docs/_index.fa.md` برای ترجمه فارسی ایجاد کنیم.
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="_index.fa.md" >}}
+      {{< filetree/file name="_index.ja.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+توجه: Hugo همچنین از ت[ترجمه توسط دایرکتوری محتوا](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) پشتیبانی می‌کند.
+
+## ترجمه آیتم‌های منو
+
+برای ترجمه آیتم‌های منو در نوار پیمایش، باید فیلد `identifier` را تنظیم کنیم:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - identifier: documentation
+      name: Documentation
+      pageRef: /docs
+      weight: 1
+    - identifier: blog
+      name: Blog
+      pageRef: /blog
+      weight: 2
+```
+
+و آنها را در پرونده i18n مربوطه ترجمه کنید:
+
+```yaml {filename="i18n/fa.yaml"}
+documentation: مستندات
+blog: وبلاگ
+```
+
+## ترجمه رشته‌ها
+
+برای ترجمه رشته‌ها در مکان‌های دیگر، باید ترجمه را به پرونده i18n مربوطه اضافه کنیم:
+
+```yaml {filename="i18n/fa.yaml"}
+readMore: ادامه مطلب
+```
+
+فهرستی از رشته‌های استفاده شده در تم را می‌توان در پرونده `i18n/en.yaml` پیدا کرد.
+
+## بیشتر بخوانید
+
+- [حالت چند زبانه هیوگو](https://gohugo.io/content-management/multilingual/)
+- [هیوگو چند زبانه قسمت ۱: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
+- [هیوگو چند زبانه قسمت ۲: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

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

@@ -0,0 +1,190 @@
+---
+title: شروع کنید
+weight: 1
+next: /docs/guide
+prev: /docs
+---
+
+## شروع سریع از طریق Template
+
+{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+با استفاده از template در بالای صفحه‌ای مخزن می‌توانید به سرعت شروع به کار کنید.
+
+<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
+
+ما یک [گردش کاری GitHub Actions](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) ارائه کرده‌ایم که می‌تواند به ساخت و به‌کاراندازی خودکار سایت شما در گیت‌هاب Pages، برای میزبانی رایگان کمک کند. برای گزینه‌های بیشتر، [به‌کاراندازی سایت](../guide/deploy-site) را بررسی کنید.
+
+[🌐 نسخه‌ي نمایشی ↖](https://imfing.github.io/hextra-starter-template/)
+
+## شروع به عنوان پروژه جدید
+
+دو راه اصلی برای اضافه کردن تم هگزترا به پروژه Hugo وجود دارد:
+
+1. **ماژول‌های Hugo (توصیه می‌شود)**: ساده‌ترین و توصیه شده‌ترین. [ماژول‌های Hugo](https://gohugo.io/hugo-modules/) به شما امکان می‌دهند تم را مستقیما از منبع آنلاین آن وارد کنید. تم به صورت خودکار دانلود و توسط Hugo مدیریت می‌شود.
+2. **ساب‌ماژول گیت**: در عوض، هگزترا را به عنوان یک [ساب‌ماژول گیت](https://git-scm.com/book/en/v2/Git-Tools-Submodules) اضافه کنید. تم توسط گیت دانلود شده و در پوشه `themes` پروژه شما ذخیره می‌شود.
+
+### هگزترا را به عنوان ماژول Hugo راه‌اندازی کنید
+
+#### پیش‌نیازها
+
+قبل از شروع، باید این نرم‌افزارها را نصب کنید:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+- [Go](https://go.dev/)
+
+#### مراحل
+
+{{% steps %}}
+
+### راه‌انداختن یک سایت جدید Hugo
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### پیکربندی تم هگزترا از طریق ‌ماژول
+
+```shell
+# مقداردهی اولیه ماژول هیوگو
+cd my-site
+hugo mod init github.com/username/my-site
+
+# افزودن تم هگزترا
+hugo mod get github.com/imfing/hextra
+```
+
+با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید:
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### اولین صفحه‌های محتوای خود را ایجاد کنید
+
+ایجاد صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات:
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### پیش‌نمایش سایت به صورت محلی
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+پیش‌نمایش سایت جدید شما در `http://localhost:1313/` در دسترس است.
+
+{{% /steps %}}
+
+
+{{% details title="چگونه تم را به‌روز کنیم؟" %}}
+
+برای به‌روزرسانی همه ماژول‌های Hugo در پروژه خود به آخرین نسخه‌هایشان، دستور زیر را اجرا کنید:
+
+```shell
+hugo mod get -u
+```
+
+برای به‌روزرسانی هگزترا به [آخرین نسخه منتشر شده](https://github.com/imfing/hextra/releases)، دستور زیر را اجرا کنید:
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+برای جزئیات بیشتر به [ماژول‌های هیوگو](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) مراجعه کنید.
+
+{{% /details %}}
+
+### هگزترا را به عنوان ساب‌ماژول Git راه‌اندازی کنید
+
+#### پیش‌نیازها
+
+قبل از شروع، باید این نرم‌افزارها را نصب کنید:
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### مراحل
+
+{{% steps %}}
+
+### راه‌انداختن یک سایت جدید Hugo
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### افزودن تم هگزترا به عنوان یک ساب‌ماژول Git
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید:
+
+```yaml
+theme: hextra
+```
+
+### اولین صفحه‌های محتوای خود را ایجاد کنید
+
+ایجاد صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات:
+
+```shell
+hugo new content/_index.md
+hugo new content/docs/_index.md
+```
+
+### پیش‌نمایش سایت به صورت محلی
+
+```shell
+hugo server --buildDrafts --disableFastRender
+```
+
+پیش‌نمایش سایت جدید شما در `http://localhost:1313/` در دسترس است.
+
+{{% /steps %}}
+
+
+هنگام استفاده از [CI/CD](https://en.wikipedia.org/wiki/CI/CD) برای به‌کاراندازی وب‌سایت Hugo، از اجرای دستور زیر قبل از اجرای دستور `hugo` مطمئن شوید و ضروری است.
+
+```shell
+git submodule update --init
+```
+
+اجرا نشدن این دستور باعث می‌شود که پوشه تم با پرونده‌های تم هگزترا پر نشود و منجر به خرابی ساخت شود.
+
+
+{{% details title="چگونه تم را به‌روز کنیم؟" %}}
+
+برای به‌روزرسانی تمام ساب‌ماژول‌های در مخزن خود به آخرین commitها که موجود هست، دستور زیر را اجرا کنید:
+
+```shell
+git submodule update --remote
+```
+
+برای به‌روزرسانی هگزترا به آخرین commit، دستور زیر را اجرا کنید:
+
+```shell
+git submodule update --remote themes/hextra
+```
+
+برای جزئیات بیشتر به [ساب‌ماژول‌های Git](https://git-scm.com/book/en/v2/Git-Tools-Submodules) مراجعه کنید.
+
+{{% /details %}}
+
+## بعدی
+
+برای شروع اضافه کردن مطالب بیشتر، بخش‌های زیر را کاوش کنید:
+
+{{< cards >}}
+  {{< card link="../guide/organize-files" title="سازماندهی پرونده‌ها" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="پیکربندی" icon="adjustments" >}}
+  {{< card link="../guide/markdown" title="مارک‌داون" icon="markdown" >}}
+{{< /cards >}}

exampleSite/content/docs/getting-started.md

@@ -43,18 +43,18 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+hugo new site my-site --format=yaml
 ```
 
 ### Configure Hextra theme via module
 
 ```shell
 # initialize hugo module
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site
 
 # add Hextra theme
-$ hugo mod get github.com/imfing/hextra
+hugo mod get github.com/imfing/hextra
 ```
 
 Configure `hugo.yaml` to use Hextra theme by adding the following:
@@ -70,14 +70,14 @@ module:
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Voila, your new site preview is available at `http://localhost:1313/`.
@@ -90,7 +90,7 @@ Voila, your new site preview is available at `http://localhost:1313/`.
 To update all Hugo modules in your project to their latest versions, run the following command:
 
 ```shell
-$ hugo mod get -u
+hugo mod get -u
 ```
 
 To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
@@ -119,7 +119,7 @@ Before starting, you need to have the following software installed:
 ### Initialize a new Hugo site
 
 ```shell
-$ hugo new site my-site --format=yaml
+hugo new site my-site --format=yaml
 ```
 
 ### Add Hextra theme as a Git submodule
@@ -139,14 +139,14 @@ theme: hextra
 Create new content page for the home page and the documentation page:
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### Preview the site locally
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 Your new site preview is available at `http://localhost:1313/`.
@@ -168,7 +168,7 @@ Failure to run this command results in the theme folder not being populated with
 To update all submodules in your repository to their latest commits, run the following command:
 
 ```shell
-$ git submodule update --remote
+git submodule update --remote
 ```
 
 To update Hextra to the latest commit, run the following command:

exampleSite/content/docs/getting-started.zh-cn.md

@@ -26,23 +26,21 @@ prev: /docs
 
 [Hugo 模块](https://gohugo.io/hugo-modules/)是管理 Hugo 主题的推荐方式。要使用 Hugo 模块，我们需要安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/)。
 
-{{% steps %}}
-
 ### 初始化 Hugo 站点
 
-```bash
-$ hugo new site my-site --format=yaml
+```shell
+hugo new site my-site --format=yaml
 ```
 
-### 通过模块配置 Hextra 主题
+### 通过 Hugo Module 安装
 
 ```shell
 # 初始化 Hugo 模块
-$ cd my-site
-$ hugo mod init github.com/username/my-site
+cd my-site
+hugo mod init github.com/username/my-site
 
 # 添加 Hextra 
-$ hugo mod get github.com/imfing/hextra
+hugo mod get github.com/imfing/hextra
 ```
 
 编辑 `hugo.yaml` 以启用 Hextra：
@@ -53,31 +51,92 @@ module:
     - path: github.com/imfing/hextra
 ```
 
+### 通过 Git Submodule 安装
+
+#### 先决条件
+
+在我们开始之前，你必须先确保以下软件已经安装：
+
+- [Hugo (extended version)](https://gohugo.io/installation/)
+- [Git](https://git-scm.com/)
+
+#### 步骤
+
+{{% steps %}}
+
+### 初始化 Hugo 站点
+
+```shell
+hugo new site my-site --format=yaml
+```
+
+### 将 Hextra 添加为 Git Submodule
+
+```shell
+git submodule add https://github.com/imfing/hextra.git themes/hextra
+```
+
+添加以下内容来配置 `hugo.yaml` 以使用 Hextra：
+
+```yaml
+theme: hextra
+```
+
 ### 创建你的第一个内容页
 
 让我们为主页和文档页面创建一个新的内容页面：
 
 ```shell
-$ hugo new content/_index.md
-$ hugo new content/docs/_index.md
+hugo new content/_index.md
+hugo new content/docs/_index.md
 ```
 
 ### 在本地预览站点
 
 ```shell
-$ hugo server --buildDrafts --disableFastRender
+hugo server --buildDrafts --disableFastRender
 ```
 
 瞧！你现在可以在 `http://localhost:1313/` 看到你的新站点。
 
 {{% /steps %}}
 
+
+
+
+使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 进行部署时，必须确保在运行 `hugo` 命令之前执行以下命令。
+
+```shell
+git submodule update --init
+```
+
+如果不运行此命令，theme 中将不会存在 Hextra 文件，进而导致构建失败。
+
+
+{{% details title="如何更新主题？" %}}
+
+如需把项目中所有的 Hugo Modules 都升级到最新，在终端中运行此命令：
+
+```shell
+hugo mod get -u
+```
+
+如需把 Hextra 升级到[最新的发行版本](https://github.com/imfing/hextra/releases), 在终端中运行此命令：
+
+```shell
+hugo mod get -u github.com/imfing/hextra
+```
+
+如果你需要获得更多信息，参见 [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules).
+
+{{% /details %}}
+
 ## 接下来
 
-你可以探索以下部分来添加更多内容：
+探索这些文档以便添加更多内容：
 
 {{< cards >}}
-  {{< card link="../guide/organize-files" title="目录结构" icon="document-duplicate" >}}
-  {{< card link="../guide/configuration" title="配置文件指南" icon="adjustments" >}}
+  {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
   {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
 {{< /cards >}}

exampleSite/content/docs/guide/_index.fa.md

@@ -0,0 +1,23 @@
+---
+title: راهنما
+weight: 2
+prev: /docs/getting-started
+next: /docs/guide/organize-files
+sidebar:
+  open: true
+---
+
+برای یادگیری نحوه استفاده از هگزترا، بخش‌های زیر را کاوش کنید:
+
+<!--more-->
+
+{{< cards >}}
+  {{< card link="organize-files" title="سازماندهی پرونده‌ها" icon="document-duplicate" >}}
+  {{< card link="configuration" title="پیکربندی" icon="adjustments" >}}
+  {{< card link="markdown" title="مارک‌داون" icon="markdown" >}}
+  {{< card link="syntax-highlighting" title="برجسته‌کردن سینتکس" icon="sparkles" >}}
+  {{< card link="latex" title="LaTeX" icon="variable" >}}
+  {{< card link="diagrams" title="نمودارها" icon="chart-square-bar" >}}
+  {{< card link="shortcodes" title="کدهای کوتاه" icon="template" >}}
+  {{< card link="deploy-site" title="به‌کاراندازی سایت" icon="server" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/configuration.fa.md

@@ -0,0 +1,271 @@
+---
+title: پیکربندی
+weight: 2
+---
+
+Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo شما می‌خواند.
+ پرونده پیکربندی جایی است که می‌توانید تمام جنبه‌های سایت خود را پیکربندی کنید.
+ پرونده پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در گیت‌هاب بررسی کنید تا ایده‌ای جامع از تنظیمات موجود و بهترین شیوه‌ها بدست آورید.
+
+<!--more-->
+
+## ناوبری
+
+### منو
+
+منوی سمت چپ بالا در قسمت `menu.main` در پرونده پیکربندی تعریف شده است:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  main:
+    - name: مستندات
+      pageRef: /docs
+      weight: 1
+    - name: وبلاگ
+      pageRef: /blog
+      weight: 2
+    - name: درباره ما
+      pageRef: /about
+      weight: 3
+    - name: جستجو
+      weight: 4
+      params:
+        type: search
+    - name: گیت‌هاب
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+```
+
+انواع مختلفی از آیتم‌های منو وجود دارد:
+
+1. پیوند به صفحه‌ای در سایت با `pageRef`
+    ```yaml
+    - name: مستندات
+      pageRef: /docs
+    ```
+2. پیوند به یک نشانی اینترنتی با `url`
+    ```yaml
+    - name: گیت‌هاب
+      url: "https://github.com"
+    ```
+3. نوار جستجو با `type: search`
+    ```yaml
+    - name: جستجو
+      params:
+        type: search
+    ```
+4. آیکون
+    ```yaml
+    - name: گیت‌هاب
+      params:
+        icon: github
+    ```
+
+این آیتم‌های منو را می‌توانید با تنظیم پارامتر `weight` مرتب کنید.
+
+### آرم و عنوان
+
+برای تغییر آرم پیش‌فرض، `hugo.yaml` را ویرایش کنید و مسیر را به پرونده آرم خود در دایرکتوری `static` اضافه کنید.
+ به صورت اختیاری، می‌توانید پیوندی را که کاربران هنگام کلیک کردن روی آرم شما به آن هدایت می‌شوند، تغییر دهید، همچنین عرض و ارتفاع آرم را به پیکسل تنظیم کنید.
+
+```yaml {filename="hugo.yaml"}
+params:
+  navbar:
+    displayTitle: true
+    displayLogo: true
+    logo:
+      path: images/logo.svg
+      dark: images/logo-dark.svg
+      link: /
+      width: 40
+      height: 20
+```
+
+## نوار کناری
+
+### نوار کناری اصلی
+
+برای نوار کناری اصلی، به طور خودکار از ساختار دایرکتوری محتوا تولید می‌شود.
+ برای جزئیات بیشتر به صفحه [سازماندهی پرونده‌ها](/fa/docs/guide/organize-files) مراجعه کنید.
+
+برای حذف یک صفحه از نوار کناری سمت راست، پارامتر`sidebar.exclude` را در قسمت بالایی صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+sidebar:
+  exclude: true
+---
+```
+
+### پیوندهای اضافی
+
+پیوندهای اضافی نوار کناری در زیر بخش `menu.sidebar` در پرونده پیکربندی تعریف شده است:
+
+```yaml {filename="hugo.yaml"}
+menu:
+  sidebar:
+    - name: بیشتر
+      params:
+        type: separator
+      weight: 1
+    - name: "درباره ما"
+      pageRef: "/about"
+      weight: 2
+    - name: "مستندات هیوگو ↖"
+      url: "https://gohugo.io/documentation/"
+      weight: 3
+```
+
+## نوار کناری سمت چپ
+
+### فهرست مطالب
+
+فهرست مطالب به طور خودکار از سرتیرهای موجود در پرونده محتوا تولید می‌شود. می‌توان آن را با تنظیم `toc: false` در قسمت بالایی صفحه غیرفعال کرد.
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+toc: false
+---
+```
+
+### پیوند ویرایش صفحه
+
+برای پیکربندی پیوند ویرایش صفحه، می‌توانیم پارامتر `params.editURL.base` را در پرونده پیکربندی تنظیم کنیم:
+
+```yaml {filename="hugo.yaml"}
+params:
+  editURL:
+    enable: true
+    base: "https://github.com/your-username/your-repo/edit/main"
+```
+
+پیوندهای ویرایش به طور خودکار برای هر صفحه براساس نشانی اینترنتی ارائه شده به عنوان دایرکتوری ریشه ایجاد می‌شود.
+ اگر می‌خواهید پیوند ویرایش را برای یک صفحه خاص تنظیم کنید، می‌توانید پارامتر `editURL` را در قسمت بالای صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+editURL: "https://example.com/edit/this/page"
+---
+```
+
+## پاورقی
+
+### کپی‌رایت
+
+برای تغییر متن کپی‌رایت نمایش داده شده در پاورقی وب‌سایت خود، باید پرونده‌ای به نام `i18n/fa.yaml` ایجاد کنید.
+ در این پرونده متن کپی‌رایت جدید خود را مطابق شکل زیر مشخص کنید:
+
+```yaml {filename="i18n/fa.yaml"}
+copyright: "© ۲۰۲۴ متن شما در اینجا"
+```
+
+برای مرجع شما، یک مثال [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) را می‌توانید در مخزن گیت‌هاب پیدا کنید. علاوه بر این، می‌توانید از فرمت مارک‌داون در متن کپی‌رایت استفاده کنید.
+
+## سایر موارد
+
+### Favicon
+
+برای سفارشی کردن [favicon](https://en.wikipedia.org/wiki/Favicon) برای سایت خود، پرونده‌های آیکون را درون پوشه `static` قرار دهید تا [faviconهای پیش‌فرض در تم](https://github.com/imfing/hextra/tree/main/static) جایگزین شود:
+
+{{< filetree/container >}}
+  {{< filetree/folder name="static" >}}
+    {{< filetree/file name="android-chrome-192x192.png" >}}
+    {{< filetree/file name="android-chrome-512x512.png" >}}
+    {{< filetree/file name="apple-touch-icon.png" >}}
+    {{< filetree/file name="favicon-16x16.png" >}}
+    {{< filetree/file name="favicon-32x32.png" >}}
+    {{< filetree/file name="favicon-dark.svg" >}}
+    {{< filetree/file name="favicon.ico" >}}
+    {{< filetree/file name="favicon.svg" >}}
+    {{< filetree/file name="site.webmanifest" >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+هر دو پرونده `favicon.ico` و `favicon.svg` را در پروژه خود قرار دهید، تا از نمایش صحیح faviconهای سایت خود مطمئن شوید.
+
+در حالی که `favicon.ico` به طور کلی برای مرورگرهای قدیمی‌تر است، `favicon.svg` توسط مرورگرهای مدرن پشتیبانی می‌شود. favicon`favicon-dark.svg` اختیاری را می‌توانید برای یک تجربه سفارشی در حالت تیره اضافه کرد.
+ با خیال راحت از ابزارهایی مانند [favicon.io](https://favicon.io/) یا [favycon](https://github.com/ruisaraiva19/favycon) برای تولید این آیکون‌ها استفاده کنید.
+
+### پیکربندی تم
+
+از تنظیمات `theme` برای پیکربندی حالت پیش‌فرض تم و دکمه جابه‌جایی استفاده کنید و به بازدیدکنندگان اجازه دهید بین حالت روشن یا تیره جابجا شوند.
+
+```yaml {filename="hugo.yaml"}
+params:
+  theme:
+    # light | dark | system
+    default: system
+    displayToggle: true
+```
+
+گزینه‌های `theme.default`:
+
+- `light` - همیشه از حالت روشن استفاده شود
+- `dark` - همیشه از حالت تیره استفاده شود
+- `system` - همگام‌سازی با تنظیمات سیستم‌عامل (پیش‌فرض)
+
+پارامتر `theme.displayToggle` به شما این امکان را می‌دهد که یک دکمه جابجایی برای تغییر حالت تم‌ها نمایش دهید.
+ وقتی روی `true` تنظیم شود، بازدیدکنندگان می‌توانند بین حالت روشن یا تیره جابه‌جا شوند و تنظیمات پیش‌فرض را نادیده بگیرند.
+
+### عرض صفحه
+
+عرض صفحه را می‌توان با پارامتر `params.page.width` در پرونده پیکربندی سفارشی کرد:
+
+```yaml {filename="hugo.yaml"}
+params:
+  page:
+    # full (100%), wide (90rem), normal (1280px)
+    width: wide
+```
+
+سه گزینه در دسترس وجود دارد: `full`، `wide` و normal`. به طور پیش‌فرض، عرض صفحه روی normal` تنظیم شده است.
+
+به طور مشابه، عرض نوار ناوبری و پاورقی را می‌توان با پارامترهای `params.navbar.width` و `params.footer.width` سفارشی کرد.
+
+### فهرست جستجو
+
+جستجوی متن کامل توسط [FlexSearch](https://github.com/nextapps-de/flexsearch) پیاده‌سازی شده و به طور پیش‌فرض فعال است.
+ برای سفارشی کردن فهرست جستجو، پارامتر `params.search.flexsearch.index` را در پرونده پیکربندی تنظیم کنید:
+
+```yaml {filename="hugo.yaml"}
+params:
+  # Search
+  search:
+    enable: true
+    type: flexsearch
+
+    flexsearch:
+      # index page by: content | summary | heading | title
+      index: content
+```
+
+گزینه‌های `flexsearch.index`:
+
+- `content` - محتوای کامل صفحه (پیش‌فرض)
+- `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصه مطالب Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید
+- `heading` - سرتیترهای سطح ۱ و سطح ۲
+- `title` -  فقط شامل عنوان صفحه است
+
+برای حذف یک صفحه از فهرست جستجو، `excludeSearch: true` را در قسمت بالای صفحه تنظیم کنید:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: پیکربندی
+excludeSearch: true
+---
+```
+
+### گوگل آنالیتیکس
+
+برای فعال کردن [گوگل آنالیتیکس](https://marketingplatform.google.com/about/analytics/)، پرچم `services.googleAnalytics.ID` را در `hugo.yaml` تنظیم کنید:
+
+```yaml {filename="hugo.yaml"}
+services:
+  googleAnalytics:
+    ID: G-MEASUREMENT_ID
+```

exampleSite/content/docs/guide/configuration.md

@@ -90,6 +90,16 @@ params:
 For the main sidebar, it is automatically generated from the structure of the content directory.
 See the [Organize Files](/docs/guide/organize-files) page for more details.
 
+To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
+
+```yaml {filename="content/docs/guide/configuration.md"}
+---
+title: Configuration
+sidebar:
+  exclude: true
+---
+```
+
 ### Extra Links
 
 Sidebar extra links are defined under the `menu.sidebar` section in the config file:
@@ -129,17 +139,17 @@ To configure the page edit link, we can set the `params.editURL.base` parameter
 ```yaml {filename="hugo.yaml"}
 params:
   editURL:
+    enable: true
     base: "https://github.com/your-username/your-repo/edit/main"
 ```
 
 The edit links will be automatically generated for each page 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:
+If you want to set edit link for a specific page, you can set the `editURL` parameter in the front matter of the page:
 
 ```yaml {filename="content/docs/guide/configuration.md"}
 ---
 title: Configuration
-params:
-  editURL: "https://example.com/edit/this/page"
+editURL: "https://example.com/edit/this/page"
 ---
 ```
 

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

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

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

@@ -0,0 +1,162 @@
+---
+title: به‌کاراندازی سایت
+prev: /docs/guide/shortcodes
+next: /docs/advanced
+---
+
+Hugo وب‌سایت‌های استاتیک را ایجاد می‌کند و امکان گزینه‌های میزبانی انعطاف‌پذیر را فراهم می‌کند.
+ این صفحه راهنماهایی برای به‌کاراندازی سایت هگزترا شما در پلتفرم‌های مختلف ارائه می‌کند.
+
+
+<!--more-->
+
+
+## گیت‌هاب Pages
+
+[گیت‌هاب Pages](https://docs.github.com/pages) روشی توصیه شده برای به‌کاراندازی و میزبانی وب‌سایت شما به صورت رایگان است.
+
+اگر سایت را با استفاده از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) راه‌اندازی سریع پیاده‌سازی می‌کنید، گردش کار گیت‌هاب Actions را به صورت خارج از جعبه ارائه کرده‌ایم که به‌کاراندازی خودکار در گیت‌هاب Pages  به شما کمک می‌کند.
+
+{{% details title="پیکربندی گیت‌هاب Actions" closed="true" %}}
+
+در زیر یک پیکربندی مثال از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) آورده شده است:
+
+```yaml {filename=".github/workflows/pages.yaml"}
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.117.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+      - name: Setup Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21'
+      - name: Setup Hugo
+        uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.117.0'
+          extended: true
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc --minify \
+            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+```
+
+{{% /details %}}
+
+
+{{< callout >}}
+  در تنظیمات مخزن خود، **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
+  ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
+{{< /callout >}}
+
+به‌طور پیش‌فرض، گردش کار گیت‌هاب Actions بالا `.github/workflows/pages.yaml` فرض می‌کند که سایت در حال به‌کاراندازی در `https://<USERNAME>.github.io/<REPO>/` است.
+
+اگر در حال استفاده از `https://<USERNAME>.github.io/` هستید، سپس `--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/"
+```
+
+اگر می‌خواهید روی دامنه شخصی خود استقرار پیدا کند، لطفا مقدار `--baseURL` را بر این اساس تغییر دهید.
+
+
+## کلودفلر Pages
+
+1. کد منبع سایت خود را در یک مخزن Git (به عنوان مثال گیت‌هاب) قرار دهید
+2. وارد [پیشخوان کلودفلر](https://dash.cloudflare.com/) شوید و حساب خود را انتخاب کنید
+3. در صفحه اصلی حساب‌کاربری، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید
+4. مخزن را انتخاب کنید و در بخش Set up builds and Deployments اطلاعات زیر را وارد کنید:
+
+| Configuration     | Value                |
+| ----------------- | -------------------- |
+| Production branch | `main`               |
+| Build command     | `hugo --gc --minify` |
+| Build directory   | `public`             |
+
+برای جزئیات بیشتر، بررسی کنید:
+- [یک سایت هیوگو راه‌اندازی کنید.](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
+- [پشتیبانی زبان و ابزار.](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
+
+
+## Netlify
+
+1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید.
+2. [وارد کردن پروژه](https://app.netlify.com/start) به Netlify
+3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمی‌کنید، موارد زیر را به صورت دستی پیکربندی کنید:
+   - دستور Build را روی `hugo --gc --minify` پیکربندی کنید
+   - دایرکتوری Publish را برای `public` مشخص کنید
+   - `HUGO_VERSION` متغیر محیط استقرار را اضافه کنید و روی `0.119.0` تنظیم کنید
+4. استقرار!
+
+برای جزئیات بیشتر [Hugo را در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) بررسی کنید.
+
+
+## Vercel
+
+1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید.
+2. به [پیشخوان Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید
+3. پروژه را پیکربندی کنید، Hugo را به‌ عنوان چارچوب Preset انتخاب کنید
+4. دستور Build و Install را لغو کنید:
+   1. دستور Build را روی `hugo --gc --minify` تنظیم کنید
+   2. دستور Install را روی `yum install golang` تنظیم کنید
+
+![پیکربندی استقرار Vercel](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

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

@@ -54,21 +54,24 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.117.0
+      HUGO_VERSION: 0.121.2
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+          fetch-depth: 0  # fetch all history for .GitInfo and .Lastmod
+          submodules: recursive
       - name: Setup Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
           go-version: '1.21'
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: '0.117.0'
-          extended: true
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules
@@ -77,9 +80,9 @@ jobs:
         run: |
           hugo \
             --gc --minify \
-            --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./public
 
@@ -93,7 +96,7 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
 ```
 
 {{% /details %}}

exampleSite/content/docs/guide/diagrams.fa.md

@@ -0,0 +1,53 @@
+---
+title: نمودارها
+weight: 6
+next: /docs/guide/shortcodes
+---
+
+در حال حاضر، هگزترا از [Mermaid](#mermaid) برای نمودارها پشتیبانی می‌کند.
+
+<!--more-->
+
+## Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid#readme) یک ابزار نمودار و نمودار مبتنی بر جاوااسکریپت است که تعاریف متنی الهام گرفته از مارک‌داون را دریافت می‌کند و نمودارها را به صورت پویا در مرورگر ایجاد می‌کند. به عنوان مثال، Mermaid می‌تواند نمودارهای فلوچارت، نمودارهای توالی، نمودارهای دایره‌ای و موارد دیگر را رندر کند.
+
+استفاده از Mermaid در هگزترا به سادگی نوشتن یک بلوک کد با مجموعه زبان `mermaid` است:
+
+````markdown
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````
+
+به صورت زیر رندر خواهد شد:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+نمودار توالی:
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+برای اطلاعات بیشتر، لطفا به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.

exampleSite/content/docs/guide/latex.fa.md

@@ -0,0 +1,60 @@
+---
+title: "LaTeX"
+weight: 4
+math: true
+---
+
+$\KaTeX$ برای رندر کردن عبارت‌های ریاضی LaTeX استفاده می‌شود. می‌توان آن را در هر صفحه با تنظیم `math` روی `true` در قسمت بالای صفحه فعال کرد.
+
+<!--more-->
+
+```yaml {filename="Markdown"}
+---
+title: "صفحه من با LaTeX"
+math: true
+---
+
+```
+
+وقتی فعال باشد، اسکریپت‌ها، شیوه‌نامه‌ها و فونت‌های KaTeX به طور خودکار در سایت شما قرار می‌گیرند. می‌توانید از عبارت‌های ریاضی LaTeX در محتوای مارک‌داون خود استفاده کنید.
+
+## مثال
+
+هر دو عبارت‌های ریاضی درون‌خطی و پاراگراف جداگانه LaTeX در محتوای مارک‌داون پشتیبانی می‌شوند.
+
+### درون‌خطی
+
+```markdown {filename="page.md"}
+این $\sigma(z) = \frac{1}{1 + e^{-z}}$ درون‌خطی است.
+```
+
+این $\sigma(z) = \frac{1}{1 + e^{-z}}$ درون‌خطی است.
+
+### پاراگراف جداگانه
+
+```markdown {filename="page.md"}
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+```
+
+به صورت زیر رندر خواهد شد:
+
+$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
+
+
+## توابع پشتیبانی شده
+
+برای مشاهده فهرست توابع پشتیبانی شده، به [توابع پشتیبانی شده KaTeX](https://katex.org/docs/supported.html) مراجعه کنید.
+
+## شیمی
+
+عبارت‌های شیمی از طریق افزونه [mhchem](https://mhchem.github.io/MathJax-mhchem/) پشتیبانی می‌شوند.
+
+درون‌خطی: $\ce{H2O}$ آب است.
+
+پاراگراف جداگانه:
+
+```markdown {filename="page.md"}
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
+```
+
+$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$

exampleSite/content/docs/guide/markdown.fa.md

@@ -0,0 +1,106 @@
+---
+title: مارک‌داون
+weight: 2
+---
+
+Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markdown) برای قالب‌بندی متن، ایجاد فهرست و موارد دیگر پشتیبانی می‌کند. این صفحه برخی از رایج‌ترین نمونه‌های سینتکس مارک‌داون را به شما نشان می‌دهد.
+
+<!--more-->
+
+## مثال‌های مارک‌داون
+
+### ظاهر طراحی دادن به متن
+
+| سبک   | سینتکس     | مثال   | خروجی   |
+| --------  | -------- | ------ | ------ |
+| توپر | `**متن توپر**` | `**متن توپر**` | **متن توپر** |
+| کج | `*متن کج*` | `*متن کج*` | *متن کج* |
+| خط خورده | `~~متن خط خورده~~` | `~~متن خط خورده~~` | ~~متن خط خورده~~ |
+| پایین‌نویس | `<sub></sub>` | `این یک متن <sub>پایین‌نویس</sub> است` | این یک متن <sub>پایین‌نویس</sub> است |
+| بالانویس | `<sup></sup>` | `این یک متن <sup>بالانویس</sup> است` | این یک متن <sup>بالانویس</sup> است |
+
+### بلوک نقل‌قول
+
+بلوک نقل‌قول با ذکر منبع
+
+> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
+> — <cite>راب پایک[^1]</cite>
+
+[^1]: نقل‌قول بالا گزیده‌ای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
+
+### جدول‌ها
+
+جدول‌ها بخشی از مشخصات اصلی مارک‌داون نیستند، اما Hugo از آنها در خارج از جعبه پشتیبانی می‌کند.
+
+   نام | سن
+--------|------
+    گودرز | ۳۰
+  آصف | ۳۴
+
+#### مارک‌داون درون‌خطی درون جدول‌ها
+
+| کج   | توپر     | کد   |
+| --------  | -------- | ------ |
+| *کج* | **توپر** | `کد` |
+
+### بلوک‌های کد
+
+{{< cards >}}
+  {{< card link="../../guide/syntax-highlighting" title="برجسته‌کردن سینتکس" icon="sparkles" >}}
+{{< /cards >}}
+
+### فهرست‌ها
+
+#### فهرست مرتب‌شده
+
+1. اولین آیتم
+2. دومین آیتم
+3. سومین آیتم
+
+#### فهرست مرتب‌نشده
+
+* فهرست آیتم
+* یک آیتم دیگه
+* و یک آیتم دیگه
+
+#### فهرست تو در تو
+
+* میوه
+  * سیب
+  * پرتقال
+  * موز
+* لبنیات
+  * شیر
+  * پنیر
+
+### عکس‌ها
+
+![](https://source.unsplash.com/featured/800x600?landscape)
+
+با توضیحات:
+
+![](https://source.unsplash.com/featured/800x600?landscape "یک چشم‌انداز Unsplash")
+
+## پیکربندی
+
+Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه مارک‌داون استفاده می‌کند.
+ رندر مارک‌داون را می‌توان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کنید.
+ در زیر پیکربندی پیش‌فرض هگزترا را می‌توانید ببینید:
+
+```yaml {filename="hugo.yaml"}
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+```
+
+برای گزینه‌های پیکربندی بیشتر، به مستندات Hugo در [پیکربندی نشانه‌گذاری](https://gohugo.io/getting-started/configuration-markup/) مراجعه کنید.
+
+## منابع یادگیری
+
+* [راهنمای مارک‌داون](https://www.markdownguide.org/)
+* [برگه تقلب مارک‌داون](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+* [آموزش مارک‌داون](https://www.markdowntutorial.com/)
+* [مرجع مارک‌داون](https://commonmark.org/help/)

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

@@ -0,0 +1,147 @@
+---
+title: سازماندهی پرونده‌ها
+weight: 1
+prev: /docs/guide
+---
+
+## ساختار دایرکتوری
+
+به طور پیش‌فرض، Hugo پرونده‌های مارک‌داون را در فهرست `content` جستجو می‌کند و ساختار فهرست، ساختار خروجی نهایی وب‌سایت شما را تعیین می‌کند. همین سایت را به عنوان مثال در نظر بگیرید:
+
+<!--more-->
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="getting-started.md" >}}
+      {{< filetree/folder name="guide" state="open" >}}
+        {{< filetree/file name="_index.md" >}}
+        {{< filetree/file name="organize-files.md" >}}
+      {{< /filetree/folder >}}
+    {{< /filetree/folder >}}
+    {{< filetree/folder name="blog" state="open" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="post-1.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+{{< /filetree/container >}}
+
+هر یک از پرونده‌های `_index.md` صفحه اصلی هر بخش  هستند که برای هر بخش مجزا است. سایر پرونده‌های مارک‌داون صفحه‌های معمولی دیگه‌ای هستند.
+
+```
+content
+├── _index.md // <- /
+├── docs
+│   ├── _index.md // <- /docs/
+│   ├── getting-started.md // <- /docs/getting-started/
+│   └── guide
+│       ├── _index.md // <- /docs/guide/
+│       └── organize-files.md // <- /docs/guide/organize-files/
+└── blog
+    ├── _index.md // <- /blog/
+    └── post-1.md // <- /blog/post-1/
+```
+
+## طرح‌بندی‌ها
+
+هگزترا سه طرح‌بندی برای انواع مختلف محتوا ارائه می‌کند:
+
+| طرح‌بندی    | دایرکتوری             | ویژگی‌ها                                                         |
+| :-------- | :-------------------- | :--------------------------------------------------------------- |
+| `docs`    | `content/docs/`       | ایده‌آل برای مستندات ساختار یافته، مانند این بخش.        |
+| `blog`    | `content/blog/`       | برای نوشته‌های وبلاگ، با هر فهرست‌بندی و هم نمایش جزئیات مقاله. |
+| `default` | همه دایرکتوری‌های دیگر | مشاهده مقاله تک صفحه‌ای بدون نوار کناری.                       |
+
+برای سفارشی کردن یک بخش برای منعکس کردن رفتار یک طرح داخلی، نوع طرح‌بندی مورد نظر را در قسمت بالایی قسمت _index.md` مشخص کنید.
+
+```yaml {filename="content/my-docs/_index.md"}
+---
+title: مستندات من
+cascade:
+  type: docs
+---
+```
+
+پیکربندی مثال بالا تضمین می‌کند که پرونده‌های محتوای در داخل `content/my-docs/` به‌طور پیش‌فرض به عنوان مستندات (نوع `docs`) مورد استفاده قرار می‌گیرند.
+
+## ناوبری نوار کناری
+
+ناوبری نوار کناری به طور خودکار براساس حروف الفبا ایجاد می‌شود. برای پیکربندی دستی ترتیب نوار کناری، می‌توانید از پارامتر `weight` در قسمت بالایی پرونده‌های مارک‌داون استفاده کنید.
+
+```yaml {filename="content/docs/guide/_index.md"}
+---
+title: راهنما
+weight: 2
+---
+```
+
+{{< callout emoji="ℹ️">}}
+  توصیه می‌کنیم نوار کناری خیلی عمیق نباشد. اگر محتوای زیادی دارید، آنها را **به چند بخش تقسیم کنید**.
+{{< /callout >}}
+
+## پیکربندی دایرکتوری محتوا
+
+به طور پیش‌فرض، دایرکتوری ریشه `content/` توسط Hugo برای ساخت سایت استفاده می‌شود.
+ اگر نیاز به استفاده از دایرکتوری متفاوتی برای محتوا دارید، برای مثال `docs/`، این کار را می‌توانید با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام دهید.
+
+## افزودن تصاویر
+
+برای افزودن تصاویر، ساده‌ترین راه این است که پرونده‌های عکس‌ها را در همان دایرکتوری پرونده مارک‌داون قرار دهید.
+برای مثال، یک پرونده عکس `image.png` را در کنار پرونده `my-page.md` اضافه کنید:
+
+{{< 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 >}}
+
+سپس، می‌توانید از سینتکس مارک‌داون زیر برای افزودن عکس به محتوا استفاده کنید:
+
+```markdown {filename="content/docs/my-page.md"}
+![](image.png)
+```
+
+همچنین می‌توانید از ویژگی [بسته‌های صفحه][page-bundles] Hugo برای سازماندهی پرونده‌های عکس‌ها همراه با پرونده مارک‌داون استفاده کنید. برای رسیدن به این هدف، پرونده `my-page.md` را به یک دایرکتوری `my-page` تبدیل کنید و محتوا را در پرونده‌ای به نام `index.md` قرار دهید و پرونده‌های عکس‌ها را در دایرکتوری `my-page` قرار دهید:
+
+{{< 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)
+```
+
+همچنین می‌توانید پرونده‌های عکس‌ها را در دایرکتوری `static` قرار دهید که عکس‌ها را برای همه صفحات در دسترس قرار می‌دهد:
+
+{{< 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 >}}
+
+توجه داشته باشید که مسیر عکس با یک اسلش `/` شروع می‌شود و نسبت به دایرکتوری استاتیک است:
+
+```markdown {filename="content/docs/my-page.md"}
+![](/images/image.png)
+```
+
+[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

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

@@ -0,0 +1,21 @@
+---
+title: کدهای کوتاه
+weight: 9
+prev: /docs/guide/diagrams
+next: /docs/guide/shortcodes/filetree
+---
+
+[کدهای کوتاه Hugo](https://gohugo.io/content-management/shortcodes/) قطعه‌های ساده‌ای در داخل پرونده‌های محتوای شما هستند که قالب‌های داخلی یا سفارشی را فراخوانی می‌کنند.
+
+هگزترا مجموعه‌ای از کدهای کوتاه زیبا را برای بهبود محتوای شما ارائه می‌کند.
+
+
+{{< cards >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="آیکون" icon="badge-check" >}}
+  {{< card link="details" title="جزئیات" icon="chevron-right" >}}
+  {{< card link="tabs" title="زبانه‌ها" icon="collection" >}}
+  {{< card link="callout" title="فراخوانی" icon="warning" >}}
+  {{< card link="cards" title="کارت‌ها" icon="card" >}}
+  {{< card link="steps" title="مراحل" icon="one" >}}
+{{< /cards >}}

exampleSite/content/docs/guide/shortcodes/callout.fa.md

@@ -0,0 +1,78 @@
+---
+title: کامپوننت فراخوانی
+linkTitle: فراخوانی
+aliases:
+- فراخوانی‌ها
+---
+
+یک کامپوننت داخلی برای نشان دادن اطلاعات مهم به خواننده.
+
+<!--more-->
+
+## مثال
+
+{{< callout emoji="👾">}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  **فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
+{{< /callout >}}
+
+## استفاده
+
+### پیش‌فرض
+
+{{< callout emoji="🌐">}}
+  Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد.
+{{</* /callout */>}}
+```
+
+### اطلاعات
+
+{{< callout type="info" >}}
+  لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" */>}}
+  لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید.
+{{</* /callout */>}}
+```
+
+### هشدار
+
+{{< callout type="warning" >}}
+  این API در نسخه بعدی منسوخ خواهد شد.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="warning" */>}}
+  این API در نسخه بعدی منسوخ خواهد شد.
+{{</* /callout */>}}
+```
+
+### خطا
+
+{{< callout type="error" >}}
+  مشکلی پیش آمد و اتفاقی رخ خواهد شد.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="error" */>}}
+  مشکلی پیش آمد و اتفاقی رخ خواهد شد.
+{{</* /callout */>}}
+```

exampleSite/content/docs/guide/shortcodes/cards.fa.md

@@ -0,0 +1,64 @@
+---
+title: کامپوننت کارت‌ها
+linkTitle: کارت‌ها
+---
+
+## مثال
+
+{{< cards >}}
+  {{< card link="../callout" title="فراخوانی" icon="warning" >}}
+  {{< card link="/fa" title="بدون آیکون" >}}
+{{< /cards >}}
+
+{{< cards >}}
+  {{< card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" >}}
+  {{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک است." >}}
+  {{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" >}}
+{{< /cards >}}
+
+## استفاده
+
+```
+{{</* cards */>}}
+  {{</* card link="../callout" title="فراخوانی" icon="warning" */>}}
+  {{</* card link="/fa" title="بدون آیکون" */>}}
+{{</* /cards */>}}
+```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" */>}}
+  {{</* card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک است." */>}}
+  {{</* card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" */>}}
+{{</* /cards */>}}
+```
+
+## پارامترهای کارت
+
+| پارامتر  | توضیحات                           |
+|----------- |---------------------------------------|
+| `link`     | نشانی اینترنتی (داخلی یا خارجی).          |
+| `title`    | عنوان برای کارت.          |
+| `subtitle` | عنوان زیرنویس (از مارک‌داون پشتیبانی می‌کند).. |
+| `icon`     | نام آیکون.                     |
+
+## کارت تصویر
+
+علاوه بر این، کارت از افزودن تصویر و پردازش از طریق این پارامترها پشتیبانی می‌کند:
+
+| پارامتر  | توضیحات                                 |
+|----------- |---------------------------------------------|
+| `image`    | نشانی اینترنتی تصویر کارت را مشخص می‌کند.      |
+| `method`   | روش پردازش تصویر Hugo را تنظیم می‌کند.        |
+| `options`  | گزینه‌های پردازش تصویر Hugo را پیکربندی می‌کند. |
+
+کارت از سه نوع تصویر پشتیبانی می‌کند:
+
+1. تصویر از راه دور: نشانی اینترنتی کامل در پارامتر `image`.
+2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` Hugo استفاده کنید.
+3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` Hugo استفاده کنید.
+
+هگزترا در صورت نیاز به پردازش تصویر در حین ساخت، به طور خودکار تشخیص می‌دهد و پارامتر `options` یا تنظیمات پیش‌فرض را اعمال می‌کند (تغییر اندازه، 800x، کیفیت 80، فرمت WebP).
+ در حال حاضر این `method` را پشتیبانی می‌کند: `Resize`، `Fit`، `Fill` و `Crop`.
+
+برای اطلاعات بیشتر در مورد دستورات، روش‌ها و گزینه‌های پردازش تصویر داخلی Hugo به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آن‌ها مراجعه کنید.

exampleSite/content/docs/guide/shortcodes/details.fa.md

@@ -0,0 +1,43 @@
+---
+title: جزئیات
+---
+
+یک کامپوننت داخلی برای نمایش محتوای قابل باز و بسته شدن.
+
+<!--more-->
+
+## مثال
+
+{{% details title="جزئیات" %}}
+
+این محتوای جزئیات است.
+
+مارک‌داون **پشتیبانی می‌شود**.
+
+{{% /details %}}
+
+{{% details title="برای نمایش روی من کلیک کنید" closed="true" %}}
+
+این به طور پیش‌فرض پنهان می‌شود.
+
+{{% /details %}}
+
+## استفاده
+
+````markdown
+{{%/* details title="جزئیات" */%}}
+
+این محتوای جزئیات است.
+
+مارک‌داون **پشتیبانی می‌شود**.
+
+{{%/* /details */%}}
+````
+
+````markdown
+{{%/* details title="برای نمایش روی من کلیک کنید"closed="true" */%}}
+
+این به طور پیش‌فرض پنهان می‌شود.
+
+{{%/* /details */%}}
+````

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

@@ -24,7 +24,7 @@ This will be hidden by default.
 
 ## Usage
 
-````
+````markdown
 {{%/* details title="Details" */%}}
 
 This is the content of the details.
@@ -34,7 +34,7 @@ Markdown is **supported**.
 {{%/* /details */%}}
 ````
 
-````
+````markdown
 {{%/* details title="Click me to reveal" closed="true" */%}}
 
 This will be hidden by default.

exampleSite/content/docs/guide/shortcodes/filetree.fa.md

@@ -0,0 +1,36 @@
+---
+title: کامپوننت FileTree
+linkTitle: FileTree
+prev: /docs/guide/shortcodes
+next: /docs/guide/shortcodes/icon
+---
+
+## مثال
+
+{{< filetree/container >}}
+  {{< filetree/folder name="content" >}}
+    {{< filetree/file name="_index.md" >}}
+    {{< filetree/folder name="docs" state="closed" >}}
+      {{< filetree/file name="_index.md" >}}
+      {{< filetree/file name="introduction.md" >}}
+      {{< filetree/file name="introduction.fa.md" >}}
+    {{< /filetree/folder >}}
+  {{< /filetree/folder >}}
+  {{< filetree/file name="hugo.toml" >}}
+{{< /filetree/container >}}
+
+## استفاده
+
+```text {filename="Markdown"}
+{{</* filetree/container */>}}
+  {{</* filetree/folder name="content" */>}}
+    {{</* filetree/file name="_index.md" */>}}
+    {{</* filetree/folder name="docs" state="closed" */>}}
+      {{</* filetree/file name="_index.md" */>}}
+      {{</* filetree/file name="introduction.md" */>}}
+      {{</* filetree/file name="introduction.fa.md" */>}}
+    {{</* /filetree/folder */>}}
+  {{</* /filetree/folder */>}}
+  {{</* filetree/file name="hugo.toml" */>}}
+{{</* /filetree/container */>}}
+```

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

@@ -0,0 +1,47 @@
+---
+title: آیکون
+
+---
+
+برای استفاده از این کد کوتاه درون‌خطی، باید آن را در پیکربندی فعال کنید:
+
+```yaml {filename="hugo.yaml"}
+enableInlineShortcodes: true
+```
+
+فهرست آیکون‌های موجود را می‌توانید در [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) پیدا کنید.
+
+<!--more-->
+
+## مثال
+
+{{< icon "academic-cap" >}}
+{{< icon "cake" >}}
+{{< icon "gift" >}}
+{{< icon "sparkles" >}}
+
+## استفاده
+
+```
+{{</* icon "github" */>}}
+```
+
+آیکون‌های با طرح‌های متفاوت در [Heroicons](https://v1.heroicons.com/) نسخه ۱ خارج از جعبه در دسترس هستند.
+
+### چجوری آیکون‌های خودمان را اضافه کنیم
+
+پرونده `data/icons.yaml` را ایجاد کنید، سپس آیکون‌های SVG خود را در فرمت زیر اضافه کنید:
+
+```yaml {filename="data/icons.yaml"}
+your-icon: <svg>your icon svg content</svg>
+```
+
+سپس می‌توان آن را در کد کوتاه مانند زیر استفاده کرد:
+
+```
+{{</* icon "your-icon" */>}}
+
+{{</* card icon="your-icon" */>}}
+```
+
+نکته: [Iconify Design](https://iconify.design/) مکانی عالی برای پیدا کردن آیکون‌های SVG برای سایت شما است.

exampleSite/content/docs/guide/shortcodes/steps.fa.md

@@ -0,0 +1,42 @@
+---
+title: مراحل
+next: /docs/guide/deploy-site
+---
+
+یک کامپوننت داخلی برای نمایش یک سری مراحل.
+
+## مثال
+
+{{% steps %}}
+
+### مرحله ۱
+این اولین مرحله است.
+
+### مرحله ۲
+
+این دومین مرحله است.
+
+### مرحله ۳
+
+این سومین مرحله است.
+
+{{% /steps %}}
+
+
+## استفاده
+
+سرتیتر مارک‌داون h3 را در کد کوتاه `steps` قرار دهید.
+
+```
+{{%/* steps */%}}
+
+### مرحله ۱
+
+این اولین مرحله است.
+
+### مرحله ۲
+
+این دومین مرحله است.
+
+{{%/* /steps */%}}
+```

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

@@ -0,0 +1,92 @@
+---
+title: زبانه‌ها
+---
+
+## مثال
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
+{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
+{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
+
+{{< /tabs >}}
+
+## استفاده
+
+### پیش‌فرض
+
+```
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+### مشخص کردن زبانه‌ پیش‌فرض
+
+از ویژگی `defaultIndex` برای مشخص کردن زبانه‌ پیش‌فرض استفاده کنید. این شاخص از 0 شروع می‌شود.
+
+```
+{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
+
+  {{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
+  {{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
+  {{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
+
+{{</* /tabs */>}}
+```
+
+زبانه‌ `YAML` به طور پیش‌فرض انتخاب می‌شود.
+
+{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
+
+{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
+{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
+{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
+
+{{< /tabs >}}
+
+
+### استفاده از مارک‌داون
+
+سینتکس مارک‌داون از جمله بلوک کد نیز پشتیبانی می‌شود:
+
+````
+{{</* tabs items="JSON,YAML,TOML" */>}}
+
+  {{</* tab */>}}
+  ```json
+  { "سلام": "دنیا" }
+  ```
+  {{</* /tab */>}}
+
+  ... زبانه‌های دیگر را به همین ترتیب اضافه کنید
+
+{{</* /tabs */>}}
+````
+
+{{< tabs items="JSON,YAML,TOML" >}}
+
+  {{< tab >}}
+  ```json
+  { "سلام": "دنیا" }
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```yaml
+  سلام: دنیا
+  ```
+  {{< /tab >}}
+
+  {{< tab >}}
+  ```toml
+  سلام = "دنیا"
+  ```
+  {{< /tab >}}
+
+{{< /tabs >}}

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

@@ -0,0 +1,89 @@
+---
+title: "برجسته‌کردن سینتکس"
+weight: 3
+---
+
+هیوگو از [Chroma](https://github.com/alecthomas/chroma)، یک برجسته‌کننده سینتکس عمومی در Go خالص، برای برجسته‌سازی کردن سینتکس استفاده می‌کند.
+ توصیه می‌شود از بک‌تیک برای بلوک‌های کد در محتوای مارک‌داون استفاده کنید. مثلا:
+
+<!--more-->
+
+````markdown {filename="Markdown"}
+```python
+def say_hello():
+    print("سلام!")
+```
+````
+
+به صورت زیر رندر خواهد شد:
+
+```python
+def say_hello():
+    print("سلام!")
+```
+
+## ویژگی‌ها
+
+### Filename
+
+برای افزودن نام پرونده یا عنوان به بلوک کد، `filename` را مشخص کنید:
+
+````markdown {filename="Markdown"}
+```python {filename="hello.py"}
+def say_hello():
+    print("سلام!")
+```
+````
+
+```python {filename="hello.py"}
+def say_hello():
+    print("سلام!")
+```
+
+### شماره خطوط
+
+برای تنظیم شماره خطوط، ویژگی `linenos` را روی `table` قرار دهید و به صورت اختیاری `linenostart` را روی شماره‌ای که خط شروع می‌شود تنظیم کنید:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("سلام!")
+```
+````
+
+```python {linenos=table,linenostart=42}
+def say_hello():
+    print("سلام!")
+```
+
+### برجسته کردن خطوط
+
+برای برجسته کردن خطوط، ویژگی `hl_lines` را به فهرستی از شماره خطوط تنظیم کنید:
+
+````markdown {filename="Markdown"}
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("سلام!")
+
+def main():
+    say_hello()
+```
+````
+
+```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
+def say_hello():
+    print("سلام!")
+
+def main():
+    say_hello()
+```
+
+
+### دکمه کپی
+
+به طور پیش‌فرض، دکمه کپی برای بلوک‌های کد فعال است.
+
+
+## زبان‌های پشتیبانی شده
+
+برای مشاهده فهرست زبان‌های پشتیبانی شده، لطفا به [مستندات Chroma](https://github.com/alecthomas/chroma#supported-languages) مراجعه کنید.

exampleSite/content/docs/jupyter/index.md

@@ -0,0 +1,11 @@
+---
+title: Jupyter Notebook
+math: true
+---
+
+{{< callout type="info" >}}
+  Experimental page to include Jupyter Notebooks in the site.
+  [Example file](https://github.com/jupyterlite/jupyterlite/blob/main/examples/intro.ipynb)
+{{< /callout >}}
+
+{{< jupyter "Intro.ipynb" >}}

exampleSite/content/showcase/index.fa.md

@@ -0,0 +1,20 @@
+---
+title: ویترین
+description: "پروژه‌های متن‌باز که توسط هگزترا طراحی شده‌اند."
+toc: false
+layout: wide
+---
+
+<div class="hx-mt-4"></div>
+
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
+پروژه‌های متن‌باز که توسط هگزترا طراحی شده‌اند.
+</p>
+
+{{< cards >}}
+  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://porter.sh/" 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;" >}}
+  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< /cards >}}

exampleSite/content/showcase/index.md

@@ -5,14 +5,16 @@ toc: false
 layout: wide
 ---
 
-<div class="mt-4"></div>
+<div class="hx-mt-4"></div>
 
-<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-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://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://porter.sh/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
   {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}

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

@@ -5,14 +5,15 @@ toc: false
 layout: wide
 ---
 
-<div class="mt-4"></div>
+<div class="hx-mt-4"></div>
 
-<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-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://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+  {{< card link="https://porter.sh/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
   {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
   {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}

exampleSite/hugo.yaml

@@ -27,6 +27,12 @@ languages:
     languageCode: zh-CN
     weight: 2
     title: Hextra
+  fa:
+    languageName: فارسی
+    languageCode: fa
+    languageDirection: rtl
+    weight: 3
+    title: هگزترا
 
 module:
   hugoVersion:
@@ -35,7 +41,7 @@ module:
 
   workspace: hugo.work
   imports:
-    path: github.com/imfing/hextra
+    - path: github.com/imfing/hextra
 
 markup:
   goldmark:
@@ -130,6 +136,9 @@ params:
     flexsearch:
       # index page by: content | summary | heading | title
       index: content
+      # full | forward | reverse | strict 
+      # https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search
+      tokenize: forward
 
   editURL:
     enable: true

exampleSite/i18n/fa.yaml

@@ -0,0 +1,6 @@
+documentation: "مستندات"
+showcase: "ویترین"
+blog: "وبلاگ"
+about: "درباره ما"
+more: "بیشتر"
+hugoDocs: "مستندات هیوگو ↖"

i18n/cs.yaml

@@ -0,0 +1,14 @@
+backToTop: "Zpět nahoru"
+changeLanguage: "Změnit jazyk"
+changeTheme: "Změnit vzhled"
+copyCode: "Zkopírovat kód"
+copyright: "© 2023 Hextra Project."
+dark: "Tmavý"
+editThisPage: "Upravit tuto stránku na GitHubu →"
+lastUpdated: "Naposledy změněno"
+light: "Světlý"
+noResultsFound: "Nebylo nic nalezeno."
+onThisPage: "Na této stránce"
+poweredBy: "Powered by Hextra"
+readMore: "Přečíst víc →"
+searchPlaceholder: "Hledat..."

i18n/de.yaml

@@ -0,0 +1,14 @@
+backToTop: "Nach oben"
+changeLanguage: "Sprache ändern"
+changeTheme: "Darstellung ändern"
+copyCode: "Code kopieren"
+copyright: "© 2024 Hextra Project."
+dark: "Dunkel"
+editThisPage: "Diese Seite auf Github bearbeiten →"
+lastUpdated: "Zuletzt aktualisiert am"
+light: "Hell"
+noResultsFound: "Keine Ergebnisse gefunden."
+onThisPage: "Auf dieser Seite"
+poweredBy: "Unterstützt durch Hextra"
+readMore: "Mehr lesen →"
+searchPlaceholder: "Suchen..."

i18n/en.yaml

@@ -1,6 +1,7 @@
 backToTop: "Scroll to top"
 changeLanguage: "Change language"
 changeTheme: "Change theme"
+copyCode: "Copy code"
 copyright: "© 2023 Hextra Project."
 dark: "Dark"
 editThisPage: "Edit this page on GitHub →"

i18n/fa.yaml

@@ -0,0 +1,14 @@
+backToTop: "به بالا بروید"
+changeLanguage: "تغییر زبان"
+changeTheme: "تغییر تم"
+copyCode: "کپی کد"
+copyright: "© ۲۰۲۴ پروژه هگزترا."
+dark: "تیره"
+editThisPage: "ویرایش این صفحه در گیت‌هاب ←"
+lastUpdated: "آخرین به‌روزرسانی در"
+light: "روشن"
+noResultsFound: "هیچ نتیجه‌ای پیدا نشد."
+onThisPage: "در این صفحه"
+poweredBy: "طراحی شده توسط هگزترا"
+readMore: "ادامه مطلب ←"
+searchPlaceholder: "جستجو..."

i18n/ro.yaml

@@ -0,0 +1,14 @@
+backToTop: "Înapoi sus"
+changeLanguage: "Schimbă limba"
+changeTheme: "Schimbă tema"
+copyCode: "Copiază codul"
+copyright: "© 2024 Hextra Project."
+dark: "Întuneric"
+editThisPage: "Editați această pagină pe GitHub ←"
+lastUpdated: "Ultima actualizare la"
+light: "Lumină"
+noResultsFound: "Nici un rezultat găsit."
+onThisPage: "Pe această pagină"
+poweredBy: "Susținut de Hextra"
+readMore: "Citește mai mult ←"
+searchPlaceholder: "Caută..."

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -1,4 +1,4 @@
-<pre class="mermaid mt-6">
+<pre class="mermaid hx-mt-6">
   {{- .Inner | safeHTML -}}
 </pre>
 {{- .Page.Store.Set "hasMermaid" true -}}

layouts/_default/_markup/render-codeblock.html

@@ -3,25 +3,10 @@
 {{- $lang := .Attributes.lang | default .Type -}}
 
 
-<div class="code-block relative mt-6 first:mt-0 group/code">
-  {{- if $filename -}}
-    <div class="filename">{{ $filename }}</div>
-  {{- end -}}
-  {{- if transform.CanHighlight $lang -}}
-    <div id="code-block-{{ .Ordinal }}">
-      {{- highlight .Inner $lang .Options -}}
-    </div>
-  {{- else -}}
-    <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 }}"
-    >
-      <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 class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
+  {{ partial "components/codeblock" (dict "filename" $filename "lang" $lang "content" .Inner "options" .Options) }}
+
+  {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) }}
+    {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename }}
+  {{ end }}
 </div>

layouts/_default/_markup/render-heading.html

@@ -1,7 +1,7 @@
 <h{{ .Level }}>
   {{- .Text | safeHTML -}}
   {{- if gt .Level 1 -}}
-    <span class="absolute -mt-20" id="{{ .Anchor | safeURL }}"></span>
+    <span class="hx-absolute -hx-mt-20" id="{{ .Anchor | safeURL }}"></span>
     <a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
   {{- end -}}
 </h{{ .Level }}>

layouts/_default/_markup/render-image.html

@@ -1,13 +1,13 @@
 {{- $alt := .PlainText | safeHTML -}}
-{{- $lazyLoading := .Page.Site.Params.enableImagelazyLoading | default true -}}
+{{- $lazyLoading := .Page.Site.Params.enableImageLazyLoading | default true -}}
 {{- $dest := .Destination -}}
 
-{{- $isRemote := not (urls.Parse $dest).Scheme -}}
+{{- $isLocal := not (urls.Parse $dest).Scheme -}}
 {{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}}
 {{- $startsWithSlash := hasPrefix $dest "/" -}}
 {{- $startsWithRelative := hasPrefix $dest "../" -}}
 
-{{- if and $dest $isRemote -}}
+{{- if and $dest $isLocal -}}
   {{- if $startsWithSlash -}}
     {{/* Images under static directory */}}
     {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}

layouts/_default/baseof.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
   {{- partial "head.html" . -}}
-  <body dir="ltr">
+  <body dir="{{ .Site.Language.LanguageDirection | default `ltr` }}">
     {{- partial "navbar.html" . -}}
     {{- block "main" . }}{{ end -}}
     {{- if or (eq .Site.Params.footer.enable nil) (.Site.Params.footer.enable) }}

layouts/_default/list.html

@@ -1,14 +1,14 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-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)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         <div class="content">
           <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
-        <div class="mt-16"></div>
+        <div class="hx-mt-16"></div>
         {{ partial "components/last-updated.html" . }}
         {{ partial "components/comments.html" . }}
       </main>

layouts/_default/single.html

@@ -1,16 +1,16 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
-        <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="mb-16"></div>
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
+        <br class="hx-mt-1.5 hx-text-sm" />
+        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        <div class="hx-mb-16"></div>
         <div class="content">
           {{ .Content }}
         </div>
-        <div class="mt-16"></div>
+        <div class="hx-mt-16"></div>
         {{ partial "components/comments.html" . }}
       </main>
     </article>

layouts/_default/wide.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-[90rem]">
+  <div class="hx-mx-auto hx-flex hx-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>
+    <article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
+      <br class="hx-mt-1.5 hx-text-sm" />
+      <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
       <div class="content">
         {{ .Content }}
       </div>

layouts/blog/list.html

@@ -1,33 +1,33 @@
 {{ define "main" }}
   {{- $readMore := (T "readMore") | default "Read more →" -}}
-  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
+  <div class="hx-mx-auto hx-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>
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
+        <br class="hx-mt-1.5 hx-text-sm" />
+        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
         <div class="content">{{ .Content }}</div>
         {{ 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>
+          <div class="hx-mb-10">
+            <h3><a style="color: inherit; text-decoration: none;" class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
             {{- 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 class="hx-opacity-50 hx-text-sm hx-leading-7">
+                  {{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}}
                 </p>
               {{ end -}}
             {{- end -}}
-            <p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
-            <p class="opacity-80 mt-1 leading-7">
-              <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
+            <p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p>
+            <p class="hx-opacity-80 hx-mt-1 hx-leading-7">
+              <a class="hx-text-[color:hsl(var(--primary-hue),100%,50%)] hx-underline hx-underline-offset-2 hx-decoration-from-font" href="{{ .RelPermalink }}">
                 {{- $readMore -}}
               </a>
             </p>
-            <p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
+            <p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
           </div>
         {{ end }}
       </main>
     </article>
-    <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
+    <div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
   </div>
 {{ end }}

layouts/blog/single.html

@@ -1,27 +1,40 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         {{ partial "breadcrumb.html" . }}
-        <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
-        {{ with $date := .Date }}
-          <div class="mt-4 mb-16 text-gray-500 text-sm">
-            {{ partial "utils/format-date" $date }}
-            {{- if $.Params.authors }}&nbsp;by&nbsp;{{ end -}}
-            {{- with $.Params.authors -}}
-              {{- range $i, $author := . -}}
-                {{- if $i }},{{ end -}}
-                {{- if $author.link -}}
-                  <a href="{{ $author.link }}" target="_blank" class="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font">{{ $author.name }}</a>
-                {{- else -}}
-                  <span>{{ $author.name }}</span>
-                {{- end -}}
+        <h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        <div class="hx-mt-4 hx-mb-16 hx-text-gray-500 hx-text-sm hx-flex hx-items-center hx-flex-wrap hx-gap-y-2">
+          {{- with $date := .Date }}<span class="hx-mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
+          {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
+          {{ if and .Date .Params.authors }}<span class="hx-mx-1">·</span>{{ end -}}
+          {{- with $.Params.authors -}}
+            {{- range $i, $author := . -}}
+              {{- if reflect.IsMap $author -}}
+                {{- if and $i (not $author.image) }}<span class="hx-mr-1">,</span>{{ end -}}
+                <a
+                  {{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
+                  class="hx-group hx-inline-flex hx-items-center hx-text-current hx-gap-x-1.5 hx-mx-1"
+                  {{ with $author.name }}title="{{ . }}"{{ end }}
+                >
+                  {{- with $image := $author.image }}
+                    {{- $isLocal := not (urls.Parse $image).Scheme -}}
+                    {{- $startsWithSlash := hasPrefix $image "/" -}}
+                    {{- if and $isLocal $startsWithSlash }}
+                      {{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
+                    {{ end -}}
+                    <img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="hx-inline-block hx-h-4 hx-w-4 hx-rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
+                  {{ end -}}
+                  <div class="group-hover:hx-underline">{{ $author.name }}</div>
+                </a>
+              {{- else -}}
+                {{- if $i }}<span class="hx-mr-1">,</span>{{ end -}}<span class="hx-mx-1">{{ $author }}</span>
               {{- end -}}
             {{- end -}}
-          </div>
-        {{ end }}
+          {{- end -}}
+        </div>
         <div class="content">
           {{ .Content }}
         </div>

layouts/docs/list.html

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

layouts/docs/single.html

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

layouts/hextra-home.html

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

layouts/index.html

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

layouts/partials/breadcrumb.html

@@ -1,13 +1,13 @@
-<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
+<div class="hx-mt-1.5 hx-flex hx-items-center hx-gap-1 hx-overflow-hidden hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 contrast-more:hx-text-current">
   {{- range .Ancestors.Reverse }}
     {{- if not .IsHome }}
-      <div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis hover:text-gray-900 dark:hover:text-gray-100">
-        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      <div class="hx-whitespace-nowrap hx-transition-colors hx-min-w-[24px] hx-overflow-hidden hx-text-ellipsis hover:hx-text-gray-900 dark:hover:hx-text-gray-100">
+        <a href="{{ .Permalink }}">{{- partial "utils/title" . -}}</a>
       </div>
-      {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") -}}
+      {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-w-3.5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
     {{ end -}}
   {{ end -}}
-  <div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
-    {{- .LinkTitle -}}
+  <div class="hx-whitespace-nowrap hx-transition-colors hx-font-medium hx-text-gray-700 contrast-more:hx-font-bold contrast-more:hx-text-current dark:hx-text-gray-100 contrast-more:dark:hx-text-current">
+    {{- partial "utils/title" . -}}
   </div>
 </div>

layouts/partials/components/codeblock-copy-button.html

@@ -0,0 +1,15 @@
+{{/* TODO: remove filename variable */}}
+{{- $filename := .filename | default "" -}}
+{{- $display := site.Params.highlight.copy.display | default "hover" -}}
+{{- $copyCode := (T "copyCode") | default "Copy code" -}}
+
+
+<div class="hextra-code-copy-btn-container {{ if eq $display `hover` }}hx-opacity-0{{ end }} hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
+  <button
+    class="hextra-code-copy-btn hx-group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
+    title="{{ $copyCode }}"
+  >
+    <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
+    <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
+  </button>
+</div>

layouts/partials/components/codeblock.html

@@ -0,0 +1,13 @@
+{{ $filename := .filename | default "" -}}
+{{ $lang := .lang | default "" }}
+{{ $content := .content }}
+{{ $options := .options | default (dict) }}
+
+{{- if $filename -}}
+  <div class="filename" dir="auto">{{ $filename }}</div>
+{{- end -}}
+{{- if transform.CanHighlight $lang -}}
+  <div>{{- highlight $content $lang $options -}}</div>
+{{- else -}}
+  <pre><code>{{ $content }}</code></pre>
+{{- end -}}

layouts/partials/components/last-updated.html

@@ -3,10 +3,10 @@
 {{- if site.Params.displayUpdatedDate -}}
   {{- with .Lastmod -}}
     {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
-    <div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+    <div class="hx-mt-12 hx-mb-8 hx-block hx-text-xs hx-text-gray-500 ltr:hx-text-right rtl:hx-text-left dark:hx-text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
   {{- else -}}
-    <div class="mt-16"></div>
+    <div class="hx-mt-16"></div>
   {{- end -}}
 {{- else -}}
-  <div class="mt-16"></div>
+  <div class="hx-mt-16"></div>
 {{- end -}}

layouts/partials/components/pager.html

@@ -26,25 +26,27 @@
 {{- end -}}
 
 {{- if or $prev $next -}}
-  <div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
+  <div class="hx-mb-8 hx-flex hx-items-center hx-border-t hx-pt-8 dark:hx-border-neutral-800 contrast-more:hx-border-neutral-400 dark:contrast-more:hx-border-neutral-400 print:hx-hidden">
     {{- if $prev -}}
+      {{- $linkTitle := partial "utils/title" $prev -}}
       <a
         href="{{ $prev.RelPermalink }}"
-        title="{{ $prev.LinkTitle }}"
-        class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4"
+        title="{{ $linkTitle }}"
+        class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-pr-4 rtl:hx-pl-4"
       >
-        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
-        {{- $prev.LinkTitle -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 ltr:hx-rotate-180\"") -}}
+        {{- $linkTitle -}}
       </a>
     {{- end -}}
     {{- if $next -}}
+      {{- $linkTitle := partial "utils/title" $next -}}
       <a
         href="{{ $next.RelPermalink }}"
-        title="{{ $next.LinkTitle }}"
-        class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left"
+        title="{{ $linkTitle }}"
+        class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-ml-auto ltr:hx-pl-4 ltr:hx-text-right rtl:hx-mr-auto rtl:hx-pr-4 rtl:hx-text-left"
       >
-        {{- $next.LinkTitle -}}
-        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
+        {{- $linkTitle -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
       </a>
     {{- end -}}
   </div>

layouts/partials/footer.html

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

layouts/partials/head.html

@@ -17,6 +17,12 @@
   </title>
   <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
 
+  {{ with .Params.canonical }}
+    <link rel="canonical" href="{{ . }}" itemprop="url" />
+  {{ else }}
+    <link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
+  {{ end }}
+
   {{ partial "opengraph.html" . }}
   {{ template "_internal/schema.html" . -}}
   {{ template "_internal/twitter_cards.html" . -}}

layouts/partials/language-switch.html

@@ -6,33 +6,33 @@
 {{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
 
 {{- if site.IsMultiLingual -}}
-  <div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
+  <div class="hx-flex hx-justify-items-start {{ if $grow }}hx-grow{{ end }}">
     <button
       title="{{ $changeLanguage }}"
       data-state="closed"
-      class="language-switcher 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 grow"
+      class="language-switcher hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 hx-grow"
       type="button"
       aria-label="{{ $changeLanguage }}"
     >
-      <div class="flex items-center gap-2 capitalize">
+      <div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
         {{- partial "utils/icon" (dict "name" "globe-alt" "attributes" "height=12") -}}
         {{- if not $hideLabel }}<span>{{ site.Language.LanguageName }}</span>{{ end -}}
       </div>
     </button>
     <ul
-      class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800"
+      class="language-options hx-hidden hx-z-20 hx-max-h-64 hx-overflow-auto hx-rounded-md hx-ring-1 hx-ring-black/5 hx-bg-white hx-py-1 hx-text-sm hx-shadow-lg dark:hx-ring-white/20 dark:hx-bg-neutral-800"
       style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
     >
       {{ range site.Languages }}
         {{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
-        <li class="flex flex-col">
+        <li class="hx-flex hx-flex-col">
           <a
             href="{{ $link }}"
-            class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9"
+            class="hx-text-gray-800 dark:hx-text-gray-100 hover:hx-bg-primary-50 hover:hx-text-primary-600 hover:dark:hx-bg-primary-500/10 hover:dark:hx-text-primary-600 hx-relative hx-cursor-pointer hx-whitespace-nowrap hx-py-1.5 hx-transition-colors ltr:hx-pl-3 ltr:hx-pr-9 rtl:hx-pr-3 rtl:hx-pl-9"
           >
             {{- .LanguageName -}}
             {{- if eq .LanguageName site.Language.LanguageName -}}
-              <span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">
+              <span class="hx-absolute hx-inset-y-0 hx-flex hx-items-center ltr:hx-right-3 rtl:hx-left-3">
                 {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
               </span>
             {{- end -}}

layouts/partials/navbar.html

@@ -4,26 +4,26 @@
 {{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
 {{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
 
-{{- $navWidth := "max-w-[90rem]" -}}
+{{- $navWidth := "hx-max-w-[90rem]" -}}
 {{- with .Site.Params.navbar.width -}}
   {{ if eq . "normal" -}}
-    {{ $navWidth = "max-w-screen-xl" -}}
+    {{ $navWidth = "hx-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>
+<div class="nav-container hx-sticky hx-top-0 hx-z-20 hx-w-full hx-bg-transparent print:hx-hidden">
+  <div class="nav-container-blur hx-pointer-events-none hx-absolute hx-z-[-1] hx-h-full hx-w-full hx-bg-white dark:hx-bg-dark hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:hx-shadow-[0_0_0_1px_#000] dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]"></div>
 
-  <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 }}">
+  <nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
+    <a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
       {{- if (.Site.Params.navbar.displayLogo | default true) }}
-        <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 }}" />
+        <img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+        <img class="hx-hidden dark:hx-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>
+        <span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
       {{- end }}
     </a>
 
@@ -32,30 +32,38 @@
       {{- if eq .Params.type "search" -}}
         {{- partial "search.html" (dict "params" .Params) -}}
       {{- else -}}
-        {{- $external := strings.HasPrefix .URL "http" -}}
+        {{- $link := .URL -}}
+        {{- $external := strings.HasPrefix $link "http" -}}
+        {{- with .PageRef -}}
+          {{- if hasPrefix . "/" -}}
+            {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+          {{- end -}}
+        {{- end -}}
+
         {{/* Display icon menu item */}}
         {{- if .Params.icon -}}
-          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | relLangURL }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
+          {{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
+          <a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
             {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
-            <span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
+            <span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- else -}}
           {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
-          {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
+          {{- $activeClass := cond $active "hx-font-medium" "hx-text-gray-600 hover:hx-text-gray-800 dark:hx-text-gray-400 dark:hover:hx-text-gray-200" -}}
           <a
             title="{{ or (T .Identifier) .Name | safeHTML }}"
-            href="{{ .URL | relLangURL }}"
+            href="{{ $link }}"
             {{ if $external }}target="_blank" rel="noreferer"{{ end }}
-            class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
+            class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
           >
-            <span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
+            <span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- end -}}
       {{- end -}}
     {{- end -}}
 
 
-    <button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
+    <button type="button" aria-label="Menu" class="hamburger-menu -hx-mr-2 hx-rounded hx-p-2 active:hx-bg-gray-400/20 md:hx-hidden">
       {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
     </button>
   </nav>

layouts/partials/scripts.html

@@ -60,12 +60,18 @@
   {{- end -}}
   <script>
     // TODO: make render options configurable
+    // Reference: https://katex.org/docs/autorender#api
     document.addEventListener("DOMContentLoaded", function () {
       renderMathInElement(document.body, {
         delimiters: [
           { left: "$$", right: "$$", display: true },
           { left: "$", right: "$", display: false },
           { left: "\\(", right: "\\)", display: false },
+          { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+          {left: "\\begin{align}", right: "\\end{align}", display: true},
+          {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
+          {left: "\\begin{gather}", right: "\\end{gather}", display: true},
+          {left: "\\begin{CD}", right: "\\end{CD}", display: true},
           { left: "\\[", right: "\\]", display: true },
         ],
         throwOnError: false,

layouts/partials/search.html

@@ -1,17 +1,17 @@
 {{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
 
 
-<div class="search-wrapper relative md:w-64">
-  <div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
+<div class="search-wrapper hx-relative md:hx-w-64">
+  <div class="hx-relative hx-flex hx-items-center hx-text-gray-900 contrast-more:hx-text-gray-800 dark:hx-text-gray-300 contrast-more:dark:hx-text-gray-300">
     <input
       placeholder="{{ $placeholder }}"
-      class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current"
+      class="search-input hx-block hx-w-full hx-appearance-none hx-rounded-lg hx-px-3 hx-py-2 hx-transition-colors hx-text-base hx-leading-tight md:hx-text-sm hx-bg-black/[.05] dark:hx-bg-gray-50/10 focus:hx-bg-white dark:focus:hx-bg-dark placeholder:hx-text-gray-500 dark:placeholder:hx-text-gray-400 contrast-more:hx-border contrast-more:hx-border-current"
       type="search"
       value=""
       spellcheck="false"
     />
     <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"
+      class="hx-absolute hx-my-1.5 hx-select-none ltr:hx-right-1.5 rtl:hx-left-1.5 hx-h-5 hx-rounded hx-bg-white hx-px-1.5 hx-font-mono hx-text-[10px] hx-font-medium hx-text-gray-500 hx-border dark:hx-border-gray-100/20 dark:hx-bg-dark/50 contrast-more:hx-border-current contrast-more:hx-text-current contrast-more:dark:hx-border-current hx-items-center hx-gap-1 hx-transition-opacity hx-pointer-events-none hx-hidden sm:hx-flex"
     >
       CTRL K
     </kbd>
@@ -19,7 +19,7 @@
 
   <div>
     <ul
-      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))]"
+      class="search-results hextra-scrollbar hx-hidden hx-border hx-border-gray-200 hx-bg-white hx-text-gray-100 dark:hx-border-neutral-800 dark:hx-bg-neutral-900 hx-absolute hx-top-full hx-z-20 hx-mt-2 hx-overflow-auto hx-overscroll-contain hx-rounded-xl hx-py-2.5 hx-shadow-xl hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx-inset-x-0 ltr:md:hx-left-auto rtl:md:hx-right-auto contrast-more:hx-border contrast-more:hx-border-gray-900 contrast-more:dark:hx-border-gray-50 hx-w-screen hx-min-h-[100px] hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
       style="transition: max-height 0.2s ease 0s;"
     ></ul>
   </div>

layouts/partials/sidebar.html

@@ -3,21 +3,26 @@
 {{- $disableSidebar := .disableSidebar | default false -}}
 {{- $displayPlaceholder := .displayPlaceholder | default false -}}
 
-{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}
+{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
 
 {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
-{{- $navPages := union $navRoot.RegularPages $navRoot.Sections -}}
 {{- $pageURL := $context.RelPermalink -}}
 
+{{/* EXPERIMENTAL */}}
+{{- if .context.Params.sidebar.hide -}}
+  {{- $disableSidebar = true -}}
+  {{- $displayPlaceholder = true -}}
+{{- end -}}
 
-<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
-<aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
+
+<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
+<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   <!-- Search bar on small screen -->
-  <div class="px-4 pt-4 md:hidden">
+  <div class="hx-px-4 hx-pt-4 md:hx-hidden">
     {{ partial "search.html" }}
   </div>
-  <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">
+  <div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
+    <ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
       <!-- Nav -->
       {{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
       {{ template "sidebar-footer" }}
@@ -25,27 +30,27 @@
 
     <!-- Sidebar on large screen -->
     {{- if $disableSidebar -}}
-      {{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
+      {{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
       {{ .context.Scratch.Set "enableFooterSwitches" true }}
     {{- else -}}
-      <ul class="flex flex-col gap-1 max-md:hidden">
+      <ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
         {{ template "sidebar-main" (dict "context" $navRoot "page" $context  "pageURL" $pageURL) }}
         {{ template "sidebar-footer" }}
       </ul>
     {{ end -}}
   </div>
   {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
+  {{ $switchesClass := cond $disableSidebar "md:hx-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">
+    <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show">
       {{- with 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>
+          <div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
         {{- end -}}
       {{- end -}}
     </div>
@@ -68,27 +73,35 @@
   {{- $toc := .toc | default false -}}
 
   {{- with $items := union .context.RegularPages .context.Sections -}}
+    {{- $items = where $items "Params.sidebar.exclude" "!=" true -}}
     {{- if eq $level 0 -}}
       {{- range $items.ByWeight }}
-        {{- $active := eq $pageURL .RelPermalink -}}
-        {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
-        <li class="{{ if $shouldOpen }}open{{ end }}">
-          {{- template "sidebar-item-link" dict "context" . "active" $active "title" .LinkTitle "link" .RelPermalink -}}
-          {{- if and $toc $active -}}
-            {{- template "sidebar-toc" dict "page" . -}}
-          {{- end -}}
-          {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
-        </li>
+        {{- if .Params.sidebar.separator -}}
+          <li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
+            <span class="hx-cursor-default">{{ partial "utils/title" . }}</span>
+          </li>
+        {{- else -}}
+          {{- $active := eq $pageURL .RelPermalink -}}
+          {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
+          <li class="{{ if $shouldOpen }}open{{ end }}">
+            {{- $linkTitle := partial "utils/title" . -}}
+            {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
+            {{- if and $toc $active -}}
+              {{- template "sidebar-toc" dict "page" . -}}
+            {{- end -}}
+            {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
+          </li>
+        {{- end -}}
       {{- end -}}
     {{- else -}}
-      <div class="ltr: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'>
+      <div class="ltr:hx-pr-0 hx-overflow-hidden">
+        <ul class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'>
           {{- range $items.ByWeight }}
             {{- $active := eq $pageURL .RelPermalink -}}
             {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
-            {{- $title := .LinkTitle | default .File.BaseFileName -}}
-            <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
-              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
+            {{- $linkTitle := partial "utils/title" . -}}
+            <li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
+              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
               {{- if and $toc $active -}}
                 {{ template "sidebar-toc" dict "page" . }}
               {{- end }}
@@ -104,14 +117,14 @@
 {{- 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'>
+    <ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'>
       {{- range . }}
         {{- with .Headings }}
           {{- range . -}}
             <li>
               <a
                 href="#{{ anchorize .ID }}"
-                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border flex gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
+                class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50"
               >
                 {{- .Title -}}
               </a>
@@ -127,8 +140,8 @@
   {{- 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 class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
+        <span class="hx-cursor-default">{{ $name }}</span>
       </li>
     {{ else }}
       <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
@@ -140,11 +153,11 @@
   {{- $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]
+    class="hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
     {{- if .active }}
-      sidebar-active-item bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
+      sidebar-active-item hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500
     {{- else }}
-      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
+      hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
     {{- end -}}"
     href="{{ .link }}"
     {{ if $external }}target="_blank" rel="noreferer"{{ end }}
@@ -153,17 +166,13 @@
     {{- with .context }}
       {{- if or .RegularPages .Sections }}
         <span class="hextra-sidebar-collapsible-button">
-          {{- template "sidebear-collapsible-button" -}}
+          {{- template "sidebar-collapsible-button" -}}
         </span>
       {{- end }}
     {{ end -}}
   </a>
 {{- end -}}
 
-{{- define "sidebar-separator" -}}
-  <div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
-{{- end -}}
-
-{{- define "sidebear-collapsible-button" -}}
-  <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>
+{{- define "sidebar-collapsible-button" -}}
+  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg>
 {{- end -}}

layouts/partials/theme-toggle.html

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

layouts/partials/toc.html

@@ -5,11 +5,11 @@
 {{- $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">
+<nav class="hextra-toc hx-order-last hx-hidden hx-w-64 hx-shrink-0 xl:hx-block print:hx-hidden hx-px-4" aria-label="table of contents">
   {{- if $toc }}
-    <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">
+    <div class="hextra-scrollbar hx-sticky hx-top-16 hx-overflow-y-auto hx-pr-4 hx-pt-6 hx-text-sm [hyphens:auto] hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:hx--mr-4 rtl:hx--ml-4">
       {{- with .Fragments.Headings -}}
-        <p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
+        <p class="hx-mb-4 hx-font-semibold hx-tracking-tight">{{ $onThisPage }}</p>
         {{- range . -}}
           <ul>
             {{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
@@ -17,25 +17,35 @@
         {{- end -}}
       {{- end -}}
 
-      {{- $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" -}}
+      {{- $borderClass := "hx-mt-8 hx-border-t hx-bg-white hx-pt-8 hx-shadow-[0_-12px_16px_white] dark:hx-bg-dark dark:hx-shadow-[0_-12px_16px_#111]" -}}
       {{- if not .Fragments.Headings -}}
         {{- $borderClass = "" -}}
       {{- end -}}
 
       {{/* TOC bottom part */}}
-      <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">
+      <div class="{{ $borderClass }} hx-sticky hx-bottom-0 hx-flex hx-flex-col hx-items-start hx-gap-2 hx-pb-8 dark:hx-border-neutral-800 contrast-more:hx-border-t contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-border-neutral-400">
         {{- if site.Params.editURL.enable -}}
           {{- $editURL := site.Params.editURL.base | default "" -}}
-          {{- 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>
+          {{- with .Params.editURL -}}
+            {{/* if `editURL` is set in the front matter */}}
+            {{- $editURL = . -}}
+          {{- else -}}
+            {{- with .File -}}
+              {{/* `.FileInfo.Meta.SourceRoot` is a Hugo internal field, e.g. `/path/to/repo/content/en/` */}}
+              {{- $sourceDir := replace (strings.TrimPrefix .FileInfo.Meta.BaseDir .FileInfo.Meta.SourceRoot) "\\" "/" -}}
+              {{- $sourceDir = strings.TrimPrefix "/content" $sourceDir -}}
+              {{- $path := replace .Path "\\" "/" -}}
+              {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
+            {{- end -}}
+          {{- end -}}
+          <a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-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">
+        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-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">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline ltr:hx-ml-1 rtl:hx-mr-1 hx-h-3.5 hx-w-3.5 hx-border hx-rounded-full hx-border-gray-500 hover:hx-border-gray-900 dark:hx-border-gray-400 dark:hover:hx-border-gray-100 contrast-more:hx-border-gray-800 contrast-more:dark:hx-border-gray-50">
             <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
           </svg>
         </button>
@@ -53,13 +63,13 @@
   {{- end -}}
 
   {{- $padding := (mul $level 4) -}}
-  {{- $class := cond (eq $level 0) "font-semibold" (printf "ltr:pl-%d rtl:pr-%d" $padding $padding) -}}
+  {{- $class := cond (eq $level 0) "hx-font-semibold" (printf "ltr:hx-pl-%d rtl:hx-pr-%d" $padding $padding) -}}
 
   {{- range $headings }}
     {{- if .Title }}
-      <li class="my-2 scroll-my-6 scroll-py-6">
-        <a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
-          {{- .Title | safeHTML | plainify }}
+      <li class="hx-my-2 hx-scroll-my-6 hx-scroll-py-6">
+        <a class="{{ $class }} hx-inline-block hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-300 contrast-more:hx-text-gray-900 contrast-more:hx-underline contrast-more:dark:hx-text-gray-50 hx-w-full hx-break-words" href="#{{ anchorize .ID }}">
+          {{- .Title | safeHTML | plainify | htmlUnescape }}
         </a>
       </li>
     {{- end -}}

layouts/partials/utils/fragments.html

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

layouts/partials/utils/page-width.html

@@ -14,14 +14,14 @@
 
 {{- with $pageWidth -}}
   {{ if eq . "wide" -}}
-    {{ $pageWidth = "max-w-[90rem]" -}}
+    {{ $pageWidth = "hx-max-w-[90rem]" -}}
   {{ else if eq . "full" -}}
     {{ $pageWidth = "max-w-full" -}}
   {{ else -}}
-    {{ $pageWidth = "max-w-screen-xl" -}}
+    {{ $pageWidth = "hx-max-w-screen-xl" -}}
   {{ end -}}
 {{ else -}}
-  {{ $pageWidth = "max-w-screen-xl" -}}
+  {{ $pageWidth = "hx-max-w-screen-xl" -}}
 {{ end -}}
 
 {{ return $pageWidth }}

layouts/partials/utils/title.html

@@ -0,0 +1,19 @@
+{{/*
+  This utility is used to retrieve the title of a page or section.
+  If no title is set, it falls back to using the directory or file name.
+
+  Based on https://github.com/thegeeklab/hugo-geekdoc/blob/v0.44.0/layouts/partials/utils/title.html
+*/}}
+{{- $title := "" }}
+
+{{ if .LinkTitle }}
+  {{ $title = .LinkTitle }}
+{{ else if .Title }}
+  {{ $title = .Title }}
+{{ else if and .IsSection .File }}
+  {{ $title = path.Base .File.Dir | humanize | title }}
+{{ else if and .IsPage .File }}
+  {{ $title = .File.BaseFileName | humanize | title }}
+{{ end }}
+
+{{ return $title -}}