Skip to content

Revamp GitHub Pages with an interactive D3 graph#18

Merged
Ducksss merged 1 commit into
mainfrom
claude/charming-mclaren-29d9dd
Jun 30, 2026
Merged

Revamp GitHub Pages with an interactive D3 graph#18
Ducksss merged 1 commit into
mainfrom
claude/charming-mclaren-29d9dd

Conversation

@Ducksss

@Ducksss Ducksss commented Jun 30, 2026

Copy link
Copy Markdown
Owner

Summary

Revamps the GitHub Pages landing page (docs/index.html) from the clean-but-boring static layout into a modern, interactive "engineering blueprint" page — without breaking any of the machine-readable content the GEO test and AI crawlers rely on.

What's new

  • Light glow-up theme — blueprint grid background, Bricolage Grotesque display + JetBrains Mono accents, a brand indigo→teal gradient, glass cards, and tasteful scroll-reveal + hover motion (all gated by prefers-reduced-motion).
  • Interactive D3 force-graph centerpiece ("How the isolation works") — a central you node fans out to per-profile CODEX_HOME directories. Nodes are draggable, hovering highlights a profile's branch, and a swap auth.json toggle collapses every profile onto one shared ~/.codex (with a warning badge + converging dashed links) to show why per-profile homes are cleaner. This is the README's "swap auth.json vs per-profile CODEX_HOME" contrast, made tangible.
  • Hero terminal mockup, feature cards with icons, and a desktop screenshot showcase.

Reliability & accessibility

  • D3 is loaded from a pinned, SRI-checked jsdelivr URL (d3@7.9.0). If JS or the CDN fails, the graph section degrades to a readable static fallback (the page is fully usable with no JS).
  • Responsive down to ~333px; reduced-motion honored; graph nodes/toggles are keyboard-focusable.

GEO / SEO preserved (verbatim)

Canonical link, robots meta, the full JSON-LD @graph (all 6 types), softwareVersion 0.3.0, and all six FAQ <h3> + answer bindings are unchanged. Bumped sitemap.xml lastmod to 2026-06-30.

Test plan

  • node test/geo-site-test.mjs — passes (the Pages deploy gate).
  • make test — passes.
  • Verified in a browser at desktop and mobile widths, in both graph modes, and confirmed the static fallback renders when D3 is unavailable.

🤖 Generated with Claude Code

Redesign the GitHub Pages landing page from a static corporate layout
into a modern "engineering blueprint" page, while preserving every
machine-readable element the GEO test and AI crawlers depend on.

- Light glow-up theme: blueprint grid, Bricolage Grotesque display +
  JetBrains Mono accents, brand indigo->teal gradient, glass cards,
  scroll-reveal and hover motion (all gated by prefers-reduced-motion).
- New interactive D3 force-graph centerpiece visualizing profile
  isolation: "you" fans out to per-profile CODEX_HOME directories.
  Draggable nodes, branch-highlight on hover, and a "swap auth.json"
  toggle that collapses every profile onto one shared ~/.codex to show
  why per-profile homes are cleaner.
- D3 loaded from a pinned, SRI-checked CDN; the section degrades to a
  readable static fallback if JS or the CDN fails (no-JS safe).
- Hero terminal mockup, feature cards with icons, and a desktop
  screenshot showcase.
- Preserved verbatim: canonical link, robots meta, full JSON-LD @graph,
  softwareVersion (0.3.0), and all six FAQ <h3>/answer bindings.
- Bumped sitemap lastmod to 2026-06-30.

GEO test (node test/geo-site-test.mjs) and make test both pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: acf83c7781

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/index.html

var d3 = window.d3;
var PROFILES = [
{ id: "personal", label: "personal", home: "~/.codex" },

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Fix the personal profile home in the graph

When the D3 graph loads, the isolated mode now renders the personal profile as ~/.codex, but the CLI only maps default to ~/.codex; every other profile, including personal, maps to ~/.codex-<profile> (also reflected by README examples and tests expecting ~/.codex-personal). This makes the interactive explanation show the personal profile sharing the default home in the supposedly isolated model, which misdocuments the tool's core safety boundary for users who rely on the page.

Useful? React with 👍 / 👎.

@Ducksss Ducksss merged commit da447d1 into main Jun 30, 2026
2 checks passed
@Ducksss Ducksss deleted the claude/charming-mclaren-29d9dd branch June 30, 2026 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant