Init svelte components

Signed-off-by: Hadi <hadi@example.com>
2026-05-20 13:32:33 +02:00 · 2026-04-28 16:57:00 +02:00
parent f00515e4c3
commit 1025d5bfa1
16 changed files with 1050 additions and 931 deletions
@@ -0,0 +1,104 @@
+---
+import NoteGraph from "./NoteGraph.svelte";
+import Author from "./Author.astro";
+import { formatDate } from "../utils/notes";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  entry: CollectionEntry<"notes">;
+  graphNodes: { id: string; title: string; current: boolean }[];
+  graphEdges: { from: string; to: string }[];
+  forwardLinks: CollectionEntry<"notes">[];
+  backlinks: CollectionEntry<"notes">[];
+}
+
+const { entry, graphNodes, graphEdges, forwardLinks, backlinks } = Astro.props;
+---
+
+<aside
+  id="right-sidebar"
+  class="w-52 flex flex-col border-l border-base-300/60 h-full overflow-y-auto"
+  style="background: oklch(4% 0 0);"
+>
+  <div class="border-b border-base-300/40">
+    <p
+      class="font-mono text-[10px] text-base-content/25 uppercase tracking-widest px-3 pt-3 pb-2"
+    >
+      graph
+    </p>
+    <NoteGraph client:visible nodes={graphNodes} edges={graphEdges} />
+    {
+      graphNodes.length < 2 && (
+        <p class="font-mono text-[9px] text-base-content/20 text-center py-2">
+          no connections yet
+        </p>
+      )
+    }
+  </div>
+
+  {
+    forwardLinks.length > 0 && (
+      <div class="p-3 border-b border-base-300/40">
+        <p class="font-mono text-[10px] text-base-content/25 uppercase tracking-widest mb-2">
+          links
+        </p>
+        <ul class="space-y-1">
+          {forwardLinks.map((n) => (
+            <li>
+              <a
+                href={`/notes/${n.id}`}
+                class="font-mono text-xs text-base-content/45 hover:text-primary/80 transition-colors block truncate"
+              >
+                → {n.data.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+
+  {
+    backlinks.length > 0 && (
+      <div class="p-3">
+        <p class="font-mono text-[10px] text-base-content/25 uppercase tracking-widest mb-2">
+          backlinks
+        </p>
+        <ul class="space-y-1">
+          {backlinks.map((n) => (
+            <li>
+              <a
+                href={`/notes/${n.id}`}
+                class="font-mono text-xs text-base-content/45 hover:text-primary/80 transition-colors block truncate"
+              >
+                ← {n.data.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+
+  {
+    forwardLinks.length === 0 && backlinks.length === 0 && (
+      <div class="p-3">
+        <p class="font-mono text-[9px] text-base-content/20">
+          no linked notes
+        </p>
+      </div>
+    )
+  }
+
+  <div class="px-4 pt-4 pb-1 border-t border-base-300/40 mt-auto">
+    <time
+      datetime={entry.data.publishDate.toISOString()}
+      class="font-mono text-[10px] text-base-content/30 uppercase tracking-widest"
+    >
+      {formatDate(entry.data.publishDate)}
+    </time>
+  </div>
+  <div class="px-4 py-4">
+    <Author />
+  </div>
+</aside>