@quartz-community/table-of-contents 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- Initial Quartz community plugin template.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Quartz Community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# @quartz-community/table-of-contents
+
+Renders an interactive table of contents for pages. Also includes a transformer that extracts heading structure from markdown.
+
+## Installation
+
+```bash
+npx quartz plugin add github:quartz-community/table-of-contents
+```
+
+## Usage
+
+```yaml title="quartz.config.yaml"
+plugins:
+  - source: github:quartz-community/table-of-contents
+    enabled: true
+```
+
+For advanced use cases, you can override in TypeScript:
+
+```ts title="quartz.ts (override)"
+import * as ExternalPlugin from "./.quartz/plugins";
+
+// Transformer
+ExternalPlugin.TableOfContentsTransformer({ maxDepth: 3 });
+
+// Component
+ExternalPlugin.TableOfContents({ layout: "modern" });
+```
+
+## Configuration
+
+### Component Options
+
+| Option   | Type                   | Default    | Description                                |
+| -------- | ---------------------- | ---------- | ------------------------------------------ |
+| `layout` | `"modern" \| "legacy"` | `"modern"` | The layout style of the table of contents. |
+
+### Transformer Options
+
+| Option              | Type      | Default | Description                                                              |
+| ------------------- | --------- | ------- | ------------------------------------------------------------------------ |
+| `maxDepth`          | `number`  | `3`     | The maximum heading depth to include in the table of contents (1-6).     |
+| `minEntries`        | `number`  | `1`     | The minimum number of entries required to display the table of contents. |
+| `showByDefault`     | `boolean` | `true`  | Whether to show the table of contents by default.                        |
+| `collapseByDefault` | `boolean` | `false` | Whether to collapse the table of contents by default.                    |
+
+## Documentation
+
+See the [Quartz documentation](https://quartz.jzhao.xyz/plugins/TableOfContents) for more information.
+
+## License
+
+MIT

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+import { QuartzComponent } from '@quartz-community/types';
+
+interface Options {
+    layout: "modern" | "legacy";
+}
+declare const _default: (opts?: Partial<Options>) => QuartzComponent;
+
+export { _default as TableOfContents };

package/dist/components/index.js

@@ -0,0 +1,476 @@
+// node_modules/@quartz-community/utils/dist/lang.js
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/i18n/locales/en-US.ts
+var en_US_default = {
+  components: {
+    tableOfContents: {
+      title: "Table of Contents"
+    }
+  }
+};
+
+// src/i18n/locales/ar-SA.ts
+var ar_SA_default = {
+  components: {
+    tableOfContents: {
+      title: "\u0641\u0647\u0631\u0633 \u0627\u0644\u0645\u062D\u062A\u0648\u064A\u0627\u062A"
+    }
+  }
+};
+
+// src/i18n/locales/ca-ES.ts
+var ca_ES_default = {
+  components: {
+    tableOfContents: {
+      title: "Taula de Continguts"
+    }
+  }
+};
+
+// src/i18n/locales/cs-CZ.ts
+var cs_CZ_default = {
+  components: {
+    tableOfContents: {
+      title: "Obsah"
+    }
+  }
+};
+
+// src/i18n/locales/de-DE.ts
+var de_DE_default = {
+  components: {
+    tableOfContents: {
+      title: "Inhaltsverzeichnis"
+    }
+  }
+};
+
+// src/i18n/locales/en-GB.ts
+var en_GB_default = {
+  components: {
+    tableOfContents: {
+      title: "Table of Contents"
+    }
+  }
+};
+
+// src/i18n/locales/es-ES.ts
+var es_ES_default = {
+  components: {
+    tableOfContents: {
+      title: "Tabla de Contenidos"
+    }
+  }
+};
+
+// src/i18n/locales/fa-IR.ts
+var fa_IR_default = {
+  components: {
+    tableOfContents: {
+      title: "\u0641\u0647\u0631\u0633\u062A"
+    }
+  }
+};
+
+// src/i18n/locales/fi-FI.ts
+var fi_FI_default = {
+  components: {
+    tableOfContents: {
+      title: "Sis\xE4llysluettelo"
+    }
+  }
+};
+
+// src/i18n/locales/fr-FR.ts
+var fr_FR_default = {
+  components: {
+    tableOfContents: {
+      title: "Table des Mati\xE8res"
+    }
+  }
+};
+
+// src/i18n/locales/he-IL.ts
+var he_IL_default = {
+  components: {
+    tableOfContents: {
+      title: "\u05EA\u05D5\u05DB\u05DF \u05E2\u05E0\u05D9\u05D9\u05E0\u05D9\u05DD"
+    }
+  }
+};
+
+// src/i18n/locales/hu-HU.ts
+var hu_HU_default = {
+  components: {
+    tableOfContents: {
+      title: "Tartalomjegyz\xE9k"
+    }
+  }
+};
+
+// src/i18n/locales/id-ID.ts
+var id_ID_default = {
+  components: {
+    tableOfContents: {
+      title: "Daftar Isi"
+    }
+  }
+};
+
+// src/i18n/locales/it-IT.ts
+var it_IT_default = {
+  components: {
+    tableOfContents: {
+      title: "Indice"
+    }
+  }
+};
+
+// src/i18n/locales/ja-JP.ts
+var ja_JP_default = {
+  components: {
+    tableOfContents: {
+      title: "\u76EE\u6B21"
+    }
+  }
+};
+
+// src/i18n/locales/kk-KZ.ts
+var kk_KZ_default = {
+  components: {
+    tableOfContents: {
+      title: "\u041C\u0430\u0437\u043C\u04B1\u043D\u044B"
+    }
+  }
+};
+
+// src/i18n/locales/ko-KR.ts
+var ko_KR_default = {
+  components: {
+    tableOfContents: {
+      title: "\uBAA9\uCC28"
+    }
+  }
+};
+
+// src/i18n/locales/lt-LT.ts
+var lt_LT_default = {
+  components: {
+    tableOfContents: {
+      title: "Turinys"
+    }
+  }
+};
+
+// src/i18n/locales/nb-NO.ts
+var nb_NO_default = {
+  components: {
+    tableOfContents: {
+      title: "Oversikt"
+    }
+  }
+};
+
+// src/i18n/locales/nl-NL.ts
+var nl_NL_default = {
+  components: {
+    tableOfContents: {
+      title: "Inhoudsopgave"
+    }
+  }
+};
+
+// src/i18n/locales/pl-PL.ts
+var pl_PL_default = {
+  components: {
+    tableOfContents: {
+      title: "Spis tre\u015Bci"
+    }
+  }
+};
+
+// src/i18n/locales/pt-BR.ts
+var pt_BR_default = {
+  components: {
+    tableOfContents: {
+      title: "Sum\xE1rio"
+    }
+  }
+};
+
+// src/i18n/locales/ro-RO.ts
+var ro_RO_default = {
+  components: {
+    tableOfContents: {
+      title: "Cuprins"
+    }
+  }
+};
+
+// src/i18n/locales/ru-RU.ts
+var ru_RU_default = {
+  components: {
+    tableOfContents: {
+      title: "\u041E\u0433\u043B\u0430\u0432\u043B\u0435\u043D\u0438\u0435"
+    }
+  }
+};
+
+// src/i18n/locales/th-TH.ts
+var th_TH_default = {
+  components: {
+    tableOfContents: {
+      title: "\u0E2A\u0E32\u0E23\u0E1A\u0E31\u0E0D"
+    }
+  }
+};
+
+// src/i18n/locales/tr-TR.ts
+var tr_TR_default = {
+  components: {
+    tableOfContents: {
+      title: "\u0130\xE7indekiler"
+    }
+  }
+};
+
+// src/i18n/locales/uk-UA.ts
+var uk_UA_default = {
+  components: {
+    tableOfContents: {
+      title: "\u0417\u043C\u0456\u0441\u0442"
+    }
+  }
+};
+
+// src/i18n/locales/vi-VN.ts
+var vi_VN_default = {
+  components: {
+    tableOfContents: {
+      title: "M\u1EE5c l\u1EE5c"
+    }
+  }
+};
+
+// src/i18n/locales/zh-CN.ts
+var zh_CN_default = {
+  components: {
+    tableOfContents: {
+      title: "\u76EE\u5F55"
+    }
+  }
+};
+
+// src/i18n/locales/zh-TW.ts
+var zh_TW_default = {
+  components: {
+    tableOfContents: {
+      title: "\u76EE\u9304"
+    }
+  }
+};
+
+// src/i18n/index.ts
+var locales = {
+  "en-US": en_US_default,
+  "ar-SA": ar_SA_default,
+  "ca-ES": ca_ES_default,
+  "cs-CZ": cs_CZ_default,
+  "de-DE": de_DE_default,
+  "en-GB": en_GB_default,
+  "es-ES": es_ES_default,
+  "fa-IR": fa_IR_default,
+  "fi-FI": fi_FI_default,
+  "fr-FR": fr_FR_default,
+  "he-IL": he_IL_default,
+  "hu-HU": hu_HU_default,
+  "id-ID": id_ID_default,
+  "it-IT": it_IT_default,
+  "ja-JP": ja_JP_default,
+  "kk-KZ": kk_KZ_default,
+  "ko-KR": ko_KR_default,
+  "lt-LT": lt_LT_default,
+  "nb-NO": nb_NO_default,
+  "nl-NL": nl_NL_default,
+  "pl-PL": pl_PL_default,
+  "pt-BR": pt_BR_default,
+  "ro-RO": ro_RO_default,
+  "ru-RU": ru_RU_default,
+  "th-TH": th_TH_default,
+  "tr-TR": tr_TR_default,
+  "uk-UA": uk_UA_default,
+  "vi-VN": vi_VN_default,
+  "zh-CN": zh_CN_default,
+  "zh-TW": zh_TW_default
+};
+function i18n(locale) {
+  return locales[locale] || en_US_default;
+}
+
+// src/components/styles/legacyToc.scss
+var legacyToc_default = "details.toc summary {\n  cursor: pointer;\n}\ndetails.toc summary::marker {\n  color: var(--dark);\n}\ndetails.toc summary > * {\n  padding-left: 0.25rem;\n  display: inline-block;\n  margin: 0;\n}\ndetails.toc ul {\n  list-style: none;\n  margin: 0.5rem 1.25rem;\n  padding: 0;\n}\ndetails.toc .depth-1 {\n  padding-left: calc(1rem * 1);\n}\ndetails.toc .depth-2 {\n  padding-left: calc(1rem * 2);\n}\ndetails.toc .depth-3 {\n  padding-left: calc(1rem * 3);\n}\ndetails.toc .depth-4 {\n  padding-left: calc(1rem * 4);\n}\ndetails.toc .depth-5 {\n  padding-left: calc(1rem * 5);\n}\ndetails.toc .depth-6 {\n  padding-left: calc(1rem * 6);\n}";
+
+// src/components/styles/toc.scss
+var toc_default = ".toc {\n  display: flex;\n  flex-direction: column;\n  overflow-y: hidden;\n  min-height: 1.4rem;\n  flex: 0 0.5 auto;\n}\n.toc:has(button.toc-header.collapsed) {\n  flex: 0 1 1.4rem;\n}\n\nbutton.toc-header {\n  background-color: transparent;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n  padding: 0;\n  color: var(--dark);\n  display: flex;\n  align-items: center;\n}\nbutton.toc-header h3 {\n  font-size: 1rem;\n  display: inline-block;\n  margin: 0;\n}\nbutton.toc-header .fold {\n  margin-left: 0.5rem;\n  transition: transform 0.3s ease;\n  opacity: 0.8;\n}\nbutton.toc-header.collapsed .fold {\n  transform: rotateZ(-90deg);\n}\n\nul.toc-content.overflow {\n  list-style: none;\n  position: relative;\n  margin: 0.5rem 0;\n  padding: 0;\n  max-height: calc(100% - 2rem);\n  overscroll-behavior: contain;\n  list-style: none;\n}\nul.toc-content.overflow > li > a {\n  color: var(--dark);\n  opacity: 0.35;\n  transition: 0.5s ease opacity, 0.3s ease color;\n}\nul.toc-content.overflow > li > a.in-view {\n  opacity: 0.75;\n}\nul.toc-content.overflow .depth-0 {\n  padding-left: calc(1rem * 0);\n}\nul.toc-content.overflow .depth-1 {\n  padding-left: calc(1rem * 1);\n}\nul.toc-content.overflow .depth-2 {\n  padding-left: calc(1rem * 2);\n}\nul.toc-content.overflow .depth-3 {\n  padding-left: calc(1rem * 3);\n}\nul.toc-content.overflow .depth-4 {\n  padding-left: calc(1rem * 4);\n}\nul.toc-content.overflow .depth-5 {\n  padding-left: calc(1rem * 5);\n}\nul.toc-content.overflow .depth-6 {\n  padding-left: calc(1rem * 6);\n}";
+
+// src/components/scripts/toc.inline.ts
+var toc_inline_default = 'var i=new IntersectionObserver(t=>{for(let e of t){let n=e.target.id,o=document.querySelectorAll(`a[data-for="${n}"]`),s=e.rootBounds?.height;s&&o.length>0&&(e.boundingClientRect.y<s?o.forEach(c=>c.classList.add("in-view")):o.forEach(c=>c.classList.remove("in-view")))}});function r(){this.classList.toggle("collapsed"),this.setAttribute("aria-expanded",this.getAttribute("aria-expanded")==="true"?"false":"true");let t=this.nextElementSibling;t&&t.classList.toggle("collapsed")}function a(){let t=Array.from(document.getElementsByClassName("toc"));for(let e of t){let n=e.querySelector(".toc-header"),o=e.querySelector(".toc-content");if(!n||!o)return;n.addEventListener("click",r);let s=()=>n.removeEventListener("click",r);window.addCleanup&&window.addCleanup(s)}}function d(){a(),i.disconnect(),document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").forEach(e=>i.observe(e))}document.addEventListener("nav",d);document.addEventListener("render",d);\n';
+var l;
+l = { __e: function(n2, l2, u3, t2) {
+  for (var i2, r2, o2; l2 = l2.__; ) if ((i2 = l2.__c) && !i2.__) try {
+    if ((r2 = i2.constructor) && null != r2.getDerivedStateFromError && (i2.setState(r2.getDerivedStateFromError(n2)), o2 = i2.__d), null != i2.componentDidCatch && (i2.componentDidCatch(n2, t2 || {}), o2 = i2.__d), o2) return i2.__E = i2;
+  } catch (l3) {
+    n2 = l3;
+  }
+  throw n2;
+} }, "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, Math.random().toString(8);
+
+// node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
+var f2 = 0;
+function u2(e2, t2, n2, o2, i2, u3) {
+  t2 || (t2 = {});
+  var a2, c2, p2 = t2;
+  if ("ref" in p2) for (c2 in p2 = {}, t2) "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
+  var l2 = { type: e2, props: p2, key: n2, ref: a2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f2, __i: -1, __u: 0, __source: i2, __self: u3 };
+  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
+  return l.vnode && l.vnode(l2), l2;
+}
+
+// src/components/OverflowList.tsx
+var OverflowList = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ u2("ul", { ...props, class: [props.class, "overflow"].filter(Boolean).join(" "), id: props.id, children: [
+    children,
+    /* @__PURE__ */ u2("li", { class: "overflow-end" })
+  ] });
+};
+var numLists = 0;
+var OverflowList_default = () => {
+  const id = `list-${numLists++}`;
+  return {
+    OverflowList: (props) => /* @__PURE__ */ u2(OverflowList, { ...props, id }),
+    overflowListAfterDOMLoaded: `
+document.addEventListener("nav", (e) => {
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const parentUl = entry.target.parentElement
+      if (!parentUl) return
+      if (entry.isIntersecting) {
+        parentUl.classList.remove("gradient-active")
+      } else {
+        parentUl.classList.add("gradient-active")
+      }
+    }
+  })
+
+  const ul = document.getElementById("${id}")
+  if (!ul) return
+
+  const end = ul.querySelector(".overflow-end")
+  if (!end) return
+
+  observer.observe(end)
+  const cleanup = () => observer.disconnect()
+  if (window.addCleanup) {
+    window.addCleanup(cleanup)
+  }
+})
+`
+  };
+};
+
+// src/util/resources.ts
+function concatenateResources(...resources) {
+  return resources.filter((resource) => resource !== void 0).flat();
+}
+
+// src/components/TableOfContents.tsx
+var defaultOptions = {
+  layout: "modern"
+};
+var numTocs = 0;
+var TableOfContents_default = ((opts) => {
+  const layout = opts?.layout ?? defaultOptions.layout;
+  const { OverflowList: OverflowList2, overflowListAfterDOMLoaded } = OverflowList_default();
+  const TableOfContents = (props) => {
+    const { fileData, cfg } = props;
+    if (!fileData?.toc) {
+      return null;
+    }
+    const id = `toc-${numTocs++}`;
+    return /* @__PURE__ */ u2("div", { class: classNames("toc"), children: [
+      /* @__PURE__ */ u2(
+        "button",
+        {
+          type: "button",
+          class: fileData.collapseToc ? "collapsed toc-header" : "toc-header",
+          "aria-controls": id,
+          "aria-expanded": !fileData.collapseToc,
+          children: [
+            /* @__PURE__ */ u2("h3", { children: i18n(cfg.locale).components.tableOfContents.title }),
+            /* @__PURE__ */ u2(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: "fold",
+                children: /* @__PURE__ */ u2("polyline", { points: "6 9 12 15 18 9" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ u2(
+        OverflowList2,
+        {
+          id,
+          class: fileData.collapseToc ? "collapsed toc-content" : "toc-content",
+          children: fileData.toc.map((tocEntry) => {
+            const slug = String(tocEntry.slug);
+            const depth = String(tocEntry.depth);
+            const text = String(tocEntry.text);
+            return /* @__PURE__ */ u2("li", { class: `depth-${depth}`, children: /* @__PURE__ */ u2("a", { href: `#${slug}`, "data-for": slug, children: text }) }, slug);
+          })
+        }
+      )
+    ] });
+  };
+  TableOfContents.css = toc_default;
+  TableOfContents.afterDOMLoaded = concatenateResources(
+    toc_inline_default,
+    overflowListAfterDOMLoaded
+  );
+  const LegacyTableOfContents = (props) => {
+    const { fileData, cfg } = props;
+    if (!fileData?.toc) {
+      return null;
+    }
+    return /* @__PURE__ */ u2("details", { class: "toc", open: !fileData.collapseToc, children: [
+      /* @__PURE__ */ u2("summary", { children: /* @__PURE__ */ u2("h3", { children: i18n(cfg.locale).components.tableOfContents.title }) }),
+      /* @__PURE__ */ u2("ul", { children: fileData.toc.map((tocEntry) => {
+        const slug = String(tocEntry.slug);
+        const depth = String(tocEntry.depth);
+        const text = String(tocEntry.text);
+        return /* @__PURE__ */ u2("li", { class: `depth-${depth}`, children: /* @__PURE__ */ u2("a", { href: `#${slug}`, "data-for": slug, children: text }) }, slug);
+      }) })
+    ] });
+  };
+  LegacyTableOfContents.css = legacyToc_default;
+  return layout === "modern" ? TableOfContents : LegacyTableOfContents;
+});
+
+export { TableOfContents_default as TableOfContents };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map