Skip to content

feat: refresh landing page with Hearthlight theme#205

Merged
zhongnansu merged 2 commits into
mainfrom
worktree-website-refresh
Jun 15, 2026
Merged

feat: refresh landing page with Hearthlight theme#205
zhongnansu merged 2 commits into
mainfrom
worktree-website-refresh

Conversation

@zhongnansu

@zhongnansu zhongnansu commented Jun 13, 2026

Copy link
Copy Markdown
Member

Summary

The GitHub Pages landing page (docs/index.html) hadn't been touched since v1.2.2 and was still built around the legacy purple theme. The product has since moved to the Hearthlight palette (warm brass/amber on walnut surfaces). This PR brings the marketing page in line with the product brand, regenerates the product screenshots, and fixes stale references.

Product demo (real extension, recorded with Playwright)

Dobby AI product demo

Landing page scroll-through

Landing page scroll-through

What changed

Theme — now matches src/shared/color-palette.ts (dark)

  • Recolored from legacy purple #7c3aed → product brass/amber accent #d08a23#efa83e
  • Warm walnut-charcoal surfaces (#181512 / #211c17) and warm cream text (#f7f0e6)
  • Warm hero orbs + gradient mesh instead of violet

Visual upgrades

  • Distinctive Bricolage Grotesque display type for all headings (replacing system fonts)
  • New floating browser-frame hero mockup showing the product in context — the hero was previously logo-only
  • Subtle grain texture + layered gradient mesh for depth

Regenerated product screenshots (docs/images/*.png)

  • Replaced the March 2026 captures (which still showed the old purple UI) with fresh Hearthlight captures, recorded by driving the built extension in Playwright against a sample article
  • Covers: text-selection trigger, smart-action toolbar, inline response (light), response (dark), and screenshot-capture mode — all 1280×800

Correctness fixes

  • Version badge v1.2.2v1.3.1
  • All 5 GitHub links github.com/zhongnansu/dobby-aigithub.com/Duobi-AI/dobby-ai
  • og:url / og:image pointed at the wrong domain → duobi-ai.github.io
  • Added prefers-reduced-motion handling so scroll-reveal content is never left hidden

Verification

  • Screenshots: each captured state verified visually (zoomed) — bubble copy legible, amber theme correct in both light and dark, capture toolbar (Capture/Reselect/Cancel) present.
  • Landing page: Playwright checks at 1440px and 390px — warm theme renders across all sections, mobile stacks cleanly, scroll-reveal fires, reduced-motion fallback shows all content. grep confirms zero purple/stale references.

🤖 Generated with Claude Code

Update the GitHub Pages landing page (docs/index.html) to match the
product's current Hearthlight palette and fix stale references.

- Recolor from legacy purple (#7c3aed) to the product's brass/amber
  accent (#d08a23 → #efa83e) on warm walnut surfaces, pulled from
  src/shared/color-palette.ts dark mode
- Add distinctive display typography (Bricolage Grotesque) for headings
- Add a floating browser-frame hero product mockup
- Add grain texture + gradient mesh for atmospheric depth
- Fix stale version badge (v1.2.2 → v1.3.1)
- Fix GitHub URLs (zhongnansu → Duobi-AI) and og:url/og:image domain
- Respect prefers-reduced-motion so content never stays hidden

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

📦 PR Preview — Ask AI Extension

Version: 1.3.1
Zip size: 1166.8 KB

⬇️ Download artifact


Permissions

No permission changes detected. ✅


Preview Checklist

Before merging, manually test with the artifact above:

  • Load unpacked extension in chrome://extensions (developer mode)
  • Select text on any webpage and verify the trigger button appears
  • Click the trigger button and confirm the popup renders correctly
  • Right-click selected text and verify context menu items are present
  • Open a CSP-restricted page (e.g. chrome://extensions) and verify fallback works
  • Check the DevTools console for errors

Updated by PR Preview Bot — workflow run

@github-actions

Copy link
Copy Markdown
Contributor

📊 Code Coverage Report

File Coverage Status
proxy/src/index.ts 98.0% 🟢
proxy/src/openai.ts 100.0% 🟢
proxy/src/rate-limit.ts 100.0% 🟢
proxy/src/validate.ts 95.4% 🟢
src/options.tsx 91.5% 🟢
src/popup.tsx 100.0% 🟢
src/background/index.ts 83.3% 🟢
src/content/api.ts 87.5% 🟢
src/content/detection.ts 100.0% 🟢
src/content/history.ts 82.5% 🟢
src/content/image-capture.ts 89.0% 🟢
src/content/presets.ts 100.0% 🟢
src/content/prompt.ts 96.7% 🟢
src/content/autosuggest/context.ts 98.5% 🟢
src/content/autosuggest/debounce.ts 100.0% 🟢
src/content/autosuggest/editor.ts 87.6% 🟢
src/content/autosuggest/ghost-text.ts 97.4% 🟢
src/content/autosuggest/index.ts 82.9% 🟢
src/content/autosuggest/styles.ts 100.0% 🟢
src/content/bubble/core.tsx 95.3% 🟢
src/content/bubble/history.ts 80.0% 🟢
src/content/bubble/legacy-copy-button.ts 100.0% 🟢
src/content/bubble/markdown.ts 95.3% 🟢
src/content/bubble/shell.tsx 94.8% 🟢
src/content/bubble/stream.ts 94.3% 🟢
src/content/bubble/styles.ts 100.0% 🟢
src/content/bubble/view-model.ts 100.0% 🟢
src/content/shared/constants.ts 100.0% 🟢
src/content/shared/dom-utils.ts 100.0% 🟢
src/content/shared/preset-usage.ts 90.6% 🟢
src/content/shared/state.ts 100.0% 🟢
src/content/trigger/button.tsx 89.8% 🟢
src/content/trigger/progress-ring.ts 100.0% 🟢
src/content/trigger/screenshot.ts 98.5% 🟢
src/content/trigger/selection.ts 71.2% 🔴
src/content/trigger/styles.ts 100.0% 🟢
src/content/trigger/toolbar-shell.tsx 100.0% 🟢
src/shared/autosuggest-limits.ts 100.0% 🟢
src/shared/brand.ts 100.0% 🟢
src/shared/color-palette.ts 100.0% 🟢
src/shared/model-config.ts 100.0% 🟢
src/shared/react-root.tsx 100.0% 🟢
src/shared/runtime-messages.ts 100.0% 🟢
src/shared/storage.ts 93.3% 🟢
src/shared/theme.ts 73.6% 🔴
Overall 93.8% 🟢 PASS

Threshold: 80%

✅ Coverage meets the minimum threshold.


Updated by Code Coverage workflow

Replace the March 2026 screenshots (which showed the legacy purple UI)
with fresh captures of the current Hearthlight (amber) build, recorded by
driving the built extension in Playwright against a sample article:

- 1-text-selection-trigger: amber Dobby trigger on text selection
- 2-preset-chips: expanded smart-action toolbar
- 3-ai-response: streamed inline response bubble (light)
- 4-dark-mode: response bubble in dark mode
- 5-screenshot-capture-mode: drag-select region + capture toolbar

All 1280x800. Now matches the product palette in src/shared/color-palette.ts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@zhongnansu zhongnansu merged commit 408ad04 into main Jun 15, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant