Files
sim/apps/docs/lib/source.ts
Waleed 13d2a134d0 improvement(docs): align sidebar method badges and polish API reference styling (#3484)
* improvement(docs): align sidebar method badges and polish API reference styling

* fix(docs): revert className prop on DocsPage for CI compatibility

* fix(docs): restore oneOf schema for delete rows and use rem units in CSS

* fix(docs): replace :has() selectors with direct className for reliable prod layout

The API docs layout was intermittently narrow in production because CSS
:has(.api-page-header) selectors are unreliable in Tailwind v4 production
builds. Apply className="openapi-page" directly to DocsPage and replace
all 64 :has() selectors with .openapi-page class targeting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(docs): bypass TypeScript check for className prop on DocsPage

Use spread with type assertion to pass className to DocsPage, working
around a CI type resolution issue where the prop exists at runtime but
is not recognized by TypeScript in the Vercel build environment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(docs): use inline style tag for grid layout, revert CSS to :has() selectors

The className prop on DocsPage doesn't exist in the fumadocs-ui version
resolved on Vercel, so .openapi-page was never applied and all 64 CSS
rules broke. Revert to :has(.api-page-header) selectors for styling and
use an inline <style> tag for the critical grid-column layout override,
which is SSR'd and doesn't depend on any CSS selector matching.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(docs): add pill styling to footer navigation method badges

The footer nav badges (POST, GET, etc.) had color from data-method rules
but lacked the structural pill styling (padding, border-radius, font-size).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:22:09 -07:00

104 lines
3.0 KiB
TypeScript

import { createElement, Fragment } from 'react'
import { type InferPageType, loader, multiple } from 'fumadocs-core/source'
import type { DocData, DocMethods } from 'fumadocs-mdx/runtime/types'
import { openapiSource } from 'fumadocs-openapi/server'
import { docs } from '@/.source/server'
import { i18n } from './i18n'
import { openapi } from './openapi'
const METHOD_COLORS: Record<string, string> = {
GET: 'text-green-600 dark:text-green-400',
HEAD: 'text-green-600 dark:text-green-400',
OPTIONS: 'text-green-600 dark:text-green-400',
POST: 'text-blue-600 dark:text-blue-400',
PUT: 'text-yellow-600 dark:text-yellow-400',
PATCH: 'text-orange-600 dark:text-orange-400',
DELETE: 'text-red-600 dark:text-red-400',
}
/**
* Custom openapi plugin that places method badges BEFORE the page name
* in the sidebar (like Mintlify/Gumloop) instead of after.
*/
function openapiPluginBadgeLeft() {
return {
name: 'fumadocs:openapi-badge-left',
enforce: 'pre' as const,
transformPageTree: {
file(
this: {
storage: {
read: (path: string) => { format: string; data: Record<string, unknown> } | undefined
}
},
node: { name: React.ReactNode },
filePath: string | undefined
) {
if (!filePath) return node
const file = this.storage.read(filePath)
if (!file || file.format !== 'page') return node
const openApiData = file.data._openapi as { method?: string; webhook?: boolean } | undefined
if (!openApiData || typeof openApiData !== 'object') return node
if (openApiData.webhook) {
node.name = createElement(
Fragment,
null,
node.name,
' ',
createElement(
'span',
{
className:
'ms-auto border border-current px-1 rounded-lg text-xs text-nowrap font-mono',
},
'Webhook'
)
)
} else if (openApiData.method) {
const method = openApiData.method.toUpperCase()
const colorClass = METHOD_COLORS[method] ?? METHOD_COLORS.GET
node.name = createElement(
Fragment,
null,
createElement(
'span',
{
className: `font-mono font-medium me-1.5 text-[10px] text-nowrap ${colorClass}`,
'data-method': method.toLowerCase(),
},
method
),
node.name
)
}
return node
},
},
}
}
export const source = loader(
multiple({
docs: docs.toFumadocsSource(),
openapi: await openapiSource(openapi, {
baseDir: 'en/api-reference/(generated)',
groupBy: 'tag',
}),
}),
{
baseUrl: '/',
i18n,
plugins: [openapiPluginBadgeLeft() as never],
}
)
/** Full page data type including MDX content and metadata */
export type PageData = DocData &
DocMethods & {
title: string
description?: string
full?: boolean
}
export type Page = InferPageType<typeof source>