From 6418490ae2057bfda099b35afe87e18e5f937608 Mon Sep 17 00:00:00 2001 From: itsflaid Date: Thu, 29 Oct 2026 05:42:52 +0800 Subject: [PATCH] feat(web): redesign landing and docs in the Taste Skill style - Warm-stone palette, white cards, dark terminal/code surfaces, pill nav - New hero with animated terminal, "Works with every agent" icon-card section, and a "Supported frameworks" icon-card section (18 frameworks) - Reworked problem, output, commands, method, CTA and footer sections - Docs retheme: dark code blocks, header-aware anchors - Shared reveal-on-scroll script, IconCard component, data/ + lib/icons - Agent and framework SVG marks with source/license notes Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01AgTNRXrKGbY9netLpqwy7k --- apps/web/src/assets/README.md | 12 +- apps/web/src/assets/agents/amp.svg | 1 + apps/web/src/assets/agents/antigravity.svg | 1 + apps/web/src/assets/agents/claudecode.svg | 1 + apps/web/src/assets/agents/cline.svg | 1 + apps/web/src/assets/agents/codex.svg | 1 + apps/web/src/assets/agents/cursor.svg | 1 + apps/web/src/assets/agents/geminicli.svg | 1 + apps/web/src/assets/agents/githubcopilot.svg | 1 + apps/web/src/assets/agents/kilocode.svg | 1 + apps/web/src/assets/agents/opencode.svg | 1 + apps/web/src/assets/agents/roocode.svg | 1 + apps/web/src/assets/agents/windsurf.svg | 1 + apps/web/src/assets/frameworks/adonisjs.svg | 1 + apps/web/src/assets/frameworks/angular.svg | 1 + apps/web/src/assets/frameworks/astro.svg | 1 + apps/web/src/assets/frameworks/expo.svg | 1 + apps/web/src/assets/frameworks/express.svg | 1 + apps/web/src/assets/frameworks/fastify.svg | 1 + apps/web/src/assets/frameworks/hono.svg | 1 + apps/web/src/assets/frameworks/koa.svg | 1 + apps/web/src/assets/frameworks/nestjs.svg | 1 + apps/web/src/assets/frameworks/nextdotjs.svg | 1 + apps/web/src/assets/frameworks/nuxt.svg | 1 + apps/web/src/assets/frameworks/qwik.svg | 1 + .../web/src/assets/frameworks/reactrouter.svg | 1 + apps/web/src/assets/frameworks/remix.svg | 1 + apps/web/src/assets/frameworks/solid.svg | 1 + apps/web/src/assets/frameworks/svelte.svg | 1 + apps/web/src/assets/frameworks/tanstack.svg | 1 + .../web/src/components/docs/DocsSidebar.astro | 4 +- .../components/landing/AgentsSection.astro | 156 ++++++++++ .../components/landing/CommandsSection.astro | 117 ++++---- .../src/components/landing/CopyCommand.astro | 76 +++-- .../landing/FrameworksSection.astro | 104 +++++++ .../landing/GetStartedSection.astro | 104 +++++-- .../src/components/landing/HeroSection.astro | 283 ++++++++++++++---- .../components/landing/MethodSection.astro | 164 +++++----- .../components/landing/OutputSection.astro | 161 +++++++--- .../components/landing/ProblemSection.astro | 160 ++++++++-- .../src/components/landing/SiteFooter.astro | 148 ++++++++- .../src/components/landing/SiteHeader.astro | 144 ++++----- apps/web/src/components/ui/IconCard.astro | 92 ++++++ apps/web/src/data/agents.ts | 15 + apps/web/src/data/frameworks.ts | 38 +++ apps/web/src/layouts/BaseLayout.astro | 9 +- apps/web/src/lib/icons.ts | 26 ++ apps/web/src/pages/index.astro | 4 + apps/web/src/scripts/reveal.ts | 28 ++ apps/web/src/styles/docs-prose.css | 35 ++- apps/web/src/styles/global.css | 172 +++++++++-- 51 files changed, 1641 insertions(+), 440 deletions(-) create mode 100644 apps/web/src/assets/agents/amp.svg create mode 100644 apps/web/src/assets/agents/antigravity.svg create mode 100644 apps/web/src/assets/agents/claudecode.svg create mode 100644 apps/web/src/assets/agents/cline.svg create mode 100644 apps/web/src/assets/agents/codex.svg create mode 100644 apps/web/src/assets/agents/cursor.svg create mode 100644 apps/web/src/assets/agents/geminicli.svg create mode 100644 apps/web/src/assets/agents/githubcopilot.svg create mode 100644 apps/web/src/assets/agents/kilocode.svg create mode 100644 apps/web/src/assets/agents/opencode.svg create mode 100644 apps/web/src/assets/agents/roocode.svg create mode 100644 apps/web/src/assets/agents/windsurf.svg create mode 100644 apps/web/src/assets/frameworks/adonisjs.svg create mode 100644 apps/web/src/assets/frameworks/angular.svg create mode 100644 apps/web/src/assets/frameworks/astro.svg create mode 100644 apps/web/src/assets/frameworks/expo.svg create mode 100644 apps/web/src/assets/frameworks/express.svg create mode 100644 apps/web/src/assets/frameworks/fastify.svg create mode 100644 apps/web/src/assets/frameworks/hono.svg create mode 100644 apps/web/src/assets/frameworks/koa.svg create mode 100644 apps/web/src/assets/frameworks/nestjs.svg create mode 100644 apps/web/src/assets/frameworks/nextdotjs.svg create mode 100644 apps/web/src/assets/frameworks/nuxt.svg create mode 100644 apps/web/src/assets/frameworks/qwik.svg create mode 100644 apps/web/src/assets/frameworks/reactrouter.svg create mode 100644 apps/web/src/assets/frameworks/remix.svg create mode 100644 apps/web/src/assets/frameworks/solid.svg create mode 100644 apps/web/src/assets/frameworks/svelte.svg create mode 100644 apps/web/src/assets/frameworks/tanstack.svg create mode 100644 apps/web/src/components/landing/AgentsSection.astro create mode 100644 apps/web/src/components/landing/FrameworksSection.astro create mode 100644 apps/web/src/components/ui/IconCard.astro create mode 100644 apps/web/src/data/agents.ts create mode 100644 apps/web/src/data/frameworks.ts create mode 100644 apps/web/src/lib/icons.ts create mode 100644 apps/web/src/scripts/reveal.ts diff --git a/apps/web/src/assets/README.md b/apps/web/src/assets/README.md index 8ac5680..722ba42 100644 --- a/apps/web/src/assets/README.md +++ b/apps/web/src/assets/README.md @@ -1,4 +1,12 @@ # Assets -Store landing-page visual assets here, such as screenshots, generated hero media, -logos, texture images, and optimized static illustrations. +Landing-page visual assets. + +- `agents/*.svg`: AI agent marks from [@lobehub/icons-static-svg](https://github.com/lobehub/lobe-icons) (MIT). +- `frameworks/*.svg`: framework marks from [Simple Icons](https://simpleicons.org) (CC0). + +Each mark remains a trademark of its owner. They are used only to say that DevMap +works with, or maps routes for, that product. Elysia has no file here on purpose: +its card falls back to a letter mark (see `src/lib/icons.ts`). To add or swap an +icon, drop an SVG (with `fill="currentColor"`) here and set `icon` in +`src/data/agents.ts` or `src/data/frameworks.ts`. diff --git a/apps/web/src/assets/agents/amp.svg b/apps/web/src/assets/agents/amp.svg new file mode 100644 index 0000000..683e16c --- /dev/null +++ b/apps/web/src/assets/agents/amp.svg @@ -0,0 +1 @@ +Amp \ No newline at end of file diff --git a/apps/web/src/assets/agents/antigravity.svg b/apps/web/src/assets/agents/antigravity.svg new file mode 100644 index 0000000..784fc63 --- /dev/null +++ b/apps/web/src/assets/agents/antigravity.svg @@ -0,0 +1 @@ +Antigravity \ No newline at end of file diff --git a/apps/web/src/assets/agents/claudecode.svg b/apps/web/src/assets/agents/claudecode.svg new file mode 100644 index 0000000..aeb2a3e --- /dev/null +++ b/apps/web/src/assets/agents/claudecode.svg @@ -0,0 +1 @@ +Claude Code \ No newline at end of file diff --git a/apps/web/src/assets/agents/cline.svg b/apps/web/src/assets/agents/cline.svg new file mode 100644 index 0000000..f754ea9 --- /dev/null +++ b/apps/web/src/assets/agents/cline.svg @@ -0,0 +1 @@ +Cline \ No newline at end of file diff --git a/apps/web/src/assets/agents/codex.svg b/apps/web/src/assets/agents/codex.svg new file mode 100644 index 0000000..4c648af --- /dev/null +++ b/apps/web/src/assets/agents/codex.svg @@ -0,0 +1 @@ +Codex \ No newline at end of file diff --git a/apps/web/src/assets/agents/cursor.svg b/apps/web/src/assets/agents/cursor.svg new file mode 100644 index 0000000..a5b2ee3 --- /dev/null +++ b/apps/web/src/assets/agents/cursor.svg @@ -0,0 +1 @@ +Cursor \ No newline at end of file diff --git a/apps/web/src/assets/agents/geminicli.svg b/apps/web/src/assets/agents/geminicli.svg new file mode 100644 index 0000000..61869fa --- /dev/null +++ b/apps/web/src/assets/agents/geminicli.svg @@ -0,0 +1 @@ +Gemini CLI \ No newline at end of file diff --git a/apps/web/src/assets/agents/githubcopilot.svg b/apps/web/src/assets/agents/githubcopilot.svg new file mode 100644 index 0000000..3cbf22a --- /dev/null +++ b/apps/web/src/assets/agents/githubcopilot.svg @@ -0,0 +1 @@ +GithubCopilot \ No newline at end of file diff --git a/apps/web/src/assets/agents/kilocode.svg b/apps/web/src/assets/agents/kilocode.svg new file mode 100644 index 0000000..ff05262 --- /dev/null +++ b/apps/web/src/assets/agents/kilocode.svg @@ -0,0 +1 @@ +Kilo Code \ No newline at end of file diff --git a/apps/web/src/assets/agents/opencode.svg b/apps/web/src/assets/agents/opencode.svg new file mode 100644 index 0000000..9c4cb89 --- /dev/null +++ b/apps/web/src/assets/agents/opencode.svg @@ -0,0 +1 @@ +opencode \ No newline at end of file diff --git a/apps/web/src/assets/agents/roocode.svg b/apps/web/src/assets/agents/roocode.svg new file mode 100644 index 0000000..1f4235f --- /dev/null +++ b/apps/web/src/assets/agents/roocode.svg @@ -0,0 +1 @@ +RooCode \ No newline at end of file diff --git a/apps/web/src/assets/agents/windsurf.svg b/apps/web/src/assets/agents/windsurf.svg new file mode 100644 index 0000000..4df8f33 --- /dev/null +++ b/apps/web/src/assets/agents/windsurf.svg @@ -0,0 +1 @@ +Windsurf \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/adonisjs.svg b/apps/web/src/assets/frameworks/adonisjs.svg new file mode 100644 index 0000000..1d65c12 --- /dev/null +++ b/apps/web/src/assets/frameworks/adonisjs.svg @@ -0,0 +1 @@ +AdonisJS \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/angular.svg b/apps/web/src/assets/frameworks/angular.svg new file mode 100644 index 0000000..2f05e4b --- /dev/null +++ b/apps/web/src/assets/frameworks/angular.svg @@ -0,0 +1 @@ +Angular \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/astro.svg b/apps/web/src/assets/frameworks/astro.svg new file mode 100644 index 0000000..06b802a --- /dev/null +++ b/apps/web/src/assets/frameworks/astro.svg @@ -0,0 +1 @@ +Astro \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/expo.svg b/apps/web/src/assets/frameworks/expo.svg new file mode 100644 index 0000000..6d44da1 --- /dev/null +++ b/apps/web/src/assets/frameworks/expo.svg @@ -0,0 +1 @@ +Expo \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/express.svg b/apps/web/src/assets/frameworks/express.svg new file mode 100644 index 0000000..81368f5 --- /dev/null +++ b/apps/web/src/assets/frameworks/express.svg @@ -0,0 +1 @@ +Express \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/fastify.svg b/apps/web/src/assets/frameworks/fastify.svg new file mode 100644 index 0000000..689a3cd --- /dev/null +++ b/apps/web/src/assets/frameworks/fastify.svg @@ -0,0 +1 @@ +Fastify \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/hono.svg b/apps/web/src/assets/frameworks/hono.svg new file mode 100644 index 0000000..14a1fd1 --- /dev/null +++ b/apps/web/src/assets/frameworks/hono.svg @@ -0,0 +1 @@ +Hono \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/koa.svg b/apps/web/src/assets/frameworks/koa.svg new file mode 100644 index 0000000..f02f7fa --- /dev/null +++ b/apps/web/src/assets/frameworks/koa.svg @@ -0,0 +1 @@ +Koa \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/nestjs.svg b/apps/web/src/assets/frameworks/nestjs.svg new file mode 100644 index 0000000..a673772 --- /dev/null +++ b/apps/web/src/assets/frameworks/nestjs.svg @@ -0,0 +1 @@ +NestJS \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/nextdotjs.svg b/apps/web/src/assets/frameworks/nextdotjs.svg new file mode 100644 index 0000000..85d7d33 --- /dev/null +++ b/apps/web/src/assets/frameworks/nextdotjs.svg @@ -0,0 +1 @@ +Next.js \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/nuxt.svg b/apps/web/src/assets/frameworks/nuxt.svg new file mode 100644 index 0000000..8922b17 --- /dev/null +++ b/apps/web/src/assets/frameworks/nuxt.svg @@ -0,0 +1 @@ +Nuxt \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/qwik.svg b/apps/web/src/assets/frameworks/qwik.svg new file mode 100644 index 0000000..7dff474 --- /dev/null +++ b/apps/web/src/assets/frameworks/qwik.svg @@ -0,0 +1 @@ +Qwik \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/reactrouter.svg b/apps/web/src/assets/frameworks/reactrouter.svg new file mode 100644 index 0000000..7882fcf --- /dev/null +++ b/apps/web/src/assets/frameworks/reactrouter.svg @@ -0,0 +1 @@ +React Router \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/remix.svg b/apps/web/src/assets/frameworks/remix.svg new file mode 100644 index 0000000..c86635c --- /dev/null +++ b/apps/web/src/assets/frameworks/remix.svg @@ -0,0 +1 @@ +Remix \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/solid.svg b/apps/web/src/assets/frameworks/solid.svg new file mode 100644 index 0000000..b0f035b --- /dev/null +++ b/apps/web/src/assets/frameworks/solid.svg @@ -0,0 +1 @@ +Solid \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/svelte.svg b/apps/web/src/assets/frameworks/svelte.svg new file mode 100644 index 0000000..9c0cca5 --- /dev/null +++ b/apps/web/src/assets/frameworks/svelte.svg @@ -0,0 +1 @@ +Svelte \ No newline at end of file diff --git a/apps/web/src/assets/frameworks/tanstack.svg b/apps/web/src/assets/frameworks/tanstack.svg new file mode 100644 index 0000000..708dea4 --- /dev/null +++ b/apps/web/src/assets/frameworks/tanstack.svg @@ -0,0 +1 @@ +TanStack \ No newline at end of file diff --git a/apps/web/src/components/docs/DocsSidebar.astro b/apps/web/src/components/docs/DocsSidebar.astro index 352b69e..ca894dc 100644 --- a/apps/web/src/components/docs/DocsSidebar.astro +++ b/apps/web/src/components/docs/DocsSidebar.astro @@ -127,8 +127,8 @@ const tree = buildTree(headings); .docs-mobile-toc { border: 1px solid var(--rule); - border-radius: 0.5rem; - background: var(--paper); + border-radius: 0.75rem; + background: var(--surface); } .docs-mobile-toc summary { diff --git a/apps/web/src/components/landing/AgentsSection.astro b/apps/web/src/components/landing/AgentsSection.astro new file mode 100644 index 0000000..0d155e7 --- /dev/null +++ b/apps/web/src/components/landing/AgentsSection.astro @@ -0,0 +1,156 @@ +--- +import IconCard from "../ui/IconCard.astro"; +import { AGENTS } from "../../data/agents"; +import { agentIcon } from "../../lib/icons"; + +// What each file is for, as an agent sees it. +const reads = [ + { + file: "AGENTS.md", + title: "Instructions", + text: "Tells the agent the reading order and where the map lives. Written once by init, never overwritten.", + code: ["Start at .devmap/index.json", "then the feature map", "then source files"] + }, + { + file: ".devmap/index.json", + title: "Entry point", + text: "Entry points, critical files and a pointer to every feature. Small enough to read first.", + code: ['"entryPoints": [', ' "src/index.ts"', "],"] + }, + { + file: ".devmap/features/*.json", + title: "Feature maps", + text: "One file per feature with the files that implement it, so the agent opens only what it needs.", + code: ['"name": "Billing",', '"files": [', ' "src/billing/…"'] + } +]; +--- + +
+
+

