@steipete/summarize 0.1.0

package/docs/site/assets/site.css

@@ -0,0 +1,577 @@
+:root {
+  --bg0: #07090d;
+  --bg1: #0b1018;
+  --paper: #f2efe6;
+  --ink: #0d1117;
+  --fg0: rgba(242, 239, 230, 0.92);
+  --fg1: rgba(242, 239, 230, 0.74);
+  --fg2: rgba(242, 239, 230, 0.54);
+  --line: rgba(242, 239, 230, 0.14);
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
+  --shadow2: 0 10px 34px rgba(0, 0, 0, 0.38);
+
+  --accent: #b7ff3c;
+  --accent2: #ff3d8e;
+  --accent3: #54b8ff;
+
+  --r: 18px;
+  --r2: 26px;
+  --max: 1080px;
+
+  --mono:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  --body: var(--mono);
+  --serif: var(--mono);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg0: #fbf7ec;
+    --bg1: #f2efe6;
+    --paper: #0d1117;
+    --ink: #07090d;
+    --fg0: rgba(10, 15, 22, 0.9);
+    --fg1: rgba(10, 15, 22, 0.7);
+    --fg2: rgba(10, 15, 22, 0.52);
+    --line: rgba(10, 15, 22, 0.14);
+    --shadow: 0 24px 80px rgba(0, 0, 0, 0.12);
+    --shadow2: 0 10px 34px rgba(0, 0, 0, 0.1);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  color: var(--fg0);
+  background:
+    radial-gradient(1200px 700px at 10% -10%, rgba(183, 255, 60, 0.22), transparent 60%),
+    radial-gradient(1000px 680px at 94% 12%, rgba(255, 61, 142, 0.16), transparent 65%),
+    radial-gradient(880px 560px at 75% 95%, rgba(84, 184, 255, 0.16), transparent 55%),
+    linear-gradient(180deg, var(--bg0), var(--bg1));
+  font-family: var(--body);
+  letter-spacing: 0.01em;
+  line-height: 1.45;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+.shell {
+  position: relative;
+  margin: 0 auto;
+  max-width: var(--max);
+  padding: 26px 18px 70px;
+}
+
+.shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.25;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 6px 14px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+}
+
+.brand:hover {
+  text-decoration: none;
+}
+
+.brand__mark {
+  width: 32px;
+  height: 32px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background:
+    radial-gradient(
+      circle at 30% 30%,
+      rgba(183, 255, 60, 0.88),
+      rgba(183, 255, 60, 0.12) 55%,
+      transparent 70%
+    ), radial-gradient(circle at 80% 10%, rgba(255, 61, 142, 0.66), transparent 55%),
+    radial-gradient(circle at 20% 85%, rgba(84, 184, 255, 0.56), transparent 55%),
+    rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow2);
+  font-family: var(--serif);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.brand__word {
+  font-family: var(--serif);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  font-size: 18px;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.nav a {
+  padding: 8px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  color: var(--fg1);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.nav a:hover {
+  text-decoration: none;
+  color: var(--fg0);
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.nav a[aria-current="page"] {
+  color: var(--fg0);
+  border-color: rgba(183, 255, 60, 0.35);
+  background: rgba(183, 255, 60, 0.08);
+}
+
+.hero {
+  padding: 18px 6px 6px;
+}
+
+.hero__grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 18px;
+}
+
+@media (max-width: 900px) {
+  .hero__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.hero__card {
+  position: relative;
+  border-radius: var(--r2);
+  border: 1px solid var(--line);
+  background:
+    radial-gradient(1100px 700px at 0% 0%, rgba(183, 255, 60, 0.1), transparent 50%),
+    radial-gradient(800px 500px at 100% 20%, rgba(255, 61, 142, 0.08), transparent 60%),
+    rgba(255, 255, 255, 0.04);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.hero__card::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 42%, rgba(255, 255, 255, 0.06));
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.hero__inner {
+  position: relative;
+  padding: 22px 20px 18px;
+}
+
+.kicker {
+  margin: 0 0 10px;
+  color: var(--fg2);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: clamp(30px, 4.2vw, 46px);
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  line-height: 1.02;
+}
+
+.lede {
+  margin: 12px 0 0;
+  color: var(--fg1);
+  font-size: 18px;
+  max-width: 60ch;
+}
+
+.lede strong {
+  color: var(--fg0);
+  font-weight: 600;
+}
+
+.pillRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--fg1);
+  background: rgba(255, 255, 255, 0.03);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.pill__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 0 4px rgba(183, 255, 60, 0.16);
+}
+
+.ctaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--fg0);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.btn:hover {
+  text-decoration: none;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.btn--primary {
+  border-color: rgba(183, 255, 60, 0.42);
+  background:
+    radial-gradient(circle at 20% 10%, rgba(183, 255, 60, 0.26), transparent 60%),
+    rgba(183, 255, 60, 0.08);
+}
+
+.btn--primary:hover {
+  background:
+    radial-gradient(circle at 20% 10%, rgba(183, 255, 60, 0.32), transparent 60%),
+    rgba(183, 255, 60, 0.12);
+}
+
+.btn__icon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.9;
+}
+
+.codeCard {
+  position: relative;
+  padding: 18px 18px 16px;
+  border-left: 1px solid var(--line);
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 40%), rgba(255, 255, 255, 0.03);
+}
+
+@media (max-width: 900px) {
+  .codeCard {
+    border-left: none;
+    border-top: 1px solid var(--line);
+  }
+}
+
+.terminal {
+  border-radius: var(--r);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+.terminal__bar {
+  display: flex;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+.terminal__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+}
+.terminal__dot--a {
+  background: rgba(255, 61, 142, 0.65);
+}
+.terminal__dot--b {
+  background: rgba(183, 255, 60, 0.6);
+}
+.terminal__dot--c {
+  background: rgba(84, 184, 255, 0.6);
+}
+
+pre {
+  margin: 0;
+  padding: 14px 14px 12px;
+  color: rgba(242, 239, 230, 0.94);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-x: auto;
+}
+
+code {
+  font-family: var(--mono);
+}
+
+.copyRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.hint {
+  color: var(--fg2);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+  padding: 0 6px;
+}
+
+.card {
+  grid-column: span 6;
+  border-radius: var(--r2);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 18px 16px 16px;
+  box-shadow: var(--shadow2);
+}
+
+@media (max-width: 900px) {
+  .card {
+    grid-column: span 12;
+  }
+}
+
+.card h2 {
+  margin: 0 0 8px;
+  font-family: var(--serif);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  font-size: 18px;
+}
+
+.card p {
+  margin: 0;
+  color: var(--fg1);
+}
+
+.card .small {
+  margin-top: 10px;
+  color: var(--fg2);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+}
+
+.footer {
+  margin-top: 30px;
+  padding: 18px 6px 0;
+  border-top: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--fg2);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.footer a {
+  color: var(--fg1);
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.reveal.is-on {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+
+.hero--compact .hero__card {
+  max-width: 720px;
+  margin: 30px auto 0;
+}
+.hero--compact .hero__inner,
+.hero--compact .hero__card {
+  padding: 22px;
+}
+
+.docShell {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 18px;
+  padding: 10px 6px 0;
+}
+@media (max-width: 900px) {
+  .docShell {
+    grid-template-columns: 1fr;
+  }
+}
+
+.side {
+  position: sticky;
+  top: 14px;
+  align-self: start;
+  border-radius: var(--r2);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 14px 12px;
+  box-shadow: var(--shadow2);
+}
+
+@media (max-width: 900px) {
+  .side {
+    position: static;
+  }
+}
+
+.side h2 {
+  margin: 0 0 10px;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg2);
+}
+
+.side a {
+  display: block;
+  padding: 9px 10px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  color: var(--fg1);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.side a:hover {
+  text-decoration: none;
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--fg0);
+}
+.side a[aria-current="page"] {
+  border-color: rgba(183, 255, 60, 0.35);
+  background: rgba(183, 255, 60, 0.08);
+  color: var(--fg0);
+}
+
+.doc {
+  border-radius: var(--r2);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+  box-shadow: var(--shadow);
+  padding: 18px 18px 14px;
+}
+
+.doc h1 {
+  margin: 0 0 10px;
+  font-family: var(--serif);
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  font-size: 30px;
+}
+
+.doc h2 {
+  margin: 18px 0 8px;
+  font-family: var(--serif);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  font-size: 18px;
+}
+
+.doc ul {
+  margin: 8px 0 0 18px;
+  color: var(--fg1);
+}
+.doc li {
+  margin: 6px 0;
+}
+.doc p {
+  margin: 10px 0 0;
+  color: var(--fg1);
+}
+.doc .note {
+  margin-top: 14px;
+  padding: 12px 12px;
+  border-radius: 14px;
+  border: 1px dashed rgba(183, 255, 60, 0.35);
+  background: rgba(183, 255, 60, 0.06);
+  color: var(--fg1);
+}

package/docs/site/assets/site.js

@@ -0,0 +1,69 @@
+const canonicalHost = 'summarize.sh'
+const redirectHostnames = new Set(['summarize.is', 'www.summarize.is'])
+
+const maybeRedirect = () => {
+  try {
+    const { hostname, pathname, search, hash } = window.location
+    if (!redirectHostnames.has(hostname)) return
+    const target = `https://${canonicalHost}${pathname}${search}${hash}`
+    window.location.replace(target)
+  } catch {
+    // ignore
+  }
+}
+
+const highlightNav = () => {
+  const path = window.location.pathname
+  const isDocs = path.includes('/docs/')
+  const navDocs = document.querySelector('a[data-nav="docs"]')
+  const navHome = document.querySelector('a[data-nav="home"]')
+  if (navDocs && isDocs) navDocs.setAttribute('aria-current', 'page')
+  if (navHome && !isDocs) navHome.setAttribute('aria-current', 'page')
+
+  const sideLinks = document.querySelectorAll('.side a[href]')
+  for (const a of sideLinks) {
+    const href = a.getAttribute('href') ?? ''
+    if (!href) continue
+    const normalized = href.replace(/^\.\//, '')
+    if (path.endsWith(normalized)) a.setAttribute('aria-current', 'page')
+  }
+}
+
+const wireCopyButtons = () => {
+  const buttons = document.querySelectorAll('[data-copy]')
+  for (const button of buttons) {
+    button.addEventListener('click', async () => {
+      const selector = button.getAttribute('data-copy')
+      const target = selector ? document.querySelector(selector) : null
+      const text = target?.textContent?.trim() ?? ''
+      if (!text) return
+      try {
+        await navigator.clipboard.writeText(text)
+        const prev = button.textContent ?? ''
+        button.textContent = 'Copied'
+        button.setAttribute('data-copied', '1')
+        window.setTimeout(() => {
+          button.textContent = prev
+          button.removeAttribute('data-copied')
+        }, 900)
+      } catch {
+        // ignore
+      }
+    })
+  }
+}
+
+const reveal = () => {
+  const items = document.querySelectorAll('.reveal')
+  let i = 0
+  for (const el of items) {
+    const delay = Math.min(380, i * 70)
+    window.setTimeout(() => el.classList.add('is-on'), delay)
+    i++
+  }
+}
+
+maybeRedirect()
+highlightNav()
+wireCopyButtons()
+reveal()

package/docs/site/docs/config.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <title>Config — summarize</title>
+    <link rel="canonical" href="https://summarize.sh/docs/config" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="../assets/site.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <header class="top">
+        <a class="brand" href="../index.html" aria-label="summarize home">
+          <span class="brand__mark" aria-hidden="true">s</span>
+          <span class="brand__word">summarize</span>
+        </a>
+        <nav class="nav" aria-label="Primary">
+          <a data-nav="home" href="../index.html">Home</a>
+          <a data-nav="docs" href="./index.html">Docs</a>
+          <a href="https://github.com/steipete/summarize">GitHub</a>
+        </nav>
+      </header>
+
+      <section class="docShell">
+        <aside class="side" aria-label="Docs navigation">
+          <h2>Docs</h2>
+          <a href="./index.html">Overview</a>
+          <a href="./website.html">Website mode</a>
+          <a href="./youtube.html">YouTube mode</a>
+          <a href="./extract-only.html">Extract-only</a>
+          <a href="./llm.html">LLM</a>
+          <a href="./openai.html">OpenAI</a>
+          <a href="./firecrawl.html">Firecrawl</a>
+          <a href="./config.html">Config</a>
+        </aside>
+
+        <article class="doc reveal">
+          <p class="kicker">docs</p>
+          <h1>Config</h1>
+          <p>summarize is mostly flags + env vars. Keep secrets in env; keep defaults in a shell profile.</p>
+
+          <h2>Environment variables</h2>
+          <ul>
+            <li><code>OPENAI_API_KEY</code>, <code>XAI_API_KEY</code>, <code>GEMINI_API_KEY</code> — provider keys (only needed when a mode actually calls an LLM).</li>
+            <li><code>FIRECRAWL_API_KEY</code> — optional extraction fallback / preferred Markdown output in extract-only.</li>
+          </ul>
+
+          <h2>Tips</h2>
+          <ul>
+            <li>For deterministic output, pin <code>--model</code> and avoid provider fallback.</li>
+            <li>When debugging extraction, add <code>--verbose</code> and/or <code>--json</code> for structured output.</li>
+            <li>Use <code>--timeout</code> when crawling slow sites (defaults to <code>2m</code>).</li>
+          </ul>
+
+          <div class="note">
+            Want the raw content? Use <code>--extract-only</code> (then decide where the summary should happen).
+          </div>
+        </article>
+      </section>
+
+      <footer class="footer">
+        <span>summarize — Link → clean text → summary.</span>
+        <span><a href="./index.html">Docs</a> · <a href="https://github.com/steipete/summarize">Repo</a></span>
+      </footer>
+    </main>
+
+    <script type="module" src="../assets/site.js"></script>
+  </body>
+</html>