Skip to content

Commit 1a6cea8

Browse files
mscolnickmscolnick
authored
docs: add the kapa.ai Ask AI widget to the docs site (#17)
Adds the kapa.ai website widget (integration `a8d33c2e…`) to the VitePress docs site with marimo-first branding and minimal kapa branding. ## What - Async kapa widget `<script>` in the VitePress `head` (`apps/docs/.vitepress/config.mts`) - `docs/public/marimo-logo.png` (marimo logomark) — used as the widget logo **and** as a favicon (the site had none) ## Defaults chosen - **marimo branding**: logomark in the modal header, brand teal `#0d9488`, Inter font, dark-mode surfaces matched to `--vp-c-bg`/`--vp-c-bg-soft` - **Dark mode** syncs with the site toggle via `data-color-scheme-selector=".dark"` - **Kapa branding hidden** (`data-kapa-branding-hidden`) — footer shows only "Protected by reCAPTCHA". ⚠️ per kapa docs this requires the agreement to allow it; drop the attribute if ours doesn't - Four example questions (deploy / storage / auth / compute) + AI-generated-answers disclaimer - Cmd+K stays with the built-in VitePress search (kapa shortcut off); kapa search mode off; analytics at kapa defaults ## Verified - `pnpm check` + docs build pass - Browser-checked the built site: launcher renders, modal opens with logo/questions/disclaimer, dark mode follows the site toggle, no kapa branding ## Post-merge (manual) Whitelist domains in the kapa dashboard: `marimohub.docs.marimo.io`, `localhost`, optionally `*.vercel.app` — until then the widget renders but queries fail with CORS. <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Add the kapa.ai Ask widget to the VitePress docs with marimo-first branding and a new favicon. Users can ask questions from any docs page; dark mode and search behavior match the site. - **New Features** - Inject async Kapa widget in the docs head with website id `a8d33c2e-7970-4f77-a09b-ea606a0f41c7` and project `marimohub`. - marimo branding: logo, color `#0d9488`, Inter; Kapa branding hidden (remove if not allowed). - Dark mode synced via `.dark`; modal surfaces match site colors. - Four example questions + answers disclaimer; Kapa search shortcut off (Cmd+K stays with VitePress search). - Add `/marimo-logo.png` as the site favicon. - **Migration** - Whitelist domains in the Kapa dashboard: `marimohub.docs.marimo.io`, `localhost`, optionally `*.vercel.app` (queries fail with CORS until done). <sup>Written for commit 792ac69. Summary will update on new commits.</sup> <a href="https://cubic.dev/pr/marimo-team/marimohub/pull/17?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
1 parent 22f3925 commit 1a6cea8

2 files changed

Lines changed: 23 additions & 0 deletions

File tree

‎apps/docs/.vitepress/config.mts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export default defineConfig({
3030
},
3131

3232
head: [
33+
['link', { rel: 'icon', type: 'image/png', href: '/marimo-logo.png' }],
3334
['meta', { name: 'theme-color', content: '#14b8a6' }],
3435
['meta', { property: 'og:title', content: 'marimohub' }],
3536
[
@@ -39,6 +40,28 @@ export default defineConfig({
3940
content: 'Self-hostable, provider-agnostic platform for marimo notebooks.',
4041
},
4142
],
43+
[
44+
'script',
45+
{
46+
async: 'true',
47+
src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
48+
'data-website-id': 'a8d33c2e-7970-4f77-a09b-ea606a0f41c7',
49+
'data-project-name': 'marimohub',
50+
'data-project-color': '#0d9488',
51+
'data-project-logo': '/marimo-logo.png',
52+
// Follow the site's dark-mode toggle (VitePress sets .dark on <html>).
53+
'data-color-scheme-selector': '.dark',
54+
'data-font-family': "'Inter', ui-sans-serif, system-ui, sans-serif",
55+
// Match --vp-c-bg / --vp-c-bg-soft so the modal blends with the site.
56+
'data-surface-color-dark': '#1b1b1f',
57+
'data-surface-elevated-color-dark': '#202127',
58+
'data-example-questions':
59+
'How do I deploy marimohub with Helm?,What storage backends are supported?,How do I configure authentication?,How do sandboxes run notebooks?',
60+
'data-chat-disclaimer':
61+
'Answers are AI-generated from the [marimohub docs](https://marimohub.docs.marimo.io) and may contain mistakes — verify anything important.',
62+
'data-kapa-branding-hidden': 'true',
63+
},
64+
],
4265
],
4366

4467
// README.md is the GitHub folder index; index.md is the site home.

‎docs/public/marimo-logo.png‎

12.6 KB
Loading

0 commit comments

Comments
 (0)