Redesign website: MyST-primary volume cards by mmcky · Pull Request #21 · QuantEcon/book-dp-public

mmcky · 2026-05-25T05:27:11Z

Summary

Replace the HTML5 UP Strata theme with a hand-written single-column layout. Each volume gets its own card with the MyST online edition as the primary CTA and PDF / Code / Slides demoted to ghost buttons.
Vol I links the Cambridge publisher page alongside Amazon on a small print line; Vol II is marked "Forthcoming" with a styled placeholder cover that echoes the Vol I palette.
Overview Lectures sit in their own block between "Read & download" and "Contents" to signal they cover both volumes.
code.html and slides.html restyled to share the new mast, table, and footer.
Drop ~50 unused theme assets (jQuery, FontAwesome, demo images, Strata SCSS) — see diff-size note below.
Footer copyright updated to © 2024–2026 Sargent & Stachurski across all pages.
Blurb reframed to lead with the theory (per @jstac in comments) — surfaces Vol II's foundational rewrite rather than treating both volumes as "applications + innovations".
Favicon added — a serif "DP" monogram on the Vol I cover's near-black background; SVG + PNG fallbacks (32 px and 180 px apple-touch-icon) wired into all three pages.
QuantEcon logo in mast bumped from 110 → 150 px on desktop, 90 → 110 px on mobile (per @DrDrij in comments) so the parent-brand reads as a peer to the nav.
AI / crawler discoverability — three silent additions to make the landing page legible to AI pipelines without changing what readers see:
- JSON-LD Book schema for both volumes (author, publisher, ISBN, MyST URL, sameAs to Cambridge & Amazon).
- Google Scholar citation_* meta tags for Vol I.
- llms.txt at the website root following llmstxt.org — points AI tools to the canonical MyST editions, PDFs, code, and print sources.
CI workflow rename — ci.yml was named "Build Project [using jupyter-book]" but doesn't use jupyter-book; renamed to "Deploy preview to Netlify".

Note on diff size

The diff shows ~17 k deletions vs ~1 k insertions — this is expected, not a feature removal. The previous site shipped the entire HTML5 UP "Strata" theme bundle. The new site is hand-written CSS + HTML with no JavaScript and no FontAwesome. All deleted files were either unused theme infrastructure or demo content that no page referenced.

Specifically removed (none of these were used by the live site):

assets/js/ — jQuery, breakpoints.min.js, browser.min.js, jquery.poptrox.min.js, util, theme main.js. The new site has zero JS.
assets/sass/ — Strata's SCSS source.
assets/webfonts/ and assets/css/fontawesome-all.min.css — FontAwesome (~26 font files + stylesheet). Icons are now inline SVG.
images/fulls/, images/thumbs/ — Strata's demo gallery photos (6 + 6).
images/bg.jpg, images/bg.png, images/avatar.jpg, images/logo-square.{png,svg}, images/julia.svg, images/python.png — Strata demo / leftover assets.
images/book.png, images/slides.png, images/github-mark.png, images/mail.png, images/qe-logo-small.png — PNG icons replaced by inline SVG.
elements.html — Strata's component-showcase demo page.
LICENSE.txt — the HTML5 UP CCA-3.0 licence; the repo-root LICENSE still applies.

The final website/ tree is: 3 HTML pages (index.html, code.html, slides.html), assets/css/main.css, images/qe-menubar-logo.svg, images/covers/dp-vol1.jpg, favicon.svg, favicon.png, apple-touch-icon.png, llms.txt, CNAME.

Test plan

Open the Netlify preview URL on desktop and confirm hero, cards, lectures, TOCs, and footer render as expected.
Click through every CTA: MyST Vol I/II, PDF Vol I/II, Code, Slides, Cambridge, Amazon, both Overview Lecture PDFs, the mast nav anchors, footer links.
Open the preview on a phone (or use Chrome DevTools device emulation — iPhone SE / iPhone 12) and confirm the layout below 500 px wraps cleanly with no horizontal overflow.
Visit /code.html and /slides.html and confirm the back link, list table, and footer render correctly.
Confirm the QuantEcon logo loads in the mast on all three pages.
Confirm the new favicon shows in the browser tab.

🤖 Generated with Claude Code

