Repository navigation
Landing: fix the Lighthouse findings - #79
Conversation
Self-host Space Grotesk and JetBrains Mono (the files ciach ships) and inline the stylesheet, so nothing render-blocking leaves the origin and the Google Fonts request that failed in the audit is gone. Preload the Latin subsets; cache /fonts for a day. Make the source tabs a radiogroup of the radio inputs and their labels, with the copy button beside the strip instead of inside a tablist that allowed no button; show keyboard focus on the focused tab. Lift the muted text and comment tokens to 4.5:1 (ciach's dark values), darken the light-theme ones, and underline the links inside footer text. Give the logo images their intrinsic size, start the Flutter engine once the page has loaded and is idle, ship the Chromium CanvasKit again with `canvasKitVariant: "auto"`, and strip the dangling flutter.js.map reference from the bootstrap. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TazpPghXzy1LwT77FpxgHJ
Pull requests from this repository that touch the docs now deploy a Vercel preview and get its URL in one comment that is updated on every push, instead of previews coming only from a dedicated `docs` branch, which is dropped. Only a push to `main` is production; a fork's pull request has no secrets and runs the build job alone. One run per ref at a time, with a newer push to a pull request superseding the one in flight. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TazpPghXzy1LwT77FpxgHJ
|
Docs preview: https://advanced-forms-3hmy6na4v-leancode.vercel.app Built from 3bac57f; the landing page is at |
| padding: 0.35rem 0.35rem 0; | ||
| } | ||
|
|
||
| .af-example-tabs { |
There was a problem hiding this comment.
I would extract all those styles next to the approperiate components
There was a problem hiding this comment.
Yes, that is something I want to prompt as well (I just kept this PR to the lighthouse stuff only)
There was a problem hiding this comment.
Agreed, that's the right shape: the same @css-next-to-the-component layout ciach's website uses, with tokens and the reset in a styles.dart. It's the whole 1,350-line sheet moving into the Dart styles API, so it goes in a follow-up PR rather than on top of the Lighthouse changes here. Jaspr's style bundling inlines the collected rules into the page, so the follow-up also retires the _Stylesheet inlining step this PR adds.
Generated by Claude Code
3 participants
What
Fixes the findings from the desktop and mobile Lighthouse reports of advanced-forms.leancode.co, following the same pass done on ciach.
Performance
landing/web/fonts/(the Latin and Latin-ext variable subsets ciach ships, with the OFL texts). Removes the render-blocking Google Fonts stylesheet and the two preconnects, which were also the only third-party requests and the source of the console error in the report. The Latin subsets are preloaded; the docs app caches/fontsfor a day.<head>at build, minified, so nothing render-blocking is left.landing.cssis no longer copied topublic/.loadon an idle frame instead of as soon aslanding.jsruns, so the 3+ MB bundle no longer competes with the first paint.canvasKitVariant: "auto", so Chrome fetches the smaller variant (~a third less over the wire) rather than the full one.width/height.//# sourceMappingURL=flutter.js.mapline is stripped fromflutter_bootstrap.js(it was a 403 in the report).Accessibility
role="tablist"whose children were labels and a copy button. They are now aradiogroupof the radio inputs and their labels, with the copy button beside the strip. Keyboard focus is shown on the focused tab.#84848d,#767eaa); the light-theme muted, comment and success colours were darkened to pass as well.Docs workflow: preview deployments for pull requests
Previews used to come only from pushes to a dedicated
docsbranch, so a PR like this one never got one. Now a pull request from this repository that touches the docs deploys a Vercel preview and gets its URL in one comment, updated on every push. Only a push tomainis production; a fork's PR has no secrets and runs the build job alone. Thedocsbranch trigger is gone. Runs are serialized per ref, with a newer push to a PR superseding the preview in flight.Verification
Jaspr build plus Lighthouse 13 against the built page locally (Flutter bootstrap stubbed, since the bundle needs the Flutter SDK):
dart analyze,dart format, eslint and prettier pass on the changed files. Screenshots checked the tab strip, focus ring and footer in both themes and on a narrow viewport. The workflow change is exercised by this PR itself: the preview comment below is its output.Not addressed
main.dart.js, CanvasKit size). A renderer or build change is a separate decision.main.dart.jsstill has no source map; shipping one for a release build is not worth the deploy size.docs_app/app/global.csskeeps the old--af-mutedvalue, so the docs pages would show the same contrast finding if audited.🤖 Generated with Claude Code
https://claude.ai/code/session_01TazpPghXzy1LwT77FpxgHJ