marksites 0.1.0

package/dist/features/table-of-contents/index.d.ts

@@ -0,0 +1,16 @@
+import type { Renderer } from "marked";
+interface TableOfContentsConfig {
+    enabled: boolean;
+    title: string;
+    minDepth: number;
+    maxDepth: number;
+}
+export interface TableOfContentsFeature {
+    render(): {
+        markup: string;
+        script: string;
+        title: string;
+    };
+}
+export declare function createTableOfContentsFeature(renderer: Renderer, config: TableOfContentsConfig): TableOfContentsFeature;
+export {};

package/dist/features/table-of-contents/index.js

@@ -0,0 +1,91 @@
+import GithubSlugger from "github-slugger";
+import { escapeHtml, plainTextFromHtml } from "../../utils/html.js";
+function renderTableOfContents(items, title, minDepth) {
+    if (items.length === 0)
+        return "";
+    const links = items
+        .map(({ depth, id, text }) => `    <li style="--toc-level: ${depth - minDepth}"><a href="#${escapeHtml(id)}">${escapeHtml(text)}</a></li>`)
+        .join("\n");
+    const escapedTitle = escapeHtml(title);
+    return `<nav class="table-of-contents sidebar-panel" id="sidebar-panel-toc" role="tabpanel" aria-labelledby="sidebar-tab-toc" aria-label="${escapedTitle}">
+  <div class="toc-panel">
+    <ul>
+${links}
+    </ul>
+  </div>
+</nav>
+`;
+}
+function renderTableOfContentsScript() {
+    return `<script>
+(() => {
+  const navigation = document.querySelector('.table-of-contents');
+  if (!navigation) return;
+
+  const panel = navigation.querySelector('.toc-panel');
+  const links = [...panel.querySelectorAll('a[href^="#"]')];
+  const entries = links
+    .map((link) => ({ link, heading: document.getElementById(link.getAttribute('href').slice(1)) }))
+    .filter((entry) => entry.heading);
+  if (entries.length === 0) return;
+
+  let scheduled = false;
+  const update = () => {
+    scheduled = false;
+    const marker = Math.min(160, window.innerHeight * 0.25);
+    let active = entries[0];
+
+    for (const entry of entries) {
+      if (entry.heading.getBoundingClientRect().top > marker) break;
+      active = entry;
+    }
+
+    for (const entry of entries) {
+      if (entry === active) entry.link.setAttribute('aria-current', 'location');
+      else entry.link.removeAttribute('aria-current');
+    }
+    const navigationRect = navigation.getBoundingClientRect();
+    const activeRect = active.link.getBoundingClientRect();
+    if (!navigation.hidden && (activeRect.top < navigationRect.top || activeRect.bottom > navigationRect.bottom)) {
+      navigation.scrollTop += activeRect.top - navigationRect.top - navigation.clientHeight / 2;
+    }
+  };
+  const schedule = () => {
+    if (scheduled) return;
+    scheduled = true;
+    requestAnimationFrame(update);
+  };
+
+  addEventListener('scroll', schedule, { passive: true });
+  addEventListener('resize', schedule);
+  update();
+})();
+</script>`;
+}
+export function createTableOfContentsFeature(renderer, config) {
+    const items = [];
+    const slugger = new GithubSlugger();
+    renderer.heading = ({ tokens, depth }) => {
+        const renderedText = renderer.parser.parseInline(tokens);
+        const plainText = plainTextFromHtml(renderedText);
+        const id = slugger.slug(plainText);
+        if (config.enabled &&
+            depth >= config.minDepth &&
+            depth <= config.maxDepth) {
+            items.push({ depth, id, text: plainText });
+        }
+        return `<h${depth} id="${escapeHtml(id)}">${renderedText}</h${depth}>\n`;
+    };
+    return {
+        render() {
+            const markup = config.enabled
+                ? renderTableOfContents(items, config.title, config.minDepth)
+                : "";
+            return {
+                markup,
+                script: markup ? renderTableOfContentsScript() : "",
+                title: config.title,
+            };
+        },
+    };
+}

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

