clean up toc

Author: ArthurFlag

assets/css/style.css

@@ -43,16 +43,3 @@
 @import "components.css";
 
 @variant dark (&:where(.dark, .dark *));
-
-#TableOfContents {
-  .toc a {
-    @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
-    &[aria-current="true"],
-    &:hover {
-      @apply border-l-2 border-x-gray-200 bg-gradient-to-r from-gray-100 font-medium text-black dark:border-l-gray-300 dark:from-gray-200 dark:text-white;
-    }
-    &:not([aria-current="true"]) {
-      @apply text-gray-600 hover:text-black dark:text-gray-700 dark:hover:text-white;
-    }
-  }
-}

assets/css/utilities.css

@@ -227,3 +227,16 @@
 @utility sub-button {
   @apply flex w-full items-start gap-2 rounded-sm px-2 py-2 text-left text-gray-700 transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800;
 }
+
+@utility toc {
+  a {
+    @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
+    &[aria-current="true"],
+    &:hover {
+      @apply border-l-2 border-x-gray-200 bg-gradient-to-r from-gray-50 font-medium text-black dark:border-l-gray-300 dark:from-gray-900 dark:text-white;
+    }
+    &:not([aria-current="true"]) {
+      @apply text-gray-600 hover:text-black dark:text-gray-700 dark:hover:text-white;
+    }
+  }
+}

hugo_stats.json

@@ -133,6 +133,8 @@
       "Without-systemd",
       "[display:none]",
       "absolute",
+      "active",
+      "active-toc",
       "admonition",
       "admonition-content",
       "admonition-danger",
@@ -544,6 +546,7 @@
       "svg-container",
       "syntax-light",
       "systemd-networkd",
+      "tableOfContents",
       "text-2xl",
       "text-base",
       "text-black",

layouts/partials/pagemeta.html

@@ -4,18 +4,21 @@
   - Limits heading levels to a min and max range (`$min` and `$max`).
   - Wraps the ToC in a `data-pagefind-ignore` container to exclude it from search indexing.
   - Includes a recursive template (`walkHeadingFragments`) to handle nested headings.
-*/ -}}
+  */
+-}}
 {{- $toc := false }}
 {{- with .Fragments }}
   {{- $toc = and (ne page.Params.notoc true) .Headings }}
 {{- end }}
 {{- with $toc }}
   <div data-pagefind-ignore class="not-prose">
-  <div class="text-lg pb-0 lg:pb-2">{{ T "tableOfContents" }}</div>
-  <nav class="toc">
-    {{ $root := (index page.Fragments.Headings 0).Headings }}
-    {{- template "walkHeadingFragments" $root }}
-  </nav>
+    <div class="pb-0 text-lg lg:pb-2">
+      {{ T "tableOfContents" }}
+    </div>
+    <nav class="toc">
+      {{ $root := (index page.Fragments.Headings 0).Headings }}
+      {{- template "walkHeadingFragments" $root }}
+    </nav>
   </div>
 {{- end }}
 
@@ -26,7 +29,9 @@
     {{- range . }}
       {{- if and (ge .Level $min) (le .Level $max) }}
         <li>
-          <a class="link lg:no-underline" href="#{{ .ID }}">{{ markdownify .Title }}</a>
+          <a class="link lg:no-underline" href="#{{ .ID }}"
+            >{{ markdownify .Title }}</a
+          >
         </li>
       {{- end }}
       {{- with .Headings }}