mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-06 03:00:16 -04:00
* 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>
104 lines
3.0 KiB
TypeScript
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>
|