Replace the HTML5 UP Strata theme with a hand-written single-column layout. Each volume gets its own card with the MyST online edition as the primary CTA and PDF/Code/Slides demoted to ghost buttons; the Cambridge publisher link sits alongside Amazon on the Vol I print line. Vol I uses the Cambridge cover artwork; Vol II shows a styled "forthcoming" placeholder. Drop the Strata theme, jQuery, FontAwesome and the unused demo assets. Add PLAN.md to .gitignore so the planning doc stays local. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

The workflow named "Build Project [using jupyter-book]" doesn't use jupyter-book — it deploys the static website/ directory to Netlify as a preview. Rename to "Deploy preview to Netlify" so the Actions UI is self-describing. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

netlify · 2026-05-25T05:27:16Z

✅ Deploy Preview for resonant-pie-f0089d ready!

Name	Link
🔨 Latest commit	`8b53cb0`
🔍 Latest deploy log	https://app.netlify.com/projects/resonant-pie-f0089d/deploys/6a1f82d961b2f000080e239c
😎 Deploy Preview	https://deploy-preview-21--resonant-pie-f0089d.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR redesigns the website/ static site for dp.quantecon.org, replacing the prior HTML5 UP theme-driven layout with a hand-authored single-column layout that emphasizes the MyST online editions and simplifies assets/dependencies.

Changes:

Rebuild index.html into a card-based “Read & download” layout with MyST as the primary CTA and PDFs/Code/Slides as secondary actions.
Restyle code.html and slides.html to share the new mast/footer/table styling and remove the old theme’s JS/CSS dependencies.
Remove the legacy theme source/assets (Sass, jQuery plugins, FontAwesome, demo pages/images) and rename the CI workflow to reflect Netlify preview deployment.

Reviewed changes

Copilot reviewed 16 out of 63 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
website/index.html	New single-column layout with volume cards, lectures block, and shared mast/footer.
website/code.html	Updated to the new mast/footer and simplified “list table” presentation.
website/slides.html	Updated to the new mast/footer and simplified “list table” presentation.
website/LICENSE.txt	Removed the old theme license file (theme assets are removed in this PR).
website/elements.html	Removed theme demo page.
website/images/logo-square.svg	Removed unused theme asset.
website/images/julia.svg	Removed unused theme asset.
website/assets/sass/main.scss	Removed legacy theme Sass source.
website/assets/sass/libs/_vendor.scss	Removed legacy theme Sass lib.
website/assets/sass/libs/_vars.scss	Removed legacy theme Sass lib.
website/assets/sass/libs/_mixins.scss	Removed legacy theme Sass lib.
website/assets/sass/libs/_html-grid.scss	Removed legacy theme Sass lib.
website/assets/sass/libs/_functions.scss	Removed legacy theme Sass lib.
website/assets/sass/libs/_breakpoints.scss	Removed legacy theme Sass lib.
website/assets/js/util.js	Removed legacy theme JS dependency.
website/assets/js/main.js	Removed legacy theme JS dependency.
website/assets/js/jquery.poptrox.min.js	Removed legacy theme JS dependency.
website/assets/js/browser.min.js	Removed legacy theme JS dependency.
website/assets/js/breakpoints.min.js	Removed legacy theme JS dependency.
website/assets/css/fontawesome-all.min.css	Removed legacy theme CSS dependency.
.github/workflows/ci.yml	Renamed workflow to reflect Netlify preview deployment behavior.
.gitignore	Added `PLAN.md` to ignored files.

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

+    <header class="mast">
+        <div class="mast__inner">
+            <a class="mast__brand" href="/">dp.quantecon.org</a>
+            <nav class="mast__nav" aria-label="Primary">


mmcky · 2026-05-25T05:46:50Z

Performance side-effect

Measured the actual first-load weight before/after (sizes from git cat-file -s for the old assets, curl against a local serve for the new):

Before — index.html pulled ~15 requests / ~499 KB:

Asset	Bytes
`assets/css/main.css` (Strata, 3,416 lines)	56,680
`assets/css/fontawesome-all.min.css` (via @import)	59,401
`assets/js/jquery.min.js`	89,501
4 other Strata JS files	20,242
`images/bg.png` (wavy lines, loaded by CSS)	166,862
`assets/css/images/overlay.png` (loaded by CSS)	36,285
5 PNG icons	11,034
`index.html`	8,908
Source Sans Pro (Google Fonts, approx)	~50,000

