Add more Walkthrough sections, index subsection redesign

Author: rojvv

_config.ts

@@ -440,10 +440,11 @@ bun create ${pkg}
 `;
 }, { type: "filter" });
 
-site.helper("i", (page) => {
-  const content = site.pages.find((v) => v.src.path === page)?.data.content;
+site.helper("i", (path) => {
+  const page = site.pages.find((v) => v.src.path === path);
+  const content = page?.data.content;
   if (typeof content !== "string") {
-    return "no for " + page;
+    return "no for " + path;
   }
   const links = new Array<[string, string]>();
   for (let line of content.split("\n")) {
@@ -452,10 +453,20 @@ site.helper("i", (page) => {
     }
     line = line.slice(3).trim();
     const title = line;
-    const link = page + "#" + toAnchor(line);
+    const link = path + "#" + toAnchor(line);
     links.push([title, link]);
   }
-  return "\n" + links.map((v) => `    - [${v[0]}](${v[1]})`).join("\n");
+  if (!links.length) {
+    return "";
+  }
+  const title = page.data.title ?? path;
+  const items = links.map(([heading, link], index) => `        <li style="--subsection-delay: ${index * 28}ms"><a href="${escapeHtml(link)}">${escapeHtml(heading)}</a></li>`).join("\n");
+  return `
+    <div class="index-subsections">
+      <ul aria-label="Sections in ${escapeHtml(title)}">
+${items}
+      </ul>
+    </div>`;
 }, { type: "filter" });
 
 site.helper("walkthrough", (track: string) => {
@@ -473,13 +484,13 @@ site.helper("walkthrough", (track: string) => {
     const headings = getH2Links(page);
     const audiences = getWalkthroughData(page)?.sections ?? {};
     const sections = headings.length
-      ? `\n    <ul aria-label="Sections in ${escapeHtml(title)}">\n${
-        headings.map(([heading, link, id]) => {
+      ? `\n    <div class="index-subsections">\n      <ul aria-label="Sections in ${escapeHtml(title)}">\n${
+        headings.map(([heading, link, id], index) => {
           const audience = audiences[id];
           const badge = audience ? `<span class="inline-flex w-fit items-center" style="font-size:12px;white-space:nowrap;word-break:keep-all;"><span class="w-fit bg-dbt select-none text-fgt" style="padding:2px 8px;border-radius:12px;">${audience.toUpperCase()}-ONLY</span></span>` : "";
-          return `      <li><a href="${escapeHtml(link)}">${escapeHtml(heading)}</a>${badge}</li>`;
+          return `        <li style="--subsection-delay: ${index * 28}ms"><a href="${escapeHtml(link)}">${escapeHtml(heading)}</a>${badge}</li>`;
         }).join("\n")
-      }\n    </ul>`
+      }\n      </ul>\n    </div>`
       : "";
     return `  <li><a href="${escapeHtml(page.src.path)}">${escapeHtml(title)}</a>${sections}\n  </li>`;
   });

src/_includes/style/walkthrough.scss

@@ -23,21 +23,142 @@ ol.walkthrough-list {
       font-weight: 400;
       font-variant-numeric: tabular-nums;
     }
+  }
 
-    + li {
-      margin-top: 0.6rem;
-    }
+  > li > .index-subsections > ul > li > .inline-flex {
+    margin-left: 0.4rem;
+  }
+}
+
+.index-subsections > ul {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0 !important;
+  padding: 0 0 0 1.2rem !important;
+  color: var(--fgt);
+
+  > li:first-child {
+    margin-top: 0.2rem;
   }
 
-  > li > ul {
+  > li:last-child {
+    margin-bottom: 0.35rem;
+  }
+}
+
+.index-subsection-toggle {
+  display: inline-grid;
+  width: 1.2rem;
+  height: 1.75rem;
+  place-items: center;
+  border-radius: 0.4rem;
+  color: var(--kr);
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.55;
+  transition: opacity 180ms ease, background-color 180ms ease;
+  vertical-align: middle;
+
+  &:hover {
+    background-color: var(--dbt);
+    opacity: 0.9;
+  }
+
+  &[aria-hidden="true"] {
+    pointer-events: none;
+  }
+
+  > svg {
+    display: block;
+    width: 0.72rem;
+    height: 0.72rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.75;
+    transform-box: fill-box;
+    transform-origin: center;
+    transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}
+
+.index-subsections-enhanced {
+  .index-subsections {
     display: grid;
-    gap: 0.15rem;
-    margin: 0.2rem 0 0.35rem !important;
-    padding-left: 1.2rem !important;
-    color: var(--fgt);
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transform: translateY(-0.35rem) scale(0.985);
+    transform-origin: top left;
+    transition:
+      grid-template-rows 480ms cubic-bezier(0.16, 1, 0.3, 1),
+      opacity 160ms ease,
+      transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
+
+    > ul {
+      min-height: 0;
+      overflow: hidden;
+
+      > li {
+        opacity: 0;
+        transform: translate3d(-0.55rem, -0.15rem, 0);
+        transition:
+          opacity 180ms ease,
+          transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+    }
   }
 
-  > li > ul > li > .inline-flex {
-    margin-left: 0.4rem;
+  .index-item-collapsible.is-open {
+    > .index-subsections {
+      grid-template-rows: 1fr;
+      opacity: 1;
+      transform: none;
+
+      > ul > li {
+        opacity: 1;
+        transform: none;
+        transition-delay: calc(55ms + var(--subsection-delay, 0ms));
+      }
+    }
+
+    .index-subsection-toggle {
+      opacity: 0.9;
+
+      > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .index-subsections-enhanced .index-item-collapsible:is(:hover, :focus-within) {
+    > .index-subsections {
+      grid-template-rows: 1fr;
+      opacity: 1;
+      transform: none;
+
+      > ul > li {
+        opacity: 1;
+        transform: none;
+        transition-delay: calc(55ms + var(--subsection-delay, 0ms));
+      }
+    }
+
+    .index-subsection-toggle {
+      opacity: 0.9;
+
+      > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .index-subsections > ul > li {
+    transition-delay: 0ms !important;
   }
 }

src/chat-recommendations.md

@@ -0,0 +1,37 @@
+---
+title: Chat Recommendations
+parent: /#walkthrough
+walkthrough:
+  track: user
+  order: 15
+---
+
+User clients can get recommended channels and find similar channels or bots.
+
+## Getting Recommended Channels
+
+Use {{ "getRecommendedChannels" |> m }} to get recommended channels as {{ "ChatPChannel" |> t }} objects.
+
+```ts
+const channels = await client.getRecommendedChannels();
+
+for (const channel of channels) {
+  console.log(channel.id, channel.title);
+}
+```
+
+## Getting Similar Channels
+
+Use {{ "getSimilarChannels" |> m }} with a channel's identifier.
+
+```ts
+const channels = await client.getSimilarChannels(channelId);
+```
+
+## Getting Similar Bots
+
+Use {{ "getSimilarBots" |> m }} with a bot's identifier.
+
+```ts
+const bots = await client.getSimilarBots(botId);
+```

src/saved-messages.md

@@ -0,0 +1,29 @@
+---
+title: Saved Messages
+parent: /#walkthrough
+walkthrough:
+  track: user
+  order: 16
+---
+
+User clients can list chats with saved messages and get the messages saved from each chat.
+
+## Listing Saved Chats
+
+Use {{ "getSavedChats" |> m }} to get a {{ "SavedChats" |> t }} object.
+
+```ts
+const { chats } = await client.getSavedChats();
+
+for (const { chat } of chats) {
+  console.log(chat.id, chat.type);
+}
+```
+
+## Getting Saved Messages
+
+Use {{ "getSavedMessages" |> m }} with a chat's identifier.
+
+```ts
+const messages = await client.getSavedMessages(chatId);
+```

src/static/script.js

@@ -21,6 +21,68 @@ document.querySelectorAll(".code-group-button").forEach((button) => {
   });
 });
 
+function initIndexSubsections() {
+  const panels = Array.from(document.querySelectorAll(".index-subsections"));
+  const content = panels[0]?.closest(".content");
+  if (!panels.length || !content) return;
+
+  const hoverQuery = globalThis.matchMedia("(hover: hover) and (pointer: fine)");
+  const entries = panels.map((panel, index) => {
+    const item = panel.parentElement;
+    const list = panel.querySelector(":scope > ul");
+    const link = item?.querySelector(":scope > a, :scope > p > a");
+    if (!item || !list || !link) return null;
+
+    const title = list.getAttribute("aria-label")?.replace(/^Sections in /, "") || link.textContent.trim();
+    const button = document.createElement("button");
+    const panelId = `index-subsections-${index + 1}`;
+
+    panel.id = panelId;
+    item.classList.add("index-item-collapsible");
+    button.type = "button";
+    button.className = "index-subsection-toggle";
+    button.setAttribute("aria-controls", panelId);
+    button.innerHTML = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 5.5l5 5 5-5" /></svg>';
+    link.after(button);
+
+    const entry = { button, item, panel, title };
+    button.addEventListener("click", () => {
+      if (!hoverQuery.matches) setOpen(entry, !item.classList.contains("is-open"));
+    });
+    return entry;
+  }).filter(Boolean);
+
+  function setOpen(entry, open) {
+    entry.item.classList.toggle("is-open", open);
+    entry.panel.inert = !open;
+    entry.panel.setAttribute("aria-hidden", String(!open));
+    entry.button.setAttribute("aria-expanded", String(open));
+    entry.button.setAttribute("aria-label", `${open ? "Hide" : "Show"} sections in ${entry.title}`);
+  }
+
+  function syncInputMode() {
+    for (const entry of entries) {
+      entry.item.classList.remove("is-open");
+      if (hoverQuery.matches) {
+        entry.panel.inert = false;
+        entry.panel.removeAttribute("aria-hidden");
+        entry.button.tabIndex = -1;
+        entry.button.setAttribute("aria-hidden", "true");
+        entry.button.removeAttribute("aria-expanded");
+        entry.button.removeAttribute("aria-label");
+      } else {
+        entry.button.tabIndex = 0;
+        entry.button.removeAttribute("aria-hidden");
+        setOpen(entry, false);
+      }
+    }
+  }
+
+  syncInputMode();
+  content.classList.add("index-subsections-enhanced");
+  hoverQuery.addEventListener("change", syncInputMode);
+}
+
 function initToc() {
   const toc = document.querySelector(".toc");
   const viewport = toc?.querySelector(".toc-list-wrap");
@@ -376,4 +438,5 @@ function initToc() {
   if (!activateHashEntry()) updateActive();
 }
 
+initIndexSubsections();
 initToc();