@riebeckite/plugin-excalidraw 0.0.21 → 0.0.23

package/README.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-excalidraw
 
+<!-- Generated from docs/docs/plugins/excalidraw.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 Excalidraw drawing rendering for Obsidian wikilinks.
 
 [日本語](./README_ja.md)
@@ -49,20 +51,22 @@ fenced code block is extracted and supports both `json` and lz-string
   `.excalidraw` or `.excalidraw.md`; everything else returns `null` and falls
   through to the attachment plugin
 - Reads the file under `config.content.directory` (path-traversal safe)
-- Parses the scene and emits
-
-  ```html
-  <figure class="rr-excalidraw" data-excalidraw="pending" data-excalidraw-lazy="true">
-    <div class="rr-excalidraw__canvas" role="img" aria-label="drawing.excalidraw"></div>
-    <script type="application/json" class="rr-excalidraw__payload">{"elements":[...],"appState":{...},"files":{...}}</script>
-  </figure>
-  ```
-
+- Parses the scene before rendering it.
 - Wikilink aliases can set a size: `![[drawing.excalidraw|800]]` (width) or
   `![[drawing.excalidraw|800x600]]` (width x height)
 - Missing files, invalid scenes, or out-of-directory paths render an error
   placeholder and log to the console
 
+#### Live example
+
+The following source is rendered as an SVG drawing on this page.
+
+````md
+![[HW]]
+````
+
+![[HW]]
+
 ### Client (`initExcalidraw`)
 
 - Renders pending figures to SVG with `exportToSvg` from
@@ -72,6 +76,23 @@ fenced code block is extracted and supports both `json` and lz-string
 - Success → `data-excalidraw="ready"` (the SVG replaces the empty canvas)
 - Failure → `data-excalidraw="error"` plus a placeholder message
 
+## Standalone pages
+
+An Excalidraw drawing stored as Markdown is also served as a standalone page
+instead of a plain Markdown page. The plugin registers a page type
+(`excalidraw-document`) that claims the entry's permalink with a trailing
+`.excalidraw` removed.
+
+- Detection: the slug ends in `.excalidraw` (for `*.excalidraw.md`), or the
+  frontmatter contains `excalidraw-plugin: parsed`
+- `drawing.excalidraw.md` (permalink `/drawing.excalidraw`) is served at
+  `/drawing`
+- The page body provides its own `<main>` and `<h1>`, and reuses the same
+  placeholder figure and `initExcalidraw` client as embedded wikilinks
+
+The page type resolves before normal content routing, so no extra app route is
+required. Only public entries are listed.
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -85,6 +106,6 @@ fenced code block is extracted and supports both `json` and lz-string
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.md)
+- [Plugin guide](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.md)
 - [`@riebeckite/plugin-obsidian-markdown`](../obsidian-markdown/README.md)
 - [`@riebeckite/plugin-attachment`](../attachment/README.md)

package/README_ja.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-excalidraw
 
+<!-- Generated from docs/docs/plugins/excalidraw.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 Obsidian の Excalidraw 埋め込みを SVG として表示するプラグインです。
 
 [English](./README.md)