@@ -0,0 +1,16 @@
+import type { Renderer } from "marked";
+interface TableOfContentsConfig {
+    enabled: boolean;
+    title: string;
+    minDepth: number;
+    maxDepth: number;
+}
+export interface TableOfContentsFeature {
+    render(): {
+        markup: string;
+        script: string;
+        title: string;
+    };
+}
+export declare function createTableOfContentsFeature(renderer: Renderer, config: TableOfContentsConfig): TableOfContentsFeature;
+export {};

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

@@ -0,0 +1,91 @@
+import GithubSlugger from "github-slugger";
+import { escapeHtml, plainTextFromHtml } from "../utils/html.js";
+function renderTableOfContents(items, title, minDepth) {
+    if (items.length === 0)
+        return "";
+    const links = items
+        .map(({ depth, id, text }) => `    <li style="--toc-level: ${depth - minDepth}"><a href="#${escapeHtml(id)}">${escapeHtml(text)}</a></li>`)
+        .join("\n");
+    const escapedTitle = escapeHtml(title);
+    return `<nav class="table-of-contents sidebar-panel" id="sidebar-panel-toc" role="tabpanel" aria-labelledby="sidebar-tab-toc" aria-label="${escapedTitle}">
+  <div class="toc-panel">
+    <ul>
+${links}
+    </ul>
+  </div>
+</nav>
+`;
+}
+function renderTableOfContentsScript() {
+    return `<script>
+(() => {
+  const navigation = document.querySelector('.table-of-contents');
+  if (!navigation) return;
+
+  const panel = navigation.querySelector('.toc-panel');
+  const links = [...panel.querySelectorAll('a[href^="#"]')];
+  const entries = links
+    .map((link) => ({ link, heading: document.getElementById(link.getAttribute('href').slice(1)) }))
+    .filter((entry) => entry.heading);
+  if (entries.length === 0) return;
+
+  let scheduled = false;
+  const update = () => {
+    scheduled = false;
+    const marker = Math.min(160, window.innerHeight * 0.25);
+    let active = entries[0];
+
+    for (const entry of entries) {
+      if (entry.heading.getBoundingClientRect().top > marker) break;
+      active = entry;
+    }
+
+    for (const entry of entries) {
+      if (entry === active) entry.link.setAttribute('aria-current', 'location');
+      else entry.link.removeAttribute('aria-current');
+    }
+    const navigationRect = navigation.getBoundingClientRect();
+    const activeRect = active.link.getBoundingClientRect();
+    if (!navigation.hidden && (activeRect.top < navigationRect.top || activeRect.bottom > navigationRect.bottom)) {
+      navigation.scrollTop += activeRect.top - navigationRect.top - navigation.clientHeight / 2;
+    }
+  };
+  const schedule = () => {
+    if (scheduled) return;
+    scheduled = true;
+    requestAnimationFrame(update);
+  };
+
+  addEventListener('scroll', schedule, { passive: true });
+  addEventListener('resize', schedule);
+  update();
+})();
+</script>`;
+}
+export function createTableOfContentsFeature(renderer, config) {
+    const items = [];
+    const slugger = new GithubSlugger();
+    renderer.heading = ({ tokens, depth }) => {
+        const renderedText = renderer.parser.parseInline(tokens);
+        const plainText = plainTextFromHtml(renderedText);
+        const id = slugger.slug(plainText);
+        if (config.enabled &&
+            depth >= config.minDepth &&
+            depth <= config.maxDepth) {
+            items.push({ depth, id, text: plainText });
+        }
+        return `<h${depth} id="${escapeHtml(id)}">${renderedText}</h${depth}>\n`;
+    };
+    return {
+        render() {
+            const markup = config.enabled
+                ? renderTableOfContents(items, config.title, config.minDepth)
+                : "";
+            return {
+                markup,
+                script: markup ? renderTableOfContentsScript() : "",
+                title: config.title,
+            };
+        },
+    };
+}

package/dist/features/types.d.ts

@@ -0,0 +1,6 @@
+/** Embedded assets and markup owned by one generated-document feature. */
+export interface DocumentFeature {
+    markup: string;
+    styles: string;
+    script: string;
+}

