Placeholders are now generated into src/assets/placeholders/ instead of
public/ so Vite's asset pipeline processes them. Since all are < 4KB,
Vite auto-inlines them as base64 data URIs via assetsInlineLimit — zero
extra HTTP requests for placeholders.
- Static imports resolve to data:image/png;base64,... at build time
- JSDoc on placeholder props documents why static imports are required
(synchronous availability, Vite inlining) and warns against dynamic
imports and public/ paths
- New LazyVideo component: same pixelated poster pattern, uses native
<video preload="none" loading="lazy"> for zero-JS lazy loading
Build-time script generates tiny 32px-wide versions of all images in
public/ using sharp. At runtime, PixelatedImage component renders these
with CSS image-rendering: pixelated (nearest-neighbor / point sampling)
for a crisp mosaic effect, then fades in the real image on load.
- Auto-discovers images in public/, skips placeholder- prefixed files
- Mtime check skips regeneration when placeholder is newer than source
- Callback ref handles cached images where onLoad fires before mount
- Explicit z-index prevents placeholder from covering the real image
- Runs automatically as part of pnpm build in website package
All CSS variables previously scoped under .liveline-page with --ll- prefix
are now at :root in globals.css with no prefix. Four names conflicting with
shadcn were renamed: --brand-primary, --brand-secondary, --link-accent,
--page-border.
Class renames: .liveline-page → .editorial-page, .liveline-article →
.editorial-article, .ll-bleed → .bleed, .ll-inline-code → .inline-code,
.ll-prose → .editorial-prose.
Filenames kept as-is for this commit to isolate the rename.
Dark mode fix: import liveline.css and liveline-prism.css via CSS @import
in globals.css instead of JS import in the route file. This brings them
into the Tailwind compilation chain so @variant dark works. @variant dark
silently fails in CSS files imported only via JS — documented this
constraint in website/AGENTS.md.
- Prism dark colors use CSS variables on :root with @variant dark
- liveline.css dark overrides use @variant dark nested inside selectors
- Table cells use --ll-text-primary for full contrast in both modes
- Prose paragraphs at 0.82 opacity, bold and inline code punch through
to full opacity for visual hierarchy
- Prose line-height increased to 22px
- Add website/AGENTS.md documenting dark mode rules
- 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
- Fixed --ll-bleed to 44px (8px padding + 36px line-number width, border-box)
- Line numbers fixed width 36px (always fits 3 digits, no layout shift)
- Line number opacity increased from 0.15 to 0.3 in both light and dark mode
- Commented out code block background
- Add A (link) component with --ll-accent color, bright #58a6ff in dark mode
- Add OL (ordered list) component for numbered steps
- Remove BackButton from EditorialPage
- Use string-dedent for all CodeBlock strings, properly indented in source
- Getting started steps as OL with clickable Chrome Web Store link
- Star on GitHub link in intro paragraph
- Inline heading rule (flex + 1px line) replaces separate Divider
- Heading padding 24px top/bottom, article gap 32px
- Sidebar TOC item spacing increased to 5px
- Centered image captions
- SectionHeading now renders as flex row with hairline rule extending
to fill remaining width after the heading text (matching benji.org)
- Removed separate Divider from Section component
- Restored original diagram layout from before refactor
- Increased article gap to 32px, heading padding to 24px top/bottom
- Centered image captions
Tommy D. Rossi