diff --git a/pages/benchmarks.pyxl b/pages/benchmarks.pyxl index f8c9cdc..e676348 100644 --- a/pages/benchmarks.pyxl +++ b/pages/benchmarks.pyxl @@ -15,7 +15,7 @@ export const createSlots = () => slots; /* ── data ────────────────────────────────────────────────────── */ const PYTHON_FRAMEWORKS = [ - { key: "pyxle", name: "Pyxle", color: "bg-emerald-500", text: "text-emerald-400", type: "Full-stack (SSR + API)" }, + { key: "pyxle", name: "Pyxle", color: "bg-emerald-500", text: "text-emerald-700 dark:text-emerald-400", type: "Full-stack (SSR + API)" }, { key: "fastapi", name: "FastAPI", color: "bg-cyan-500", text: "text-cyan-400", type: "API framework" }, { key: "django", name: "Django", color: "bg-yellow-500", text: "text-yellow-400", type: "Full-stack (no SSR)" }, { key: "flask", name: "Flask", color: "bg-purple-500", text: "text-purple-400", type: "Micro framework" }, @@ -108,24 +108,23 @@ function BarChart({ data, frameworks, maxOverride }) { return (
- + {fw.name} {isApiOnly && ( - + )}
-
-
0 ? '3rem' : '0' }} - > - - {val.toLocaleString()} - +
+
+
0 ? '0.25rem' : '0' }} + />
+ + {val.toLocaleString()} +
); @@ -137,21 +136,90 @@ function BarChart({ data, frameworks, maxOverride }) { function TestCard({ testKey, test, frameworks }) { const { theme } = useTheme(); return ( -
-

{test.name}

-

{test.desc}

+
+

{test.name}

+

{test.desc}

); } +/* ── Lighthouse score gauge ────────────────────────────────── + Four circular gauges matching the visual language of the + Google Lighthouse report. Values are pyxle.dev's actual + production desktop scores. Update if the real numbers change. + ────────────────────────────────────────────────────────── */ + +const LH_SCORES = [ + { label: "Performance", value: 100 }, + { label: "Accessibility", value: 100 }, + { label: "Best Practices", value: 100 }, + { label: "SEO", value: 100 }, +]; + +function LighthouseGauge({ label, value }) { + // Lighthouse-style color bands: >= 90 green, >= 50 orange, < 50 red. + const color = value >= 90 ? "#0cce6b" : value >= 50 ? "#ffa400" : "#ff4e42"; + const RADIUS = 48; + const CIRC = 2 * Math.PI * RADIUS; + const dash = (value / 100) * CIRC; + return ( +
+
+ +
+ {value} +
+
+ {label} +
+ ); +} + +function LighthouseScoreCard() { + return ( +
+
+ {LH_SCORES.map((s) => ( + + ))} +
+
+

+ Measured with Google Lighthouse (desktop preset) against the production build of pyxle.dev. +

+ + Verify on PageSpeed Insights + + +
+
+ ); +} + function SectionHeading({ label, title, subtitle }) { const { theme } = useTheme(); return (
-

{label}

+

{label}

{title}

- {subtitle &&

{subtitle}

} + {subtitle &&

{subtitle}

}
); } @@ -161,32 +229,26 @@ function SectionHeading({ label, title, subtitle }) { function BenchNav({ version }) { const { theme } = useTheme(); return ( -