Files
composiohq__composio/docs/source.config.ts
T
Rahul Tarak b0b7fac9d9 docs: featured examples gallery + fix title selection (#3682)
## What

Reworks the `/examples` index into a Modal-style **featured gallery**,
styled to the Composio brand (pulled from `~/composio/landing`): flat
editorial cards, sharp corners, mono uppercase category tags in accent
colors, the signature brand offset-shadow on hover, and real toolkit
logos on white chips.

| Light | Dark |
|---|---|
| Big `font-sans` hero, filter pills with live counts, responsive card
grid | Same, brand-consistent |

### Highlights
- **`<ExamplesGallery>`** — hero, category filter pills (Featured /
General agents / Background agents / Coding agents) with live counts,
responsive 1–3 col grid, staggered load-in.
- **Data-driven from frontmatter.** Card title/description come from
each page's own `title`/`description`. Presentation metadata lives in a
new optional `gallery` block in the frontmatter schema:
  ```yaml
  gallery:
    categories: [General agents, Background agents]
    logos: [slack]
    featured: true
    order: 0
  ```
Examples can belong to **multiple category lanes** (the Pi bot is both
General + Background).
- The index route renders the gallery; nested example pages keep the
standard docs renderer.

### Drive-by fix
`PageActions` lifts a **full-width** row over the page title (`-mt-12`)
to place the "Copy page" button beside it. That invisible overlay sat on
top of the title and blocked selecting/copying it. Fixed by making the
overlay `pointer-events-none` and re-enabling them only on the button
wrapper. Affects every docs page.

## Testing
- `bun run types:check` passes.
- Verified in light + dark: titles/descriptions match page frontmatter,
multi-tag cards, filter counts, logo visibility (GitHub on white chips),
title now selectable, Copy button still clickable.

## Notes
- Category lanes are a fixed enum in two spots (`source.config.ts` enum
+ `CATEGORY_STYLES` color map in `examples-gallery.tsx`) — adding a new
lane is a two-place edit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-26 01:24:25 -07:00

188 lines
5.8 KiB
TypeScript

import {
defineConfig,
defineDocs,
defineCollections,
frontmatterSchema,
metaSchema,
applyMdxPreset,
} from 'fumadocs-mdx/config';
import { transformerTwoslash } from '@shikijs/twoslash';
import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs';
import { remarkMdxMermaid } from 'fumadocs-core/mdx-plugins';
import { z } from 'zod';
// You can customise Zod schemas for frontmatter and `meta.json` here
// see https://fumadocs.dev/docs/mdx/collections
// Extended schema with keywords for search
const docsSchema = frontmatterSchema.extend({
keywords: z.array(z.string()).optional(),
/** When true, the page shows an "Experimental" badge in the sidebar. */
experimental: z.boolean().optional(),
/** When true, the page shows a "New" badge in the sidebar. */
isNew: z.boolean().optional(),
/** When true, the page shows a "Legacy" badge at the top of the page. */
legacy: z.boolean().optional(),
/** Controls which LLM guardrail set is appended to the .md output.
* - undefined / omitted → default session-based guardrails
* - "direct-execution" → softer guardrails acknowledging this is the low-level API
* - "none" → no guardrails appended */
llmGuardrails: z.enum(['direct-execution', 'none']).optional(),
/** Links rendered in the right-hand "Related" rail under the table of contents. */
related: z
.array(
z.object({
title: z.string(),
href: z.string(),
description: z.string().optional(),
}),
)
.optional(),
/** Presentation metadata for the /examples featured gallery. The card's
* title and description come from `title`/`description`; this controls the
* category lane, toolkit logos, and whether it surfaces in "Featured". */
gallery: z
.object({
/** Category lanes this example belongs to (can be more than one). */
categories: z
.array(
z.enum(['General agents', 'Background agents', 'Coding agents']),
)
.min(1),
/** Toolkit logo slugs (logos.composio.dev/api/<slug>) shown on the card. */
logos: z.array(z.string()).default([]),
/** Surface in the default "Featured" view. */
featured: z.boolean().optional(),
/** Sort order within the grid (lower first). */
order: z.number().optional(),
})
.optional(),
});
export const docs = defineDocs({
dir: 'content/docs',
docs: {
schema: docsSchema,
postprocess: {
includeProcessedMarkdown: true,
},
},
meta: {
schema: metaSchema,
},
});
// Reference docs use defineCollections with custom mdxOptions to exclude twoslash
// (SDK reference docs are auto-generated and don't need type checking)
export const reference = defineDocs({
dir: 'content/reference',
docs: {
schema: docsSchema,
postprocess: {
includeProcessedMarkdown: true,
},
mdxOptions: applyMdxPreset({
// Match the global remark plugins so mermaid diagrams in merged
// api-overviews render (applyMdxPreset replaces, not merges).
remarkPlugins: [remarkMdxMermaid],
rehypeCodeOptions: {
themes: {
light: 'github-light',
dark: 'github-dark',
},
// No twoslash transformer - SDK reference docs skip type checking
},
}),
},
meta: {
schema: metaSchema,
},
});
export const examples = defineDocs({
dir: 'content/examples',
docs: {
schema: docsSchema,
postprocess: {
includeProcessedMarkdown: true,
},
},
meta: {
schema: metaSchema,
},
});
export const toolkits = defineDocs({
dir: 'content/toolkits',
docs: {
schema: docsSchema,
files: ['**/*', '!faq/**'],
postprocess: {
includeProcessedMarkdown: true,
},
},
meta: {
schema: metaSchema,
},
});
export const changelog = defineCollections({
type: 'doc',
dir: 'content/changelog',
postprocess: {
includeProcessedMarkdown: true,
},
schema: frontmatterSchema.extend({
date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, {
message: 'Date must be in YYYY-MM-DD format (e.g., "2025-12-29")',
}),
}),
});
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMdxMermaid],
rehypeCodeOptions: {
themes: {
light: 'github-light',
dark: 'github-dark',
},
// Twoslash for type checking only - no hover UI
transformers:
process.env.NODE_ENV === 'production'
? [
transformerTwoslash({
explicitTrigger: false,
twoslashOptions: {
compilerOptions: {
jsx: 4, // JsxEmit.ReactJSX
jsxImportSource: 'react',
// Twoslash type-checks code blocks in its own virtual TS
// environment, which carries a `baseUrl` default that TS 6
// flags as deprecated (TS5101). Silence it here, mirroring
// the root tsconfig.json, so production builds don't fail.
ignoreDeprecations: '6.0',
// TS 6 no longer auto-includes `@types/node` ambiently the
// way 5.9 did, so code blocks using Node globals (`crypto`,
// `process`, `Buffer`) fail to resolve them (TS2591). Pull
// node types in explicitly to restore that.
types: ['node'],
},
},
typesCache: createFileSystemTypesCache({
dir: '.next/cache/twoslash',
}),
renderer: {
// Empty renderer - type checks but renders nothing
nodeStaticInfo: () => ({}),
nodeError: () => ({}),
nodeQuery: () => ({}),
nodeCompletion: () => ({}),
},
}),
]
: [],
},
},
});