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
2026-02-20 15:44:16 +01:00
parent 11b615c297
commit 3917c5137d
6 changed files with 151 additions and 128 deletions
@@ -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({
      >
        <thead>
          <tr>
-            {["Prop", "Type", "Default"].map((header) => {
+            {headers.map((header) => {
              return (
                <th
                  key={header}
@@ -532,9 +534,9 @@ export function PropsTable({
          </tr>
        </thead>
        <tbody>
-          {rows.map(([prop, type, def]) => {
+          {rows.map(([feature, them, us]) => {
            return (
-              <tr key={prop}>
+              <tr key={feature}>
                <td
                  style={{
                    padding: "4.8px 12px 4.8px 0",
@@ -546,7 +548,7 @@ export function PropsTable({
                    whiteSpace: "nowrap",
                  }}
                >
-                  {prop}
+                  {feature}
                </td>
                <td
                  style={{
@@ -559,7 +561,7 @@ export function PropsTable({
                    whiteSpace: "nowrap",
                  }}
                >
-                  {type}
+                  {them}
                </td>
                <td
                  style={{
@@ -571,7 +573,7 @@ export function PropsTable({
                    borderBottom: "1px solid var(--ll-border)",
                  }}
                >
-                  {def}
+                  {us}
                </td>
              </tr>
            );
@@ -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"
@@ -14,14 +14,35 @@ import {
  Code,
  Caption,
  CodeBlock,
-  ChartPlaceholder,
  Section,
-  PropsTable,
+  ComparisonTable,
  List,
  OL,
  Li,
 } from "website/src/components/markdown";

+export function meta() {
+  const title = "Playwriter - Control your Chrome with Playwright API";
+  const description =
+    "Chrome extension + CLI for browser automation. Full Playwright API on your existing browser. No new windows, no flags, no context bloat.";
+  const image = "https://playwriter.dev/screenshot@2x.png";
+  return [
+    { title },
+    { name: "description", content: description },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    { property: "og:image", content: image },
+    { property: "og:image:width", content: "1280" },
+    { property: "og:image:height", content: "800" },
+    { property: "og:type", content: "website" },
+    { property: "og:url", content: "https://playwriter.dev/liveline" },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:image", content: image },
+  ];
+}
+
 const tocItems = [
  { label: "Getting started", href: "#getting-started" },
  { label: "How it works", href: "#how-it-works" },
@@ -101,7 +122,6 @@ export default function LivelinePage() {
          playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
        `}</CodeBlock>

-        <ChartPlaceholder height={200} label="getting started" />
        <Caption>
          Extension icon green = connected. Gray = not attached to this tab.
        </Caption>
@@ -186,7 +206,6 @@ export default function LivelinePage() {
          screenshots when spatial layout matters &mdash; grids, dashboards, maps.
        </P>

-        <ChartPlaceholder height={200} label="snapshot" />
        <Caption>
          Accessibility tree as text. 5&ndash;20KB vs 100KB+ for screenshots.
        </Caption>
@@ -217,7 +236,6 @@ export default function LivelinePage() {
          and visual modes freely.
        </P>

-        <ChartPlaceholder height={260} label="visual labels" />
        <Caption>
          Vimium-style labels. Screenshot + snapshot in one call.
        </Caption>
@@ -286,7 +304,6 @@ export default function LivelinePage() {
          <Code>grep</Code> across all loaded scripts.
        </P>

-        <ChartPlaceholder height={200} label="debugger" />
        <Caption>
          Breakpoints, stepping, variable inspection &mdash; from the CLI.
        </Caption>
@@ -351,7 +368,6 @@ export default function LivelinePage() {
          cancel without saving with <Code>cancelRecording</Code>.
        </P>

-        <ChartPlaceholder height={200} label="recording" />
        <Caption>
          Native tab capture. 30&ndash;60fps. Survives navigation.
        </Caption>
@@ -364,8 +380,9 @@ export default function LivelinePage() {
          How Playwriter compares to other browser automation approaches.
        </P>

-        <PropsTable
+        <ComparisonTable
          title="vs Playwright MCP"
+          headers={["", "Playwright MCP", "Playwriter"]}
          rows={[
            ["Browser", "Spawns new Chrome", "Uses your Chrome"],
            ["Extensions", "None", "Your existing ones"],
@@ -375,8 +392,9 @@ export default function LivelinePage() {
          ]}
        />

-        <PropsTable
+        <ComparisonTable
          title="vs BrowserMCP"
+          headers={["", "BrowserMCP", "Playwriter"]}
          rows={[
            ["Tools", "12+ dedicated tools", "1 execute tool"],
            ["API", "Limited actions", "Full Playwright"],
@@ -385,17 +403,9 @@ export default function LivelinePage() {
          ]}
        />

-        <PropsTable
-          title="vs Antigravity (Jetski)"
-          rows={[
-            ["Tools", "17+ tools", "1 tool"],
-            ["Subagent", "Spawns for each task", "Direct execution"],
-            ["Latency", "High (agent overhead)", "Low"],
-          ]}
-        />
-
-        <PropsTable
+        <ComparisonTable
          title="vs Claude Browser Extension"
+          headers={["", "Claude Extension", "Playwriter"]}
          rows={[
            ["Agent support", "Claude only", "Any MCP client"],
            ["Windows WSL", "No", "Yes"],
@@ -413,16 +423,19 @@ export default function LivelinePage() {
      <Section id="remote-access" title="Remote access">

        <P>
-          Control Chrome on a remote machine over the internet using tunnels.
-          Run the relay on the host, expose it through a tunnel, and connect
-          from anywhere.
+          Control Chrome on any machine from anywhere over the internet.
+          The relay runs on the host alongside Chrome.
+          A{" "}
+          <A href="https://traforo.dev">traforo</A>{" "}
+          tunnel exposes it through Cloudflare, giving you a secure public URL.
+          No VPN, no firewall rules, no port forwarding.
        </P>

        <CodeBlock lang="bash">{dedent`
-          # On the host machine
+          # On the host machine — start relay with tunnel
          npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token <secret>

-          # From anywhere
+          # From anywhere — set env vars and use normally
          export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev
          export PLAYWRITER_TOKEN=<secret>
          playwriter -s 1 -e "await page.goto('https://example.com')"
@@ -430,9 +443,11 @@ export default function LivelinePage() {

        <P>
          Also works on a LAN without tunnels &mdash; just set{" "}
-          <Code>PLAYWRITER_HOST=192.168.1.10</Code>. Use cases
-          include controlling a headless Mac mini, providing remote user
-          support, and multi-machine automation.
+          <Code>PLAYWRITER_HOST=192.168.1.10</Code>. Works for MCP
+          too &mdash; set <Code>PLAYWRITER_HOST</Code> and{" "}
+          <Code>PLAYWRITER_TOKEN</Code> in your MCP client env config.
+          Use cases: headless Mac mini, remote user support,
+          multi-machine automation, dev from a VM or devcontainer.
        </P>

      </Section>
@@ -1,5 +1,5 @@
@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (@media (prefers-color-scheme: dark));

@plugin "@tailwindcss/typography";

@@ -38,9 +38,8 @@
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.871 0.006 286.286);

-    /* Dark mode overrides — @variant dark inside :root compiles to
-       :root:where(.dark, .dark *), following whatever strategy is
-       configured in @custom-variant dark above */
+    /* Dark mode overrides — uses prefers-color-scheme media query
+       via @custom-variant dark above */
    @variant dark {
        --background: oklch(0.21 0.006 285.885);
        --foreground: oklch(0.985 0 0);
@@ -137,11 +136,21 @@
 }

 ::-webkit-scrollbar-thumb {
-    background: var(--color-muted);
+    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    border: none;
 }

 ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-muted-foreground);
+    background: rgba(0, 0, 0, 0.3);
+}
+
+@variant dark {
+    ::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
 }
@@ -136,93 +136,95 @@ pre[class*="language-"] {

 /* ======================================================================
   Dark mode - GitHub Dark inspired palette.
-   Plain CSS (not processed by Tailwind), uses .dark ancestor selector
-   matching @custom-variant dark in globals.css.
+   Uses @variant dark from globals.css so the strategy is defined in
+   one place (@custom-variant dark in globals.css).
   ====================================================================== */

-.dark code[class*="language-"],
-.dark pre[class*="language-"] {
-  color: #e6edf3;
-}
+@variant dark {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #e6edf3;
+  }

-.dark .token.keyword,
-.dark .token.module,
-.dark .token.imports,
-.dark .token.control-flow {
-  color: #ff7b72;
-}
+  .token.keyword,
+  .token.module,
+  .token.imports,
+  .token.control-flow {
+    color: #ff7b72;
+  }

-.dark .token.string,
-.dark .token.template-string,
-.dark .token.attr-value {
-  color: #a5d6ff;
-}
+  .token.string,
+  .token.template-string,
+  .token.attr-value {
+    color: #a5d6ff;
+  }

-.dark .token.function,
-.dark .token.class-name {
-  color: #d2a8ff;
-}
+  .token.function,
+  .token.class-name {
+    color: #d2a8ff;
+  }

-.dark .token.property,
-.dark .token.parameter {
-  color: #ffa657;
-}
+  .token.property,
+  .token.parameter {
+    color: #ffa657;
+  }

-.dark .token.tag .token.tag {
-  color: #7ee787;
-}
+  .token.tag .token.tag {
+    color: #7ee787;
+  }

-.dark .token.tag .token.class-name {
-  color: #7ee787;
-}
+  .token.tag .token.class-name {
+    color: #7ee787;
+  }

-.dark .token.tag .token.attr-name,
-.dark .token.attr-name {
-  color: #79c0ff;
-}
+  .token.tag .token.attr-name,
+  .token.attr-name {
+    color: #79c0ff;
+  }

-.dark .token.number {
-  color: #79c0ff;
-}
+  .token.number {
+    color: #79c0ff;
+  }

-.dark .token.operator {
-  color: #ff7b72;
-}
+  .token.operator {
+    color: #ff7b72;
+  }

-.dark .token.punctuation {
-  color: #e6edf3;
-}
+  .token.punctuation {
+    color: #e6edf3;
+  }

-.dark .token.boolean,
-.dark .token.constant,
-.dark .token.builtin {
-  color: #79c0ff;
-}
+  .token.boolean,
+  .token.constant,
+  .token.builtin {
+    color: #79c0ff;
+  }

-.dark .token.comment,
-.dark .token.prolog,
-.dark .token.doctype,
-.dark .token.cdata {
-  color: #8b949e;
-  font-style: italic;
-}
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #8b949e;
+    font-style: italic;
+  }

-.dark .token.tag .token.punctuation {
-  color: #e6edf3;
-}
+  .token.tag .token.punctuation {
+    color: #e6edf3;
+  }

-.dark .token.spread {
-  color: #ff7b72;
-}
+  .token.spread {
+    color: #ff7b72;
+  }

-.dark .token.plain-text {
-  color: #e6edf3;
-}
+  .token.plain-text {
+    color: #e6edf3;
+  }

-.dark .token.regex {
-  color: #a5d6ff;
-}
+  .token.regex {
+    color: #a5d6ff;
+  }

-.dark .language-bash .token.function {
-  color: #79c0ff;
+  .language-bash .token.function {
+    color: #79c0ff;
+  }
 }
@@ -113,9 +113,10 @@
  --ll-fade-12: rgba(255, 255, 255, 0);
 }

-/* Dark mode overrides — plain CSS, not processed by Tailwind.
-   Uses .dark ancestor selector matching @custom-variant dark in globals.css */
-.dark .liveline-page {
+/* Dark mode overrides — uses @variant dark from globals.css
+   so the strategy is defined in one place */
+@variant dark {
+.liveline-page {
  --ll-text-primary: rgba(255, 255, 255, 0.9);
  --ll-text-secondary: rgba(255, 255, 255, 0.45);
  --ll-text-tertiary: rgba(255, 255, 255, 0.25);
@@ -161,6 +162,7 @@
  --ll-fade-11: rgba(17, 17, 17, 0.002);
  --ll-fade-12: rgba(17, 17, 17, 0);
 }
+}

@supports (color: color(display-p3 1 1 1)) {
  .liveline-page {
@@ -258,12 +260,14 @@
  z-index: -1;
 }

-.dark .ll-inline-code {
-  color: rgba(255, 255, 255, 0.75);
-}
+@variant dark {
+  .ll-inline-code {
+    color: rgba(255, 255, 255, 0.75);
+  }

-.dark .ll-inline-code::before {
-  background: rgba(255, 255, 255, 0.08);
+  .ll-inline-code::before {
+    background: rgba(255, 255, 255, 0.08);
+  }
 }

 /* ========================================================================