feat(site): landing redesign — product-led

apps/site/README.md

@@ -13,3 +13,22 @@ yarn dev
 
 Deploys to [conciv.dev](https://conciv.dev) via Cloudflare Workers Builds on push to `main`
 (watch paths: `apps/site/**`, `packages/{mascot,it,protocol}/**`).
+
+## GitHub star count
+
+The nav button and the landing ledger show the repository's star count. The worker resolves it
+server-side (`src/lib/star-count-resolver.server.ts`), caches it in the Workers Cache API for an
+hour and keeps the last known value for a week, so the count is in the first paint and never shows a
+placeholder. `/api/stars` exposes the same cached value; the browser calls it once after hydration
+to swap in a fresher number silently.
+
+Unauthenticated GitHub API calls share a 60 requests/hour budget per IP. Set `GITHUB_TOKEN`
+(any token with public repo read access) and the worker sends it as a bearer token, lifting the
+budget to 5000/hour:
+
+```bash
+pnpm exec wrangler secret put GITHUB_TOKEN
+pnpm exec wrangler dev --var GITHUB_TOKEN:<token>
+```
+
+The value is never logged and never reaches the client bundle.

apps/site/package.json

@@ -31,6 +31,8 @@
     "@conciv/mascot": "workspace:*",
     "@conciv/protocol": "workspace:*",
     "@fontsource-variable/geist": "^5.2.9",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/newsreader": "^5.3.0",
     "@gsap/react": "^2.1.2",
     "@huggingface/transformers": "^4.2.0",
     "@shikijs/magic-move": "^4.3.0",
@@ -43,7 +45,6 @@
     "fumadocs-mdx": "^15.0.12",
     "fumadocs-ui": "^16.10.2",
     "gsap": "^3.15.0",
-    "lenis": "^1.3.25",
     "lucide-react": "^1.18.0",
     "mermaid": "^11.15.0",
     "motion": "^12.42.2",
@@ -59,6 +60,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@axe-core/playwright": "4.13.0",
     "@cloudflare/vite-plugin": "^1.42.4",
     "@conciv/browser-fixture": "workspace:*",
     "@conciv/core": "workspace:*",

apps/site/public/screenshots/index.json

@@ -0,0 +1,66 @@
+[
+  {
+    "file": "grab-element.webp",
+    "source": "r14-grab-crosshair-highlight.png",
+    "crop": [804, 360, 3036, 1900],
+    "width": 1160,
+    "height": 726,
+    "alt": "conciv widget panel with a red accent open beside the host page's form, a teal crosshair highlight ringing the Submit button and a locator tooltip below it reading LocalSubscribe$1.button"
+  },
+  {
+    "file": "edit-live.webp",
+    "source": "r23-edit-live-restyled.png",
+    "crop": [341, 180, 3499, 2190],
+    "width": 1160,
+    "height": 726,
+    "alt": "Host page heading restyled to bright purple next to the conciv panel showing the request, an Edited the page tool card with a setstyle action, and the reply: hero h1 now #a020f0, inline style only, reload wipes it"
+  },
+  {
+    "file": "test-run.webp",
+    "source": "r29-test-run-card.png",
+    "crop": [804, 360, 3036, 1900],
+    "width": 1160,
+    "height": 726,
+    "alt": "conciv panel showing a Ran the tests card with action run and 4 passed badges, per-test rows for lib/cn.test.ts and lib/nav.test.ts, and the summary 4 pass, 0 fail. All green."
+  },
+  {
+    "file": "permission.webp",
+    "source": "r32-permission-card.png",
+    "crop": [804, 360, 3036, 1900],
+    "width": 1160,
+    "height": 726,
+    "alt": "conciv panel mid-approval: a bash tool card named Remove scratch file above a Run this action? prompt with Deny and a red Allow button"
+  },
+  {
+    "file": "whiteboard.webp",
+    "source": "r41-whiteboard-diagram.png",
+    "crop": [200, 0, 3640, 2278],
+    "width": 1160,
+    "height": 726,
+    "alt": "Agent-drawn flowchart on the shared whiteboard canvas over the host page, four labeled boxes, Your App, conciv Widget, Agent (me), Your Source Files, connected by arrows in a loop, with the conciv chat panel listing the confirmed box coordinates"
+  },
+  {
+    "file": "any-running-app.webp",
+    "source": "e06r-hero-framing-1440.png",
+    "crop": [0, 578, 4320, 1852],
+    "width": 2360,
+    "height": 1012,
+    "alt": "conciv panel open on the vite.dev site next to the hero, The Build Tool for the Web with Get Started and View on GitHub, answering the question what is this page selling"
+  },
+  {
+    "file": "fab-closed.webp",
+    "source": "r01-fab-closed-form.png",
+    "crop": [3480, 2136, 360, 270],
+    "width": 800,
+    "height": 600,
+    "alt": "conciv's closed floating action button, a round robot-mascot avatar with pink eyes, docked in the bottom-right corner of the host page"
+  },
+  {
+    "file": "hero-demo.webp",
+    "source": "site demo capture (ProductFrame body at 1120×700, DPR 2)",
+    "crop": null,
+    "width": 2240,
+    "height": 1400,
+    "alt": "conciv live demo: a dark sample app with a Get started button on the left, the conciv chat panel on the right inviting you to grab an element and say what to change."
+  }
+]

apps/site/scripts/highlight-snippets.ts

@@ -4,10 +4,11 @@ import {createHighlighter} from 'shiki'
 import {createTwoslasher} from 'twoslash'
 import {codeToKeyedTokens} from '@shikijs/magic-move/core'
 import {cleanSnippet, FRAMEWORK_SNIPPETS} from '../src/components/landing/framework-snippets.ts'
+import {INSTALL_COMMANDS} from '../src/lib/package-installer-store.ts'
 
-const THEMES = {light: 'github-light', dark: 'github-dark'} as const
+const THEMES = {light: 'github-light-high-contrast', dark: 'github-dark'} as const
 
-const highlighter = await createHighlighter({themes: Object.values(THEMES), langs: ['ts', 'js', 'swift']})
+const highlighter = await createHighlighter({themes: Object.values(THEMES), langs: ['ts', 'js', 'swift', 'sh']})
 
 const withCode = FRAMEWORK_SNIPPETS.flatMap((snippet) =>
   snippet.code === undefined ? [] : [{...snippet, code: snippet.code}],
@@ -21,11 +22,18 @@ const steps = withCode.map((snippet) =>
   }),
 )
 
