Refactor the website around a Typst-backed reduction graph

.github/workflows/docs.yml

@@ -7,8 +7,6 @@ on:
 
 permissions:
   contents: read
-  pages: write
-  id-token: write
 
 concurrency:
   group: "pages"
@@ -30,12 +28,16 @@ jobs:
       - name: Install mdBook
         run: |
           mkdir -p "$HOME/bin"
-          curl -sSL https://github.com/rust-lang/mdBook/releases/download/v0.4.37/mdbook-v0.4.37-x86_64-unknown-linux-gnu.tar.gz | tar -xz -C "$HOME/bin"
+          curl -fLsS https://github.com/rust-lang/mdBook/releases/download/v0.5.2/mdbook-v0.5.2-x86_64-unknown-linux-gnu.tar.gz -o mdbook.tar.gz
+          echo '084e4342ba564db270108763e404a7d1f309d932651a22484e93c0dc1a071f6d  mdbook.tar.gz' | sha256sum --check
+          tar -xzf mdbook.tar.gz -C "$HOME/bin"
           echo "$HOME/bin" >> $GITHUB_PATH
 
       - name: Install Typst
         run: |
-          curl -sSL https://github.com/typst/typst/releases/download/v0.14.0/typst-x86_64-unknown-linux-musl.tar.xz | tar -xJ
+          curl -fLsS https://github.com/typst/typst/releases/download/v0.15.1/typst-x86_64-unknown-linux-musl.tar.xz -o typst.tar.xz
+          echo 'a6d077d0a95eed5a2eba715b2dae06be954f624ccbf85758a03f389ded33118c  typst.tar.xz' | sha256sum --check
+          tar -xJf typst.tar.xz
           mv typst-x86_64-unknown-linux-musl/typst "$HOME/bin/"
 
       - name: Install Node dependencies
@@ -54,9 +56,6 @@ jobs:
       - name: Build mdBook
         run: mdbook build
 
-      - name: Build research website
-        run: python3 scripts/build_website.py
-
       - name: Build PDF
         run: typst compile --root . docs/paper/reductions.typ book/reductions.pdf
 
