The Built with this chapter duplicated the landing page; a single line now points to the Research Article Gallery. Template variants describes the article layout (hero, meta columns, line TOC, margin sidenotes, heading anchors, banner, debug grid and _grid.css tokens), how to switch to paper, and uses the CLI --layout flag. Unused screenshots are removed.
fix(demo): drop embeds and references whose data is not in the repo
d3-benchmark and d3-line-quad were not used by any chapter and their data files were removed long ago. The vibe-coding-charts chapter referenced d3-hf-citations.html, which was never committed.
feat(banner): isometric GPU cluster banner for the showcase article
Port of the landing site's gpu-cluster-isometric-banner (two-layer draw, SPEED 0.65, centred on its projected bounds) as banner-gpu-cluster.html on the Embed.mount contract, mounted eagerly. It reads the nearest data-theme so the /banners gallery shows both themes. Constellation, manuscript, groove and tapestry stay available.
chore(banner): regenerate article anatomy without the content experiments
Constellation, manuscript, groove and tapestry now use the embed runtime (resize: size, eager mount, ctx.animate, ctx.colors, ctx.describe, labelColor for caption text) instead of their own bootstrap, observers and D3 loader. The hero box no longer forces an aspect ratio: the banner root sets it, as the banners skill and check:embed expect. The /banners gallery loads the runtime and shows the default banner too.
chore: import local WIP (embed runtime, check:embed, skills)
Imported from the uncommitted work of the main tree: Embed.mount runtime (public/scripts/embed-runtime.js), check:embed script, embeds migrated to the runtime, write-mdx-content and design-dataviz skills, create-html-embed skill rewrite, agent docs. The old TableOfContents.astro tweak is dropped since the component was replaced.
chore: move banned-books experiments to exp/banned-books
PEN America's index has no theme or reason column, so the infographic gains
a "what and why" section built from three separately labeled sources:
- PEN America's own thematic findings per school year (2021-22, 2022-23,
2023-24 reports), each with its own base (titles or ban instances)
- reasons cited by ALA for its most challenged books of 2021 to 2023,
grouped into tags by keyword and linked to each title's PEN ban count
- Open Library subject headings for the 1,000 most banned titles (893
matched, 59% of bans), grouped into themes by keyword, cached on disk
The section leads with the contrast between "sexually explicit" claims
(30 of 33 ALA listings) and PEN's finding that 13% of 2023-24 banned
titles describe sex on the page.
Co-authored-by: Cursor <cursoragent@cursor.com>
Add three-banned-books.html, a three.js (r170, jsDelivr) tile map of US
states where each state is a pile of books, one book per 100 school book
bans from PEN America's index. Books are colored by ban status or by
school year and drop in at a constant rate, so the tallest piles keep
growing after the others stop.
- orthographic camera so equal counts have equal on-screen heights,
a ruler every 1,000 bans next to Florida and one scale for all years
- direct labels on the three tallest piles, hover, tap and keyboard
tooltips, year buttons, play, reset view and a text summary
- instanced meshes, DPR capped at 2, rendering paused offscreen or when
the tab is hidden, no motion under prefers-reduced-motion
- build script now exports ban status per state and school year
- /infographic-3d dev-only preview (redirects to / in production)
Co-authored-by: Cursor <cursoragent@cursor.com>
Add d3-banned-books.html, an infographic of US school book bans built from
PEN America's Index of School Book Bans (2021-22, 2022-23 and 2023-24
school years, 15,940 bans): headline figures with a school-year filter,
monthly timeline with data-driven annotations, tile-grid state map, most
banned titles, authors and districts, and ban status / origin shares.
- scripts/build-banned-books-data.mjs downloads the public PEN sheets,
harmonizes their labels across years and writes a 21 KB aggregate
- /infographic is a dev-only preview at article and wide width, in both
themes (redirects to / in production)
Co-authored-by: Cursor <cursoragent@cursor.com>
feat(banner): compare constellation, manuscript, groove and tapestry on /banners
- banner-groove: the article pressed into a record, one spiral groove where every word is a stretch as long as the word and colored by kind, chapters as tracks separated by empty grooves, a label split by chapter share and a needle reading it as it turns
- banner-tapestry: sections as warp threads colored by chapter, weft bands for prose, code, components and tables/math; a thread floats over a band in proportion to its section's share of that kind, with twill binding and swaying fringe
- remove banner-ridges
Co-authored-by: Cursor <cursoragent@cursor.com>
feat(banner): use the constellation banner on the showcase article
Add a dev-only /banners page showing every banner at hero size in light and dark themes (redirects to / in production builds).
Co-authored-by: Cursor <cursoragent@cursor.com>
feat(banner): three data-driven banners built from the article's own anatomy
Add scripts/generate-article-anatomy.mjs (run as prebuild and via npm run banner:data) which tokenizes article.mdx and its chapters into article-anatomy.json: per-word kind and length, chapters, headings, component instances, citations and internal links.
New canvas embeds reading that file:
- banner-constellation: chapters, sections, components and citations as a star graph in reading order, every word as dust around its section
- banner-ridges: one ridgeline per section showing its word-length distribution
- banner-manuscript: the whole article typeset in microscopic columns, one bar per word colored by kind
All three are DPR-aware, theme-aware, use the primary-based palette, animate a slow reading cursor, pause offscreen and render a static frame under prefers-reduced-motion.
Co-authored-by: Cursor <cursoragent@cursor.com>
docs: document layout tokens, debug grid and new frontmatter fields
Wire Hero, MetaColumns, Toc and DebugGrid into the page, move main onto the named-line grid (wide and full-width blocks, HtmlEmbed wide), single-column print through the tokens, and remove the old hero, TOC and 3-column CSS. The paper template keeps its own hero on a single-column grid.
BREAKING CHANGE: HeroArticle.astro and TableOfContents.astro are removed. tableOfContentsAutoCollapse is now an alias of tocExpanded: false.
Press G in astro dev or add ?grid to any URL. Lazy loaded, reads the live grid template so it always reflects the layout tokens. Shift+G toggles the baseline.
feat(layout): footer on the page grid with themed colors
From 1280px a sidenote is auto-placed by the grid next to the element before it, without JS or layout shift; a small script aligns it and avoids overlaps. Inline below.
Sticky rail aligned with the first body line, active section indicator and progress line, reading time revealed once stuck, sub-headings expanded unless tocExpanded is false, internal scroll keeping the active item visible, top bar and drawer below 1100px.
feat(layout): append copyable anchor links to headings
Headings get a link icon after their text (h2-h4, reserved space, shown on hover/focus). Clicking copies the section URL with a Copied tip. Without a hash the page loads at the top, with one it lands on the heading, re-applied while late layout settles.
feat(layout): add layout grid tokens and breakpoint aliases
Social platforms (X/Twitter, LinkedIn, Slack) cache share previews by image
URL and rarely re-fetch on their own. index.astro now appends a short sha256
hash of article.mdx to the og:image/twitter:image URL at build time, so the
app-page preview refreshes automatically whenever the article changes.
A new `npm run og:sync` script mirrors the same hash into the README
`thumbnail:` field (the source for the huggingface.co Space card, which is
what X scrapes when the Space URL is shared), and the deploy CLI sets it on
first deploy. Documented in the deploy-to-hf-spaces skill.
Co-authored-by: Cursor <cursoragent@cursor.com>
fix: auto-generate OG thumbnail in screen mode and fix HF Space card
- Move thumbnail generation before print mode switch in export-pdf.mjs
(was generating in print media, showing wrong visual)
- Add --thumbnail-only flag to export-pdf for lightweight thumb generation
- Fix README.md thumbnail URL (was pointing to wrong Space)
- Remove thumb.* from .dockerignore so pre-generated thumbs are included
- CLI: auto-set thumbnail URL in README.md when deploying to HF Spaces
- Increase article template title size to match paper template (clamp 34-54px)
Made-with: Cursor
feat: add template preview cards and --template CLI flag
- Extract shared logic (normalizeAuthors, slugify, stripHtml, link icons)
into heroUtils.ts
- HeroArticle.astro: article template with banner, flex-row meta bar, PDF
access control - self-contained CSS, no external overrides
- HeroPaper.astro: paper template with centered inline meta, external link
pills with auto-detected icons - self-contained CSS, zero !important
- index.astro conditionally renders the right component based on template
- Remove ~90 lines of :global([data-template="paper"]) CSS overrides from
_layout.css (hero/meta rules only; content-grid rules kept)
- Delete old monolithic Hero.astro (843 lines, 24 :global overrides,
13 !important)
Made-with: Cursor
feat: auto-detect link icons in paper template hero
Automatically match link labels (github, paper, arxiv, code, demo,
data, dataset, model, video, blog) to inline SVG icons. Falls back
to icon-less display for unrecognized labels.
Made-with: Cursor
fix: left-align headings and remove decorative borders in paper template
- Add `links` frontmatter field for paper template hero (Paper, Code, Demo, Data buttons)
- Fix inline meta display for single affiliation (missing CSS rule on <p>)
- Update docs: README, getting-started.mdx, article-frontmatter skill
Made-with: Cursor
feat: agent-friendly project structure and paper template redesign
- Add .ai/skills/ as generic IDE-agnostic skill location (create-html-embed, article-frontmatter, deploy-to-hf-spaces)
- Add .cursor/skills symlink to .ai/skills/ for Cursor auto-detection
- Add GEMINI.md symlink to AGENTS.md for Gemini CLI support
- Update AGENTS.md with skill table, deploy section, and README tag warning
- Update CLAUDE.md to reference .ai/skills/ paths
- Update .gitignore to track .cursor/skills symlink
- Update scaffold CLI: preserve AGENTS.md, CLAUDE.md, GEMINI.md, and .ai/skills/ in generated projects
- Redesign paper template: inline meta layout, hero banner after meta, centered h2 with decorative rules
- Add gallery link and live test Space links to documentation
- Remove AUDIT-2026.md, ROADMAP-2026.md, CHANGELOG.md from tracked files
Made-with: Cursor
feat: add article template variant, npx CLI, and llms.txt auto-generation
- Template variants: `template: "paper"` (default) or `template: "article"`
in frontmatter. Article mode: centered single-column layout, no banner,
no figure numbering, no citation block (inspired by academic project pages)
- npx create-research-article: zero-dep CLI to scaffold new projects with
interactive prompts, template choice, and optional HF Space auto-deploy
- llms.txt: Astro integration that auto-generates /llms.txt at build time
with clean Markdown of the article content (llmstxt.org convention)
- Updated README, getting-started docs, and robots.txt
Made-with: Cursor
- Move hero description outside overflow:hidden banner container
- Use auto aspect-ratio on mobile to prevent banner truncation
- Add break-inside:avoid for Stack, cards, palettes, color-picker, notes
- Remove link backgrounds and force --surface-bg to white in print
- Remove card box-shadow in print to prevent gray artifacts
Made-with: Cursor
fix: prevent theme toggle transition flash on page load
Start moon icon with opacity:0 and defer animated class via
requestAnimationFrame so the CSS transition only applies after
initial render. Also add continuous-glider data asset.
Made-with: Cursor
feat: theme toggle with sun/moon crossfade and rotation animation
- Stack sun and moon icons with CSS grid, crossfade via JS-driven opacity
- Rotate 360deg CW when switching to dark, CCW when switching to light
- Avoid Astro scoping issues by managing icon visibility in JS
Made-with: Cursor
feat: improve PDF export with screenshot-based embed rendering and cover page layout
Title and description are already shown in the card header above each
embed, so passing them again as HtmlEmbed props caused double display.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add splitTableRow() that respects backtick boundaries
- Add parseTableRow() that merges overflow cells when a row has more
pipes than the header (e.g. 'neutral' | 'info' | 'success' | 'danger')
- Revert manual escaping in components.mdx — the parser handles it now
Co-authored-by: Cursor <cursoragent@cursor.com>
fix: remove manual figure numbers and render HTML in dataviz descriptions
- Strip "Figure X:" prefixes from all embed desc props (auto-numbered now)
- Use set:html for desc rendering on dataviz page so <br>, <a>, <strong> etc. display correctly
Co-authored-by: Cursor <cursoragent@cursor.com>
docs: add dataviz page documentation to components chapter
Explains the /dataviz page feature: what it extracts (charts, images,
stacks, tables), how items are displayed, how to exclude items with
skipGallery, and how to batch-export charts as PNG/ZIP.
Co-authored-by: Cursor <cursoragent@cursor.com>
feat: backport dataviz page, embed export, and visual extraction from smol-training-playbook
- Add clear prerequisites section with NOTION_TOKEN and NOTION_PAGE_ID
- Add dedicated section explaining how to share page with integration
- Split usage into Option A (HF Space) and Option B (Local)
- Remove outdated pages.json references (now auto-generated)
