@riebeckite/plugin-garden-explorer 0.0.1

package/dist/components/garden-explorer.js

@@ -0,0 +1,452 @@
+// components/garden-explorer.tsx
+import { layoutRadialGraph } from "@riebeckite/core";
+import { useEffect, useMemo, useState } from "hono/jsx";
+
+// src/search-notes.ts
+var FIELD_WEIGHTS = {
+  slug: 64,
+  title: 56,
+  tags: 44,
+  headings: 32,
+  body: 10
+};
+function searchGardenExplorerNotes(notes, query) {
+  const normalizedQuery = normalizeSearchQuery(query);
+  if (normalizedQuery.length === 0) return [];
+  return notes.map((note) => scoreNote(note, normalizedQuery)).filter(
+    (result) => result !== null
+  ).sort(
+    (a, b) => b.score - a.score || a.note.title.localeCompare(b.note.title, "ja")
+  ).map(({ note }) => note);
+}
+function normalizeSearchQuery(value) {
+  return normalizeSearchText(value).replace(/^#+/, "");
+}
+function normalizeSearchText(value) {
+  return value.toLocaleLowerCase().normalize("NFKC").replace(
+    /[ァ-ン]/g,
+    (char) => String.fromCharCode(char.charCodeAt(0) - 96)
+  );
+}
+function scoreNote(note, normalizedQuery) {
+  const matches = [
+    scoreField("title", note.title, normalizedQuery),
+    scoreField("slug", note.slug, normalizedQuery),
+    ...note.tags.map((tag) => scoreField("tags", tag, normalizedQuery)),
+    ...note.headings.map(
+      (heading) => scoreField("headings", heading, normalizedQuery)
+    ),
+    scoreField("body", note.body, normalizedQuery)
+  ].filter((match) => match.score > 0);
+  if (matches.length === 0) return null;
+  return {
+    note,
+    score: matches.reduce((total, match) => total + match.score, 0)
+  };
+}
+function scoreField(field, value, normalizedQuery) {
+  const normalizedValue = normalizeSearchText(value);
+  const index = normalizedValue.indexOf(normalizedQuery);
+  const weight = FIELD_WEIGHTS[field];
+  if (normalizedValue === normalizedQuery) return { score: weight * 3 };
+  if (index !== -1) return { score: weight * (index === 0 ? 2 : 1) };
+  const fuzzyScore = scoreFuzzyMatch(normalizedValue, normalizedQuery);
+  return { score: fuzzyScore > 0 ? Math.round(weight * fuzzyScore) : 0 };
+}
+function scoreFuzzyMatch(value, query) {
+  if (query.length < 2) return 0;
+  let valueIndex = 0;
+  let matched = 0;
+  let gaps = 0;
+  for (const queryCharacter of query) {
+    const nextIndex = value.indexOf(queryCharacter, valueIndex);
+    if (nextIndex === -1) return 0;
+    gaps += nextIndex - valueIndex;
+    valueIndex = nextIndex + 1;
+    matched += 1;
+  }
+  const coverage = matched / Math.max(value.length, query.length);
+  const continuityPenalty = Math.min(gaps / Math.max(value.length, 1), 0.8);
+  return Math.max(0, coverage * (1 - continuityPenalty));
+}
+
+// components/garden-explorer.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+var GRAPH_WIDTH = 900;
+var GRAPH_HEIGHT = 620;
+var MIN_SCALE = 0.6;
+var MAX_SCALE = 2.4;
+function GardenExplorer(props) {
+  const noteBySlug = useMemo(
+    () => new Map(props.data.notes.map((note) => [note.slug, note])),
+    [props.data.notes]
+  );
+  const [query, setQuery] = useState("");
+  const [selectedTag, setSelectedTag] = useState(null);
+  const [selectedFolder, setSelectedFolder] = useState(null);
+  const [selectedSlug, setSelectedSlug] = useState(
+    () => props.data.notes[0]?.slug ?? ""
+  );
+  const [mobilePanel, setMobilePanel] = useState("graph");
+  const [view, setView] = useState({ x: 0, y: 0, scale: 1 });
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const note = params.get("note");
+    const tag = params.get("tag");
+    const folder = params.get("folder");
+    if (note && noteBySlug.has(note)) setSelectedSlug(note);
+    if (tag) setSelectedTag(tag);
+    if (folder) setSelectedFolder(folder);
+  }, [noteBySlug]);
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (selectedSlug) params.set("note", selectedSlug);
+    if (selectedTag) params.set("tag", selectedTag);
+    if (selectedFolder) params.set("folder", selectedFolder);
+    const next = params.toString() ? `/explore?${params}` : "/explore";
+    window.history.replaceState(null, "", next);
+  }, [selectedSlug, selectedTag, selectedFolder]);
+  const filteredNotes = useMemo(() => {
+    const base = props.data.notes.filter((note) => {
+      if (selectedTag && !note.tags.includes(selectedTag)) return false;
+      if (selectedFolder && note.folder !== selectedFolder) return false;
+      return true;
+    });
+    const searched = query ? searchGardenExplorerNotes(base, query) : base;
+    return searched.slice(0, 80);
+  }, [props.data.notes, query, selectedTag, selectedFolder]);
+  const visibleSlugSet = useMemo(
+    () => new Set(filteredNotes.map((note) => note.slug)),
+    [filteredNotes]
+  );
+  const visibleEdges = useMemo(
+    () => props.data.edges.filter(
+      (edge) => visibleSlugSet.has(edge.source) && visibleSlugSet.has(edge.target)
+    ),
+    [props.data.edges, visibleSlugSet]
+  );
+  const graphNodes = useMemo(
+    () => layoutNodes(filteredNotes, selectedSlug),
+    [filteredNotes, selectedSlug]
+  );
+  const selectedNote = noteBySlug.get(selectedSlug) ?? filteredNotes[0] ?? null;
+  const relatedNotes = useMemo(
+    () => selectedNote ? getRelatedNotes(selectedNote, props.data.notes) : [],
+    [selectedNote, props.data.notes]
+  );
+  const selectNote = (slug) => {
+    setSelectedSlug(slug);
+    setMobilePanel("details");
+  };
+  const clearFilters = () => {
+    setQuery("");
+    setSelectedTag(null);
+    setSelectedFolder(null);
+  };
+  const zoom = (delta) => {
+    setView((current) => ({
+      ...current,
+      scale: clamp(current.scale + delta, MIN_SCALE, MAX_SCALE)
+    }));
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer rr-garden-explorer", "data-garden-explorer": true, children: [
+    /* @__PURE__ */ jsxs("fieldset", { class: "garden-explorer__mobile-tabs", children: [
+      /* @__PURE__ */ jsx("legend", { class: "sr-only", children: "Explorer panels" }),
+      ["graph", "explorer", "details"].map((panel) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          class: "garden-explorer__mobile-tab",
+          "aria-pressed": mobilePanel === panel,
+          onClick: () => setMobilePanel(panel),
+          children: panel
+        }
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { class: panelClass("explorer", mobilePanel), children: [
+      /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section", children: [
+        /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Explorer" }),
+        /* @__PURE__ */ jsxs("label", { class: "garden-explorer__search", children: [
+          /* @__PURE__ */ jsx("span", { class: "sr-only", children: "Search notes" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: query,
+              placeholder: "Search notes...",
+              onInput: (event) => setQuery(event.currentTarget.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "garden-explorer__text-button",
+            onClick: clearFilters,
+            children: "Clear filters"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        FilterList,
+        {
+          title: "Tags",
+          items: props.data.tags.map((tag) => ({
+            key: tag.name,
+            label: `#${tag.name}`,
+            count: tag.count
+          })),
+          selectedKey: selectedTag,
+          onSelect: (key) => setSelectedTag(key === selectedTag ? null : key)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FilterList,
+        {
+          title: "Folders",
+          items: props.data.folders.map((folder) => ({
+            key: folder.path,
+            label: folder.path,
+            count: folder.count
+          })),
+          selectedKey: selectedFolder,
+          onSelect: (key) => setSelectedFolder(key === selectedFolder ? null : key)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section", children: [
+        /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Notes" }),
+        /* @__PURE__ */ jsx(
+          NoteList,
+          {
+            notes: filteredNotes,
+            selectedSlug,
+            onSelect: selectNote
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { class: panelClass("graph", mobilePanel), "aria-label": "Note graph", children: [
+      /* @__PURE__ */ jsxs("div", { class: "garden-explorer__graph-toolbar", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          filteredNotes.length,
+          " notes"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => zoom(-0.2),
+              "aria-label": "Zoom out",
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => zoom(0.2),
+              "aria-label": "Zoom in",
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setView({ x: 0, y: 0, scale: 1 }),
+              children: "Reset"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          class: "garden-graph",
+          viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`,
+          role: "img",
+          "aria-label": "Interactive graph of notes and internal links",
+          onWheel: (event) => {
+            event.preventDefault();
+            zoom(event.deltaY > 0 ? -0.1 : 0.1);
+          },
+          onPointerMove: (event) => {
+            if (event.buttons !== 1) return;
+            setView((current) => ({
+              ...current,
+              x: current.x + event.movementX / current.scale,
+              y: current.y + event.movementY / current.scale
+            }));
+          },
+          children: /* @__PURE__ */ jsxs("g", { transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
+            visibleEdges.map((edge) => {
+              const source = graphNodes.get(edge.source);
+              const target = graphNodes.get(edge.target);
+              if (!source || !target) return null;
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  class: "garden-graph__edge",
+                  x1: source.x,
+                  y1: source.y,
+                  x2: target.x,
+                  y2: target.y
+                },
+                `${edge.source}-${edge.target}`
+              );
+            }),
+            filteredNotes.map((note) => {
+              const node = graphNodes.get(note.slug);
+              if (!node) return null;
+              const selected = note.slug === selectedSlug;
+              return /* @__PURE__ */ jsx("g", { class: "garden-graph__node", children: /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: `/explore?note=${encodeURIComponent(note.slug)}`,
+                  "aria-label": `Select ${note.title}`,
+                  onClick: (event) => {
+                    event.preventDefault();
+                    selectNote(note.slug);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: node.x,
+                        cy: node.y,
+                        r: selected ? 15 : node.radius,
+                        "data-selected": selected ? "true" : "false"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("text", { x: node.x + 18, y: node.y + 5, children: note.title })
+                  ]
+                }
+              ) }, note.slug);
+            })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("aside", { class: panelClass("details", mobilePanel), children: selectedNote ? /* @__PURE__ */ jsx(
+      NoteDetails,
+      {
+        note: selectedNote,
+        noteBySlug,
+        relatedNotes,
+        onSelect: selectNote
+      }
+    ) : /* @__PURE__ */ jsx("p", { class: "garden-explorer__empty", children: "Select a note to inspect links." }) })
+  ] });
+}
+function FilterList(props) {
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: props.title }),
+    /* @__PURE__ */ jsx("div", { class: "garden-explorer__chips", children: props.items.slice(0, 28).map((item) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        class: "garden-explorer__chip",
+        "aria-pressed": props.selectedKey === item.key,
+        onClick: () => props.onSelect(item.key),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          /* @__PURE__ */ jsx("span", { children: item.count })
+        ]
+      },
+      item.key
+    )) })
+  ] });
+}
+function NoteList(props) {
+  return /* @__PURE__ */ jsx("ul", { class: "garden-explorer__note-list", children: props.notes.map((note) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": props.selectedSlug === note.slug,
+      onClick: () => props.onSelect(note.slug),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: note.title }),
+        /* @__PURE__ */ jsx("small", { children: note.folder })
+      ]
+    }
+  ) }, note.slug)) });
+}
+function NoteDetails(props) {
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__details", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Selected Note" }),
+    /* @__PURE__ */ jsx("h2", { children: /* @__PURE__ */ jsx("a", { href: props.note.permalink, children: props.note.title }) }),
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__path", children: props.note.slug }),
+    props.note.excerpt && /* @__PURE__ */ jsx("p", { children: props.note.excerpt }),
+    /* @__PURE__ */ jsx("div", { class: "garden-explorer__tag-row", children: props.note.tags.map((tag) => /* @__PURE__ */ jsxs("span", { children: [
+      "#",
+      tag
+    ] }, tag)) }),
+    /* @__PURE__ */ jsx(
+      LinkedNoteSection,
+      {
+        title: "Outgoing Links",
+        slugs: props.note.outgoing,
+        noteBySlug: props.noteBySlug,
+        onSelect: props.onSelect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LinkedNoteSection,
+      {
+        title: "Backlinks",
+        slugs: props.note.backlinks,
+        noteBySlug: props.noteBySlug,
+        onSelect: props.onSelect
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section garden-explorer__section--flush", children: [
+      /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Related Notes" }),
+      /* @__PURE__ */ jsx(
+        NoteList,
+        {
+          notes: props.relatedNotes,
+          selectedSlug: props.note.slug,
+          onSelect: props.onSelect
+        }
+      )
+    ] })
+  ] });
+}
+function LinkedNoteSection(props) {
+  const notes = props.slugs.map((slug) => props.noteBySlug.get(slug)).filter((note) => note !== void 0);
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section garden-explorer__section--flush", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: props.title }),
+    notes.length > 0 ? /* @__PURE__ */ jsx(NoteList, { notes, selectedSlug: "", onSelect: props.onSelect }) : /* @__PURE__ */ jsx("p", { class: "garden-explorer__empty", children: "No notes." })
+  ] });
+}
+function layoutNodes(notes, selectedSlug) {
+  return layoutRadialGraph(notes, {
+    width: GRAPH_WIDTH,
+    height: GRAPH_HEIGHT,
+    centerSlug: selectedSlug
+  });
+}
+function getRelatedNotes(selectedNote, notes) {
+  const directSlugs = /* @__PURE__ */ new Set([
+    ...selectedNote.outgoing,
+    ...selectedNote.backlinks
+  ]);
+  const selectedTags = new Set(selectedNote.tags);
+  return notes.filter((note) => note.slug !== selectedNote.slug).map((note) => ({
+    note,
+    score: (directSlugs.has(note.slug) ? 8 : 0) + note.tags.filter((tag) => selectedTags.has(tag)).length * 3
+  })).filter((item) => item.score > 0).sort(
+    (a, b) => b.score - a.score || a.note.title.localeCompare(b.note.title, "ja")
+  ).slice(0, 8).map((item) => item.note);
+}
+function panelClass(panel, activePanel) {
+  return `garden-explorer__panel garden-explorer__panel--${panel}${panel === activePanel ? " garden-explorer__panel--active" : ""}`;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+export {
+  GardenExplorer as default
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GardenExplorer } from "./components/garden-explorer.js";
+export type { GardenExplorerData, GardenExplorerEdge, GardenExplorerFolder, GardenExplorerNote, GardenExplorerTag, } from "./src/garden-explorer.js";
+export { getGardenExplorerData } from "./src/garden-explorer.server.js";
+export declare function gardenExplorerPlugin(): import("@riebeckite/core").RiebeckitePlugin<unknown>;