Agent-agnostic

+

Works with every agent.

+

+ One devmap analyze for Claude Code, Codex, Cursor, Gemini CLI, + OpenCode and more. If a tool can read files, it can read the map. +

+
+ Use it with your agent + GitHub +
+
+ +
    + {AGENTS.map((agent, i) => )} +
+ +
    + {reads.map((item, i) => ( +
  • + +

    {item.title}

    +

    {item.text}

    +
    • + ))} +
+
+ + diff --git a/apps/web/src/components/landing/CommandsSection.astro b/apps/web/src/components/landing/CommandsSection.astro index da49afb..23bb060 100644 --- a/apps/web/src/components/landing/CommandsSection.astro +++ b/apps/web/src/components/landing/CommandsSection.astro @@ -5,88 +5,95 @@ const commands = [ { name: "devmap onboarding", text: "A reading order for someone new to the codebase: where to start and what to read next." }, { name: "devmap map", text: "Show the dependency tree from the saved analysis, without scanning again." }, { name: "devmap flow", text: "Walk a feature or request step by step, as a Mermaid diagram or in the terminal." }, - { name: "devmap explain", text: "Ask about a file or feature and get an answer grounded in the analysis. Needs an AI provider." }, + { name: "devmap explain", text: "Ask about a file or feature and get an answer grounded in the analysis.", ai: true }, { name: "devmap doctor", text: "Check your setup and print a report you can paste into a bug report." }, - { name: "devmap config model", text: "Pick the model used by the AI-powered commands." } + { name: "devmap config model", text: "Pick the model used by the AI-powered commands.", ai: true } ]; --- -
-

