liveline: add Link component, OL, remove BackButton, dedent code blocks, spacing tweaks

- 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

website/src/components/markdown.tsx

@@ -114,7 +114,7 @@ export function TableOfContents({
                 fontWeight: 475,
                 lineHeight: "15.6px",
                 letterSpacing: "-0.04px",
-                padding: "3px 0",
+                padding: "5px 0",
                 color: defaultColor,
                 fontFamily: "var(--ll-font-primary)",
                 transition: "color 0.15s ease",
@@ -249,6 +249,29 @@ export function Caption({ children }: { children: React.ReactNode }) {
   );
 }
 
+export function A({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        color: "var(--ll-accent, #0969da)",
+        fontWeight: 600,
+        textDecoration: "none",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.textDecoration = "underline";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.textDecoration = "none";
+      }}
+    >
+      {children}
+    </a>
+  );
+}
+
 export function Code({ children }: { children: React.ReactNode }) {
   return (
     <code className="ll-inline-code">
@@ -278,6 +301,25 @@ export function Section({ id, title, children }: { id: string; title: string; ch
   );
 }
 
+export function OL({ children }: { children: React.ReactNode }) {
+  return (
+    <ol
+      className="m-0 pl-5"
+      style={{
+        fontFamily: "var(--ll-font-primary)",
+        fontSize: "14px",
+        fontWeight: 475,
+        lineHeight: "20px",
+        letterSpacing: "-0.09px",
+        color: "var(--ll-text-primary)",
+        listStyleType: "decimal",
+      }}
+    >
+      {children}
+    </ol>
+  );
+}
+
 export function List({ children }: { children: React.ReactNode }) {
   return (
     <ul
@@ -564,7 +606,6 @@ export function EditorialPage({
         textRendering: "optimizeLegibility",
       }}
     >
-      <BackButton />
       <TableOfContents items={toc} logo={logo} />
 
       <div

website/src/routes/liveline.tsx

@@ -4,11 +4,13 @@
  * Styles from liveline.css and liveline-prism.css.
  */
 
+import dedent from "string-dedent";
 import "website/src/styles/liveline.css";
 import "website/src/styles/liveline-prism.css";
 import {
   EditorialPage,
   P,
+  A,
   Code,
   Caption,
   CodeBlock,
@@ -16,6 +18,7 @@ import {
   Section,
   PropsTable,
   List,
+  OL,
   Li,
 } from "website/src/components/markdown";
 
@@ -40,7 +43,8 @@ export default function LivelinePage() {
       <P>
         Playwriter lets you control your Chrome browser with the full
         Playwright API. A Chrome extension, a local relay, and a CLI. No new
-        browser windows, no Chrome flags, no context bloat.
+        browser windows, no Chrome flags, no context bloat.{" "}
+        <A href="https://github.com/remorses/playwriter">Star on GitHub</A>.
       </P>
 
       <ChartPlaceholder height={300} label="demo" />
@@ -63,14 +67,19 @@ export default function LivelinePage() {
           Three steps. Extension, icon click, then you&apos;re automating.
         </P>
 
-      <CodeBlock lang="bash">{`# 1. Install the Chrome extension
+        <OL>
-#    https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe
+          <Li>
+            Install the{" "}
+            <A href="https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe">Chrome extension</A>
+          </Li>
+          <Li>Click the extension icon on a tab — it turns green</Li>
+          <Li>Install CLI and run your first command:</Li>
+        </OL>
 
-# 2. Click the extension icon on a tab — it turns green
+        <CodeBlock lang="bash">{dedent`
-
-# 3. Install CLI and run your first command
           npm i -g playwriter
-playwriter -s 1 -e "await page.goto('https://example.com')"`}</CodeBlock>
+          playwriter -s 1 -e "await page.goto('https://example.com')"
+        `}</CodeBlock>
 
         <P>
           The extension connects your browser to a local WebSocket relay on{" "}
@@ -79,10 +88,12 @@ playwriter -s 1 -e "await page.goto('https://example.com')"`}</CodeBlock>
           leaves your machine.
         </P>
 
-      <CodeBlock lang="bash">{`playwriter session new              # new sandbox, outputs id (e.g. 1)
+        <CodeBlock lang="bash">{dedent`
+          playwriter session new              # new sandbox, outputs id (e.g. 1)
           playwriter -s 1 -e "await page.goto('https://example.com')"
           playwriter -s 1 -e "console.log(await snapshot({ page }))"
-playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
+          playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+        `}</CodeBlock>
 
         <ChartPlaceholder height={200} label="getting started" />
         <Caption>
@@ -102,7 +113,8 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
           back.
         </P>
 
-      <CodeBlock lang="bash">{`┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
+        <CodeBlock lang="bash">{dedent`
+          ┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
           │   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
           │                     │     │                      │     │                 │
           │  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐  │
@@ -115,7 +127,8 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
           │  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └────────────┘ │
           │  │ Tab 2 (green) │  │                                  │        │        │
           │  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API  │
-└─────────────────────┘     (extension not clicked)      └─────────────────┘`}</CodeBlock>
+          └─────────────────────┘     (extension not clicked)      └─────────────────┘
+        `}</CodeBlock>
 
         <P>
           No Chrome restart required. No <Code>--remote-debugging-port</Code>{" "}
@@ -135,14 +148,16 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
           to every element.
         </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "await snapshot({ page })"
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "await snapshot({ page })"
 
           # Output:
           # - banner:
           #     - link "Home" [id="nav-home"]
           #     - navigation:
           #         - link "Docs" [data-testid="docs-link"]
-#         - link "Blog" role=link[name="Blog"]`}</CodeBlock>
+          #         - link "Blog" role=link[name="Blog"]
+        `}</CodeBlock>
 
         <P>
           Each line ends with a locator you can pass directly to{" "}
@@ -151,11 +166,13 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
           <Code>search</Code> to filter large pages.
         </P>
 
-      <CodeBlock lang="bash">{`# Search for specific elements
+        <CodeBlock lang="bash">{dedent`
+          # Search for specific elements
           playwriter -s 1 -e "await snapshot({ page, search: /button|submit/i })"
 
           # Always print URL first, then snapshot — pages can redirect
-playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)"`}</CodeBlock>
+          playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)"
+        `}</CodeBlock>
 
         <P>
           Snapshots are text. They cost a fraction of what screenshots cost in
@@ -179,10 +196,12 @@ playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).th
           read the labels, click by reference.
         </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })"
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })"
           # Returns screenshot + accessibility snapshot with aria-ref selectors
 
-playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
+          playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+        `}</CodeBlock>
 
         <P>
           Labels are color-coded by element type: yellow for links, orange for
@@ -208,7 +227,8 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
           different state. Browser tabs are shared.
         </P>
 
-      <CodeBlock lang="bash">{`playwriter session new    # => 1
+        <CodeBlock lang="bash">{dedent`
+          playwriter session new    # => 1
           playwriter session new    # => 2
           playwriter session list   # shows sessions + state keys
 
@@ -216,7 +236,8 @@ playwriter session list   # shows sessions + state keys
           playwriter -s 1 -e "state.users = await page.$$eval('.user', els => els.map(e => e.textContent))"
 
           # Session 2 can't see it
-playwriter -s 2 -e "console.log(state.users)"  # undefined`}</CodeBlock>
+          playwriter -s 2 -e "console.log(state.users)"  # undefined
+        `}</CodeBlock>
 
         <P>
           Create your own page to avoid interference from other agents. Reuse
@@ -224,10 +245,12 @@ playwriter -s 2 -e "console.log(state.users)"  # undefined`}</CodeBlock>
           fresh one, and store it in <Code>state</Code>.
         </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')"
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')"
 
           # All subsequent calls use state.myPage
-playwriter -s 1 -e "console.log(await state.myPage.title())"`}</CodeBlock>
+          playwriter -s 1 -e "console.log(await state.myPage.title())"
+        `}</CodeBlock>
 
       </Section>
 
@@ -239,14 +262,16 @@ playwriter -s 1 -e "console.log(await state.myPage.title())"`}</CodeBlock>
           without reloading.
         </P>
 
-      <CodeBlock lang="bash">{`# Set breakpoints and debug
+        <CodeBlock lang="bash">{dedent`
+          # Set breakpoints and debug
           playwriter -s 1 -e "state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()"
           playwriter -s 1 -e "state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))"
           playwriter -s 1 -e "await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })"
 
           # Live edit page code
           playwriter -s 1 -e "state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()"
-playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"`}</CodeBlock>
+          playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"
+        `}</CodeBlock>
 
         <P>
           Edits are in-memory and persist until the page reloads. Useful for
@@ -270,7 +295,8 @@ playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js',
           <Code>state</Code> and analyze across calls.
         </P>
 
-      <CodeBlock lang="bash">{`# Start intercepting
+        <CodeBlock lang="bash">{dedent`
+          # Start intercepting
           playwriter -s 1 -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })"
 
           # Trigger actions, then analyze
@@ -278,7 +304,8 @@ playwriter -s 1 -e "await page.click('button.load-more')"
           playwriter -s 1 -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))"
 
           # Replay an API call directly
-playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)"`}</CodeBlock>
+          playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)"
+        `}</CodeBlock>
 
         <P>
           This is faster than scrolling through DOM. Capture the real API
@@ -298,7 +325,8 @@ playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res
           as MP4.
         </P>
 
-      <CodeBlock lang="bash">{`# Start recording
+        <CodeBlock lang="bash">{dedent`
+          # Start recording
           playwriter -s 1 -e "await startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })"
 
           # Navigate, interact — recording continues
@@ -306,7 +334,8 @@ playwriter -s 1 -e "await page.click('a'); await page.waitForLoadState('domconte
           playwriter -s 1 -e "await page.goBack()"
 
           # Stop and save
-playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')"`}</CodeBlock>
+          playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')"
+        `}</CodeBlock>
 
         <P>
           Unlike <Code>getDisplayMedia</Code>, this approach
@@ -383,13 +412,15 @@ playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page
           from anywhere.
         </P>
 
-      <CodeBlock lang="bash">{`# On the host machine
+        <CodeBlock lang="bash">{dedent`
+          # On the host machine
           npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token <secret>
 
           # From anywhere
           export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev
           export PLAYWRITER_TOKEN=<secret>
-playwriter -s 1 -e "await page.goto('https://example.com')"`}</CodeBlock>
+          playwriter -s 1 -e "await page.goto('https://example.com')"
+        `}</CodeBlock>
 
         <P>
           Also works on a LAN without tunnels &mdash; just set{" "}

website/src/styles/liveline.css

@@ -79,6 +79,9 @@
     rgba(0, 0, 0, 0.04) 0px 4px 16px,
     rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset;
 
+  /* Link accent color */
+  --ll-accent: #0969da;
+
   /* P3 accent colors (wider gamut) */
   --ll-primary: #3e9fff;
   --ll-secondary: #f09637;
@@ -130,6 +133,7 @@
     rgba(255, 255, 255, 0.02) 0px 4px 16px,
     rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
 
+  --ll-accent: #58a6ff;
   --ll-primary: #60a5fa;
   --ll-secondary: #f5a623;