feat(web): swap comic strip placeholders for AI-generated panel art#113
Open
blove wants to merge 103 commits into
Open
feat(web): swap comic strip placeholders for AI-generated panel art#113blove wants to merge 103 commits into
blove wants to merge 103 commits into
Conversation
- Drop duplicate Docs link from the header; replace GitHub word with the GitHub mark SVG icon. - Landing-only: header overlays the hero with no bg/border so the gradient runs edge-to-edge. Docs pages keep the current solid header. - Code-block body left padding aligned to the tab pill's left edge (pl-3 to match the header's px-3) — fixes the visual indent drift. - Getting Started folder tree: column-align trailing `# comment`s and move dawn.generated.d.ts to the project root (its actual location). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a Mintlify-style PageActions dropdown next to the breadcrumb on every docs page: - Copy prompt (primary, desktop; in menu on mobile, conditional on promptSlug) - Copy page as Markdown (raw MDX via /api/markdown/<slug>) - Open in ChatGPT / Claude (deep links with the page URL pre-filled) - Edit on GitHub The previous "Skip ahead" callout block is removed; its CTA now lives inside PageActions. Adds RelatedCards: a responsive 1/2-col grid of title+subtitle link cards, registered as an MDX component. Rolled out across every docs page's "## Related" section, replacing the bulleted lists. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Compressed from a technical reference into a langchain-style flow: install → set key → see what you got → run → ship. Sells the three differentiators inline: file-system routing, no tool schemas, dev = prod. Closes with a RelatedCards grid pointing to recipes, route kinds, and the mental model. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Add back the `dawn.config.ts` mention to getting-started.mdx that
scripts/check-docs.mjs requires. Folded into the description of what
`dawn build` does ("walks the routes declared via dawn.config.ts").
- Fix hydration mismatch: RehypeFigure was extracting the figcaption
title via manual children walking that produced different shapes on
server vs client (string sometimes, single element other times),
leading to TabPill showing the full filename on the server and the
fallback "code" label on the client. Switch to React.Children.toArray
+ a recursive text-content walker so the extraction is deterministic
regardless of MDX's children shape.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Celebrates the 100-star milestone. Adds a server-side fetcher with 1-hour ISR cache that reads stargazers_count + forks_count from the GitHub API, with a sane fallback if the API rate-limits. Surfaces: - Navbar: star count attached to the GitHub icon link. - Landing: new StarsSection between HowItWorks and CtaSection with the milestone framing, a stats strip, and a "Star on GitHub" CTA. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switches both surfaces (navbar badge + landing StarsSection) to a static "100+" display. Drops the fork count stat from the landing section. Removes the live GitHub-stats fetcher — bring it back when we want dynamic numbers again. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the four-card pain grid + code comparison with: - "Sound familiar?" eyebrow - "Five projects in your org. Five different shapes." headline - Empathetic sub-line - 5-up grid of visibly-different file trees from real-sounding projects - "Or — one shape." transition into a single canonical Dawn tree - Four stacked one-liner pains grounded in researched complaints - Friendly closer Copy down from ~250 words to ~50. No code-comparison block (that story lives in Pattern / CodeExample later in the page). Drops the shiki import — the section is now a sync server component with plain-text file trees. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…xt.js apps" Headline now anchors Dawn's positioning to LangGraph.js explicitly: - Drop the ecosystem badge; the new headline + LogoWall below carry the same signal. - Headline: "Build LangGraph agents like Next.js apps." - Sub-headline enumerates Dawn's actual additions and closes with the anti-lock-in kicker "Keep the runtime. Drop the boilerplate." - Replace the GitHub link CTA with "Read the docs". GitHub stays in the navbar icon. - Canonical install command: `pnpm create dawn-ai-app my-agent` (fixes the prior inconsistency with the rest of the site). - New two-file CodeGroup below the install command shows the canonical Dawn shape: state.ts (Zod) + index.ts (agent()) — file paths as tab labels, index.ts active by default. - SEO: page title and meta description rewritten to match the new positioning. Implements positioning batch A from docs/superpowers/specs/2026-05-11-hero-positioning-rewrite-design.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…b5bd0 # Conflicts: # apps/web/app/components/landing/ProblemSection.tsx
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds two new landing sections and consolidates the ecosystem signal: - DELETE LogoWall (the 5-logo "Built on" strip); EcosystemSection carries the same logos plus the full provider grid and adapter cards. - MOVE EcosystemSection to position 2, directly under the hero. The hero says "your LangGraph.js stack" — the next thing the reader sees is what that stack contains. - NEW WhoItsFor section, placed right after ProblemSection. Three persona cards (Next.js SaaS team / Scaling LangGraph across teams / AI consultancy or agency) — self-qualification at the highest- intent moment, immediately after the pain lands. - NEW NotAReplacement section, placed just before CtaSection. Single column, three anti-claims naming LangGraph, LangSmith, and model providers. Trust signal to defuse lock-in fear before the CTA. Implements positioning batch B from docs/superpowers/specs/2026-05-11-trust-qualification-sections-design.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds an audience-specific intercept for existing LangGraph users between the NotAReplacement trust block and the universal CtaSection: - Eyebrow: "ALREADY ON LANGGRAPH?" - Headline: "Bring your project. Migrate in an afternoon." - CTA: "Migrate from LangGraph →" linking /docs/migrating-from-langgraph Compact banner, matches the established eyebrow/headline pattern from WhoItsFor and NotAReplacement. Hero CTAs and bottom CtaSection remain unchanged — migration is additive, not a replacement of the universal conversion path. Implements positioning batch C from docs/superpowers/specs/2026-05-11-migration-cta-section-design.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…b5bd0 # Conflicts: # apps/web/app/page.tsx
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a character/dialog break between WhoItsFor and ComparisonTable —
the emotional bridge between "this could be you" and the technical
comparison.
4 panels horizontal strip (responsive 1/2/4 col):
- Dev A: "Fifth StateGraph this month."
- Dev A: "This isn't agent code. This is project structure."
- Dev B: "You know Next.js, right? Same thing for LangGraph."
- Dev A: "…wait, that's it?"
Ships with placeholder stick-figure SVGs (amber strokes on dark cards).
Commissioned cartoony illustrations are a follow-up — the structure here
is stable enough to swap visuals without touching dialog/layout.
Eyebrow only ("MEANWHILE…"), no headline — the comic stands alone.
Implements the character/dialog brainstorm from
docs/superpowers/specs/2026-05-11-comic-strip-section-design.md.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the v1 stick-figure SVGs in ComicStrip with 4 DALL-E 3
generated panels matching the dialog beats. Same component shape,
same dialog, same placement — just the artwork upgrades.
- Drops the inline Panel{1..4}SVG components
- Stores panels as PNGs under apps/web/public/comic/
- Uses next/image with aspect-square (DALL-E generates 1024x1024)
- Adds descriptive alt text per panel for accessibility
Generated via ChatGPT/DALL-E with the style guide from the brainstorm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…b5bd0 # Conflicts: # apps/web/app/components/landing/ComicStrip.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Swaps the v1 stick-figure SVG placeholders in `ComicStrip` for 4 DALL-E 3 generated panel illustrations.
What changed
Generated via ChatGPT/DALL-E with the style guide from the brainstorm: modern flat illustration, warm dark palette, consistent character design across all 4 panels (Dev A with brown wavy hair + oval glasses + navy tee, Dev B with short black curls + mustard hoodie). No in-image text.
Test plan
🤖 Generated with Claude Code