package/dist/features/types.js

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { markdownToHtml } from "./markdown-to-html.js";
+export type { FileBreadcrumb, FileTreeDirectory, FileTreeFile, FileTreeNode, FileTreeOptions, RenderOptions, TableOfContentsOptions, } from "./types.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { markdownToHtml } from "./markdown-to-html.js";

package/dist/markdown-to-html.d.ts

@@ -0,0 +1,5 @@
+import type { AnnotationDocument } from "./annotations/model.js";
+import type { RenderOptions } from "./types.js";
+/** Convert Markdown into a standalone HTML document styled like GitHub. */
+export declare function markdownToHtml(markdown: string, options?: RenderOptions): string;
+export declare function renderMarkdown(markdown: string, options?: RenderOptions, annotations?: AnnotationDocument): string;

package/dist/markdown-to-html.js

@@ -0,0 +1,77 @@
+import { marked, Renderer } from "marked";
+import { createCodeBlocksFeature } from "./features/code-blocks/index.js";
+import { createHeaderFeature } from "./features/header/index.js";
+import { createAnnotationsFeature } from "./features/annotations/index.js";
+import { renderBreadcrumbs, renderFileSidebar, renderFileTree, renderFileTreeScript, renderModifiedAt, renderModifiedAtScript, } from "./features/file-tree/index.js";
+import { createTableOfContentsFeature } from "./features/table-of-contents/index.js";
+import { createSidebarFeature } from "./features/sidebar/index.js";
+import { renderDocument } from "./template/document.js";
+import { escapeHtml } from "./utils/html.js";
+/** Convert Markdown into a standalone HTML document styled like GitHub. */
+export function markdownToHtml(markdown, options = {}) {
+    return renderMarkdown(markdown, options);
+}
+export function renderMarkdown(markdown, options = {}, annotations) {
+    const rawTitle = options.title ?? "Markdown文書";
+    const title = escapeHtml(rawTitle);
+    const language = escapeHtml(options.language ?? "ja");
+    const highlight = options.highlight ?? true;
+    const tocOptions = typeof options.tableOfContents === "object" ? options.tableOfContents : {};
+    const renderer = new Renderer();
+    const tableOfContents = createTableOfContentsFeature(renderer, {
+        enabled: options.tableOfContents !== false,
+        title: tocOptions.title ?? "目次",
+        minDepth: tocOptions.minDepth ?? 2,
+        maxDepth: tocOptions.maxDepth ?? 6,
+    });
+    const codeBlocks = createCodeBlocksFeature(renderer, highlight);
+    const header = createHeaderFeature();
+    const content = marked.parse(markdown, {
+        ...options.markedOptions,
+        renderer,
+        async: false,
+    });
+    const toc = tableOfContents.render();
+    const fileTree = renderFileTree(options.fileTree);
+    const fileSidebar = renderFileSidebar(options.fileTree);
+    const fileTreeScript = renderFileTreeScript(fileTree !== "");
+    const modifiedAt = renderModifiedAt(options.modifiedAt);
+    const breadcrumbs = fileTree
+        ? renderBreadcrumbs(options.fileTree?.breadcrumbs, options.modifiedAt)
+        : modifiedAt
+            ? `<div class="document-metadata">${modifiedAt}</div>\n`
+            : "";
+    const annotationFeature = createAnnotationsFeature(annotations);
+    const sidebar = createSidebarFeature({
+        tableOfContents: toc.markup,
+        tableOfContentsTitle: toc.title,
+        annotations: annotationFeature.panel,
+        annotationCount: annotationFeature.count,
+    });
+    return renderDocument({
+        title,
+        language,
+        content,
+        highlight,
+        regions: {
+            header: header.markup,
+            breadcrumbs,
+            fileTree,
+            fileSidebar,
+            sidebar: sidebar.markup,
+            overlays: annotationFeature.markup,
+        },
+        assets: {
+            styles: [sidebar.styles, annotationFeature.styles, header.styles],
+            scripts: [
+                header.script,
+                fileTreeScript,
+                renderModifiedAtScript(modifiedAt !== ""),
+                sidebar.script,
+                toc.script,
+                `\n${codeBlocks.renderScript()}\n`,
+                `${annotationFeature.script}\n`,
+            ],
+        },
+    });
+}

