From 3917c5137d2e38bffe19197f8dfcfee4ef0bf43f Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Fri, 20 Feb 2026 15:44:16 +0100 Subject: [PATCH] website: clean up liveline page, fix dark mode, add OG tags - Remove 5 ChartPlaceholder stubs that were never replaced with real content - Add OG meta tags (title, description, og:image 1280x800, twitter:card summary_large_image) for rich previews on X, Slack, Discord - Rename PropsTable to ComparisonTable with configurable headers prop, fixing the hardcoded 'Prop/Type/Default' headers on comparison tables - Remove stale Antigravity/Jetski comparison section - Switch dark mode from .dark class toggle to prefers-color-scheme media query via Tailwind @custom-variant. Remove inline JS script from root.tsx, update all .dark selectors in liveline.css, liveline-prism.css to use @variant dark from globals.css so strategy is defined in one place - Fix scrollbar colors: light gray on light backgrounds, subtle white on dark backgrounds (was using --color-muted which was invisible in both) - Update remote access section with traforo link, VPN/firewall context, MCP env var docs, and more use cases from docs/remote-access.md --- website/src/components/markdown.tsx | 16 +-- website/src/root.tsx | 11 +- website/src/routes/liveline.tsx | 69 ++++++++----- website/src/styles/globals.css | 21 ++-- website/src/styles/liveline-prism.css | 142 +++++++++++++------------- website/src/styles/liveline.css | 20 ++-- 6 files changed, 151 insertions(+), 128 deletions(-) diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx index 15d5152..6e823a8 100644 --- a/website/src/components/markdown.tsx +++ b/website/src/components/markdown.tsx @@ -478,11 +478,13 @@ export function ChartPlaceholder({ height = 200, label }: { height?: number; lab Comparison table ========================================================================= */ -export function PropsTable({ +export function ComparisonTable({ title, + headers, rows, }: { title?: string; + headers: [string, string, string]; rows: Array<[string, string, string]>; }) { return ( @@ -511,7 +513,7 @@ export function PropsTable({ > - {["Prop", "Type", "Default"].map((header) => { + {headers.map((header) => { return ( - {rows.map(([prop, type, def]) => { + {rows.map(([feature, them, us]) => { return ( - + - {prop} + {feature} - {type} + {them} - {def} + {us} ); diff --git a/website/src/root.tsx b/website/src/root.tsx index 9c87729..7609b4d 100644 --- a/website/src/root.tsx +++ b/website/src/root.tsx @@ -11,19 +11,10 @@ import { export function Layout({ children }: { children: React.ReactNode }) { return ( - + - {/* - Apply .dark class based on OS prefers-color-scheme. - Inline in to prevent FOUC. Listener handles live OS changes. - */} -