fix: [html] does not have [lang] attribute

[skip ci]

.prettierrc

@@ -1,7 +1,7 @@
 {
   "goTemplateBracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
-  "printWidth": 100,
+  "printWidth": 200,
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",

README.md

@@ -1 +1,40 @@
-# Hextra
+<div align="center">
+  <h1 align="center">Hextra</h1>
+  <p align="center">Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.</p>
+
+Demo → [imfing.github.io/hextra](https://imfing.github.io/hextra/)
+</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>
+
+## Features
+
+- **Beautiful Design** - Inspired by Nextra, Hextra utilizes Tailwind CSS to offer a modern design that makes your site look outstanding.
+- **Responsive Layout and Dark Mode** - It looks great on all devices, from mobile, tablet to desktop. Dark mode is also supported to accomodate various lighting conditions.
+- **Fast and Lightweight** - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, Hextra keeps its footprint minimal. No Javascript or Node.js are needed to use it.
+- **Full-text Search** - Built-in offline full-text search powered by FlexSearch, no additional configuration required.
+- **Battery-included** - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enhance your content. Table of contents, breadcumbs, pagination, sidebar navigation and more are all automatically generated.
+- **Multi-language and SEO Ready** - Multi-language sites made easy with Hugo's multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, and Twitter Cards.
+
+## Quick Start
+
+### Use the template
+
+Using the [Hextra Starter Template](https://github.com/imfing/hextra-starter-template) is the simplest method to bootstrap a new website with Hextra theme. Get started by clicking the "Use this template" button on the template repository page.
+
+The template repository also includes a [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) for deploying your website to GitHub Pages.
+
+### Usage
+
+Refer to the [documentation](https://imfing.github.io/hextra/docs) for more information.
+
+## Contributing
+
+This project is actively under development. Contributions are welcome!
+
+## License
+
+[MIT License](./LICENSE)

assets/css/compiled/main.css

@@ -1192,7 +1192,9 @@ article details > summary::before {
 }
 
 .hextra-card img {
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .hextra-card:hover svg {
@@ -1302,7 +1304,9 @@ article details > summary::before {
 
 .search-wrapper .no-result {
   display: block;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   padding: 2rem;
   text-align: center;
   font-size: .875rem;
@@ -1315,7 +1319,9 @@ article details > summary::before {
   margin-right: 0.625rem;
   margin-bottom: 0.5rem;
   margin-top: 1.5rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   border-bottom-width: 1px;
   border-color: rgb(0 0 0 / 0.1);
   padding-left: 0.625rem;
@@ -1515,7 +1521,8 @@ html {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
-  tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
@@ -1548,7 +1555,8 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
 abbr:where([title]) {
-  text-decoration: underline dotted;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -1808,6 +1816,11 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
 input::placeholder,
 textarea::placeholder {
   opacity: 1; /* 1 */
@@ -2007,6 +2020,14 @@ video {
   bottom: 0px;
 }
 
+.left-\[24px\] {
+  left: 24px;
+}
+
+.left-\[36px\] {
+  left: 36px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -2023,6 +2044,10 @@ video {
   top: 2rem;
 }
 
+.top-\[40\%\] {
+  top: 40%;
+}
+
 .top-full {
   top: 100%;
 }
@@ -2209,6 +2234,10 @@ video {
   display: none;
 }
 
+.aspect-auto {
+  aspect-ratio: auto;
+}
+
 .h-0 {
   height: 0px;
 }
@@ -2217,6 +2246,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -2241,8 +2274,8 @@ video {
   max-height: 16rem;
 }
 
-.max-h-\[calc\(100vh-4rem-env\(safe-area-inset-bottom\)\)\] {
+.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] {
-  max-height: calc(100vh - 4rem - env(safe-area-inset-bottom));
+  max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom));
 }
 
 .max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
@@ -2253,14 +2286,14 @@ video {
   min-height: 100px;
 }
 
-.min-h-\[calc\(100vh-4rem\)\] {
-  min-height: calc(100vh - 4rem);
-}
-
 .min-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
   min-height: calc(100vh - var(--navbar-height));
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -2277,11 +2310,20 @@ video {
   width: 16rem;
 }
 
+.w-\[110\%\] {
+  width: 110%;
+}
+
+.w-\[180\%\] {
+  width: 180%;
+}
+
 .w-full {
   width: 100%;
 }
 
 .w-max {
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -2321,6 +2363,10 @@ video {
   max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
 }
 
+.max-w-none {
+  max-width: none;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -2346,7 +2392,9 @@ video {
 }
 
 .select-none {
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .scroll-my-6 {
@@ -2364,7 +2412,13 @@ video {
 }
 
 .appearance-none {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 .flex-col {
@@ -2451,6 +2505,14 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -2549,6 +2611,16 @@ video {
   background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity));
 }
 
+.bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity));
+}
+
+.bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity));
+}
+
 .bg-primary-700\/5 {
   background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
 }
@@ -2572,6 +2644,35 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-gray-800 {
+  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-900 {
+  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-gray-600 {
+  --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);
+}
+
+.bg-clip-text {
+  -webkit-background-clip: text;
+          background-clip: text;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2596,6 +2697,10 @@ video {
   padding: 1rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2651,6 +2756,11 @@ video {
   padding-bottom: 0.625rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2784,6 +2894,10 @@ video {
   line-height: 1.25rem;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
@@ -2860,6 +2974,15 @@ video {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
+.text-transparent {
+  color: transparent;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-yellow-900 {
   --tw-text-opacity: 1;
   color: rgb(113 63 18 / var(--tw-text-opacity));
@@ -2951,7 +3074,9 @@ video {
 }
 
 .transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -3001,7 +3126,8 @@ video {
 }
 
 .\[hyphens\:auto\] {
-  hyphens: auto;
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }
 
 .\[text-underline-position\:from-font\] {
@@ -3043,16 +3169,31 @@ body {
   --primary-hue: 204deg;
 }
 
+.placeholder\:text-gray-500::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .placeholder\:text-gray-500::placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.before\:pointer-events-none::before {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
 }
 
+.before\:inset-0::before {
+  content: var(--tw-content);
+  inset: 0px;
+}
+
 .before\:inset-y-1::before {
   content: var(--tw-content);
   top: 0.25rem;
@@ -3099,6 +3240,11 @@ body {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-gray-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -3113,6 +3259,11 @@ body {
   background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -3168,6 +3319,22 @@ body {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-primary-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity));
+}
+
 .active\:bg-gray-400\/20:active {
   background-color: rgb(156 163 175 / 0.2);
 }
@@ -3524,6 +3691,11 @@ body {
   background-color: hsl(var(--primary-hue) 100% 66% / 0.1);
 }
 
+:is(html[class~="dark"] .dark\:bg-primary-600) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity));
+}
+
 :is(html[class~="dark"] .dark\:bg-red-900\/30) {
   background-color: rgb(127 29 29 / 0.3);
 }
@@ -3532,6 +3704,16 @@ body {
   background-color: rgb(161 98 7 / 0.3);
 }
 
+:is(html[class~="dark"] .dark\:from-gray-100) {
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+:is(html[class~="dark"] .dark\:to-gray-400) {
+  --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
+}
+
 :is(html[class~="dark"] .dark\:text-blue-200) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -3597,6 +3779,10 @@ body {
   color: rgb(254 240 138 / var(--tw-text-opacity));
 }
 
+:is(html[class~="dark"] .dark\:opacity-80) {
+  opacity: 0.8;
+}
+
 :is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) {
   --tw-shadow: 0 -12px 16px #111;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
@@ -3619,6 +3805,11 @@ body {
   --tw-ring-color: rgb(255 255 255 / 0.2);
 }
 
+:is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3630,6 +3821,11 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+:is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:border-neutral-500:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
@@ -3663,6 +3859,11 @@ body {
   background-color: hsl(var(--primary-hue) 100% 94% / 0.05);
 }
 
+:is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity));
+}
+
 :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
   background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
 }
@@ -3713,6 +3914,11 @@ body {
   background-color: rgb(17 17 17 / var(--tw-bg-opacity));
 }
 
+:is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity));
+}
+
 @media (prefers-contrast: more) {
   :is(html[class~="dark"] .contrast-more\:dark\:border-current) {
     border-color: currentColor;
@@ -3779,22 +3985,47 @@ body {
   }
 }
 
+@media not all and (min-width: 1024px) {
+  .max-lg\:min-h-\[340px\] {
+    min-height: 340px;
+  }
+}
+
 @media not all and (min-width: 768px) {
   .max-md\:hidden {
     display: none;
   }
+  .max-md\:min-h-\[340px\] {
+    min-height: 340px;
+  }
   .max-md\:\[transform\:translate3d\(0\2c -100\%\2c 0\)\] {
     transform: translate3d(0,-100%,0);
   }
 }
 
 @media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
   .sm\:flex {
     display: flex;
   }
+  .sm\:w-\[110\%\] {
+    width: 110%;
+  }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .sm\:items-start {
     align-items: flex-start;
   }
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .sm\:text-xl {
+    font-size: 1.25rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -3810,6 +4041,9 @@ body {
   .md\:hidden {
     display: none;
   }
+  .md\:aspect-\[1\.1\/1\] {
+    aspect-ratio: 1.1/1;
+  }
   .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] {
     height: calc(100vh - var(--navbar-height) - var(--menu-height));
   }
@@ -3832,6 +4066,9 @@ body {
     padding-left: 3rem;
     padding-right: 3rem;
   }
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
   .md\:text-5xl {
     font-size: 3rem;
   }
@@ -3849,6 +4086,15 @@ body {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:leading-\[1\.1\] {
+    line-height: 1.1;
+  }
+}
+
 @media (min-width: 1280px) {
   .xl\:block {
     display: block;

assets/js/flexsearch.js

@@ -6,6 +6,7 @@
 // {{ if hugo.IsProduction }}
 //   {{ $searchData := $searchData | minify | fingerprint }}
 // {{ end }}
+// {{ $noResultsFound := (T "noResultsFound") | default "No results found." }}
 
 (function () {
   const searchDataURL = '{{ $searchData.RelPermalink }}';
@@ -300,7 +301,7 @@
     if (!resultsElement) return;
 
     if (!results.length) {
-      resultsElement.innerHTML = `<span class="no-result">No results found.</span>`;
+      resultsElement.innerHTML = `<span class="no-result">{{ $noResultsFound | safeHTML }}</span>`;
       return;
     }
 

data/icons.yaml

@@ -265,8 +265,8 @@ zoom-out: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24
 # Socials
 instagram: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M12.91 12.909c.326-.327.582-.72.749-1.151c.16-.414.27-.886.302-1.578c.032-.693.04-.915.04-2.68c0-1.765-.008-1.987-.04-2.68c-.032-.692-.142-1.164-.302-1.578a3.185 3.185 0 0 0-.75-1.151a3.187 3.187 0 0 0-1.151-.75c-.414-.16-.886-.27-1.578-.302C9.487 1.007 9.265 1 7.5 1c-1.765 0-1.987.007-2.68.04c-.692.03-1.164.14-1.578.301a3.2 3.2 0 0 0-1.151.75a3.2 3.2 0 0 0-.75 1.151c-.16.414-.27.886-.302 1.578C1.007 5.513 1 5.735 1 7.5c0 1.765.007 1.987.04 2.68c.03.692.14 1.164.301 1.578c.164.434.42.826.75 1.151c.325.33.718.586 1.151.75c.414.16.886.27 1.578.302c.693.031.915.039 2.68.039c1.765 0 1.987-.008 2.68-.04c.692-.03 1.164-.14 1.578-.301a3.323 3.323 0 0 0 1.151-.75ZM2 6.735v1.53c-.002.821-.002 1.034.02 1.5c.026.586.058 1.016.156 1.34c.094.312.199.63.543 1.012c.344.383.675.556 1.097.684c.423.127.954.154 1.415.175c.522.024.73.024 1.826.024H8.24c.842.001 1.054.002 1.526-.02c.585-.027 1.015-.059 1.34-.156c.311-.094.629-.2 1.011-.543c.383-.344.556-.676.684-1.098c.127-.422.155-.953.176-1.414C13 9.247 13 9.04 13 7.947v-.89c0-1.096 0-1.303-.023-1.826c-.021-.461-.049-.992-.176-1.414c-.127-.423-.3-.754-.684-1.098c-.383-.344-.7-.449-1.011-.543c-.325-.097-.755-.13-1.34-.156A27.29 27.29 0 0 0 8.24 2H7.057c-1.096 0-1.304 0-1.826.023c-.461.021-.992.049-1.415.176c-.422.128-.753.301-1.097.684c-.344.383-.45.7-.543 1.012c-.098.324-.13.754-.156 1.34c-.022.466-.022.679-.02 1.5ZM7.5 5.25a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5ZM4.25 7.5a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0Zm6.72-2.72a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></svg>
 facebook: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
-discord: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
+discord: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>
+twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>
-mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path></svg>
+mastodon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path></svg>
 youtube: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104l.022.26l.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105l-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006l-.087-.004l-.171-.007l-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103l.003-.052l.008-.104l.022-.26l.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007l.172-.006l.086-.003l.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/></svg>
-x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path 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>
+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>

exampleSite/content/_index.md

@@ -1,4 +1,4 @@
 ---
 title: Hextra Theme
-toc: false
+layout: hextra-home
 ---

exampleSite/content/about/index.ja.md

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

exampleSite/content/about/index.md

@@ -3,4 +3,18 @@ title: About
 toc: false
 ---
 
-This is the about page.
+Hextra is designed to be a simple, fast, and flexible theme for building modern static websites. It is especially well-suited for documentation websites but can also be used for various types of sites, such as blogs, portfolios, and more.
+
+Hugo, like Jekyll, is a static site generator. What sets Hugo apart is that it is a single binary, making it easy to install and run on various platforms. It is also extremely fast and reliable, capable of rendering a site with thousands of pages in milliseconds.
+
+Hextra is built with a mindset focused on having a minimal footprint. To get started, no extra dependencies like Node.js packages are required; all you need is a single YAML configuration file, along with your Markdown content. Thus, we can focus on writing quality content instead of setting up tooling.
+
+## Credits
+
+Hextra cannot be built without the following tools and inspirations:
+
+- [Hugo](https://gohugo.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Heroicons](https://heroicons.com/)
+- [Nextra](https://nextra.vercel.app/)
+- [Next.js](https://nextjs.org/)

exampleSite/content/docs/_index.ja.md

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

exampleSite/content/docs/_index.md

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

exampleSite/content/docs/getting-started.md

@@ -5,6 +5,18 @@ next: /docs/guide
 prev: /docs
 ---
 
+## Quick Start from Template
+
+{{< icon "github" >}} [imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
+
+You will be able to quickly get started by using the above template repository.
+
+<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
+
+We have provided a [GitHub Actions workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) which can help automatically build and deploy your site to GitHub Pages, and host it for free.
+
+[🌐 Demo ↗](https://imfing.github.io/hextra-starter-template/)
+
 ## Start as New Project
 
 ### Prerequisites
@@ -66,7 +78,7 @@ Voila! You can see your new site at `http://localhost:1313/`.
 Explore the following sections to start adding more contents:
 
 {{< cards >}}
-  {{< card link="organize-files" title="Organize Files" icon="document-duplicate" >}}
+  {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
-  {{< card link="configuration" title="Configuration" icon="adjustments" >}}
+  {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
-  {{< card link="markdown" title="Markdown" icon="markdown" >}}
+  {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
 {{< /cards >}}

exampleSite/content/docs/guide/_index.md

@@ -8,6 +8,8 @@ sidebar:
 
 Explore the following sections to learn to compose content using Hextra:
 
+<!--more-->
+
 {{< cards >}}
   {{< card link="organize-files" title="Organize Files" icon="document-duplicate" >}}
   {{< card link="configuration" title="Configuration" icon="adjustments" >}}

exampleSite/content/docs/guide/configuration.md

@@ -7,6 +7,8 @@ Hugo reads its configuration from `hugo.yaml` in the root of your Hugo site.
 The config file is where you can configure all aspects of your site.
 You can find the config file for this site in `exampleSite/hugo.yaml` as a good starting point.
 
+<!--more-->
+
 ## Navigation
 
 ### Menu

exampleSite/content/docs/guide/latex.md

@@ -6,6 +6,8 @@ math: true
 
 $\KaTeX$ is used for rendering LaTeX math expressions. It can be enabled per page by setting `math` to `true` in the page front matter.
 
+<!--more-->
+
 ```yaml {filename="Markdown"}
 ---
 title: "My Page with LaTeX"

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

@@ -8,6 +8,8 @@ weight: 1
 By default, Hugo searches for Markdown files in the `content` directory, and the structure of the directory determines the final output structure of your website.
 Take the example site as an example:
 
+<!--more-->
+
 {{< filetree/container >}}
   {{< filetree/folder name="content" >}}
     {{< filetree/file name="_index.md" >}}

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

@@ -6,6 +6,8 @@ weight: 3
 Hugo uses [Chroma](https://github.com/alecthomas/chroma), a general purpose syntax highlighter in pure Go, for syntax highlighting.
 It is recommended to use backticks for code blocks in Markdown content. For example:
 
+<!--more-->
+
 ````markdown {filename="Markdown"}
 ```python
 def say_hello():

exampleSite/hugo.yaml

@@ -66,18 +66,23 @@ menu:
         icon: github
 
   sidebar:
-    - name: More
+    - identifier: more
+      name: More
       params:
         type: separator
       weight: 1
-    - name: "About"
+    - identifier: about
+      name: "About"
       pageRef: "/about"
       weight: 2
-    - name: "Hugo Docs ↗"
+    - identifier: hugoDocs
+      name: "Hugo Docs ↗"
       url: "https://gohugo.io/documentation/"
       weight: 3
 
 params:
+  description: Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.
+
   navbar:
     displayTitle: true
     displayLogo: true

exampleSite/hugo_stats.json

@@ -39,6 +39,7 @@
       "path",
       "pre",
       "script",
+      "section",
       "span",
       "strong",
       "style",
@@ -73,18 +74,27 @@
       "active:shadow-sm",
       "align-text-bottom",
       "appearance-none",
+      "aspect-auto",
       "before:absolute",
+      "before:bg-glass-gradient",
       "before:bg-gray-200",
       "before:content-[\"\"]",
       "before:content-['#']",
+      "before:inset-0",
       "before:inset-y-1",
       "before:opacity-25",
+      "before:pointer-events-none",
       "before:w-px",
       "bg-black/[.05]",
       "bg-blue-100",
+      "bg-clip-text",
+      "bg-gradient-to-b",
+      "bg-gradient-to-r",
       "bg-gray-100",
       "bg-orange-50",
       "bg-primary-100",
+      "bg-primary-400",
+      "bg-primary-600",
       "bg-primary-700/5",
       "bg-red-100",
       "bg-transparent",
@@ -149,6 +159,7 @@
       "dark:bg-orange-400/20",
       "dark:bg-primary-300/10",
       "dark:bg-primary-400/10",
+      "dark:bg-primary-600",
       "dark:bg-red-900/30",
       "dark:bg-yellow-700/30",
       "dark:block",
@@ -162,11 +173,15 @@
       "dark:border-yellow-200/30",
       "dark:contrast-more:border-neutral-400",
       "dark:focus:bg-dark",
+      "dark:focus:ring-primary-800",
+      "dark:from-gray-100",
       "dark:hidden",
       "dark:hover:bg-gray-100/5",
       "dark:hover:bg-neutral-700",
       "dark:hover:bg-neutral-900",
       "dark:hover:bg-primary-100/5",
+      "dark:hover:bg-primary-700",
+      "dark:hover:border-gray-600",
       "dark:hover:border-neutral-500",
       "dark:hover:border-neutral-700",
       "dark:hover:border-neutral-800",
@@ -177,6 +192,7 @@
       "dark:hover:text-gray-50",
       "dark:hover:text-neutral-50",
       "dark:hover:text-white",
+      "dark:opacity-80",
       "dark:placeholder:text-gray-400",
       "dark:ring-white/20",
       "dark:shadow-[0_-12px_16px_#111]",
@@ -195,6 +211,7 @@
       "dark:text-red-200",
       "dark:text-slate-100",
       "dark:text-yellow-200",
+      "dark:to-gray-400",
       "data-[state=closed]:hidden",
       "data-[state=open]:hidden",
       "data-[state=selected]:block",
@@ -208,6 +225,9 @@
       "flex",
       "flex-col",
       "focus:bg-white",
+      "focus:outline-none",
+      "focus:ring-4",
+      "focus:ring-primary-300",
       "font-bold",
       "font-extrabold",
       "font-medium",
@@ -217,10 +237,13 @@
       "footnote-backref",
       "footnote-ref",
       "footnotes",
+      "from-gray-800",
+      "from-gray-900",
       "gap-1",
       "gap-2",
       "gap-4",
       "grid",
+      "grid-cols-1",
       "group",
       "group-[.copied]/copybtn:block",
       "group-[.copied]/copybtn:hidden",
@@ -232,6 +255,7 @@
       "grow",
       "h-0",
       "h-16",
+      "h-2",
       "h-4",
       "h-5",
       "h-7",
@@ -250,9 +274,11 @@
       "hover:bg-gray-100",
       "hover:bg-gray-800/5",
       "hover:bg-primary-50",
+      "hover:bg-primary-700",
       "hover:bg-slate-50",
       "hover:border-gray-200",
       "hover:border-gray-300",
+      "hover:border-gray-400",
       "hover:dark:bg-primary-500/10",
       "hover:dark:text-primary-600",
       "hover:opacity-60",
@@ -280,8 +306,13 @@
       "language-options",
       "language-switcher",
       "leading-5",
+      "leading-6",
       "leading-7",
       "leading-tight",
+      "left-[24px]",
+      "left-[36px]",
+      "lg:grid-cols-3",
+      "lg:leading-[1.1]",
       "line-clamp-3",
       "list-none",
       "lntable",
@@ -307,14 +338,17 @@
       "ltr:text-right",
       "m-[11px]",
       "max-h-64",
-      "max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))]",
+      "max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
       "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "max-lg:min-h-[340px]",
       "max-md:[transform:translate3d(0,-100%,0)]",
       "max-md:hidden",
+      "max-md:min-h-[340px]",
       "max-w-6xl",
       "max-w-[50%]",
       "max-w-[90rem]",
       "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "max-w-none",
       "max-w-screen-xl",
       "max-xl:hidden",
       "mb-10",
@@ -323,11 +357,13 @@
       "mb-2",
       "mb-4",
       "mb-8",
+      "md:aspect-[1.1/1]",
       "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
       "md:hidden",
       "md:inline-block",
       "md:justify-start",
       "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:pt-12",
       "md:px-12",
       "md:self-start",
       "md:shrink-0",
@@ -339,7 +375,6 @@
       "md:w-64",
       "mermaid",
       "min-h-[100px]",
-      "min-h-[calc(100vh-4rem)]",
       "min-h-[calc(100vh-var(--navbar-height))]",
       "min-w-0",
       "min-w-[18px]",
@@ -381,6 +416,7 @@
       "p-1.5",
       "p-2",
       "p-4",
+      "p-6",
       "pb-6",
       "pb-8",
       "pb-[env(safe-area-inset-bottom)]",
@@ -409,12 +445,15 @@
       "py-12",
       "py-2",
       "py-2.5",
+      "py-3",
       "py-4",
       "relative",
       "right-0",
       "ring-1",
       "ring-black/5",
       "rounded",
+      "rounded-3xl",
+      "rounded-full",
       "rounded-lg",
       "rounded-md",
       "rounded-sm",
@@ -455,8 +494,13 @@
       "shrink-0",
       "sidebar-active-item",
       "sidebar-container",
+      "sm:block",
       "sm:flex",
+      "sm:grid-cols-2",
       "sm:items-start",
+      "sm:px-4",
+      "sm:text-xl",
+      "sm:w-[110%]",
       "sr-only",
       "steps",
       "sticky",
@@ -485,13 +529,17 @@
       "text-red-900",
       "text-slate-900",
       "text-sm",
+      "text-transparent",
+      "text-white",
       "text-xl",
       "text-xs",
       "text-yellow-900",
       "theme-toggle",
+      "to-gray-600",
       "top-0",
       "top-16",
       "top-8",
+      "top-[40%]",
       "top-full",
       "tracking-tight",
       "tracking-tighter",
@@ -502,9 +550,12 @@
       "transition-transform",
       "underline",
       "underline-offset-2",
+      "w-2",
       "w-3.5",
       "w-4",
       "w-64",
+      "w-[110%]",
+      "w-[180%]",
       "w-full",
       "w-max",
       "w-screen",

i18n/en.yaml

@@ -1,6 +1,5 @@
-article:
+onThisPage: "On this page"
-  on_this_page: "On this page"
+editThisPage: "Edit this page on GitHub →"
-  edit_this_page: "Edit this page on GitHub →"
+lastUpdated: "Last updated on"
 
-footer:
+copyright: "© 2023 Hextra Project."
-  copyright: "© 2023 Hextra Project."

i18n/ja.yaml

@@ -1,8 +1,16 @@
+# Navbar
 documentation: "ドキュメンテーション"
 blog: "ブログ"
 about: "このサイトについて"
 
-search_placeholder: "検索ドキュメント..."
+more: "もっと"
+hugoDocs: "Hugoドキュメント ↗"
 
-article:
+searchPlaceholder: "検索ドキュメント..."
-  on_this_page: "このページでは"
+noResultsFound: "検索結果が見つかりませんでした"
+
+onThisPage: "このページでは"
+editThisPage: "このページをGitHubで編集する →"
+lastUpdated: "最終更新日"
+
+copyright: "© 2023 Hextra Project."

layouts/_default/baseof.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.Language.Lang }}">
   {{- partial "head.html" . -}}
   <body dir="ltr">
     {{- partial "navbar.html" . -}}

layouts/_default/list.html

@@ -1,5 +1,16 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-[90rem]">
+  <div class="mx-auto flex max-w-screen-xl">
-    <p class="p-4">Unimplemented</p>
+    {{ 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">
+        <div class="content">
+          <h1>{{ .Title }}</h1>
+          {{ .Content }}
+        </div>
+        <div class="mt-16"></div>
+        {{ partial "components/last-updated.html" . }}
+      </main>
+    </article>
   </div>
 {{ end }}

layouts/_default/single.html

@@ -1,10 +1,11 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-screen-xl">
-    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <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>
+        <div class="mb-16"></div>
         <div class="content">
           {{ .Content }}
         </div>

layouts/blog/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-screen-xl">
-    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
-    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <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-4xl tracking-tighter text-center font-extrabold md:text-5xl mt-8 pb-6">{{ .Title }}</h1>
         <div class="content">{{ .Content }}</div>

layouts/blog/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-screen-xl">
-    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    {{ 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">

layouts/docs/list.html

@@ -2,7 +2,7 @@
   <div class="mx-auto flex max-w-screen-xl">
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
         {{ partial "breadcrumb.html" . }}
         <div class="content">

layouts/docs/single.html

@@ -2,7 +2,7 @@
   <div class="mx-auto flex max-w-screen-xl">
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
         {{ partial "breadcrumb.html" . }}
         <div class="content">

layouts/hextra-home.html

@@ -0,0 +1,118 @@
+{{ define "main" }}
+  <div class="mx-auto flex max-w-screen-xl">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    <div class="w-full break-words flex flex-col min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12">
+        <a
+          href="https://github.com/imfing/hextra"
+          target="_blank"
+          rel="noreferrer"
+          class="inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600"
+        >
+          <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+          <span>Free, open source</span>
+          {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}}
+        </a>
+        <h1
+          class="text-4xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1] mt-6 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
+        >
+          Build modern websites <br class="sm:block hidden" />
+          with Markdown and Hugo
+        </h1>
+        <p class="mt-4 text-xl text-gray-600 dark:text-gray-400 sm:text-xl">
+          Fast, batteries-included Hugo theme <br class="sm:block hidden" />
+          for creating beautiful static websites.
+        </p>
+        <div class="mt-8">
+          {{- $docsURL := "docs" | relURL -}}
+          <a
+            href="{{ $docsURL }}"
+            class="font-medium cursor-pointer px-6 py-3 text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 rounded-full text-center mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+          >
+            Get Started
+          </a>
+        </div>
+      </section>
+      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 pb-8">
+        <h2 class="mt-12 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-600 dark:from-gray-100 dark:to-gray-400">What's in Hextra?</h2>
+        <div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full">
+          {{ template "hextra-feature-card" (dict
+            "title" "Fast and Full-featured"
+            "subtitle" "Simple and easy to use, yet powerful and feature-rich. "
+            "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+            "image" "images/hextra-doc.webp"
+            "imageClass" "top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Markdown is All You Need"
+            "subtitle" "Compose with just Markdown. Enrich with Shortcode components."
+            "class" "aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+            "image" "images/hextra-markdown.webp"
+            "imageClass" "top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Full Text Search"
+            "subtitle" "Built-in full text search with FlexSearch, no extra setup required."
+            "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+            "image" "images/hextra-search.webp"
+            "imageClass" "top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Lightweight as a Feather"
+            "subtitle" "No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Reponsive with Dark Mode Included"
+            "subtitle" "Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Build and Host for Free"
+            "subtitle" "Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service."
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "Multi-Language Made Easy"
+            "subtitle" "Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive."
+            )
+          }}
+          {{ template "hextra-feature-card" (dict
+            "title" "And Much More..."
+            "subtitle" "Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..."
+            )
+          }}
+        </div>
+      </section>
+    </div>
+  </div>
+{{ end }}
+
+{{- define "hextra-feature-card" -}}
+  {{- $title := .title -}}
+  {{- $subtitle := .subtitle -}}
+  {{- $class := .class -}}
+  {{- $image := .image -}}
+  {{- $imageClass := .imageClass -}}
+  {{- $style := .style -}}
+
+
+  <div
+    {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+    class="{{ $class }} relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
+  >
+    <div class="relative w-full p-6">
+      <h3 class="text-2xl font-medium leading-6 mb-2">{{ $title }}</h3>
+      <p class="text-gray-500 text-sm leading-6">{{ $subtitle | markdownify }}</p>
+    </div>
+    {{- with $image -}}
+      <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
+    {{- end -}}
+  </div>
+{{- end -}}

layouts/index.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-screen-xl">
-    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <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>
         <div class="content">

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">
-  {{ range .Ancestors.Reverse }}
+  {{- range .Ancestors.Reverse }}
-    {{ if not .IsHome }}
+    {{- 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>
-      {{ 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=\"w-3.5 shrink-0\"") -}}
-    {{ end }}
+    {{ end -}}
-  {{ 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 }}
+    {{- .LinkTitle -}}
   </div>
 </div>

layouts/partials/components/last-updated.html

@@ -1,10 +1,12 @@
-{{ if site.Params.displayUpdatedDate }}
+{{- $lastUpdated := (T "lastUpdated") | default "Last updated on" -}}
+
+{{- 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">Last updated on <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+    <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>
   {{- else -}}
     <div class="mt-16"></div>
   {{- end -}}
-{{ else }}
+{{- else -}}
   <div class="mt-16"></div>
-{{ end }}
+{{- end -}}

layouts/partials/components/pager.html

@@ -20,13 +20,21 @@
 {{- 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">
     {{- if $prev -}}
-      <a href="{{ $prev.RelPermalink }}" 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">
+      <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"
+      >
         {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
         {{- $prev.LinkTitle -}}
       </a>
     {{- end -}}
     {{- if $next -}}
-      <a href="{{ $next.RelPermalink }}" 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">
+      <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"
+      >
         {{- $next.LinkTitle -}}
         {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
       </a>

layouts/partials/favicons.html

@@ -4,4 +4,4 @@
 <link rel="icon" href="{{ "favicon-16x16.png" | relURL }}" type="image/png" sizes="16x16" />
 <link rel="icon" href="{{ "favicon-32x32.png" | relURL }}" type="image/png" sizes="32x32" />
 <link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | relURL }}" sizes="180x180" />
-<link fetchpriority="low" href="/site.webmanifest" rel="manifest" />
+<link fetchpriority="low" href="{{ "site.webmanifest" | relURL }}" rel="manifest" />

layouts/partials/footer.html

@@ -1,5 +1,7 @@
 {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
 
+{{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
+
 
 <footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
   {{- if $enableFooterSwitches }}
@@ -9,17 +11,20 @@
     </div>
   {{ end -}}
   <hr class="dark:border-neutral-800" />
-  <div class="mx-auto flex max-w-screen-xl justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start">
+  <div
+    class="mx-auto flex max-w-screen-xl justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
+  >
     <div class="flex w-full flex-col items-center sm:items-start">
       {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}
-      {{- if .Site.Params.footer.displayCopyright }}<p class="mt-6 text-xs">{{ i18n "footer.copyright" }}</p>{{ end }}
+      {{- if .Site.Params.footer.displayCopyright }}<p class="mt-6 text-xs">{{ $copyright }}</p>{{ 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>Powered by Hextra
+    <span
+      >Powered by Hextra
       {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=1em class=\"inline-block ml-1 align-text-bottom\"") -}}
     </span>
   </a>

layouts/partials/language-switch.html

@@ -3,19 +3,33 @@
 {{- $grow := .grow -}}
 {{- $hideLabel := .hideLabel | default false -}}
 
+{{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
+
 {{- if site.IsMultiLingual -}}
   <div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
-    <button title="Change language" 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" type="button" aria-label="Switch Language">
+    <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"
+      type="button"
+      aria-label="{{ $changeLanguage }}"
+    >
       <div class="flex items-center gap-2 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" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;">
+    <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"
+      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">
-          <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">
+          <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"
+          >
             {{- .LanguageName -}}
             {{- if eq .LanguageName site.Language.LanguageName -}}
               <span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">

layouts/partials/search.html

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

layouts/partials/sidebar.html

@@ -1,6 +1,9 @@
 {{- $context := .context -}}
+
 {{- $disableSidebar := .disableSidebar | default false -}}
-{{- $sidebarClass := cond $disableSidebar "md:hidden xl:block" "md:sticky" -}}
+{{- $displayPlaceholder := .displayPlaceholder | default false -}}
+
+{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}
 
 {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
 {{- $navPages := union $navRoot.RegularPages $navRoot.Sections -}}
@@ -20,8 +23,8 @@
     </ul>
 
     <!-- Sidebar on large screen -->
-    {{- if $disableSidebar }}
+    {{- if $disableSidebar -}}
-      <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
+      {{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
       {{ .context.Scratch.Set "enableFooterSwitches" true }}
     {{- else -}}
       <ul class="flex flex-col gap-1 max-md:hidden">
@@ -117,12 +120,13 @@
 
 {{- define "sidebar-footer" -}}
   {{- range site.Menus.sidebar -}}
+    {{- $name := or (T .Identifier) .Name -}}
     {{ if eq .Params.type "separator" }}
       <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
-        <span class="cursor-default">{{ .Name }}</span>
+        <span class="cursor-default">{{ $name }}</span>
       </li>
     {{ else }}
-      <li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
+      <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
     {{ end }}
   {{- end -}}
 {{- end -}}

layouts/partials/theme-toggle.html

@@ -1,7 +1,15 @@
 {{- $hideLabel := .hideLabel | default false -}}
 
+{{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
 
-<button title="Change theme" data-theme="light" class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" type="button" aria-label="Toggle Dark Mode">
+
+<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"
+  type="button"
+  aria-label="Toggle Dark Mode"
+>
   <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 -}}

layouts/partials/toc.html

@@ -1,13 +1,14 @@
 {{/* Table of Contents */}}
 {{/* TODO: toc bottom part should be able to hide */}}
 {{- $toc := .Params.toc | default true -}}
-
+{{- $onThisPage := (T "onThisPage") | default "On this page"}}
+{{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
 
 <nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
   {{- if $toc }}
-    <div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
+    <div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
       {{- with .Fragments.Headings -}}
-        <p class="mb-4 font-semibold tracking-tight">{{ i18n "article.on_this_page" }}</p>
+        <p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
         {{- range . -}}
           <ul>
             {{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
@@ -26,7 +27,7 @@
           {{- $editURL := site.Params.editURL.base | default "" -}}
           {{- with .File -}}{{ $editURL = urls.JoinPath $editURL .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">{{ i18n "article.edit_this_page" }}</a>
+          <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
         {{- end -}}
       </div>
     </div>

layouts/partials/utils/page-description.html

@@ -1,11 +1,11 @@
 {{ with .Description | plainify -}}
   {{ . -}}
 {{ else -}}
-  {{ if .IsPage -}}
+  {{ if .IsHome -}}
-    {{ .Summary | plainify | chomp -}}
-  {{ else -}}
     {{ with .Site.Params.description | plainify -}}
       {{ . -}}
     {{ end -}}
+  {{ else -}}
+    {{ .Summary | plainify | chomp -}}
   {{ end -}}
 {{ end -}}

layouts/shortcodes/card.html

@@ -1,4 +1,4 @@
-{{- $href := .Get "link" -}}
+{{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 {{- $subtitle := .Get "subtitle" }}
@@ -10,9 +10,15 @@
   {{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
 {{- end -}}
 
+{{- $external := strings.HasPrefix $link "http" -}}
+
 <a
   class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
-  href="{{ $href }}"
+  href="{{ $link }}"
+  {{- if $external -}}
+    target="_blank"
+    rel="noreferrer"
+  {{- end -}}
 >
   {{- with $image -}}
     <img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image }}" />

package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "dev:theme": "hugo server --environment=theme --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
+    "dev:theme": "hugo server --logLevel debug --environment=theme --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
     "dev": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
     "build:css": "npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css",
     "build": "hugo --gc --minify --themesDir=../.. --source=exampleSite"

postcss.config.js

@@ -7,6 +7,6 @@ module.exports = {
 		require('postcss-import'),
 		require('@tailwindcss/nesting'),
 		tailwind,
-		...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [])
+		autoprefixer
 	],
 };

static/site.webmanifest

@@ -1,14 +1,15 @@
 {
   "name": "Hextra",
   "short_name": "Hextra",
+  "start_url": "index.html",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

taskfile.yaml

@@ -1,19 +0,0 @@
-version: "3"
-
-tasks:
-  dev:
-    cmds:
-      - hugo server --logLevel debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
-
-  build:
-    deps: [css]
-    cmds:
-      - hugo --minify --source=exampleSite --themesDir=../..
-
-  css:
-    cmds:
-      - npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css
-
-  clean:
-    cmds:
-      - rm -rf public resources