package/dist/server/annotation-repository.d.ts

@@ -0,0 +1,35 @@
+import { type AnnotationDocument, type AnnotationSelection } from "../annotations/model.js";
+export declare class AnnotationRepository {
+    private outputRoot;
+    private documents;
+    private onChange;
+    private queues;
+    constructor(outputRoot: string, documents: Map<string, string>, onChange: (document: string, data: AnnotationDocument) => Promise<void>);
+    private path;
+    get(document: string): Promise<AnnotationDocument>;
+    exportProject(): Promise<{
+        schemaVersion: 1;
+        documents: AnnotationDocument[];
+    }>;
+    importProject(value: unknown, replace?: boolean): Promise<AnnotationDocument[]>;
+    private locked;
+    private checkRevision;
+    create(document: string, input: {
+        baseRevision: unknown;
+        selection: AnnotationSelection;
+        comment: {
+            body: string;
+            author?: string | null;
+        };
+    }): Promise<AnnotationDocument>;
+    update(document: string, id: string, input: {
+        baseRevision: unknown;
+        comment?: {
+            body: string;
+            author?: string | null;
+        };
+        status?: "open" | "archived";
+    }): Promise<AnnotationDocument>;
+    delete(document: string, id: string, baseRevision: unknown): Promise<AnnotationDocument>;
+    private validateLimits;
+}

package/dist/server/annotation-repository.js

