feat: implement common components

feat: implement sidebar

feat: implement footer

feat: implement breadcrumb

chore: add typography styles

chore: add heading anchor link

chore: add postcss-nested

layouts/partials/breadcrumb.html

@@ -0,0 +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 }}
+    {{ if not .IsHome }}
+      <div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
+        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      </div>
+      {{ partial "utils/icon.html" (dict "context" . "name" "breadcrumb-delimiter" "attributes" "class=\"w-3.5 shrink-0\"") }}
+    {{ 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>
+</div>

layouts/partials/footer.html

@@ -0,0 +1,14 @@
+<footer class="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
+  <hr class="dark:border-neutral-800" />
+  <div class="mx-auto flex max-w-[90rem] 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">
+      <div>
+        <a class="flex items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hugo homepage" href="https://gohugo.io/">
+          <span>Powered by</span>
+          {{ partial "utils/icon.html" (dict "context" . "name" "hugo-full" "attributes" "height=20") }}
+        </a>
+      </div>
+      <p class="mt-6 text-xs">© 2023 Hextra Project.</p>
+    </div>
+  </div>
+</footer>

layouts/partials/sidebar.html

@@ -0,0 +1,49 @@
+<aside class="flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
+  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem)]">
+    <ul class="flex flex-col gap-1 max-md:hidden">
+      {{ $s := .FirstSection }}
+      {{ $topLevelItems := union $s.RegularPages $s.Sections }}
+      {{ $currentUrl := .RelPermalink }}
+
+      {{ range $topLevelItems.ByWeight }}
+        {{ $isCurrent := eq $currentUrl .RelPermalink }}
+        <li class="open">
+          {{ if $isCurrent }}
+            <a
+              class="flex cursor-pointer items-center justify-between gap-2 rounded bg-primary-100 px-2 py-1.5 text-sm font-semibold text-primary-800 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500"
+              href="{{ .RelPermalink }}"
+              >{{ .LinkTitle }}</a
+            >
+          {{ else }}
+            <a
+              class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-sm text-gray-500 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] 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"
+              href="{{ .RelPermalink }}"
+              >{{ .LinkTitle }}
+            </a>
+          {{ end }}
+        </li>
+        <div class="pt-1 ltr:pr-0">
+          <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'>
+            {{ $secondLevelItems := union .RegularPages .Sections }}
+            {{ range $secondLevelItems.ByWeight }}
+              {{ $isCurrent := eq $currentUrl .RelPermalink }}
+              <li class="flex flex-col gap-1">
+                <a
+                  class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
+                  {{ if eq $currentUrl .RelPermalink }}
+                    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
+                  {{ 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
+                  {{ end }}"
+                  href="{{ .RelPermalink }}"
+                >
+                  {{ .LinkTitle }}
+                </a>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+      {{ end }}
+    </ul>
+  </div>
+</aside>