Articles Network Graph

[noahtigner]

D3 Force Directed Graph showing links between articles

adapted from https://observablehq.com/@d3/force-directed-graph-component
inspired by Quartz: https://quartz.jzhao.xyz/

[Copilot]

Pull request overview

Adds an “Articles Network Graph” feature that builds a link graph from markdown articles and renders it as an interactive force-directed SVG on article pages, alongside introducing Vitest-based unit testing and a small set of layout tweaks.

Changes:

• Add shared graph/link utilities (including D3-based layout) and a React SVG graph component, and render it in Articles.$slug.
• Introduce Vitest config + unit tests for markdown link parsing; run tests in CI.
• Update page layout sizing/centering and make the top-nav title link back home.

Reviewed changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
vitest.config.ts	Adds Vitest configuration and coverage settings.
src/utils/vite/graph.ts	Generates article graph data from Vite raw markdown imports and pre-computes layout.
src/utils/shared/links.ts	Adds markdown link extraction + internal-link filtering/normalization utilities.
src/utils/shared/links.test.ts	Adds unit tests for link extraction and normalization behavior.
src/utils/shared/graph.ts	Adds shared graph construction + D3-force layout computation.
src/utils/node/graph.ts	Adds Node-side graph generation utilities using fs reads.
src/routes/Home.tsx	Centers content and constrains width.
src/routes/Articles.tsx	Wraps articles page in a centered max-width container.
src/routes/Articles.$slug.tsx	Generates graph data and renders sidebar/bottom navigation graphs on article pages.
src/root.tsx	Increases global main container max-width to --size-xl.
src/index.css	Adds size tokens (--size-xl, --size-md, --size-sm).
src/components/TopNav/TopNav.tsx	Makes site title a home link.
src/components/ForceDirectedGraph.tsx	Adds interactive SVG force-directed graph rendering with navigation links.
src/components/Divider.tsx	Adds optional style prop passthrough for layout adjustments.
src/components/Articles/Article.tsx	Refactors article layout into head/sidebar/container pieces and integrates graph nav.
src/assets/articles/databaseInternalsChapter1.md	Shortens article title format.
src/assets/articles/databaseInternalsChapter2.md	Shortens article title format.
src/assets/articles/databaseInternalsChapter3.md	Shortens article title; adds iframe width style.
package.json	Adds D3 + Vitest dependencies and test scripts.
pnpm-lock.yaml	Locks newly added dependencies.
.github/workflows/quality.yml	Runs unit tests in CI.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.