Files
christopherkindl 3ae34b3ed1 feat(docs): migrate the homepage to geistdocs 1.19 and the Geist design system (#762)
Third repo in the design sync, after `vercel/geistdocs#216`/`#218` and
`vercel/flags#457`. Upgrades the docs site to `@vercel/geistdocs@1.19.2`
and brings the homepage onto the Geist design system.

`apps/docs` is `private: true`, so no changeset.

## Dependency

`1.19.2` peers on `next: ^16.2.11` and the app pinned `16.2.6`, so
**next moves to `16.2.12`** alongside it — without that pnpm reports an
unmet peer. Installed via `pnpm add --save-exact` per AGENTS.md. All 20
geistdocs subpaths this app imports still exist in 1.19.2; no API
breakage.

The footer needed no work: 1.16 already shipped the prop-less
Vercel-directory `<Footer />`.

## Layout — `home-grid.css` is gone

Deleted `app/styles/home-grid.css` (368 lines) and its `global.css`
import, and rebuilt each section on `grid-cols-12` / `col-span-*`:

| section | before (CSS) | after |
|---|---|---|
| OSS stats | 2×2 → 4×1 @768 | `col-span-6 min-[768px]:col-span-3` |
| Features | 2-up + full-width 3rd → 3×1 @961 | `col-span-12
sm:col-span-6 lg:col-span-4` |
| Code | stacked → sidebar 1/3 + code 2/3 @961 | `lg:col-span-8` /
`lg:col-span-4`, pinned with `col-start` + `row-start` |
| Integrations | 1×5 → tall left + 2×2 @961 | `lg:col-span-4
lg:row-span-2` + four `lg:col-span-4` |

The code section needs explicit `col-start`/`row-start` because the
sidebar follows the code in the DOM but sits left of it from `lg`.

Other layout changes:

- **Single gutter at the page root** (`mx-auto w-full max-w-[1448px]
px-4 sm:px-6`); removed the per-section horizontal padding that
duplicated it, so every section's content lands on the navbar/footer
content edge.
- **Content widened 1114px → 1400px**, the navbar's content span (1448 −
2×24).
- **Bottom gap above the footer trimmed ~320px → ~176px** — layout
`pb-32` → `pb-16` and page `pb-24 sm:pb-36` → `pb-12 sm:pb-16`. Three
paddings were stacking.

The 768px stats breakpoint is preserved with `min-[768px]:` — there's no
Tailwind equivalent here (`md`=601, `lg`=961) and four KPI columns at
601px would be ~140px each.

## Design — ported from vercel.com/ai-sdk

Read off the flagged source in `front/apps/vercel-marketing/.../ai-sdk`,
not the live site.