Eight commands.

+
+
+

CLI

+

Eight commands.

+

Most of them need no API key at all.

+
-
- {commands.map((command) => ( -
-
{command.name}
-
{command.text}
-
+
    + {commands.map((command, i) => ( +
  • + {String(i + 1).padStart(2, "0")} + {command.name} +

    {command.text}

    + {command.ai && needs an AI provider} +
    • ))} -
+
diff --git a/apps/web/src/components/landing/CopyCommand.astro b/apps/web/src/components/landing/CopyCommand.astro index 163300b..b490a58 100644 --- a/apps/web/src/components/landing/CopyCommand.astro +++ b/apps/web/src/components/landing/CopyCommand.astro @@ -2,12 +2,13 @@ interface Props { command: string; size?: "base" | "large"; + tone?: "light" | "dark"; } -const { command, size = "base" } = Astro.props; +const { command, size = "base", tone = "light" } = Astro.props; --- -
+
{command} @@ -39,36 +40,50 @@ const { command, size = "base" } = Astro.props; diff --git a/apps/web/src/components/landing/FrameworksSection.astro b/apps/web/src/components/landing/FrameworksSection.astro new file mode 100644 index 0000000..9c15370 --- /dev/null +++ b/apps/web/src/components/landing/FrameworksSection.astro @@ -0,0 +1,104 @@ +--- +import IconCard from "../ui/IconCard.astro"; +import { FRAMEWORKS, LANGUAGE_TIERS } from "../../data/frameworks"; +import { frameworkIcon } from "../../lib/icons"; +--- + +
+
+

Supported frameworks

+

Routes mapped for 18 frameworks.

+

+ Next.js to NestJS, in the same monorepo if that's what you have. + JavaScript and TypeScript come first; other languages are read with lighter tools. +

+
+ +
    + {FRAMEWORKS.map((fw, i) => ( + + ))} +
+ +
+ {LANGUAGE_TIERS.map((tier, i) => ( +
+

{tier.title}

+

{tier.note}

+
    + {tier.items.map((item) =>
  • {item}
    • )} +
+
+ ))} +
+
+ + diff --git a/apps/web/src/components/landing/GetStartedSection.astro b/apps/web/src/components/landing/GetStartedSection.astro index 94b55a2..0d1b59c 100644 --- a/apps/web/src/components/landing/GetStartedSection.astro +++ b/apps/web/src/components/landing/GetStartedSection.astro @@ -3,55 +3,113 @@ import CopyCommand from "./CopyCommand.astro"; ---
-

Run it on the repo you have open.

+
+

Get started

+

Run it on the repo you have open.

-
- -
+
+ +
-

- Free and open source under the MIT license. Install it globally with{" "} - npm install -g @flaid/devmap when you want it on every project. -

+

+ Free and open source under the MIT license. Install it globally with{" "} + npm install -g @flaid/devmap when you want it on every project. +

-

- Read the docs - Star it on GitHub -

+

+ Read the docs + Star it on GitHub +

+
diff --git a/apps/web/src/components/landing/HeroSection.astro b/apps/web/src/components/landing/HeroSection.astro index 13a9e47..f7efd2e 100644 --- a/apps/web/src/components/landing/HeroSection.astro +++ b/apps/web/src/components/landing/HeroSection.astro @@ -1,96 +1,271 @@ --- import CopyCommand from "./CopyCommand.astro"; + +// Illustrative output: the shape of what `devmap analyze` prints, not a +// recording of one run. +const log: Array<{ text: string; tone?: "ok" | "dim" | "hot" }> = [ + { text: "scanning files", tone: "ok" }, + { text: "building dependency graph", tone: "ok" }, + { text: "detecting framework · routes · database", tone: "ok" }, + { text: "ranking critical files", tone: "ok" }, + { text: "writing .devmap/index.json", tone: "hot" } +]; ---
-

- Analyze once. - Reuse context - everywhere. -

- -

- DevMap reads your codebase and writes a map that developers and AI agents - can start from: entry points, critical files, features and routes. -

- -
- - Source on GitHub +
+

Open source · MIT · npm

+ +

+ Analyze once.
+ Reuse context everywhere. +

+ +

+ DevMap reads your codebase and writes a map that developers and AI agents + start from: entry points, critical files, features and routes. +

+ +
+ + Read the docs +
+ +

+ Needs Node 22 or newer. An API key is optional and only adds the AI layer. +

-

Needs Node 22 or newer. An API key is optional and only adds the AI layer.

+
+ +

Illustrative output.

+
diff --git a/apps/web/src/components/landing/OutputSection.astro b/apps/web/src/components/landing/OutputSection.astro index f85c68f..80ae106 100644 --- a/apps/web/src/components/landing/OutputSection.astro +++ b/apps/web/src/components/landing/OutputSection.astro @@ -13,7 +13,7 @@ const lines: Array<{ text: string; hot?: boolean }> = [ { text: ' "packages/cli/src/index.ts",', hot: true }, { text: ' "apps/web/src/pages/docs.astro",', hot: true }, { text: ' "apps/web/src/pages/index.astro"', hot: true }, - { text: " ]," , hot: true }, + { text: " ],", hot: true }, { text: ' "criticalFiles": [' }, { text: ' "packages/cli/src/commands/analyze.ts",' }, { text: ' "packages/cli/src/commands/init.ts",' }, @@ -35,9 +35,10 @@ const files = [ ]; --- -
-
-

+
+
+

Output

+

Your project, as files an agent can read.

@@ -46,24 +47,31 @@ const files = [ feature they need, instead of exploring the whole repository.

-
- {files.map((file) => ( -
-
.devmap/{file.name}
-
{file.note}
-
+
    + {files.map((file, i) => ( +
  1. + {String(i + 1).padStart(2, "0")} +
    + .devmap/{file.name} +

    {file.note}

    +
    +
    2. ))} -
+
-
-
- .devmap/index.json, trimmed, from analyzing this repository. - The highlighted lines are the entry points. -
- 
{lines.map((line) => (
-      {line.text}
-    ))}
+
+
+
+ + .devmap/index.json + highlighted: entry points +
+ 
{lines.map((line) => (
+        {line.text}
+      ))}
+
+
Trimmed, from analyzing this repository.
@@ -71,51 +79,70 @@ const files = [ .output { display: grid; gap: clamp(2.5rem, 6vw, 5rem); - padding-block: var(--section-space); - border-top: 1px solid var(--rule); + align-items: center; } @media (min-width: 62rem) { .output { - grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); - align-items: start; + grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } } + .output__intro { + display: grid; + justify-items: start; + gap: 1.25rem; + } + .output__title { - max-width: 12em; - font-size: clamp(2.25rem, 5vw, 4rem); - line-height: 1.02; - letter-spacing: -0.04em; + max-width: 11em; } .output__copy { max-width: 30rem; - margin-top: 1.5rem; + color: var(--muted); } - .output__copy code, - .output__files code { + .output__copy code { font-size: 0.875em; color: var(--ink); } .output__files { - max-width: 30rem; - margin: 2.5rem 0 0; + display: grid; + width: 100%; + max-width: 32rem; + margin: 0.75rem 0 0; + padding: 0; + list-style: none; } - .output__files > div { + .output__files li { + display: grid; + grid-template-columns: 2.5rem minmax(0, 1fr); + gap: 0.5rem; padding-block: 1rem; border-top: 1px solid var(--rule); } - .output__files dt { + .output__files li:last-child { + border-bottom: 1px solid var(--rule); + } + + .output__n { + font-family: var(--font-mono); + font-size: 0.75rem; + padding-top: 0.2rem; + color: var(--muted); + } + + .output__files code { + font-size: 0.875rem; color: var(--ink); } - .output__files dd { - margin: 0.25rem 0 0; + .output__files p { + margin-top: 0.25rem; font-size: 0.9375rem; color: var(--muted); } @@ -126,23 +153,58 @@ const files = [ } .output__figure figcaption { - margin-bottom: 0.75rem; - font-size: 0.875rem; + margin-top: 0.75rem; + font-family: var(--font-mono); + font-size: 0.6875rem; + text-align: right; color: var(--muted); } - .output__figure figcaption code { - color: var(--ink); + .code-card { + overflow: hidden; + border: 1px solid var(--night-rule); + border-radius: var(--radius-lg); + background: var(--night); + box-shadow: 0 30px 60px -30px rgba(20, 19, 17, 0.55); + } + + .code-card__bar { + display: flex; + align-items: center; + gap: 0.4rem; + padding: 0.85rem 1.1rem; + border-bottom: 1px solid var(--night-rule); + } + + .code-card__bar span { + width: 0.65rem; + height: 0.65rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.16); + } + + .code-card__bar b { + margin-left: 0.6rem; + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 400; + color: var(--night-text); + } + + .code-card__bar i { + margin-left: auto; + font-family: var(--font-mono); + font-size: 0.6875rem; + font-style: normal; + color: #7aa7ff; } .code { margin: 0; - padding: 1.25rem 0; - border-radius: var(--radius); - background: var(--wash); - font-size: clamp(0.75rem, 1.6vw, 0.875rem); + padding: 1.1rem 0; + font-size: clamp(0.72rem, 1.5vw, 0.84rem); line-height: 1.75; - color: var(--ink); + color: var(--night-text); overflow-x: auto; counter-reset: line; } @@ -155,7 +217,7 @@ const files = [ .code__line { display: block; - padding-inline: 1.25rem 1.5rem; + padding-inline: 1.1rem 1.5rem; border-left: 3px solid transparent; white-space: pre; counter-increment: line; @@ -167,12 +229,13 @@ const files = [ width: 2.25ch; margin-right: 2ch; text-align: right; - color: #a3a3a3; + color: #5d5a53; user-select: none; } .code__line--hot { - border-left-color: var(--accent); - background: var(--accent-wash); + border-left-color: #7aa7ff; + background: rgba(122, 167, 255, 0.1); + color: #fff; } diff --git a/apps/web/src/components/landing/ProblemSection.astro b/apps/web/src/components/landing/ProblemSection.astro index ad40d1e..4d6e2b9 100644 --- a/apps/web/src/components/landing/ProblemSection.astro +++ b/apps/web/src/components/landing/ProblemSection.astro @@ -1,28 +1,152 @@ -
-

- Every new session, every new agent and every new teammate starts the same - way: open files, trace imports, guess which ones matter.{" "} - - The code didn't change. The understanding gets rebuilt anyway. - -

+--- +const without = ["Claude explores files", "Codex explores files", "New session explores files"]; +const agents = ["Claude Code", "Codex", "Cursor", "Gemini CLI", "Windsurf"]; +--- + +
+
+

The problem

+

The code didn't change. The understanding gets rebuilt anyway.

+

+ Every new session, every new agent and every new teammate starts the same + way: open files, trace imports, guess which ones matter. +

+
+ +
+
+

Without DevMap

+
    + {without.map((item) => ( +
  • + Repository + + {item} + + context rebuilt +
    • + ))} +
+
+ +
+

With DevMap

+
+ Repository + + devmap analyze + + shared project context +
+
    + {agents.map((agent) =>
  • {agent}
    • )} +
  • future agents
    • +
+
+
diff --git a/apps/web/src/components/landing/SiteFooter.astro b/apps/web/src/components/landing/SiteFooter.astro index 105f867..715f3fb 100644 --- a/apps/web/src/components/landing/SiteFooter.astro +++ b/apps/web/src/components/landing/SiteFooter.astro @@ -1,26 +1,144 @@ -