mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Ben Taylor
5fec5261dd
## Summary
- Adds a **Talk to Our Engineers** CTA button to the right side of the
docs navbar, mirroring the new website's nav button.
- Wires the same PostHog `talk_to_us_clicked` event the website fires,
with `{ location: "docs_nav" }` so docs-originated clicks can be
segmented from website clicks (`"nav"`) in PostHog.
- Fixes a pre-existing layout bug where the navbar's slanted SVG borders
were sized in fixed pixels (`w-[24px] h-[60px]` / `xl:w-[29px]
xl:h-[72px]`) and didn't follow the nav's actual height once Chrome's
default font size was scaled above 16px — the wedge of page background
that leaked through the join is now sealed.
## Behavior
| Viewport | Button |
|---|---|
| `>= 1400px` | Visible |
| `1024–1399px` | Hidden (button text would otherwise force the left
links to wrap) |
| `< 1024px` | Hidden — mobile burger menu surfaces the link |
The button uses `text-muted-foreground` for the resting state to match
the existing nav links and an indigo `#7076D5` hover accent that matches
the active-link underline color. Target is
`https://copilotkit.ai/contact-us` (absolute since docs runs on the
`docs.` subdomain).
## Test plan
- [ ] Click the button on a wide viewport — navigates to
`https://copilotkit.ai/contact-us` and fires `talk_to_us_clicked` with
`{ location: "docs_nav" }` in PostHog.
- [ ] Resize from > 1400px down through 1024px and below — button shows
/ hides at the right thresholds with no left-link wrapping.
- [ ] Toggle dark mode — button border and text stay legible, hover
accent still indigo.
- [ ] Set Chrome's default font size to 20px and reload — no wedge gap
at the slanted-border join between the left and right pill containers.
fumadocs-test
This is a Next.js application generated with Create Fumadocs.
Run development server:
npm run dev
# or
pnpm dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
Learn More
To learn more about Next.js and Fumadocs, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Fumadocs - learn about Fumadocs
Vercel Deployment with Git LFS
Docs assets are tracked with Git LFS. To ensure production builds always receive
real asset bytes (not pointer files), deploy docs through GitHub Actions using
.github/workflows/deploy_docs_vercel.yml.
Required GitHub repository secrets:
VERCEL_TOKENVERCEL_ORG_IDVERCEL_PROJECT_ID_DOCS
PR previews:
.github/workflows/deploy_docs_vercel_preview.ymldeploys docs previews for non-fork pull requests.- The workflow posts/updates a sticky PR comment with a clickable
Open Docs Previewlink.
Recommended Vercel project setting:
- Disable automatic Git-based deployments for the docs project and let the GitHub Actions workflow handle production deploys.