Skip to content

Redesign landing page to match TypeDoc 0.28 look and feel#53

Merged
willeastcott merged 2 commits into
mainfrom
redesign-landing-page
Jun 12, 2026
Merged

Redesign landing page to match TypeDoc 0.28 look and feel#53
willeastcott merged 2 commits into
mainfrom
redesign-landing-page

Conversation

@willeastcott

Copy link
Copy Markdown
Contributor

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)

  • Reuses TypeDoc's actual generated stylesheet instead of duplicating theme CSS: build.mjs copies docs/engine/assets/style.css + icons.svg into docs/assets/, and the landing page layers a small landing.css on 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.
  • Mirrors TypeDoc 0.28 markup: tsd-page-toolbar, container-main grid, sidebar with Settings accordion, tsd-generator footer.
  • Cards grouped into PlayCanvas Development (Engine, Editor, React, Web Components) and Foundational Libraries (PCUI, PCUI Graph, Observer, Splat Transform), with version badges injected at build time from each cloned repo's package.json. The sidebar nav mirrors the card grid so they can't drift apart.
  • Tri-state os/light/dark theme matching TypeDoc 0.28's tsd-theme localStorage semantics.

Bug fixes

  • Footer "generated on" date was client-side new Date() — it showed the visitor's date, not the build date. Now injected at build time.
  • The old theme toggle force-wrote dark to 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.
  • The mobile menu button toggled a CSS class that had no styles (dead button). It now reuses TypeDoc's own has-menu drawer.
  • Removed the card-filter "search" (it only filtered the 8 cards; a cross-product search over the TypeDoc indexes is a possible follow-up).

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-only flag (npm run build:landing) regenerates just the landing page + post-processing against an existing docs/, skipping the slow 8-repo clone/build loop for local iteration.

Reviewer notes

  • Verified locally (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.
  • The full pipeline path (fresh clone of all 8 repos) is unchanged apart from the new steps at the end; the first Pages deploy after merge is worth watching to confirm end-to-end.
  • The breadcrumb hides below 770px to avoid crowding the mobile toolbar; mobile users still get the renamed sidebar link.

🤖 Generated with Claude Code

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>
@willeastcott
willeastcott requested a review from Copilot June 12, 2026 11:02
@willeastcott willeastcott self-assigned this Jun 12, 2026
@willeastcott willeastcott added the enhancement New feature or request label Jun 12, 2026

Copilot AI 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.

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.mjs to 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:landing to regenerate only the landing page + post-processing against an existing docs/ 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.

Comment thread index.html Outdated
Comment thread index.html Outdated
Comment thread index.html Outdated
Comment thread index.html Outdated
Comment thread index.html
Comment thread index.html Outdated
Comment thread build.mjs
- 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>

Copilot AI 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.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

@willeastcott
willeastcott merged commit d8467d1 into main Jun 12, 2026
1 check passed
@willeastcott
willeastcott deleted the redesign-landing-page branch June 12, 2026 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants