@riebeckite/plugin-local-graph 0.0.19 → 0.0.21

package/README.md

@@ -5,7 +5,7 @@ outgoing links and backlinks.
 
 [日本語](./README_ja.md)
 
-## Overview
+## Recommended placement
 
 `localGraph()` provides a `LocalGraph` component that renders the current note
 plus its direct links as an SVG radial graph. `getLocalGraph()` collects the
@@ -22,7 +22,11 @@ Relations are tagged per node:
 
 The component renders nothing when there is no published neighbor.
 
-## Usage
+`localGraphPlugin()` automatically contributes this component to
+`article.footer`. The Site decides where that semantic slot is rendered; the
+official Starter renders it after article content.
+
+## Quick Start
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -34,15 +38,19 @@ export default defineConfig({
 });
 ```
 
-`localGraphPlugin()` registers the plugin in the plugin list and bundles
-`style.css` into the app stylesheet.
+`localGraphPlugin()` registers the plugin and bundles `style.css` into the app
+stylesheet. Render `<ContentSlot slots={bodySlots} name="article.footer" />`
+once in the article layout to show automatic output.
+
+## Advanced customization
 
-### Render the component
+Set `render: false` to use the public data resolver and component in a
+Site-owned location without duplicating the automatic footer. This leaves graph
+generation and published-neighbor filtering intact.
 
 ```tsx
 import LocalGraph, { getLocalGraph } from "@riebeckite/plugin-local-graph";
-import { config } from "../config";
-import { content } from "../content";
+import { content } from "virtual:riebeckite/content";
 import { getArticleTitle } from "../lib/article-title";
 
 const manifest = await content.getManifest();