-const inlineHighlight = (code: string) =>
-  highlighter
-    .codeToHtml(code, {lang: 'ts', themes: THEMES, defaultColor: 'light'})
-    .replace(/^<pre[^>]*><code>/, '')
-    .replace(/<\/code><\/pre>$/, '')
+const installSteps = INSTALL_COMMANDS.map((entry) =>
+  codeToKeyedTokens(highlighter, entry.command, {lang: 'sh', themes: THEMES, defaultColor: 'light'}),
+)
+
+const inlineTokens = (code: string) =>
+  highlighter.codeToTokens(code, {lang: 'ts', themes: THEMES, defaultColor: 'light'}).tokens.map((line) =>
+    line.map((token) => ({
+      content: token.content,
+      color: token.htmlStyle?.color,
+      darkColor: token.htmlStyle?.['--shiki-dark'],
+    })),
+  )
 
 const twoslasher = createTwoslasher()
 
@@ -41,7 +49,7 @@ const hoverData = withCode.flatMap((snippet) => {
       {
         target: node.target,
         occurrence,
-        html: inlineHighlight(node.text),
+        tokens: inlineTokens(node.text),
         docs: node.docs ?? null,
       },
     ]
@@ -62,7 +70,8 @@ const hoverData = withCode.flatMap((snippet) => {
 const body = [
   "import type {KeyedTokensInfo} from '@shikijs/magic-move/types'",
   '',
-  'export type SnippetHover = {target: string; occurrence: number; html: string; docs: string | null}',
+  'export type SnippetToken = {content: string; color?: string; darkColor?: string}',
+  'export type SnippetHover = {target: string; occurrence: number; tokens: SnippetToken[][]; docs: string | null}',
   'export type SnippetCompletion = {target: string; items: string[]}',
   'export type SnippetTwoslash = {id: string; hovers: SnippetHover[]; completion: SnippetCompletion | null}',
   '',
@@ -72,6 +81,10 @@ const body = [
   '',
   `export const SNIPPET_TWOSLASH: SnippetTwoslash[] = ${JSON.stringify(hoverData)}`,
   '',
+  `export const INSTALL_COMMAND_STEP_IDS: string[] = ${JSON.stringify(INSTALL_COMMANDS.map((entry) => entry.id))}`,
+  '',
+  `export const INSTALL_COMMAND_STEPS: KeyedTokensInfo[] = ${JSON.stringify(installSteps)}`,
+  '',
 ].join('\n')
 
 const out = fileURLToPath(new URL('../src/components/landing/framework-snippets.gen.ts', import.meta.url))

apps/site/source.config.ts

@@ -13,5 +13,6 @@ export const docs = defineDocs({
 export default defineConfig({
   mdxOptions: {
     remarkPlugins: [remarkMdxMermaid],
+    rehypeCodeOptions: {themes: {light: 'github-light-high-contrast', dark: 'github-dark'}},
   },
 })