feat(landing): redesign home page — dark, sleek, Lighthouse 100#1
Open
shivamsn97 wants to merge 3 commits intomainfrom
Open
feat(landing): redesign home page — dark, sleek, Lighthouse 100#1shivamsn97 wants to merge 3 commits intomainfrom
shivamsn97 wants to merge 3 commits intomainfrom
Conversation
- Rewrite pages/index.pyxl from 1664 lines to 777 lines. Seven sections (nav, hero, features, perf numbers, AI-agents, demos, get-started + newsletter, footer) replacing the previous twelve, with tighter copy and a single "Python + React in one file" hero message. - Remove the canvas aurora HeroBackground, six GradientOrb wrappers, ten IntersectionObserver Reveal components, the client-side syntax tokenizer, the WhyPyxle/HowItWorks/UseCases sections, and the full framework bar chart (links out to /benchmarks for the detail). - Ship a static hand-tokenized hero code card so the landing no longer pulls the runtime highlighter into its JS bundle. - Drop Google Fonts entirely in favour of the system font stack — zero render-blocking font requests. - Add an inline pre-hydration theme <script> in pages/layout.pyxl that reads localStorage before paint, preventing FOUC and hydration mismatch. Switch layout and ThemeToggle to Tailwind dark: variants so theme swaps are pure CSS with no React re-render of colours. - Bump dark-mode foreground contrast (zinc-500 -> zinc-400) on small text, recolor the subscribe button to emerald-500 + zinc-950, and brighten the .sh-cmt comment token so every element clears WCAG AA. Production Lighthouse (desktop): 100 / 100 / 100 / 100. Mobile: 98 / 100 / 100 / 100 (render-blocking Tailwind CSS + unused framework JS account for the remaining two points; both are out of scope for this app-level change).
…erywhere
The landing-redesign layout.pyxl switched to Tailwind dark: variants +
a pre-hydration <script> that sets <html class="light|dark">. The sub-
pages (playground, benchmarks, docs, not-found) still rendered their
entire UI from the React `theme` state via inline `theme === 'dark' ? A : B`
conditionals, baked in at SSR time. For light-mode visitors this produced
a mismatched first paint — CSS-driven layout wrapper went light while the
SSR-baked nav and sections stayed dark — plus hydration warnings.
Convert 198 conditionals across five files to pure Tailwind dark: variants
so every element responds to the `<html>` class alone. The React `theme`
state remains for the toggle icon and two canvas draw calls, but never
drives class output. SSR now renders one theme-agnostic HTML that looks
correct in either mode as soon as the boot script sets the class.
Accessibility sweeps done alongside the theme refactor:
- Bump `dark:text-zinc-500/600/700` → 400/500 and `text-zinc-400` light
bases → 600 across all sub-pages (WCAG AA contrast on both themes).
- Bump `text-emerald-400/600` → `text-emerald-700 dark:text-emerald-400`
on text usages so emerald labels and links pass on white backgrounds.
- Brighten `.sh-cmt` syntax-highlight comment token to #a1a1aa.
- Add `dark:prose-invert` to the rendered docs-content div — was
shipping near-black prose on near-black bg in dark mode.
- Replace broken inline `#xxx dark:#xxx` pseudo-CSS in the docs page
with real `html.dark .docs-content a {...}` selectors.
- Move benchmark bar-chart value labels outside the bars (white-on-
colored-bar was 2.42:1; dark tabular-nums on card bg is fine).
- Fix benchmarks heading hierarchy (h1 → h2 → h3, no skipped levels).
- Add `<main id="main">` landmark on playground and benchmarks.
- Add aria-labels on the docs sidebar toggle and search button, and
align the search button's accessible name with its visible text.
- Make the theme-toggle aria-label static ("Toggle light and dark
theme") — the state-dependent variant caused hydration prop mismatch
warnings, and the visible icon already conveys state.
Add a LighthouseScoreCard to /benchmarks: four SVG gauges using
Lighthouse's own color bands, linking out to PageSpeed Insights.
Also add back the "view page source" icon button on the homepage nav
(next to GitHub + theme toggle), pointing at pages/index.pyxl on
GitHub, matching the pattern used on the other pages.
Final Lighthouse (production build, desktop preset):
| | dark | light |
|------------|----------------------|-----------------------|
| home | 100 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| playground | 99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| docs | 99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| benchmarks | 99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
The 1-point dark-mode perf drop is render-blocking Tailwind CSS
common to all four pages — framework-level, not addressable here.
The landing redesign stopped loading Inter + JetBrains Mono from Google Fonts, but the other four pages (playground, docs, benchmarks, not-found) still carried the <link rel="stylesheet" href="fonts.googleapis..."> in their <Head>. That made the homepage render in the system font stack while every sub-page rendered in Inter — a visible font-shift the moment you clicked into /docs from /. Remove the Google Fonts links from all four sub-pages, update tailwind.config.cjs's fontFamily.sans/mono to the same system-font stack the global stylesheet already uses, and replace two inline 'JetBrains Mono' rules in the docs stylesheet with the system mono fallback. Every page is now truly system-font-only. Side effect: Lighthouse perf on /playground, /docs, and /benchmarks goes from 99 → 100 (no more render-blocking fonts.googleapis.com request). All four pages now score 100/100/100/100 in both light and dark modes.
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
1 participant
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.
Summary
pages/index.pyxlfrom 1,664 → 777 lines, consolidating 12 sections into 7 and leading with a single "Python + React in one file" hero message.IntersectionObserverreveals, 6×GradientOrb, client-side syntax tokenizer) with static CSS so the landing ships far less JS and zero continuous animation.<script>inpages/layout.pyxlso the dark/light toggle no longer causes FOUC or hydration mismatches. Layout, index, andThemeTogglenow drive colour purely via Tailwinddark:variants.zinc-500 → zinc-400), recolours the Subscribe button (emerald-500 + near-black text), and brightens the.sh-cmtcomment token to clear WCAG AA everywhere.Lighthouse (production)
(Mobile perf gap is render-blocking Tailwind CSS + unused framework JS — out of scope here.)
What got cut
WhyPyxlecomparison grid,HowItWorks4-step diagram,UseCases(AI dashboards / internal tools / data apps), the full framework bar chart. All still live on/docsand/benchmarks.Test plan
localStoragepersists@actionsubmits end-to-end ("You're on the list.")/docs,/benchmarks,/playgroundstill render (shared layout + theme context preserved)