@@ -55,12 +63,22 @@ const graph = getLocalGraph({
 
 // ...in your route
 return (
-  <Article
-    footerContent={graph && <LocalGraph graph={graph} />}
-  />
+  <aside>{graph && <LocalGraph graph={graph} />}</aside>
 );
 ```
 
+```ts
+plugins: [localGraphPlugin({ render: false })];
+```
+
+Remove the component to remove manually placed UI.
+
+## Configuration
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `render` | `boolean` | `true` | Append the graph to `article.footer`. Set `false` for manual placement. |
+
 ## Graph layout
 
 Node positions come from `layoutRadialGraph()`: the center node sits at the
@@ -81,6 +99,6 @@ internal selection key `/explore?note=<slug>`.
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.en.md)
+- [Plugin guide](../../../docs/docs/reference/plugin-api.md)
 - [`@riebeckite/plugin-backlinks`](../backlinks/README.md)
 - [`@riebeckite/plugin-garden-explorer`](../garden-explorer/README.md)

package/README_ja.md

@@ -4,13 +4,15 @@
 
 [English](./README.md)
 
-## できること
+## 推奨配置
 
 `getLocalGraph()` はマニフェストからリンク先と被リンク元を集め、公開済みノートだけを残します。各方向は最大 10 件です。`LocalGraph` はそのデータを SVG として描画し、周辺ノートがなければ何も表示しません。
 
+`localGraphPlugin()` は既定で `article.footer` slot に自動追加します。物理的な位置は Site が決め、公式 Starter は記事本文の後でこの slot を描画します。
+
 ノードには `current`、`outgoing`、`backlink`、`both` の関係が付きます。中央が現在のノート、周囲が直接つながるノートです。
 
-## 設定と配置
+## クイックスタート
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -19,6 +21,12 @@ import { localGraphPlugin } from "@riebeckite/plugin-local-graph";
 export default defineConfig({ plugins: [localGraphPlugin()] });
 ```
 
+記事レイアウトで `<ContentSlot slots={bodySlots} name="article.footer" />` を一度描画します。
+
+## 高度なカスタマイズ
+
+重複させずに Site 側で配置を決めるには、`render: false` を指定します。グラフの生成と公開済み近傍だけを残すフィルタリングは維持されます。
+
 ```tsx
 import LocalGraph, { getLocalGraph } from "@riebeckite/plugin-local-graph";
 
@@ -26,6 +34,16 @@ const graph = getLocalGraph({ manifest: await content.getManifest(), config, slu
 return <Article footerContent={graph && <LocalGraph graph={graph} />} />;
 ```
 
+```ts
+plugins: [localGraphPlugin({ render: false })];
+```
+
+## 設定
+
+| オプション | 型 | 既定値 | 説明 |
+| --- | --- | --- | --- |
+| `render` | `boolean` | `true` | `article.footer` への自動追加。手動配置では `false`。 |
+
 グラフのノード位置は `layoutRadialGraph()`、辺は `buildGraphEdges()` が計算します。各ノードのリンクは解決済みの `permalink` を使い、見出しは internal selection key `/explore?note=<slug>` で Explorer を開きます。
 
 ## 公開 API
@@ -37,7 +55,6 @@ return <Article footerContent={graph && <LocalGraph graph={graph} />} />;
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/docs/reference/plugin-api.md)
+- [プラグインシステム](../../../docs/docs/reference/plugin-api.ja.md)
 - [`@riebeckite/plugin-backlinks`](../backlinks/README_ja.md)
 - [`@riebeckite/plugin-garden-explorer`](../garden-explorer/README_ja.md)
-

package/dist/components/local-graph.js

@@ -17,18 +17,18 @@ function LocalGraph(props) {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      class: "local-graph rr-local-graph max-w-4xl mx-auto px-4",
+      class: "rr-local-graph max-w-4xl mx-auto px-4",
       "aria-labelledby": "local-graph-title",
       children: [
-        /* @__PURE__ */ jsxs("div", { class: "local-graph__header", children: [
+        /* @__PURE__ */ jsxs("div", { class: "rr-local-graph__header", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { class: "local-graph__eyebrow", children: "Local Graph" }),
+            /* @__PURE__ */ jsx("p", { class: "rr-local-graph__eyebrow", children: "Local Graph" }),
             /* @__PURE__ */ jsx("h2", { id: "local-graph-title", children: "Nearby Notes" })
           ] }),
           /* @__PURE__ */ jsx(
             "a",
             {
-              class: "local-graph__explorer-link",
+              class: "rr-local-graph__explorer-link",
               href: `/explore?note=${encodeURIComponent(props.graph.currentSlug)}`,
               children: "Open in Explorer →"
             }
@@ -37,7 +37,7 @@ function LocalGraph(props) {
         /* @__PURE__ */ jsxs(
           "svg",
           {
-            class: "local-graph__canvas",
+            class: "rr-local-graph__canvas",
             viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`,
             role: "img",
             "aria-label": "Local graph of outgoing links and backlinks",
@@ -49,7 +49,7 @@ function LocalGraph(props) {
                 return /* @__PURE__ */ jsx(
                   "line",
                   {
-                    class: "local-graph__edge",
+                    class: "rr-local-graph__edge",
                     "data-direction": edge.source === props.graph.currentSlug ? "outgoing" : "backlink",
                     x1: source.x,
                     y1: source.y,
@@ -66,7 +66,7 @@ function LocalGraph(props) {
                 return /* @__PURE__ */ jsx(
                   "g",
                   {
-                    class: "local-graph__node",
+                    class: "rr-local-graph__node",
                     "data-relation": node.relation,
                     children: /* @__PURE__ */ jsxs(
                       "a",
@@ -102,7 +102,7 @@ function LocalGraph(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { class: "local-graph__legend", children: [
+        /* @__PURE__ */ jsxs("div", { class: "rr-local-graph__legend", children: [
           /* @__PURE__ */ jsxs("span", { children: [
             /* @__PURE__ */ jsx("i", { "data-kind": "current" }),
             "Current"

package/dist/index.d.ts

@@ -3,4 +3,7 @@ export { default as LocalGraph } from "./components/local-graph.js";
 export type { LocalGraphData, LocalGraphNode, LocalGraphNodeRelation, } from "./src/local-graph.js";
 export { getLocalGraph } from "./src/local-graph.server.js";
 export { buildGraphEdges, layoutRadialGraph };
-export declare function localGraphPlugin(): import("@riebeckite/core").RiebeckitePlugin<unknown>;
+export type LocalGraphOptions = {
+    render?: boolean;
+};
+export declare function localGraphPlugin(options?: LocalGraphOptions): import("@riebeckite/core").RiebeckitePlugin<LocalGraphOptions>;

package/dist/index.js

@@ -26,18 +26,18 @@ function LocalGraph(props) {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      class: "local-graph rr-local-graph max-w-4xl mx-auto px-4",
+      class: "rr-local-graph max-w-4xl mx-auto px-4",
       "aria-labelledby": "local-graph-title",
       children: [
-        /* @__PURE__ */ jsxs("div", { class: "local-graph__header", children: [
+        /* @__PURE__ */ jsxs("div", { class: "rr-local-graph__header", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { class: "local-graph__eyebrow", children: "Local Graph" }),
+            /* @__PURE__ */ jsx("p", { class: "rr-local-graph__eyebrow", children: "Local Graph" }),
             /* @__PURE__ */ jsx("h2", { id: "local-graph-title", children: "Nearby Notes" })
           ] }),
           /* @__PURE__ */ jsx(
             "a",
             {
-              class: "local-graph__explorer-link",
+              class: "rr-local-graph__explorer-link",
               href: `/explore?note=${encodeURIComponent(props.graph.currentSlug)}`,
               children: "Open in Explorer →"
             }
@@ -46,7 +46,7 @@ function LocalGraph(props) {
         /* @__PURE__ */ jsxs(
           "svg",
           {
-            class: "local-graph__canvas",
+            class: "rr-local-graph__canvas",
             viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`,
             role: "img",
             "aria-label": "Local graph of outgoing links and backlinks",
@@ -58,7 +58,7 @@ function LocalGraph(props) {
                 return /* @__PURE__ */ jsx(
                   "line",
                   {
-                    class: "local-graph__edge",
+                    class: "rr-local-graph__edge",
                     "data-direction": edge.source === props.graph.currentSlug ? "outgoing" : "backlink",
                     x1: source.x,
                     y1: source.y,
@@ -75,7 +75,7 @@ function LocalGraph(props) {
                 return /* @__PURE__ */ jsx(
                   "g",
                   {
-                    class: "local-graph__node",
+                    class: "rr-local-graph__node",
                     "data-relation": node.relation,
                     children: /* @__PURE__ */ jsxs(
                       "a",
@@ -111,7 +111,7 @@ function LocalGraph(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { class: "local-graph__legend", children: [
+        /* @__PURE__ */ jsxs("div", { class: "rr-local-graph__legend", children: [
           /* @__PURE__ */ jsxs("span", { children: [
             /* @__PURE__ */ jsx("i", { "data-kind": "current" }),
             "Current"
@@ -185,11 +185,14 @@ function getRelation(slug, currentSlug, outgoing, backlinks) {
 }
 
 // index.ts
-function localGraphPlugin() {
+function localGraphPlugin(options = {}) {
   return definePlugin({
     name: "local-graph",
     order: 400,
+    options,
+    validateOptions: validateLocalGraphOptions,
     onManifestCreated: ({ config, manifest }) => {
+      if (options.render === false) return;
       if (!config) return;
       for (const entry of manifest.discoverableEntries) {
         const graph = getLocalGraph({
@@ -215,6 +218,12 @@ function localGraphPlugin() {
     ]
   });
 }
+function validateLocalGraphOptions(options) {
+  if (!options || options.render === void 0 || typeof options.render === "boolean") {
+    return [];
+  }
+  return [{ path: "render", message: "Expected a boolean." }];
+}
 function resolveTitle(slug, title) {
   if (typeof title === "string" && title.trim()) return title;
   return slug.split("/").at(-1) ?? slug;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-local-graph",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,11 +22,11 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.19"
+    "@riebeckite/core": "0.0.21"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.19"
+    "@riebeckite/test": "0.0.21"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -1,11 +1,11 @@
 @layer components {
-  .local-graph {
+  .rr-local-graph {
     margin-block-start: var(--rb-space-6, 3rem);
     padding-top: 1.5rem;
     border-top: var(--rb-rule-width) solid var(--rb-color-border);
   }
 
-  .local-graph__header {
+  .rr-local-graph__header {
     display: flex;
     justify-content: space-between;
     align-items: end;
@@ -13,7 +13,7 @@
     margin-bottom: var(--rb-space-1);
   }
 
-  .local-graph__eyebrow {
+  .rr-local-graph__eyebrow {
     margin: 0 0 0.25rem;
     color: var(--rb-color-muted);
     font-size: 0.75rem;
@@ -22,13 +22,13 @@
     text-transform: uppercase;
   }
 
-  .local-graph h2 {
+  .rr-local-graph h2 {
     margin: 0;
     font-size: clamp(1.4rem, 4vw, 2rem);
     line-height: 1.1;
   }
 
-  .local-graph__explorer-link {
+  .rr-local-graph__explorer-link {
     flex: none;
     color: var(--rb-color-ink);
     font-size: 0.9rem;
@@ -37,13 +37,13 @@
     border-bottom: var(--rb-rule-width) solid currentColor;
   }
 
-  .local-graph__explorer-link:focus-visible,
-  .local-graph__node a:focus-visible {
+  .rr-local-graph__explorer-link:focus-visible,
+  .rr-local-graph__node a:focus-visible {
     outline: 2px solid var(--rb-color-accent);
     outline-offset: 2px;
   }
 
-  .local-graph__canvas {
+  .rr-local-graph__canvas {
     display: block;
     width: 100%;
     min-height: 16rem;
@@ -54,54 +54,54 @@
     background-size: 40px 40px;
   }
 
-  .local-graph__edge {
+  .rr-local-graph__edge {
     stroke: var(--rb-color-border);
     stroke-width: 1.2;
   }
 
-  .local-graph__edge[data-direction="backlink"] {
+  .rr-local-graph__edge[data-direction="backlink"] {
     stroke-dasharray: 4 4;
   }
 
-  .local-graph__node a {
+  .rr-local-graph__node a {
     color: var(--rb-color-ink);
     cursor: pointer;
     text-decoration: none;
   }
 
-  .local-graph__node circle {
+  .rr-local-graph__node circle {
     fill: var(--rb-color-paper);
     stroke: var(--rb-color-ink);
     stroke-width: 1.5;
   }
 
-  .local-graph__node[data-relation="current"] circle {
+  .rr-local-graph__node[data-relation="current"] circle {
     fill: var(--rb-color-accent);
     stroke: var(--rb-color-accent);
   }
 
-  .local-graph__node[data-relation="backlink"] circle {
+  .rr-local-graph__node[data-relation="backlink"] circle {
     stroke-dasharray: 3 3;
   }
 
-  .local-graph__node[data-relation="both"] circle {
+  .rr-local-graph__node[data-relation="both"] circle {
     fill: color-mix(in srgb, var(--rb-color-accent) 18%, var(--rb-color-paper));
   }
 
-  .local-graph__node text {
+  .rr-local-graph__node text {
     fill: currentColor;
     font-size: 0.78rem;
     font-weight: 600;
     pointer-events: none;
   }
 
-  .local-graph__explorer-link:hover,
-  .local-graph__node a:hover text {
+  .rr-local-graph__explorer-link:hover,
+  .rr-local-graph__node a:hover text {
     color: var(--rb-color-accent);
     fill: var(--rb-color-accent);
   }
 
-  .local-graph__legend {
+  .rr-local-graph__legend {
     display: flex;
     flex-wrap: wrap;
     gap: var(--rb-space-1);
@@ -110,39 +110,39 @@
     font-size: 0.8rem;
   }
 
-  .local-graph__legend span {
+  .rr-local-graph__legend span {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
   }
 
-  .local-graph__legend i {
+  .rr-local-graph__legend i {
     width: 0.75rem;
     height: 0.75rem;
     border: var(--rb-rule-width) solid var(--rb-color-ink);
     border-radius: 999px;
   }
 
-  .local-graph__legend i[data-kind="current"] {
+  .rr-local-graph__legend i[data-kind="current"] {
     background: var(--rb-color-accent);
     border-color: var(--rb-color-accent);
   }
 
-  .local-graph__legend i[data-kind="backlink"] {
+  .rr-local-graph__legend i[data-kind="backlink"] {
     border-style: dashed;
   }
 
   @media (max-width: 640px) {
-    .local-graph__header {
+    .rr-local-graph__header {
       display: grid;
       align-items: start;
     }
 
-    .local-graph__canvas {
+    .rr-local-graph__canvas {
       min-height: 13rem;
     }
 
-    .local-graph__node text {
+    .rr-local-graph__node text {
       font-size: 0.68rem;
     }
   }