@tenphi/renderer 0.19.0 → 0.19.2

package/dist/client/table-of-contents.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/client/table-of-contents.js

@@ -0,0 +1,59 @@
+//#region src/client/table-of-contents.ts
+var CookbookTableOfContents = class extends HTMLElement {
+	#entries = [];
+	#active;
+	#listeners;
+	#frame = 0;
+	connectedCallback() {
+		this.#listeners?.abort();
+		this.#listeners = new AbortController();
+		this.#entries = Array.from(this.querySelectorAll("nav a[href^=\"#\"]")).flatMap((link) => {
+			const heading = document.getElementById(decodeURIComponent(link.hash.slice(1)));
+			return heading ? [{
+				link,
+				heading
+			}] : [];
+		});
+		if (this.#entries.length === 0) return;
+		const options = { signal: this.#listeners.signal };
+		window.addEventListener("scroll", this.#schedule, {
+			...options,
+			passive: true
+		});
+		window.addEventListener("resize", this.#schedule, options);
+		window.addEventListener("hashchange", this.#schedule, options);
+		this.#schedule();
+	}
+	disconnectedCallback() {
+		this.#listeners?.abort();
+		cancelAnimationFrame(this.#frame);
+	}
+	#schedule = () => {
+		if (!this.#frame) this.#frame = requestAnimationFrame(this.#sync);
+	};
+	#sync = () => {
+		this.#frame = 0;
+		const marker = (document.querySelector(".header")?.getBoundingClientRect().bottom ?? 0) + 24;
+		let current = this.#entries[0];
+		for (const entry of this.#entries) {
+			if (entry.heading.getBoundingClientRect().top > marker + 2) break;
+			current = entry;
+		}
+		if (window.scrollY > 0 && window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2) current = this.#entries.at(-1);
+		if (!current || current.link === this.#active) return;
+		this.#active?.removeAttribute("aria-current");
+		current.link.setAttribute("aria-current", "location");
+		this.#active = current.link;
+		const sidebar = this.closest(".right-sidebar");
+		if (!sidebar || sidebar.getClientRects().length === 0) return;
+		const sidebarRect = sidebar.getBoundingClientRect();
+		const linkRect = current.link.getBoundingClientRect();
+		if (linkRect.top < sidebarRect.top + 16) sidebar.scrollTop += linkRect.top - sidebarRect.top - 16;
+		else if (linkRect.bottom > sidebarRect.bottom - 16) sidebar.scrollTop += linkRect.bottom - sidebarRect.bottom + 16;
+	};
+};
+if (!customElements.get("cookbook-table-of-contents")) customElements.define("cookbook-table-of-contents", CookbookTableOfContents);
+//#endregion
+export {};
+
+//# sourceMappingURL=table-of-contents.js.map

package/dist/client/table-of-contents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents.js","names":[],"sources":["../../src/client/table-of-contents.ts"],"sourcesContent":["class CookbookTableOfContents extends HTMLElement {\n  #entries: Array<{ link: HTMLAnchorElement; heading: HTMLElement }> = [];\n  #active?: HTMLAnchorElement;\n  #listeners?: AbortController;\n  #frame = 0;\n\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    this.#entries = Array.from(\n      this.querySelectorAll<HTMLAnchorElement>('nav a[href^=\"#\"]'),\n    ).flatMap((link) => {\n      const heading = document.getElementById(\n        decodeURIComponent(link.hash.slice(1)),\n      );\n      return heading ? [{ link, heading }] : [];\n    });\n    if (this.#entries.length === 0) return;\n\n    const options = { signal: this.#listeners.signal };\n    window.addEventListener(\"scroll\", this.#schedule, {\n      ...options,\n      passive: true,\n    });\n    window.addEventListener(\"resize\", this.#schedule, options);\n    window.addEventListener(\"hashchange\", this.#schedule, options);\n    this.#schedule();\n  }\n\n  disconnectedCallback() {\n    this.#listeners?.abort();\n    cancelAnimationFrame(this.#frame);\n  }\n\n  #schedule = () => {\n    if (!this.#frame) this.#frame = requestAnimationFrame(this.#sync);\n  };\n\n  #sync = () => {\n    this.#frame = 0;\n    const header = document.querySelector<HTMLElement>(\".header\");\n    const marker = (header?.getBoundingClientRect().bottom ?? 0) + 24;\n    let current = this.#entries[0];\n    for (const entry of this.#entries) {\n      if (entry.heading.getBoundingClientRect().top > marker + 2) break;\n      current = entry;\n    }\n    if (\n      window.scrollY > 0 &&\n      window.scrollY + window.innerHeight >=\n        document.documentElement.scrollHeight - 2\n    )\n      current = this.#entries.at(-1);\n    if (!current || current.link === this.#active) return;\n\n    this.#active?.removeAttribute(\"aria-current\");\n    current.link.setAttribute(\"aria-current\", \"location\");\n    this.#active = current.link;\n\n    const sidebar = this.closest<HTMLElement>(\".right-sidebar\");\n    if (!sidebar || sidebar.getClientRects().length === 0) return;\n    const sidebarRect = sidebar.getBoundingClientRect();\n    const linkRect = current.link.getBoundingClientRect();\n    if (linkRect.top < sidebarRect.top + 16)\n      sidebar.scrollTop += linkRect.top - sidebarRect.top - 16;\n    else if (linkRect.bottom > sidebarRect.bottom - 16)\n      sidebar.scrollTop += linkRect.bottom - sidebarRect.bottom + 16;\n  };\n}\n\nif (!customElements.get(\"cookbook-table-of-contents\"))\n  customElements.define(\"cookbook-table-of-contents\", CookbookTableOfContents);\n"],"mappings":";AAAA,IAAM,0BAAN,cAAsC,YAAY;CAChD,WAAqE,CAAC;CACtE;CACA;CACA,SAAS;CAET,oBAAoB;EAClB,KAAK,YAAY,MAAM;EACvB,KAAK,aAAa,IAAI,gBAAgB;EACtC,KAAK,WAAW,MAAM,KACpB,KAAK,iBAAoC,oBAAkB,CAC7D,CAAC,CAAC,SAAS,SAAS;GAClB,MAAM,UAAU,SAAS,eACvB,mBAAmB,KAAK,KAAK,MAAM,CAAC,CAAC,CACvC;GACA,OAAO,UAAU,CAAC;IAAE;IAAM;GAAQ,CAAC,IAAI,CAAC;EAC1C,CAAC;EACD,IAAI,KAAK,SAAS,WAAW,GAAG;EAEhC,MAAM,UAAU,EAAE,QAAQ,KAAK,WAAW,OAAO;EACjD,OAAO,iBAAiB,UAAU,KAAK,WAAW;GAChD,GAAG;GACH,SAAS;EACX,CAAC;EACD,OAAO,iBAAiB,UAAU,KAAK,WAAW,OAAO;EACzD,OAAO,iBAAiB,cAAc,KAAK,WAAW,OAAO;EAC7D,KAAK,UAAU;CACjB;CAEA,uBAAuB;EACrB,KAAK,YAAY,MAAM;EACvB,qBAAqB,KAAK,MAAM;CAClC;CAEA,kBAAkB;EAChB,IAAI,CAAC,KAAK,QAAQ,KAAK,SAAS,sBAAsB,KAAK,KAAK;CAClE;CAEA,cAAc;EACZ,KAAK,SAAS;EAEd,MAAM,UADS,SAAS,cAA2B,SAC9B,CAAC,EAAE,sBAAsB,CAAC,CAAC,UAAU,KAAK;EAC/D,IAAI,UAAU,KAAK,SAAS;EAC5B,KAAK,MAAM,SAAS,KAAK,UAAU;GACjC,IAAI,MAAM,QAAQ,sBAAsB,CAAC,CAAC,MAAM,SAAS,GAAG;GAC5D,UAAU;EACZ;EACA,IACE,OAAO,UAAU,KACjB,OAAO,UAAU,OAAO,eACtB,SAAS,gBAAgB,eAAe,GAE1C,UAAU,KAAK,SAAS,GAAG,EAAE;EAC/B,IAAI,CAAC,WAAW,QAAQ,SAAS,KAAK,SAAS;EAE/C,KAAK,SAAS,gBAAgB,cAAc;EAC5C,QAAQ,KAAK,aAAa,gBAAgB,UAAU;EACpD,KAAK,UAAU,QAAQ;EAEvB,MAAM,UAAU,KAAK,QAAqB,gBAAgB;EAC1D,IAAI,CAAC,WAAW,QAAQ,eAAe,CAAC,CAAC,WAAW,GAAG;EACvD,MAAM,cAAc,QAAQ,sBAAsB;EAClD,MAAM,WAAW,QAAQ,KAAK,sBAAsB;EACpD,IAAI,SAAS,MAAM,YAAY,MAAM,IACnC,QAAQ,aAAa,SAAS,MAAM,YAAY,MAAM;OACnD,IAAI,SAAS,SAAS,YAAY,SAAS,IAC9C,QAAQ,aAAa,SAAS,SAAS,YAAY,SAAS;CAChE;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,4BAA4B,GAClD,eAAe,OAAO,8BAA8B,uBAAuB"}

package/dist/components/GlobalStyles.js

@@ -781,7 +781,11 @@ export default function GlobalStyles() {
         whiteSpace: "nowrap",
       },
       HoverLink: { $: "a:hover", color: "#text" },
-      CurrentLink: { $: 'a[aria-current="true"]', color: "#accent-text" },
+      CurrentLink: {
+        $: 'a[aria-current="location"]',
+        color: "#accent-text",
+        preset: "small / strong",
+      },
     }),
   );
 