@@ -0,0 +1,184 @@
+import { randomUUID } from "node:crypto";
+import { resolve, sep } from "node:path";
+import { readAnnotations, writeAnnotations } from "../annotations/storage.js";
+import { validateAnnotation, validateAnnotationDocument, } from "../annotations/model.js";
+const MAX_BODY = 10_000, MAX_EXACT = 20_000, MAX_ANNOTATIONS = 5_000;
+export class AnnotationRepository {
+    outputRoot;
+    documents;
+    onChange;
+    queues = new Map();
+    constructor(outputRoot, documents, onChange) {
+        this.outputRoot = outputRoot;
+        this.documents = documents;
+        this.onChange = onChange;
+    }
+    path(document) {
+        const relative = this.documents.get(document);
+        if (!relative)
+            throw Object.assign(new Error("Unknown document"), { statusCode: 404 });
+        const path = resolve(this.outputRoot, ...relative.split("/"));
+        if (path !== this.outputRoot && !path.startsWith(this.outputRoot + sep))
+            throw Object.assign(new Error("Invalid document path"), {
+                statusCode: 400,
+            });
+        return path;
+    }
+    get(document) {
+        return readAnnotations(this.path(document), document);
+    }
+    async exportProject() {
+        const documents = [];
+        for (const document of [...this.documents.keys()].sort())
+            documents.push(await this.get(document));
+        return { schemaVersion: 1, documents };
+    }
+    async importProject(value, replace = false) {
+        if (typeof value !== "object" ||
+            value === null ||
+            value.schemaVersion !== 1 ||
+            !Array.isArray(value.documents))
+            throw Object.assign(new Error("Invalid annotation export"), {
+                statusCode: 400,
+            });
+        const imported = [];
+        for (const candidate of value.documents) {
+            const document = candidate?.document;
+            if (typeof document !== "string")
+                throw Object.assign(new Error("Invalid imported document"), {
+                    statusCode: 400,
+                });
+            let incoming;
+            try {
+                incoming = validateAnnotationDocument(candidate, document);
+            }
+            catch {
+                throw Object.assign(new Error(`Invalid imported annotations for ${document}`), { statusCode: 400 });
+            }
+            await this.locked(document, async () => {
+                const current = await this.get(document);
+                const ids = new Set(current.annotations.map((item) => item.id));
+                const additions = incoming.annotations.filter((item) => !ids.has(item.id));
+                if (!replace && additions.length !== incoming.annotations.length)
+                    throw Object.assign(new Error(`Duplicate annotation ID in ${document}`), { statusCode: 409 });
+                const next = {
+                    schemaVersion: 1,
+                    document,
+                    revision: current.revision + 1,
+                    annotations: replace
+                        ? incoming.annotations
+                        : [...current.annotations, ...additions],
+                };
+                if (next.annotations.length > MAX_ANNOTATIONS)
+                    throw Object.assign(new Error("Too many annotations"), {
+                        statusCode: 413,
+                    });
+                await writeAnnotations(this.path(document), next);
+                await this.onChange(document, next);
+                imported.push(next);
+            });
+        }
+        return imported;
+    }
+    async locked(document, operation) {
+        const prior = this.queues.get(document) ?? Promise.resolve();
+        let release;
+        const next = new Promise((r) => (release = r));
+        const queued = prior.then(() => next);
+        this.queues.set(document, queued);
+        await prior;
+        try {
+            return await operation();
+        }
+        finally {
+            release();
+            if (this.queues.get(document) === queued)
+                this.queues.delete(document);
+        }
+    }
+    checkRevision(data, baseRevision) {
+        if (baseRevision !== data.revision)
+            throw Object.assign(new Error("Annotation revision conflict"), {
+                statusCode: 409,
+            });
+    }
+    async create(document, input) {
+        return this.locked(document, async () => {
+            const data = await this.get(document);
+            this.checkRevision(data, input.baseRevision);
+            if (data.annotations.length >= MAX_ANNOTATIONS)
+                throw Object.assign(new Error("Too many annotations"), {
+                    statusCode: 413,
+                });
+            const now = new Date().toISOString();
+            const annotation = {
+                id: randomUUID(),
+                selection: input.selection,
+                comment: {
+                    body: input.comment?.body,
+                    author: input.comment?.author ?? null,
+                },
+                status: "open",
+                createdAt: now,
+                updatedAt: now,
+            };
+            validateAnnotation(annotation);
+            this.validateLimits(annotation);
+            data.annotations.push(annotation);
+            data.revision++;
+            await writeAnnotations(this.path(document), data);
+            await this.onChange(document, data);
+            return data;
+        });
+    }
+    async update(document, id, input) {
+        return this.locked(document, async () => {
+            const data = await this.get(document);
+            this.checkRevision(data, input.baseRevision);
+            const item = data.annotations.find((a) => a.id === id);
+            if (!item)
+                throw Object.assign(new Error("Annotation not found"), {
+                    statusCode: 404,
+                });
+            if (input.comment)
+                item.comment = {
+                    body: input.comment.body,
+                    author: input.comment.author ?? item.comment.author,
+                };
+            if (input.status)
+                item.status = input.status;
+            item.updatedAt = new Date().toISOString();
+            validateAnnotation(item);
+            this.validateLimits(item);
+            data.revision++;
+            await writeAnnotations(this.path(document), data);
+            await this.onChange(document, data);
+            return data;
+        });
+    }
+    async delete(document, id, baseRevision) {
+        return this.locked(document, async () => {
+            const data = await this.get(document);
+            this.checkRevision(data, baseRevision);
+            const index = data.annotations.findIndex((a) => a.id === id);
+            if (index < 0)
+                throw Object.assign(new Error("Annotation not found"), {
+                    statusCode: 404,
+                });
+            data.annotations.splice(index, 1);
+            data.revision++;
+            await writeAnnotations(this.path(document), data);
+            await this.onChange(document, data);
+            return data;
+        });
+    }
+    validateLimits(a) {
+        if (a.comment.body.length > MAX_BODY ||
+            a.selection.exact.length > MAX_EXACT ||
+            a.selection.prefix.length > 500 ||
+            a.selection.suffix.length > 500)
+            throw Object.assign(new Error("Annotation is too large"), {
+                statusCode: 413,
+            });
+    }
+}

package/dist/server/api.d.ts

@@ -0,0 +1,4 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { AnnotationRepository } from "./annotation-repository.js";
+import type { MarksitesServerOptions } from "./types.js";
+export declare function handleApi(request: IncomingMessage, response: ServerResponse, url: URL, origin: string, options: MarksitesServerOptions, repository: AnnotationRepository): Promise<void>;