@@ -28,6 +30,16 @@ export default defineConfig({
 
 `![[drawing.excalidraw|800]]` なら幅を、`![[drawing.excalidraw|800x600]]` なら幅と高さを指定できます。ファイルがない、内容が不正、またはコンテンツディレクトリ外を指す場合は、エラー用プレースホルダーを表示します。
 
+## 実行例
+
+以下のソースは、このページ上で SVG の図として実際に描画されます。
+
+````md
+![[HW]]
+````
+
+![[HW]]
+
 ## 描画のタイミング
 
 既定では、図が表示領域の近くに入ってから描画します。`IntersectionObserver` が使えない環境を含め、描画に失敗した要素は `data-excalidraw="error"` になり、エラー表示へ切り替わります。
@@ -36,6 +48,16 @@ export default defineConfig({
 | --- | --- | --- | --- |
 | `lazy` | `boolean` | `true` | 表示領域に近づいてから SVG を描画するか |
 
+## 単体ページとしての表示
+
+Excalidraw の描画である Markdown エントリは、通常の Markdown ページではなく専用ページとして表示されます。プラグインはページ型（`excalidraw-document`）を登録し、パーマリンク末尾の `.excalidraw` を除いたパスを引き受けます。
+
+- 判定: slug が `.excalidraw` で終わる（`*.excalidraw.md`）、または frontmatter に `excalidraw-plugin: parsed` がある
+- `drawing.excalidraw.md`（パーマリンク `/drawing.excalidraw`）は `/drawing` で表示される
+- ページ本文は自前の `<main>` と `<h1>` を持ち、埋め込みウィキリンクと同じプレースホルダーと `initExcalidraw` を再利用する
+
+ページ型は通常のコンテンツルーティングより先に解決されるため、アプリ側のルート追加は不要です。対象は公開エントリのみです。
+
 ## 公開 API
 
 - `excalidraw(options?)` / `excalidrawPlugin` — プラグインファクトリ
@@ -43,7 +65,6 @@ export default defineConfig({
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/docs/reference/plugin-api.ja.md)
+- [プラグインシステム](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.ja.md)
 - [`@riebeckite/plugin-obsidian-markdown`](../obsidian-markdown/README_ja.md)
 - [`@riebeckite/plugin-attachment`](../attachment/README_ja.md)
-

package/dist/index.js

@@ -105,6 +105,17 @@ import {
   escapeHtmlAttribute,
   escapeScriptJson
 } from "@riebeckite/core";
+function renderExcalidrawPage(input) {
+  const heading = input.title ? `<h1 class="rr-excalidraw-page__title">${escapeHtml(input.title)}</h1>` : "";
+  return `<main class="rr-excalidraw-page">${heading}${renderExcalidrawPlaceholder(
+    {
+      title: input.title,
+      scene: input.scene,
+      lazy: input.lazy,
+      error: input.error
+    }
+  )}</main>`;
+}
 function renderExcalidrawPlaceholder(input) {
   const style = renderSizeStyle(input.size);
   const error = input.error ? `<p class="rr-excalidraw__error">${escapeHtml(input.error)}</p>` : "";
@@ -158,8 +169,24 @@ function excalidraw(options = {}) {
         render: async (context) => renderAttachment(context, options)
       }
     ],
-    assets: [createStyleAsset(PLUGIN_NAME)],
-    clientEntries: [createClientEntry(PLUGIN_NAME, "initExcalidraw")]
+    pageTypes: [
+      {
+        id: "excalidraw-document",
+        paths: ({ manifest }) => listExcalidrawDocumentPaths(manifest),
+        outputDependencies: [{ type: "global" }],
+        resolve: (context) => resolveExcalidrawDocument(context, options)
+      }
+    ],
+    assets: [
+      createStyleAsset(PLUGIN_NAME, "@riebeckite/plugin-excalidraw/style.css")
+    ],
+    clientEntries: [
+      createClientEntry(
+        PLUGIN_NAME,
+        "@riebeckite/plugin-excalidraw/client",
+        "initExcalidraw"
+      )
+    ]
   });
 }
 var excalidrawPlugin = excalidraw;
@@ -211,6 +238,95 @@ function isExcalidrawDocument(filePath, raw) {
   if (lowerPath.endsWith(".excalidraw.md")) return true;
   return lowerPath.endsWith(".md") && isObsidianExcalidrawMarkdown(raw);
 }
+function listExcalidrawDocumentPaths(manifest) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const entry of manifest.publicEntries) {
+    const path = getExcalidrawPagePath(entry);
+    if (path) paths.add(path);
+  }
+  return [...paths];
+}
+function isExcalidrawEntry(entry) {
+  if (entry.slug.toLowerCase().endsWith(".excalidraw")) return true;
+  return entry.frontmatter["excalidraw-plugin"] === "parsed";
+}
+function getExcalidrawPagePath(entry) {
+  if (!isExcalidrawEntry(entry)) return null;
+  const path = normalizePath(entry.permalink).replace(/\.excalidraw$/i, "");
+  if (!path || path === "/") return null;
+  if (/\.[a-zA-Z0-9]+$/.test(path.slice(1))) return null;
+  return path;
+}
+function findExcalidrawEntry(manifest, pathname) {
+  for (const entry of manifest.publicEntries) {
+    if (getExcalidrawPagePath(entry) === pathname) return entry;
+  }
+  return null;
+}
+async function resolveExcalidrawDocument(context, options) {
+  const entry = findExcalidrawEntry(context.manifest, context.pathname);
+  if (!entry) return null;
+  const title = resolveEntryTitle(entry);
+  const description = typeof entry.frontmatter.description === "string" ? entry.frontmatter.description : void 0;
+  const lazy = options.lazy !== false;
+  if (!context.contentSource) {
+    return {
+      type: "excalidraw-document",
+      pathname: context.pathname,
+      title,
+      description,
+      body: renderExcalidrawPage({
+        title,
+        lazy,
+        error: "Content source is not available."
+      })
+    };
+  }
+  const sourcePath = `${entry.slug}.md`;
+  try {
+    const raw = await readText(context.contentSource, sourcePath);
+    if (raw === null) return null;
+    const parsed = parseExcalidrawScene(raw, sourcePath);
+    const scene = await mergeEmbeddedFiles({
+      scene: parsed.scene,
+      embeddedFiles: parsed.embeddedFiles,
+      contentSource: context.contentSource,
+      contentIndex: context.contentIndex
+    });
+    return {
+      type: "excalidraw-document",
+      pathname: context.pathname,
+      title,
+      description,
+      body: renderExcalidrawPage({ title, scene, lazy })
+    };
+  } catch (error) {
+    console.error("[plugin-excalidraw] Failed to render Excalidraw page", {
+      path: sourcePath,
+      error
+    });
+    return {
+      type: "excalidraw-document",
+      pathname: context.pathname,
+      title,
+      description,
+      body: renderExcalidrawPage({
+        title,
+        lazy,
+        error: "Excalidraw could not be rendered."
+      })
+    };
+  }
+}
+function resolveEntryTitle(entry) {
+  const trimmed = entry.title.trim().replace(/\.excalidraw$/i, "");
+  if (trimmed) return trimmed;
+  return getFileName(entry.slug).replace(/\.excalidraw$/i, "");
+}
+function normalizePath(pathname) {
+  const collapsed = `/${pathname.split("/").filter(Boolean).join("/")}`;
+  return collapsed === "/" ? "/" : collapsed.replace(/\/+$/, "");
+}
 function parseSize(label) {
   const value = label.trim();
   if (/^\d{1,5}$/.test(value)) return { width: Number(value) };

package/dist/src/render.d.ts

@@ -1,4 +1,10 @@
 import type { ExcalidrawScene } from "./types.js";
+export declare function renderExcalidrawPage(input: {
+    title: string;
+    scene?: ExcalidrawScene;
+    lazy?: boolean;
+    error?: string;
+}): string;
 export declare function renderExcalidrawPlaceholder(input: {
     title: string;
     scene?: ExcalidrawScene;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-excalidraw",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,10 +24,11 @@
     "@excalidraw/excalidraw": "^0.18.0",
     "lz-string": "^1.5.0",
     "unist-util-visit": "^5.0.0",
-    "@riebeckite/core": "0.0.21"
+    "@riebeckite/core": "0.0.23"
   },
   "devDependencies": {
-    "@types/mdast": "^4.0.4"
+    "@types/mdast": "^4.0.4",
+    "tsx": "^4.22.4"
   },
   "publishConfig": {
     "access": "public"
@@ -62,6 +63,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }

package/style.css

@@ -54,3 +54,22 @@
     --rr-excalidraw-ink: var(--rb-color-paper, #ffffff);
   }
 }
+
+.rr-excalidraw-page {
+  width: min(100%, 96rem);
+  margin-inline: auto;
+  padding-inline: var(--rb-space-2, 1rem);
+}
+
+.rr-excalidraw-page__title {
+  margin: 0 0 var(--rb-space-2, 1rem);
+  font-family: var(--rb-font-heading, inherit);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+}
+
+.rr-excalidraw-page .rr-excalidraw {
+  width: 100%;
+  margin: 0;
+}