website: redesign part 13

website_next/learn/contents/index.js

@@ -1,19 +1,23 @@
-import { createId } from "../../utils/id.js";
+import { createPathId } from "../path.js";
 
-/** @param {Section} section */
-function createContentsItem(section) {
+/**
+ * @param {Section} section
+ * @param {readonly string[]} path
+ */
+function createContentsItem(section, path) {
   const item = document.createElement("li");
   const anchor = document.createElement("a");
   const children = section.children ?? [];
+  const sectionPath = [...path, section.title];
 
-  anchor.href = `#${createId(section.title)}`;
+  anchor.href = `#${createPathId(sectionPath)}`;
   anchor.append(section.title);
 
   if (children.length) {
     const list = document.createElement("ol");
 
     for (const child of children) {
-      list.append(createContentsItem(child));
+      list.append(createContentsItem(child, sectionPath));
     }
     item.append(list);
   }
@@ -30,7 +34,7 @@ export function createContents(sections) {
   nav.setAttribute("aria-label", "Learn contents");
 
   for (const section of sections) {
-    list.append(createContentsItem(section));
+    list.append(createContentsItem(section, []));
   }
 
   nav.append(list);

website_next/learn/contents/style.css

@@ -1,9 +1,11 @@
 main.learn {
   > nav {
+    --nav-offset: calc(var(--offset) + 2rem);
+
     counter-reset: content-theme;
     position: sticky;
     top: 0;
-    padding-block: var(--offset);
+    padding-block: var(--nav-offset) var(--offset);
     max-height: 100dvh;
     overflow: auto;
     scrollbar-width: thin;
@@ -24,16 +26,21 @@ main.learn {
       counter-reset: content-topic;
     }
 
+    > ol > li > ol > li {
+      counter-increment: content-topic;
+      counter-reset: content-detail;
+    }
+
+    > ol > li > ol > li > ol > li {
+      counter-increment: content-detail;
+    }
+
     ol ol {
       margin-top: 0.25rem;
       margin-left: 1rem;
       color: var(--gray);
     }
 
-    ol ol > li {
-      counter-increment: content-topic;
-    }
-
     li + li {
       margin-top: 0.25rem;
     }
@@ -76,8 +83,12 @@ main.learn {
       content: counter(content-theme, upper-roman) ". ";
     }
 
-    ol ol > li > a::before {
+    > ol > li > ol > li > a::before {
       content: counter(content-topic) ". ";
     }
+
+    > ol > li > ol > li > ol > li > a::before {
+      content: counter(content-detail, lower-alpha) ". ";
+    }
   }
 }