blog/src/components/NoteGraphSidebar.astro

---
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>