Redesign landing page to match TypeDoc 0.28 look and feel#53
Merged
Conversation
The landing page hand-mimicked an old (~v0.22-era) TypeDoc theme and had
drifted visually from the TypeDoc 0.28 output of the product references.
Rather than duplicating theme CSS again, the page now reuses the actual
generated TypeDoc stylesheet (copied to docs/assets/ at build time) plus
a small landing.css, so it restyles itself automatically when product
repos bump TypeDoc.
Landing page:
- Mirrors TypeDoc 0.28 markup (toolbar, container grid, sidebar with
Settings accordion, footer) and tri-state os/light/dark theme that
never writes to localStorage on load (the old page force-wrote 'dark',
overriding the user's OS preference across all doc pages)
- Cards grouped into "PlayCanvas Development" (Engine, Editor, React,
Web Components) and "Foundational Libraries" (PCUI, PCUI Graph,
Observer, Splat Transform), with build-injected version badges
- Sidebar nav mirrors the card grid so they cannot drift apart
- Fixes: footer now shows the real build date (was client-side
new Date(), i.e. the visitor's date); mobile menu button works
(reuses TypeDoc's has-menu drawer); removed the card-filter search
Build pipeline (build.mjs):
- generateLandingPage() injects {{BUILD_DATE}} and {{VERSION:*}} tokens
from each cloned repo's package.json
- copySharedAssets() copies TypeDoc's style.css/icons.svg for the
landing page to share
- postProcessProductDocs() makes the route back to the landing page
obvious on every product page: toolbar title becomes a breadcrumb
(Home / <product>) and the sidebar "Home" link is renamed to
"← All API References"
- New --landing-only flag (npm run build:landing) regenerates just the
landing page against an existing docs/ for fast local iteration
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the root landing page and build pipeline so the landing experience matches TypeDoc 0.28 styling/markup and stays visually in-sync by reusing TypeDoc-generated theme assets, while also post-processing generated product docs to improve navigation back to the landing page.
Changes:
- Replace the legacy hand-styled landing page with a TypeDoc 0.28-aligned template that layers minimal custom CSS over the shared TypeDoc stylesheet.
- Extend
build.mjsto generate the landing page at build time (injecting build date + per-repo versions), copy shared TypeDoc assets, and post-process generated docs to add a “Home” breadcrumb and rename the sidebar Home link. - Add
npm run build:landingto regenerate only the landing page + post-processing against an existingdocs/for faster iteration.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| package.json | Adds a build:landing script to run the build in landing-only mode. |
| index.html | Replaces the landing page markup/scripts to mirror TypeDoc 0.28 and adds build-time tokens for versions/date. |
| build.mjs | Adds landing generation, shared asset copying, product-doc post-processing, and the --landing-only path. |
| assets/landing.css | Adds minimal landing-specific styling intended to override TypeDoc’s layered CSS. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add rel="noopener noreferrer" to target="_blank" links - Validate the tsd-theme localStorage value against os/light/dark, falling back to "os"; initialize the theme select from the validated value so an invalid stored value can never persist - Keep aria-expanded in sync on the mobile menu trigger - Make postProcessProductDocs() replacements independently idempotent and preserve the sidebar Home link's existing href Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
The landing page hand-mimicked an old (~v0.22-era) TypeDoc theme and had drifted visually from the TypeDoc 0.28 output of the actual product references (different palette, toolbar, theme semantics). This PR rewrites it to be faithful to TypeDoc 0.28 and fixes several accumulated bugs.
Landing page (
index.html, now a build-time template +assets/landing.css)build.mjscopiesdocs/engine/assets/style.css+icons.svgintodocs/assets/, and the landing page layers a smalllanding.csson top (TypeDoc wraps its rules in@layer typedoc, so unlayered overrides need no specificity hacks). When product repos bump TypeDoc, the landing page restyles itself automatically — the drift that motivated this rewrite can't recur.tsd-page-toolbar,container-maingrid, sidebar with Settings accordion,tsd-generatorfooter.package.json. The sidebar nav mirrors the card grid so they can't drift apart.tsd-themelocalStorage semantics.Bug fixes
new Date()— it showed the visitor's date, not the build date. Now injected at build time.darkto localStorage on page load, silently overriding the user's OS preference across all doc pages. The new page only writes on an explicit user change.has-menudrawer.Build pipeline (
build.mjs)generateLandingPage()— replaces{{BUILD_DATE}}/{{VERSION:*}}tokens; missing versions degrade to no badge with a warning.copySharedAssets()— shares TypeDoc's stylesheet/icons with the landing page.postProcessProductDocs()— makes the route back to the landing page obvious on every generated product page: the toolbar title becomes a breadcrumb (Home / Engine API Reference - v2.19.1) and the sidebar "Home" link is renamed to "← All API References". Idempotent, runs over all ~2,250 generated pages.--landing-onlyflag (npm run build:landing) regenerates just the landing page + post-processing against an existingdocs/, skipping the slow 8-repo clone/build loop for local iteration.Reviewer notes
npm run build:landing+npm run serve): visual parity with/engine/in light/dark/OS modes, theme persistence in both directions between landing and product pages, all product links resolve, mobile drawer opens/closes, console clean, no template tokens leak into output.🤖 Generated with Claude Code