@@ -68,21 +67,38 @@ jobs:
           mkdir -p book/api
           cp -r target/doc/* book/api/
 
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
+      - name: Build research website
+        run: python3 scripts/build_website.py
+
+      - name: Verify deployment artifact
+        run: |
+          python3 -m pip install playwright==1.58.0
+          python3 -m playwright install --with-deps chromium
+          npm audit --audit-level=moderate
+          npm run test:reduction-graph-js
+          python3 -m unittest discover -s scripts -p 'test_website_build.py'
+          python3 -m http.server 3001 --bind 127.0.0.1 --directory book &
+          server_pid=$!
+          trap 'kill "$server_pid"' EXIT
+          python3 scripts/test_website.py
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: './book'
 
   deploy:
+    permissions:
+      pages: write
+      id-token: write
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     needs: build
     steps:
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

Makefile

@@ -102,14 +102,17 @@ doc: node_modules/elkjs/package.json
 	cargo build -p problemreductions-cli --bin pred
 	bash scripts/generate_doc_snippets.sh target/debug/pred
 	mdbook build
-	python3 scripts/build_website.py
 	RUSTDOCFLAGS="--default-theme=dark" cargo doc --no-deps
 	rm -rf book/api
 	cp -r target/doc book/api
+	python3 scripts/build_website.py
 
 # Build the product website with fresh atlas data; API/PDF builds remain in doc/paper.
-website:
+website: node_modules/elkjs/package.json
+	cargo run --features "$(TEST_FEATURES)" --example export_examples
+	cargo run --features "$(TEST_FEATURES)" --example export_petersen_mapping
 	cargo run --example export_graph
+	node scripts/generate_reduction_graph_layout.js
 	cargo run --example export_schemas
 	cargo build -p problemreductions-cli --bin pred
 	bash scripts/generate_doc_snippets.sh target/debug/pred

book.toml

@@ -9,8 +9,8 @@ src = "docs/src"
 default-theme = "navy"
 git-repository-url = "https://github.com/CodingThrust/problem-reductions"
 edit-url-template = "https://github.com/CodingThrust/problem-reductions/edit/main/{path}"
-additional-css = ["docs/src/static/docs-theme.css", "docs/src/static/theme-images.css", "docs/src/static/reduction-graph.css"]
-additional-js = ["docs/src/static/docs-theme.js", "docs/src/static/cytoscape.min.js", "docs/src/static/reduction-graph.js"]
+additional-css = ["docs/src/static/docs-theme.css", "docs/src/static/theme-images.css"]
+additional-js = ["docs/src/static/docs-theme.js"]
 no-section-label = true
 
 [output.html.fold]

docs/paper/reductions.typ

@@ -51,6 +51,7 @@
 #import "@preview/cetz:0.4.2": canvas, draw
 #import "@preview/ctheorems:1.1.3": thmbox, thmplain, thmproof, thmrules
 #import "lib.typ": g-node, g-edge, petersen-graph, house-graph, octahedral-graph, draw-grid-graph, draw-triangular-graph, graph-colors, selem, sregion, draw-node-highlight, draw-edge-highlight, draw-node-colors, sregion-selected, sregion-dimmed, gate-and, gate-or, gate-xor
+#import "web.typ": export-details, detail-key, detail-article
 
 #set page(
   paper: "a4",
@@ -64,6 +65,36 @@
 
 // Set up theorem environments with ctheorems
 #show: thmrules.with(qed-symbol: $square$)
+#show math.equation: it => context {
+  if export-details and target() == "html" {
+    html.elem(if it.block { "div" } else { "span" }, attrs: (class: "typst-math"), html.frame(it))
+  } else { it }
+}
+#show figure: it => context {
+  if export-details and target() == "html" {
+    html.elem("figure")[
+      #html.frame(it.body)
+      #if it.caption != none { html.elem("figcaption", it.caption.body) }
+    ]
+  } else { it }
+}
+#show block: it => context {
+  if export-details and target() == "html" {
+    if it.height != auto { html.frame(it) } else { html.elem("div", it.body) }
+  } else { it }
+}
+#show align: it => context {
+  if export-details and target() == "html" { it.body } else { it }
+}
+#show pad: it => context {
+  if export-details and target() == "html" { it.body } else { it }
+}
+#show grid: it => context {
+  if export-details and target() == "html" { html.frame(it) } else { it }
+}
+#show stack: it => context {
+  if export-details and target() == "html" { html.frame(it) } else { it }
+}
 
 // === Example JSON helpers ===
 // Load the generated canonical example database.
@@ -515,6 +546,7 @@
 
 // Render a block of pred CLI commands for reproducibility
 #let pred-commands(..cmds) = {
+  if export-details { return raw(cmds.pos().join("\n"), block: true) }
   block(
     width: 100%,
     fill: luma(245),
@@ -545,8 +577,22 @@
 )
 
 // Problem definition wrapper: auto-adds schema, complexity, reductions list, and label
-#let problem-def(name, def, body) = {
-  let lbl = label("def:" + name)
+#show ref: it => context {
+  let name = str(it.target)
+  if export-details and target() == "html" and name.starts-with("def:") {
+    link(it.target, display-name.at(name.slice(4)))
+  } else { it }
+}
+#let problem-def(name, def, body, variant: none) = {
+  if export-details {
+    return detail-article("problem:" + detail-key(name, variant))[
+      #html.elem("h3")[Definition]
+      #def
+      #html.elem("h3")[Background and example]
+      #body
+    ]
+  }
+  let lbl = label("def:" + detail-key(name, variant))
   let title = display-name.at(name)
   [#definition(title)[
     #def
@@ -600,8 +646,23 @@
   example-target-variant: none,
   example-caption: none,
   extra: none,
+  source-variant: none,
+  target-variant: none,
   theorem-body, proof-body,
 ) = {
+  if export-details {
+    return detail-article("rule:" + detail-key(source, source-variant) + "->" + detail-key(target, target-variant))[
+      #html.elem("h3")[Reduction]
+      #theorem-body
+      #html.elem("h3")[Proof]
+      #proof-body
+      #if example {
+        html.elem("h3")[Example]
+        if example-caption != none { strong(example-caption) }
+        extra
+      }
+    ]
+  }
   let arrow = sym.arrow.r
   let edge = find-edge(source, target)
   let src-disp = if edge != none { variant-display(graph-data.nodes.at(edge.source)) }
@@ -611,7 +672,7 @@
   let src-lbl = label("def:" + source)
   let tgt-lbl = label("def:" + target)
   let parameters = if edge != none and edge.parameters.len() > 0 { edge.parameters } else { none }
-  let thm-lbl = label("thm:" + source + "-to-" + target)
+  let thm-lbl = label("thm:" + detail-key(source, source-variant) + "-to-" + detail-key(target, target-variant))
   covered-rules.update(old => old + ((source, target),))
 
   [
@@ -19475,4 +19536,8 @@ The following table shows concrete target-variable counts for example instances,
 ]
 
 #pagebreak()
-#bibliography("references.bib", style: "ieee")
+#if export-details {
+  detail-article("references")[#bibliography("references.bib", style: "ieee")]
+} else {
+  bibliography("references.bib", style: "ieee")
+}

docs/paper/web.typ

@@ -0,0 +1,12 @@
+// Web presentation only; all definitions, proofs, and examples stay in reductions.typ.
+#let export-details = sys.inputs.at("details", default: "false") == "true"
+
+#let detail-key(name, variant) = {
+  if variant == none { return name }
+  name + "/" + variant.keys().sorted().map(key => key + "=" + str(variant.at(key))).join(",")
+}
+
+#let detail-article(key, body) = {
+  let anchor = key.replace("problem:", "def:").replace("rule:", "thm:").replace("->", "-to-")
+  [#html.elem("article", attrs: ("data-detail-key": key), body)#label(anchor)]
+}

docs/src/SUMMARY.md

@@ -6,7 +6,6 @@
 
 - [Quick start](cli.md)
 - [Command reference](cli-commands.md)
-- [Reduction graph](reduction-graph.md)
 
 # Agents
 
@@ -17,7 +16,3 @@
 - [Getting started](getting-started.md)
 - [API reference](api.md)
 - [Design](design.md)
-
-# Research
-
-- [Open problems](open-problems.md)

docs/src/static/docs-theme.css

@@ -20,7 +20,8 @@ html[class] {
   --sidebar-fg: #adb9af;
   --sidebar-active: #c4dda6;
   --sidebar-non-existant: #87968b;
-  --sidebar-width: 264px;
+  --sidebar-target-width: 264px;
+  --sidebar-width: min(var(--sidebar-target-width), 80vw);
   --links: #c4dda6;
   --inline-code-color: #d5e7c5;
   --theme-popup-bg: #19241d;
@@ -56,6 +57,8 @@ body {
 }
 .docs-brand {
   display: flex;
+  height: 78px;
+  box-sizing: border-box;
   align-items: center;
   gap: 12px;
   padding: 9px 18px;
@@ -66,7 +69,9 @@ body {
 }
 .docs-brand img {
   width: 204px;
-  height: 59px;
+  max-width: 100%;
+  min-width: 0;
+  height: auto;
   object-fit: contain;
 }
 .sidebar .sidebar-scrollbox {

docs/src/static/docs-theme.js

@@ -43,6 +43,7 @@
     nav.className = "docs-tools";
     nav.setAttribute("aria-label", "Documentation resources");
     const links = [
+      ["Home ↗", root + "index.html#home"],
       ["GitHub ↗", "https://github.com/CodingThrust/problem-reductions"],
       ["Atlas ↗", root + "index.html#atlas"],
     ];