@dooc-dev/dooc 0.0.0-stage → 0.0.2

package/dist/viewer/resize.js

@@ -0,0 +1,238 @@
+/** Shared by editor, preview, and published pages; keep this function self-contained. */
+export const mountPanelResize = () => {
+    const sidebar = document.getElementById("sidebar");
+    const editor = document.getElementById("panel");
+    const closed = () => document.body.classList.contains("sidebar-closed");
+    const contentWidth = () => Math.min(240, Math.max(0, window.innerWidth - (closed() ? 52 : 200) - (editor ? 320 : 0)));
+    const panels = [
+        {
+            element: sidebar,
+            handle: "sidebar-resize",
+            key: "docs:sidebar-width",
+            min: 200,
+            max: 480,
+            direction: 1,
+        },
+        {
+            element: editor,
+            handle: "resize",
+            key: "docs-edit:panelw",
+            min: 320,
+            max: 960,
+            direction: -1,
+        },
+    ].flatMap((options) => {
+        const element = options.element;
+        const handle = document.getElementById(options.handle);
+        if (!element || !handle)
+            return [];
+        let preferred;
+        try {
+            const saved = Number(localStorage.getItem(options.key));
+            if (Number.isFinite(saved) && saved > 0)
+                preferred = saved;
+        }
+        catch {
+            /* Width persistence is optional. */
+        }
+        const property = options.direction === 1 ? "--sidebar-width" : "--panel-width";
+        const requested = () => preferred ?? (options.direction === 1 ? 260 : Math.min(760, window.innerWidth * 0.52));
+        const apply = (width) => {
+            const other = options.direction === 1 ? editor : sidebar;
+            const max = Math.max(0, Math.min(options.max, window.innerWidth -
+                (other?.getBoundingClientRect().width ?? 0) -
+                contentWidth()));
+            const min = Math.min(options.min, max);
+            const value = Math.round(Math.max(min, Math.min(width, max)));
+            element.style.setProperty(property, `${value}px`);
+            handle.setAttribute("aria-valuemin", String(min));
+            handle.setAttribute("aria-valuemax", String(max));
+            handle.setAttribute("aria-valuenow", String(value));
+        };
+        const persist = () => {
+            preferred = element.getBoundingClientRect().width;
+            try {
+                localStorage.setItem(options.key, String(preferred));
+            }
+            catch {
+                /* Optional. */
+            }
+        };
+        let drag;
+        handle.addEventListener("pointerdown", (event) => {
+            if (event.button !== 0 || drag)
+                return;
+            event.preventDefault();
+            handle.focus();
+            drag = {
+                id: event.pointerId,
+                x: event.clientX,
+                width: element.getBoundingClientRect().width,
+            };
+            handle.setPointerCapture(event.pointerId);
+            handle.classList.add("drag");
+            document.body.classList.add("resizing");
+        });
+        handle.addEventListener("pointermove", (event) => {
+            if (drag?.id !== event.pointerId)
+                return;
+            apply(drag.width + options.direction * (event.clientX - drag.x));
+        });
+        const stop = (event) => {
+            if (drag?.id !== event.pointerId)
+                return;
+            drag = undefined;
+            handle.classList.remove("drag");
+            document.body.classList.remove("resizing");
+            persist();
+        };
+        handle.addEventListener("pointerup", stop);
+        handle.addEventListener("pointercancel", stop);
+        handle.addEventListener("lostpointercapture", stop);
+        handle.addEventListener("dblclick", () => {
+            preferred = undefined;
+            try {
+                localStorage.removeItem(options.key);
+            }
+            catch {
+                /* Optional. */
+            }
+            apply(requested());
+        });
+        handle.addEventListener("keydown", (event) => {
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            event.preventDefault();
+            apply(element.getBoundingClientRect().width +
+                options.direction * (event.key === "ArrowRight" ? 20 : -20));
+            persist();
+        });
+        return [{ ...options, element, apply, requested, persist, property }];
+    });
+    const layout = () => {
+        // On a smaller viewport, make room for the navigation before clamping both panels.
+        const right = panels.find((panel) => panel.direction === -1);
+        if (right) {
+            const available = Math.max(0, window.innerWidth - (closed() ? 52 : 200) - contentWidth());
+            right.element.style.setProperty(right.property, `${Math.min(right.requested(), available)}px`);
+        }
+        for (const panel of panels) {
+            if (panel.direction === 1 && closed())
+                continue;
+            panel.apply(panel.requested());
+        }
+    };
+    window.addEventListener("resize", layout);
+    document.getElementById("sidebar-toggle")?.addEventListener("click", layout);
+    window.addEventListener("keydown", (event) => {
+        if (event.defaultPrevented || !(event.ctrlKey || event.metaKey) || !event.altKey)
+            return;
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        const right = panels.find((panel) => panel.direction === -1);
+        if (!right)
+            return;
+        event.preventDefault();
+        right.apply(right.element.getBoundingClientRect().width + (event.key === "ArrowLeft" ? 40 : -40));
+        right.persist();
+    });
+    layout();
+};
+/** The navigation is replaced on refresh; keep listeners and height on its stable sidebar. */
+export const mountToolsResize = () => {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar || !document.getElementById("nav-tools"))
+        return () => { };
+    const key = "docs:tools-height";
+    let preferred;
+    try {
+        const saved = Number(localStorage.getItem(key));
+        if (Number.isFinite(saved) && saved > 0)
+            preferred = saved;
+    }
+    catch {
+        /* Persistence is optional. */
+    }
+    const apply = (height = preferred ?? Math.min(220, innerHeight * 0.4)) => {
+        const handle = document.getElementById("tools-resize");
+        if (!handle)
+            return;
+        const max = Math.max(80, sidebar.clientHeight - 100);
+        const min = Math.min(144, max);
+        const value = Math.round(Math.max(min, Math.min(height, max)));
+        sidebar.style.setProperty("--tools-height", `${value}px`);
+        handle.setAttribute("aria-valuemin", String(min));
+        handle.setAttribute("aria-valuemax", String(max));
+        handle.setAttribute("aria-valuenow", String(value));
+    };
+    const persist = () => {
+        preferred = Number.parseFloat(sidebar.style.getPropertyValue("--tools-height"));
+        try {
+            localStorage.setItem(key, String(preferred));
+        }
+        catch {
+            /* Optional. */
+        }
+    };
+    const isHandle = (event) => event.target instanceof Element && !!event.target.closest("#tools-resize");
+    const height = () => document.getElementById("nav-tools")?.getBoundingClientRect().height ?? 0;
+    let drag;
+    sidebar.addEventListener("pointerdown", (event) => {
+        if (!isHandle(event) || event.button !== 0 || drag)
+            return;
+        const handle = document.getElementById("tools-resize");
+        if (!handle)
+            return;
+        event.preventDefault();
+        handle.focus({ preventScroll: true });
+        drag = { id: event.pointerId, y: event.clientY, height: height(), handle };
+        handle.setPointerCapture(event.pointerId);
+        document.body.classList.add("resizing-tools");
+    });
+    sidebar.addEventListener("pointermove", (event) => {
+        if (drag?.id === event.pointerId)
+            apply(drag.height + drag.y - event.clientY);
+    });
+    const stop = () => {
+        if (!drag)
+            return;
+        drag = undefined;
+        document.body.classList.remove("resizing-tools");
+        persist();
+    };
+    for (const type of ["pointerup", "pointercancel", "lostpointercapture"])
+        sidebar.addEventListener(type, (event) => {
+            if (drag?.id === event.pointerId)
+                stop();
+        });
+    sidebar.addEventListener("keydown", (event) => {
+        if (!isHandle(event) || (event.key !== "ArrowUp" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        apply(height() + (event.key === "ArrowUp" ? 20 : -20));
+        persist();
+    });
+    sidebar.addEventListener("dblclick", (event) => {
+        if (!isHandle(event))
+            return;
+        preferred = undefined;
+        try {
+            localStorage.removeItem(key);
+        }
+        catch {
+            /* Optional. */
+        }
+        apply();
+    });
+    window.addEventListener("resize", () => apply());
+    const restore = () => {
+        if (drag && !drag.handle.isConnected)
+            stop();
+        apply();
+    };
+    const nav = document.getElementById("nav-groups");
+    if (nav)
+        new MutationObserver(restore).observe(nav, { childList: true });
+    restore();
+    return restore;
+};

package/dist/viewer/resource-library.d.ts

@@ -0,0 +1,29 @@
+import type { TermEntry } from "../core/content-types.js";
+interface SourceLocation {
+    file: string;
+    line: number;
+}
+export interface ResourceIndex {
+    terms: {
+        entry: TermEntry;
+        source: SourceLocation;
+    }[];
+    code: {
+        language: string;
+        caption: string;
+        content: string;
+        source: SourceLocation;
+    }[];
+    urls: {
+        url: string;
+        host: string;
+        sources: SourceLocation[];
+    }[];
+    errors: string[];
+}
+/** Index authored content, including files not referenced by any document. */
+export declare const resourceIndex: (root: string, files: readonly string[]) => ResourceIndex;
+export type ResourceView = "files" | "dictionary" | "code" | "urls";
+export declare const resourceTabs: (view: ResourceView) => string;
+export declare const resourceLibraryHtml: (index: ResourceIndex, view: Exclude<ResourceView, "files">) => string;
+export {};

package/dist/viewer/resource-library.js

@@ -0,0 +1,104 @@
+import { visit } from "unist-util-visit";
+import { parseTermSource } from "../compiler/terms.js";
+import { readTextfile } from "../compiler/textfile.js";
+import { blocksHtml, escapeHtml } from "../core/html.js";
+import { parseMdast } from "../core/markdown.js";
+/** Index authored content, including files not referenced by any document. */
+export const resourceIndex = (root, files) => {
+    const result = { terms: [], code: [], urls: [], errors: [] };
+    const urls = new Map();
+    const terms = (raw, source) => {
+        const parsed = parseTermSource(`${source.file}#L${source.line}`, raw);
+        result.terms.push(...parsed.entries.map((entry) => ({ entry, source })));
+        result.errors.push(...parsed.errors.map((error) => `${source.file}:L${source.line + error.line}: ${error.message}`));
+    };
+    const scan = (tree, file, offset = 0) => {
+        const definitions = new Map();
+        visit(tree, "definition", (node) => {
+            definitions.set(node.identifier, node.url);
+        });
+        visit(tree, (node) => {
+            const source = { file, line: offset + (node.position?.start.line ?? 1) };
+            if (node.type === "code") {
+                const language = node.lang?.toLowerCase() || "text";
+                result.code.push({
+                    language,
+                    caption: node.meta ?? "",
+                    content: node.value,
+                    source,
+                });
+                if (language === "termth")
+                    terms(node.value, { ...source, line: source.line + 1 });
+                if (language === "callouth")
+                    scan(parseMdast(node.value), file, source.line);
+                return;
+            }
+            const target = node.type === "link" || node.type === "image"
+                ? node.url
+                : node.type === "linkReference" || node.type === "imageReference"
+                    ? definitions.get(node.identifier)
+                    : undefined;
+            if (!target)
+                return;
+            try {
+                const url = new URL(target);
+                if (!["http:", "https:", "mailto:"].includes(url.protocol))
+                    return;
+                const key = url.href;
+                const entry = urls.get(key) ?? {
+                    url: key,
+                    host: url.host || url.protocol,
+                    sources: [],
+                };
+                entry.sources.push(source);
+                urls.set(key, entry);
+            }
+            catch {
+                // Local paths and anchors are not external URL resources.
+            }
+        });
+    };
+    for (const file of new Set(files)) {
+        if (!/\.(?:md|termth)$/i.test(file))
+            continue;
+        try {
+            const raw = readTextfile(root, file);
+            if (/\.termth$/i.test(file))
+                terms(raw, { file, line: 1 });
+            else
+                scan(parseMdast(raw), file);
+        }
+        catch (error) {
+            result.errors.push(`${file}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    result.terms.sort((a, b) => a.entry.name.localeCompare(b.entry.name, undefined, { numeric: true }));
+    result.urls = [...urls.values()].sort((a, b) => a.url.localeCompare(b.url));
+    return result;
+};
+export const resourceTabs = (view) => view === "files"
+    ? ""
+    : `<nav class="resource-tabs" aria-label="Resource views" data-i18n-aria-label="Resource views">${[
+        ["dictionary", "Dictionary"],
+        ["code", "Code blocks"],
+        ["urls", "URLs"],
+    ]
+        .map(([key, label]) => `<a href="/_statics${key === "dictionary" ? "" : `/${key}`}"${view === key ? ' aria-current="page"' : ""} data-i18n="${label}">${label}</a>`)
+        .join("")}</nav>`;
+const sourceLink = ({ file, line }) => `<a class="resource-source" href="/_files/file/${encodeURIComponent(file)}#L${line}" data-resource-source="${escapeHtml(file)}" data-resource-line="${line}" title="${escapeHtml(file)}:L${line}"><span class="resource-source-file">${escapeHtml(file)}</span><span>L${line}</span></a>`;
+export const resourceLibraryHtml = (index, view) => {
+    const groupLabel = view === "code" ? "Code language" : "Domain";
+    const groups = view === "dictionary"
+        ? []
+        : [
+            ...new Set(view === "code"
+                ? index.code.map((item) => item.language)
+                : index.urls.map((item) => item.host)),
+        ].sort();
+    const items = view === "dictionary"
+        ? index.terms.map(({ entry, source }) => `<details class="resource-item resource-term" data-resource-item><summary><span class="resource-name" title="${escapeHtml(entry.name)}">${escapeHtml(entry.name)}</span>${sourceLink(source)}</summary><div class="resource-body"><p class="term-definition">${escapeHtml(entry.definition)}</p>${entry.description ? `<p class="resource-description">${escapeHtml(entry.description)}</p>` : ""}</div></details>`)
+        : view === "code"
+            ? index.code.map(({ language, caption, content, source }) => `<details class="resource-item resource-code" data-resource-item data-resource-group="${escapeHtml(language)}"><summary><span class="resource-badge">${escapeHtml(language)}</span>${caption ? `<span class="resource-name" title="${escapeHtml(caption)}">${escapeHtml(caption)}</span>` : ""}${sourceLink(source)}</summary><div class="resource-body">${blocksHtml([{ type: "code", lang: language === "mermaid" ? "text" : language, lines: content.split("\n") }])}</div></details>`)
+            : index.urls.map(({ url, host, sources }) => `<details class="resource-item resource-url" data-resource-item data-resource-group="${escapeHtml(host)}"><summary><a class="resource-name" href="${escapeHtml(url)}" title="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a><span class="resource-usage" title="references" data-i18n-title="references">${sources.length}</span></summary><div class="resource-body resource-sources">${sources.map(sourceLink).join("")}</div></details>`);
+    return `<section class="resource-results" data-resource-results><div class="resource-toolbar"><span data-i18n="Name">Name</span><label class="resource-search"><svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 14l4 4M15 9a6 6 0 1 1-12 0 6 6 0 0 1 12 0"/></svg><input type="search" data-resource-search placeholder="Search resources" aria-label="Search resources" data-i18n-placeholder="Search resources" data-i18n-aria-label="Search resources"></label>${groups.length ? `<select data-resource-filter aria-label="${groupLabel}" data-i18n-aria-label="${groupLabel}"><option value="" data-i18n="All">All</option>${groups.map((group) => `<option value="${escapeHtml(group)}">${escapeHtml(group)}</option>`).join("")}</select>` : ""}<span class="resource-count" data-resource-count role="status" aria-live="polite">${items.length}</span></div>${index.errors.length ? `<details class="resource-errors"><summary><span data-i18n="Files with errors">Files with errors</span> (${index.errors.length})</summary><ul>${index.errors.map((error) => `<li>${escapeHtml(error)}</li>`).join("")}</ul></details>` : ""}<div class="resource-items resource-${view}">${items.join("")}</div><p class="resource-empty" data-resource-empty${items.length ? " hidden" : ""} data-i18n="No matching resources">No matching resources</p></section>`;
+};

package/dist/viewer/search.d.ts

@@ -0,0 +1,16 @@
+import type { Site } from "./serve.js";
+export interface SearchSection {
+    path: string;
+    file: string;
+    folder: boolean;
+    title: string;
+    heading: string;
+    anchor: string;
+    text: string;
+}
+export declare const searchIndex: (site: Site) => SearchSection[];
+export declare const searchSections: (index: SearchSection[], query: string, currentPath?: string) => (SearchSection & {
+    snippet: string;
+})[];
+export declare const SEARCH_LABELS: string[];
+export declare const mountSearch: (initial: SearchSection[], search: typeof searchSections, labels: Record<string, string>, published: boolean) => void;