- **Code showcase tabs** → the `SlidingTabs` primitive: pill labels with
an animated indicator, full keyboard nav (arrows/Home/End, roving
tabindex), and an invisible-bold label so the tab doesn't shift width
when it bolds. Four tabs per group with dot pagination for the rest,
tabs above the code block. Copied into `components/ui/sliding-tabs.tsx`
with `cn` rewired and the `no-scrollbar` utility inlined (geistdocs
doesn't define it).
- **"Scale with confidence"** → heading and paragraph on one
bottom-aligned row (cols 1–4 / 8–12), then four bordered cards
`col-span-12 md:col-span-6 lg:col-span-3`. Type mapped from their
primitives: `SectionHeading size="48"` → `text-heading-40
lg:text-heading-48`, `SectionParagraph size="18"` → `text-copy-16
lg:text-copy-18`.
- **Feature row** → icon + muted eyebrow over a prominent statement.
Note this **inverts the previous emphasis**: the heading is now the
small muted label and the description the larger line, matching the
reference. Icons come from geistdocs' own set so they match Geist's line
weight: `IconLinked`, `IconWorkflow`, `IconAcronymTs`.
- **Get-started install snippet** → the shared `CommandPrompt`, with its
buttons on one row from `lg`.
- Remaining headings converted to `text-heading-*`.
- Navbar logo drops `height={22}` to take `LogoChatSdk`'s new 18px
default (renders 106.9×22 → 87.4×18).

## Two fixes worth calling out

**`lib/utils.ts` — `cn` was silently dropping typography.** Geist's
`text-copy-*`/`text-heading-*` share the `text-` prefix with colour
utilities, so stock `tailwind-merge` classifies them as colours and
drops the size whenever both appear in one `cn()` call. geistdocs ships
a `cn` that registers them as `font-size` for exactly this reason but
doesn't export it, so the config is replicated here. This was a latent
bug across the app, not just the new code.

**`Analytics`/`SpeedInsights` moved out of the `"use client"` provider**
into the server layout. Both emit `<script>`, and scripts rendered
inside a client tree never execute — so analytics wasn't firing on
client navigations. React 19.2.7 (pulled in by this bump) now warns
about it; the bug predates it.

## Verification

- `pnpm --filter docs build` passes (270 pages), `tsc --noEmit` clean,
`biome check` clean.
- Rendered output spot-checked for the tab strip, dot pagination, card
classes, and feature icons.

**`pnpm validate` could not be run** — it needs Node ≥20.19 and this
machine is on v20.11.1 (`pnpm check` dies on `styleText` from
`node:util`). Biome, tsc and build were run directly instead, but the
knip and test legs are unrun and should be confirmed in CI.

Signed-off-by: christopherkindl <53372002+christopherkindl@users.noreply.github.com>
2026-07-31 23:53:17 +01:00

99 lines
3.1 KiB
TypeScript

import type {
GeistdocsAgentReadinessConfig,
GeistdocsGithubConfig,
} from "@vercel/geistdocs/config";
import { LogoChatSdk } from "@vercel/geistdocs/assets/logos/logo-chat-sdk";
export const Logo = () => <LogoChatSdk />;
export const github: GeistdocsGithubConfig = {
branch: "main",
editPath: "apps/docs/content/docs/{path}",
owner: "vercel",
repo: "chat",
};
export const nav = [
{
label: "Docs",
href: "/docs",
},
{
label: "Adapters",
href: "/adapters",
},
{
label: "Resources",
href: "/resources",
},
{
label: "API",
href: "/docs/api",
},
{
label: "GitHub",
href: `https://github.com/${github.owner}/${github.repo}/`,
},
];
export const suggestions = [
"What platforms does Chat SDK support?",
"How do I set up a Slack bot with Next.js?",
"How do I send cards and interactive messages?",
"How do I stream AI responses in real-time?",
];
export const title = "Chat SDK Documentation";
export const prompt =
"You are a helpful assistant specializing in answering questions about Chat SDK, a unified SDK for building chat bots across Slack, Microsoft Teams, Google Chat, Discord, and more.";
export const agent: GeistdocsAgentReadinessConfig = {
product: {
name: "Chat SDK",
description:
"A unified TypeScript SDK for building chat bots and agents across Slack, Microsoft Teams, Google Chat, Discord, Telegram, WhatsApp, and more — with type-safe handlers, JSX cards, and AI streaming.",
category: "Chat bot SDK",
audience: ["developers building chat bots and agents", "Vercel users"],
useCases: [
"Build a bot once and run it on every major chat platform",
"Send rich interactive cards with JSX",
"Stream AI responses into chat threads in real time",
],
},
instructions: [
"See /adapters for the catalog of official, vendor-official, and community platform and state adapters; each adapter page is available as Markdown with a .md extension.",
"Use /sitemap.md to identify the most relevant documentation pages before answering broad questions.",
"Use /llms.txt for an index of every documentation page, or /llms-full.txt for the complete documentation corpus as Markdown context.",
"Fetch individual documentation pages with a .md or .mdx extension for focused page-level context.",
"Do not assume API, authentication, OpenAPI, or MCP support unless it is listed in this file.",
],
links: [
{
label: "Chat SDK source",
href: `https://github.com/${github.owner}/${github.repo}`,
description: "Source repository for Chat SDK and its adapters",
},
{
label: "Chat SDK agent skill",
href: "https://chat-sdk.dev/AGENTS.md",
description:
"Agent skill with instructions for building Chat SDK bots",
},
],
};
export const translations = {
en: {
displayName: "English",
},
};
export const basePath: string | undefined = undefined;
/**
* Unique identifier for this site, used in markdown request tracking analytics.
* Each site using geistdocs should set this to a unique value (e.g. "ai-sdk-docs", "next-docs").
*/
export const siteId: string | undefined = "chat-sdk";