After — index.html pulls ~7 requests / ~150 KB:

Asset	Bytes
`assets/css/main.css` (hand-written)	11,023
`images/qe-menubar-logo.svg`	3,892
`images/covers/dp-vol1.jpg`	83,150
`index.html`	11,658
Newsreader + IBM Plex Sans + IBM Plex Mono (Google Fonts, approx, only weights used)	~40,000

~70% smaller initial payload, ~half the round-trips, and zero JavaScript (so no parse/execute step blocking interactivity). The Vol I cover JPG is the heaviest single asset at 83 KB; everything else is small. Repeat-visit cost is even lower since Google Fonts almost always hits a warm shared-CDN cache.

mmcky · 2026-05-25T05:48:08Z

Mobile / responsive support

Hand-written responsive CSS (no framework). Three breakpoints, each addressing real fitting concerns rather than just "smaller fonts":

≤ 880 px — volume cards and the two-column TOC collapse to single column; horizontal page padding shrinks 64 → 32 px.
≤ 600 px — the mast nav is hidden (brand + QuantEcon logo only); cover shrinks from 96 × 132 to 80 × 112 with all text inside it scaled proportionally; the Vol I action grid collapses from 3-col to 2-col with Slides wrapping below; Overview Lectures stacks; footer columns stack; page padding shrinks to 16 px.
≤ 400 px — extra-tight card padding (22 → 18 px); list-table first column widens to keep chapter labels from wrapping.

The H1 uses clamp(28px, 6vw + 8px, 64px) so it scales smoothly between 28 px (narrow phones) and 64 px (desktop) without step changes, and won't overflow at any width. Flex / grid children have explicit min-width: 0 so long content can't push containers wider than their parent — a common cause of mobile horizontal-scroll bugs.

Verification caveat for reviewers: headless Chrome has a minimum viewport floor (~500 px) so screenshot-based testing won't show the narrowest layouts honestly. To verify <500 px, use Chrome DevTools device emulation (iPhone SE, iPhone 12, etc.) or open the Netlify preview URL on an actual phone.

mmcky · 2026-05-25T06:20:11Z

@jstac — good call on the blurb. The current text undersells Vol II as just "innovations + applications" when it's a foundational rework. Two options below; pick whichever (or suggest a tweak) and I'll update index.html. Both drop the "computer code" clause since the MyST sites cover that side of the story.

Option 1 — one paragraph, two sentences

These books offer a unified treatment of dynamic programming, from finite-state foundations to a complete reworking of the theory for general state spaces. Applications span economics, finance, and operations research.

Option 2 — two paragraphs, per-volume

These books offer a unified treatment of dynamic programming, with applications across economics, finance, and operations research.

Volume I treats the finite-state case in depth. Volume II reworks the foundations of dynamic programming for general state spaces.

Happy to iterate on wording — e.g. swap "reworks the foundations" for "rebuilds the foundations" / "presents a new foundation", reorder the field list, label Vol II as a "research monograph" explicitly, etc.

jstac · 2026-05-25T06:32:52Z

Thanks @mmcky !

Option 1 looks good to me.

@jstac

The previous blurb described the work as "innovations" plus applications, which underweighted Vol II — per @jstac it is a complete reworking of DP theory for general state spaces, not an addendum. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mmcky · 2026-05-25T06:34:32Z

Applied Option 1 in 87f38f5 — @jstac thanks for the suggestion. Netlify preview will refresh shortly.

A serif "DP" monogram on a teal square that echoes the MyST CTA colour and the site's display type. Ships favicon.svg for modern browsers plus favicon.png (32px) and apple-touch-icon.png (180px) as fallbacks. Linked from all three pages. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mmcky · 2026-05-25T06:51:57Z

Favicon

Added in 40b7d06. A serif "DP" monogram on a teal square (same colour as the MyST CTA), with favicon.svg for modern browsers plus favicon.png (32 px) and apple-touch-icon.png (180 px) as fallbacks. Linked from all three pages.

Swap the teal background for the cover's near-black (#0d1110), keeping the cream serif "DP" on top. The favicon now reads as a miniature book-spine, pairing visually with the Vol I cover thumbnail in the landing-page card. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mmcky · 2026-05-25T07:01:30Z