package/dist/server/api.js

@@ -0,0 +1,77 @@
+import { MARKSITES_API_BASE_PATH } from "./constants.js";
+import { sendJson } from "./response.js";
+const MAX_REQUEST = 128 * 1024;
+async function readBody(request) {
+    let size = 0;
+    const chunks = [];
+    for await (const chunk of request) {
+        size += chunk.length;
+        if (size > MAX_REQUEST)
+            throw Object.assign(new Error("Request body is too large"), {
+                statusCode: 413,
+            });
+        chunks.push(chunk);
+    }
+    try {
+        return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+    }
+    catch {
+        throw Object.assign(new Error("Invalid JSON request"), { statusCode: 400 });
+    }
+}
+function safeDocument(value) {
+    if (typeof value !== "string" ||
+        !value ||
+        value.includes("\\") ||
+        value.startsWith("/") ||
+        value.split("/").includes("..")) {
+        throw Object.assign(new Error("Invalid document"), { statusCode: 400 });
+    }
+    return value;
+}
+export async function handleApi(request, response, url, origin, options, repository) {
+    if (!url.pathname.startsWith(MARKSITES_API_BASE_PATH))
+        return sendJson(response, 404, "Unknown internal API");
+    if (request.headers.origin && request.headers.origin !== origin)
+        return sendJson(response, 403, "Invalid Origin");
+    const route = url.pathname.slice(MARKSITES_API_BASE_PATH.length) || "/";
+    if (request.method === "GET" && route === "/health")
+        return sendJson(response, 200, { status: "ok" });
+    if (request.method === "GET" && route === "/runtime")
+        return sendJson(response, 200, {
+            service: "marksites",
+            apiVersion: 1,
+            projectId: options.projectId,
+            editable: options.editable ?? true,
+            capabilities: options.editable === false
+                ? []
+                : ["annotations:read", "annotations:write"],
+        });
+    if (request.method === "GET" && route === "/project")
+        return sendJson(response, 200, {
+            id: options.projectId,
+            name: options.projectName,
+        });
+    if (request.method === "GET" && route === "/annotations")
+        return sendJson(response, 200, await repository.get(safeDocument(url.searchParams.get("document"))));
+    if (request.method === "GET" && route === "/annotations/export")
+        return sendJson(response, 200, await repository.exportProject());
+    if (request.headers["content-type"]?.split(";")[0] !== "application/json")
+        throw Object.assign(new Error("Content-Type must be application/json"), {
+            statusCode: 400,
+        });
+    const input = (await readBody(request));
+    if (request.method === "POST" && route === "/annotations")
+        return sendJson(response, 201, await repository.create(safeDocument(input.document), input));
+    if (request.method === "POST" && route === "/annotations/import") {
+        if (input.replace === true && input.confirmReplace !== true)
+            throw Object.assign(new Error("Replacing annotations requires confirmReplace"), { statusCode: 400 });
+        return sendJson(response, 200, await repository.importProject(input.export, input.replace === true));
+    }
+    const match = /^\/annotations\/([^/]+)$/.exec(route);
+    if (match && request.method === "PATCH")
+        return sendJson(response, 200, await repository.update(safeDocument(input.document), decodeURIComponent(match[1]), input));
+    if (match && request.method === "DELETE")
+        return sendJson(response, 200, await repository.delete(safeDocument(input.document), decodeURIComponent(match[1]), input.baseRevision));
+    return sendJson(response, 404, "Unknown API route");
+}

package/dist/server/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MARKSITES_API_BASE_PATH = "/_marksites/api/v1";
+export declare const MARKSITES_RESERVED_PATH = "_marksites";

package/dist/server/constants.js

@@ -0,0 +1,2 @@
+export const MARKSITES_API_BASE_PATH = "/_marksites/api/v1";
+export const MARKSITES_RESERVED_PATH = "_marksites";

package/dist/server/html-security.d.ts

@@ -0,0 +1,4 @@
+export declare function secureHtml(source: string): {
+    body: string;
+    csp: string;
+};