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
This commit is contained in:
Tommy D. Rossi
2026-02-20 15:44:16 +01:00
parent 11b615c297
commit 3917c5137d
6 changed files with 151 additions and 128 deletions
+1 -10
View File
@@ -11,19 +11,10 @@ import {
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html className="" lang="en" suppressHydrationWarning>
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/*
Apply .dark class based on OS prefers-color-scheme.
Inline in <head> to prevent FOUC. Listener handles live OS changes.
*/}
<script
dangerouslySetInnerHTML={{
__html: `(function(){var d=document.documentElement.classList,m=matchMedia('(prefers-color-scheme:dark)');function a(){d.toggle('dark',m.matches)}a();m.addEventListener('change',a)})()`,
}}
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"