Updated the favicon in the latest push: dark cover-match palette (#0d1110 background, cream "DP") so the tab icon visually pairs with the Vol I cover thumbnail on the landing page. SVG + PNG fallbacks unchanged in structure.

DrDrij · 2026-05-25T07:13:53Z

Agree with you @mmcky in regards to the QuantEcon branding, a small tweak makes a difference?

.mast__logo img {width: 150px;}

@DrDrij

Desktop 110 → 150 px and mobile 90 → 110 px so the QE wordmark reads as a peer to the nav text and the parent-brand presence stays proportionate on small screens. Per @DrDrij's suggestion. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mmcky · 2026-06-03T01:18:02Z

Applied in the latest push — desktop logo at 150 px, mobile bumped from 90 → 110 px to keep the proportional jump sensible. Thanks @DrDrij.

- JSON-LD Book schema for both volumes in index.html <head>, with author, publisher, ISBN, MyST URL, and cross-links to Cambridge and Amazon. Helps AI pipelines disambiguate citations. - Google Scholar citation_* meta tags for Vol I (published 2024, ISBN 9781009540759). Vol II skipped until print ISBN exists. - llms.txt at the website root following the llmstxt.org convention, pointing AI tools to the canonical MyST editions, PDFs, code, and print sources. All silent additions; no visual change to any page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mmcky · 2026-06-03T01:26:47Z

AI-crawler discoverability

Three silent additions for AI / academic crawlers (no visual change):

JSON-LD Book schema for both volumes in index.html (<head>) — author, publisher, ISBN, MyST URL, sameAs cross-links to Cambridge and Amazon. Lets AI pipelines disambiguate and cite the work correctly.
Google Scholar citation_* meta tags for Vol I (ISBN 9781009540759, Cambridge 2024). Vol II skipped until its print ISBN is assigned.
llms.txt at the website root (per llmstxt.org) pointing to the canonical MyST editions, PDFs, code, and print sources.

The MyST sites remain the canonical full-text source — this just makes the landing page a schema-rich pointer that AI crawlers can read correctly.

mmcky · 2026-06-03T01:30:54Z

thanks @jstac and @DrDrij -- this is looking great. I will merge but happy to iterate with any adjustments.

@jstac I have added additional LLM discovery features as well.

mmcky and others added 2 commits May 25, 2026 15:23

Copilot AI review requested due to automatic review settings May 25, 2026 05:27

Copilot started reviewing on behalf of mmcky May 25, 2026 05:27 View session

Copilot AI reviewed May 25, 2026

View reviewed changes

Comment thread website/index.html

Comment on lines +19 to +22

<header class="mast">

<div class="mast__inner">

<a class="mast__brand" href="/">dp.quantecon.org</a>

<nav class="mast__nav" aria-label="Primary">

github-actions Bot temporarily deployed to commit May 25, 2026 06:34 Inactive

github-actions Bot temporarily deployed to commit May 25, 2026 06:51 Inactive

github-actions Bot temporarily deployed to commit May 25, 2026 07:01 Inactive

github-actions Bot temporarily deployed to commit June 3, 2026 01:18 Inactive

github-actions Bot temporarily deployed to commit June 3, 2026 01:27 Inactive

mmcky merged commit 486e5ed into main Jun 3, 2026
6 checks passed

mmcky deleted the redesign branch June 3, 2026 01:38

Uh oh!

Uh oh!

Conversation

mmcky commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Note on diff size

Test plan

Uh oh!

netlify Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for resonant-pie-f0089d ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

mmcky commented May 25, 2026

Performance side-effect

Uh oh!

mmcky commented May 25, 2026

Mobile / responsive support

Uh oh!

mmcky commented May 25, 2026

Uh oh!

jstac commented May 25, 2026

Uh oh!

mmcky commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mmcky commented May 25, 2026

Favicon

Uh oh!

mmcky commented May 25, 2026

Uh oh!

DrDrij commented May 25, 2026

Uh oh!

mmcky commented Jun 3, 2026

Uh oh!

mmcky commented Jun 3, 2026

AI-crawler discoverability

Uh oh!

mmcky commented Jun 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mmcky commented May 25, 2026 •

edited

Loading

netlify Bot commented May 25, 2026 •

edited

Loading

mmcky commented May 25, 2026 •

edited

Loading