chore: compile css and update docs

chore: replace --debug with --logLevel debug

chore: add copyright text

assets/css/compiled/main.css

@@ -264,6 +264,13 @@
   .content ul li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+}
+  .content .not-prose ul, .content ol {
+  margin: 0px;
+  list-style-type: none;
+}
+  .content .not-prose ul li, .content ol li {
+  margin: 0px;
 }
   .content kbd {
   overflow-wrap: break-word;
@@ -1413,7 +1420,7 @@ nav .search-wrapper {
 }
 
 .hamburger-menu svg.open > g:nth-of-type(1) path {
-        transform: translate3d(0, 6px, 0);
+        transform: translate3d(0, 4px, 0);
       }
 
 .hamburger-menu svg.open > g:nth-of-type(2) {
@@ -1422,7 +1429,7 @@ nav .search-wrapper {
 }
 
 .hamburger-menu svg.open > g:nth-of-type(2) path {
-        transform: translate3d(0, -6px, 0);
+        transform: translate3d(0, -4px, 0);
       }
 
 /* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
@@ -1909,40 +1916,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1976,6 +1949,11 @@ video {
   right: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -2095,10 +2073,18 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2155,6 +2141,10 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
@@ -2163,10 +2153,6 @@ video {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -2195,6 +2181,10 @@ video {
   height: 100%;
 }
 
+.max-h-64 {
+  max-height: 16rem;
+}
+
 .max-h-\[calc\(100vh-4rem-env\(safe-area-inset-bottom\)\)\] {
   max-height: calc(100vh - 4rem - env(safe-area-inset-bottom));
 }
@@ -2279,10 +2269,6 @@ video {
   flex-grow: 1;
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .cursor-default {
   cursor: default;
 }
@@ -2337,6 +2323,14 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -2473,11 +2467,6 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
 .bg-orange-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
@@ -2603,6 +2592,10 @@ video {
   padding-bottom: 1px;
 }
 
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -2667,10 +2660,6 @@ video {
   font-size: 1rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-}
-
 .text-sm {
   font-size: .875rem;
 }
@@ -2753,6 +2742,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2829,6 +2823,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2846,6 +2846,16 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.ring-1 {
+  --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(1px + 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);
+}
+
+.ring-black\/5 {
+  --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2945,16 +2955,6 @@ body {
   bottom: 0.25rem;
 }
 
-.before\:mr-1::before {
-  content: var(--tw-content);
-  margin-right: 0.25rem;
-}
-
-.before\:inline-block::before {
-  content: var(--tw-content);
-  display: inline-block;
-}
-
 .before\:w-px::before {
   content: var(--tw-content);
   width: 1px;
@@ -2971,25 +2971,13 @@ body {
   opacity: 0.25;
 }
 
-.before\:transition-transform::before {
-  content: var(--tw-content);
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.before\:content-\[\"\"\]::before {
-  --tw-content: "";
-  content: var(--tw-content);
-}
-
 .before\:content-\[\'\#\'\]::before {
   --tw-content: '#';
   content: var(--tw-content);
 }
 
-.before\:content-\[\'\'\]::before {
+.before\:content-\[\\\"\\\"\]::before {
-  --tw-content: '';
+  --tw-content: \"\";
   content: var(--tw-content);
 }
 
@@ -2997,10 +2985,6 @@ body {
   margin-top: 0px;
 }
 
-.last-of-type\:mb-0:last-of-type {
-  margin-bottom: 0px;
-}
-
 .hover\:border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -3016,6 +3000,11 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -3041,6 +3030,10 @@ body {
   color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
 }
 
+.hover\:opacity-60:hover {
+  opacity: 0.6;
+}
+
 .hover\:opacity-75:hover {
   opacity: 0.75;
 }
@@ -3096,6 +3089,14 @@ body {
   display: block;
 }
 
+.data-\[state\=closed\]\:hidden[data-state=closed] {
+  display: none;
+}
+
+.data-\[state\=open\]\:hidden[data-state=open] {
+  display: none;
+}
+
 .data-\[state\=selected\]\:border-primary-500[data-state=selected] {
   --tw-border-opacity: 1;
   border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
@@ -3122,6 +3123,10 @@ body {
   right: 0.375rem;
 }
 
+:is([dir="ltr"] .ltr\:right-3) {
+  right: 0.75rem;
+}
+
 :is([dir="ltr"] .ltr\:-mr-4) {
   margin-right: -1rem;
 }
@@ -3143,6 +3148,14 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+:is([dir="ltr"] .ltr\:pl-12) {
+  padding-left: 3rem;
+}
+
+:is([dir="ltr"] .ltr\:pl-16) {
+  padding-left: 4rem;
+}
+
 :is([dir="ltr"] .ltr\:pl-3) {
   padding-left: 0.75rem;
 }
@@ -3151,6 +3164,10 @@ body {
   padding-left: 1rem;
 }
 
+:is([dir="ltr"] .ltr\:pl-8) {
+  padding-left: 2rem;
+}
+
 :is([dir="ltr"] .ltr\:pr-0) {
   padding-right: 0px;
 }
@@ -3163,6 +3180,10 @@ body {
   padding-right: 1rem;
 }
 
+:is([dir="ltr"] .ltr\:pr-9) {
+  padding-right: 2.25rem;
+}
+
 :is([dir="ltr"] .ltr\:text-right) {
   text-align: right;
 }
@@ -3180,6 +3201,10 @@ body {
   left: 0.375rem;
 }
 
+:is([dir="rtl"] .rtl\:left-3) {
+  left: 0.75rem;
+}
+
 :is([dir="rtl"] .rtl\:-ml-4) {
   margin-left: -1rem;
 }
@@ -3204,6 +3229,18 @@ body {
   padding-left: 1rem;
 }
 
+:is([dir="rtl"] .rtl\:pl-9) {
+  padding-left: 2.25rem;
+}
+
+:is([dir="rtl"] .rtl\:pr-12) {
+  padding-right: 3rem;
+}
+
+:is([dir="rtl"] .rtl\:pr-16) {
+  padding-right: 4rem;
+}
+
 :is([dir="rtl"] .rtl\:pr-3) {
   padding-right: 0.75rem;
 }
@@ -3212,6 +3249,10 @@ body {
   padding-right: 1rem;
 }
 
+:is([dir="rtl"] .rtl\:pr-8) {
+  padding-right: 2rem;
+}
+
 :is([dir="rtl"] .rtl\:text-left) {
   text-align: left;
 }
@@ -3221,12 +3262,6 @@ body {
   right: 0px;
 }
 
-:is([dir="rtl"] .rtl\:before\:rotate-180)::before {
-  content: var(--tw-content);
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 @media (prefers-contrast: more) {
   .contrast-more\:border {
     border-width: 1px;
@@ -3443,6 +3478,10 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+:is(html[class~="dark"] .dark\:ring-white\/20) {
+  --tw-ring-color: rgb(255 255 255 / 0.2);
+}
+
 :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3454,12 +3493,6 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
-:is(html[class~="dark"] .dark\:before\:invert)::before {
-  content: var(--tw-content);
-  --tw-invert: invert(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -3470,11 +3503,6 @@ body {
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
 }
 
-:is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
 :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
@@ -3484,6 +3512,10 @@ body {
   background-color: hsl(var(--primary-hue) 100% 94% / 0.05);
 }
 
+:is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
+  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+}
+
 :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -3514,6 +3546,11 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+:is(html[class~="dark"] .hover\:dark\:text-primary-600):hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3664,21 +3701,8 @@ body {
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
 @media (min-width: 1280px) {
   .xl\:block {
     display: block;
   }
 }
-
-[data-expanded]>.\[\[data-expanded\]\>\&\]\:before\:rotate-90::before {
-  content: var(--tw-content);
-  --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}

exampleSite/content/docs/_index.md

@@ -3,7 +3,21 @@ linkTitle: "Documentation"
 title: Introduction
 ---
 
-**Hextra** is a modern, responsive, and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/).
+Welcome to the Hextra documentation!
-It is inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).
 
-Hextra is designed for building websites for documentation, blogs, and landing pages. It is elegant and easy to use out of the box, but also highly customizable to fit your needs.
+
+## What is Hextra?
+
+**Hextra** is a modern, responsive and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/), inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).
+It is designed for building websites for documentation, blogs, books and landing pages.
+It is elegant and easy to use out of the box, but also highly customizable to fit your needs.
+
+### Features
+
+- **Fast** - Built with Hugo and Tailwind CSS, Hextra is extremely fast.
+
+## Why Hextra?
+
+Hextra is based on [Hugo](https://gohugo.io/), a static site generator written in Go, which means you can build your website once and host it anywhere.
+
+Unlike Next.js, Hugo is **extremely fast**, which enables us to focus on iterating the content and previewing the changes in real time.

exampleSite/content/docs/getting-started.md

@@ -0,0 +1,48 @@
+---
+title: Getting Started
+weight: 1
+---
+
+## Start as New Project
+
+Before we start, make sure we have [Hugo](https://gohugo.io/) installed. We also need to have Git and Go installed if we want to use Hugo modules.
+Please refer to Hugo's [official installation guide](https://gohugo.io/installation/) for more details.
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```bash
+$ hugo new site my-site --format=yaml
+```
+
+### Configure Hextra theme
+
+[Hugo modules](https://gohugo.io/hugo-modules/) are the recommended way to manage Hugo themes.
+
+```shell
+# initialize hugo module
+$ cd my-site
+$ hugo mod init github.com/username/my-site
+
+# add Hextra theme
+$ hugo mod get github.com/imfing/hextra
+```
+
+Edit `config.yaml` to enable Hextra theme:
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### Run Hugo server
+
+```shell
+$ hugo server -D
+```
+
+Voila! You can see your new site at `http://localhost:1313/`.
+
+{{% /steps %}}

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

@@ -1,5 +0,0 @@
----
-title: Advanced
----
-
-Advanced topics.

exampleSite/content/docs/introduction.md

@@ -1,6 +0,0 @@
----
-title: Introduction
-weight: 1
----
-
-Hextra is a modern, responsive Hugo theme built with [Tailwind CSS](https://tailwindcss.com/).

i18n/en.yaml

@@ -1,3 +1,6 @@
 article:
   on_this_page: "On this page"
   edit_this_page: "Edit this page on GitHub →"
+
+footer:
+  copyright: "© 2023 Hextra Project."

taskfile.yaml

@@ -3,7 +3,7 @@ version: "3"
 tasks:
   dev:
     cmds:
-      - hugo server --debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
+      - hugo server --logLevel debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
 
   build:
     deps: [css]
@@ -17,3 +17,11 @@ tasks:
   clean:
     cmds:
       - rm -rf public resources
+
+  vendor:
+    cmds:
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js -O assets/vendor/katex/katex.min.js
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js -O assets/vendor/katex/auto-render.min.js
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css -O assets/vendor/katex/katex.min.css
+      - wget https://cdn.jsdelivr.net/npm/mermaid@10.3.1/dist/mermaid.min.js -O assets/vendor/mermaid/mermaid.min.js
+      - wget https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.min.js -O assets/vendor/flexsearch/flexsearch.bundle.min.js