@@ -1277,10 +1281,13 @@ export default function GlobalStyles() {
         fill: "#surface-2-hover",
       },
       LinkIcon: {
-        $: "> .cookbook-anchor-link .cookbook-anchor-icon, > .cookbook-anchor-link svg",
+        $: "> .cookbook-anchor-link > .cookbook-anchor-icon",
         display: "block",
-        inlineSize: "clamp(1rem, 0.65em, 1.5rem)",
-        blockSize: "clamp(1rem, 0.65em, 1.5rem)",
+        fontSize: "clamp(1rem, 0.65em, 1.5rem)",
+        lineHeight: "1",
+        textAlign: "center",
+        inlineSize: "1em",
+        blockSize: "1em",
       },
       CopiedLink: {
         $: '> .cookbook-anchor-link[data-copy-state="copied"]',

package/dist/routes/Page.astro

@@ -58,14 +58,14 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
             <aside class="right-sidebar-container cookbook-print-hidden">
               <div class="right-sidebar">
                 <MobileTableOfContents />
-                <div class="right-sidebar-panel">
+                <cookbook-table-of-contents class="right-sidebar-panel">
                   <h2>{Astro.locals.t("tableOfContents.onThisPage")}</h2>
                   <nav
                     aria-label={Astro.locals.t("tableOfContents.onThisPage")}
                   >
                     <TableOfContents items={route.toc.items} />
                   </nav>
-                </div>
+                </cookbook-table-of-contents>
               </div>
             </aside>
           )
@@ -116,5 +116,8 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
         </div>
       </div>
     </PageFrame>
+    <script>
+      import "../client/table-of-contents.js";
+    </script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/renderer",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,7 +61,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.19.0",
+    "@tenphi/docs": "0.19.2",
     "@tenphi/eslint-plugin-tasty": "1.1.0",
     "@tenphi/glaze": "2.0.0",
     "@tenphi/tasty": "3.8.0",