Sync

.changeset/lazy-beers-count.md

@@ -0,0 +1,7 @@
+---
+'fumadocs-ui': minor
+---
+
+**Replace official Tailwind CSS typography plugin**
+
+- Other variants like `prose-sm` and `prose-gray` are removed, as it's supposed to only provide support for Fumadocs UI typography styles.

apps/docs/app/docs/layout.tsx

@@ -140,7 +140,7 @@ export default function Layout({ children }: { children: ReactNode }) {
           buttonVariants({
             variant: 'secondary',
           }),
-          'fixed bottom-4 right-4 md:bottom-8 md:right-8 gap-2 rounded-xl text-fd-secondary-foreground/80 bg-secondary/50 shadow-lg backdrop-blur-lg',
+          'fixed bottom-4 right-4 z-10 gap-2 rounded-xl bg-secondary/50 text-fd-secondary-foreground/80 shadow-lg backdrop-blur-lg md:bottom-8 md:right-8',
         )}
       >
         <MessageCircle className="size-4" />

apps/docs/components/ai/engines/inkeep.ts

@@ -36,7 +36,8 @@ export async function createInkeepEngine(): Promise<Engine> {
         integrationId: integrationId!,
         stream: true,
         chatSession: {
-          guidance: 'make sure to format code blocks',
+          guidance:
+            'make sure to format code blocks, and add language/title to it',
           messages,
         },
       });

apps/docs/components/ai/markdown-processor.ts

@@ -9,7 +9,6 @@ import { type ReactNode } from 'react';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import { createHighlighter } from 'shiki/bundle/web';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
-import { createStyleTransformer } from 'fumadocs-core/server';
 import type { Root } from 'hast';
 
 interface MetaValue {
@@ -75,13 +74,21 @@ export function createProcessor(): Processor {
       transformers: [
         {
           name: 'pre-process',
+          line(hast) {
+            if (hast.children.length === 0) {
+              // Keep the empty lines when using grid layout
+              hast.children.push({
+                type: 'text',
+                value: ' ',
+              });
+            }
+          },
           preprocess(_, { meta }) {
             if (meta) {
               meta.__raw = filterMetaString(meta.__raw ?? '');
             }
           },
         },
-        createStyleTransformer(),
       ],
     });
   });

apps/docs/components/ai/search-ai.tsx

@@ -140,7 +140,7 @@ function AIDialog({ type }: { type: EngineType }) {
 
   const messages = engine?.getHistory() ?? [];
   const activeBar = (
-    <div className="mt-2 border-t pt-1 flex flex-row items-center gap-2">
+    <div className="mt-2 flex flex-row items-center gap-2 border-t pt-1">
       <button
         type="button"
         className={cn(
@@ -275,7 +275,7 @@ function List(props: HTMLAttributes<HTMLDivElement>) {
     <div
       {...props}
       ref={containerRef}
-      className={cn('min-h-0 flex-1 overflow-auto px-2 py-2', props.className)}
+      className={cn('min-h-0 flex-1 overflow-auto p-2', props.className)}
     >
       <div className="flex flex-col gap-1">{props.children}</div>
     </div>
@@ -331,16 +331,20 @@ const Message = memo(
         const { createProcessor } = await import('./markdown-processor');
 
         processor ??= createProcessor();
-        const result = await processor
-          .process(
-            message.content,
-            // @ts-expect-error -- avoid conflicts between JSX types and React types
-            {
-              ...defaultMdxComponents,
-              img: undefined, // use JSX
-            },
-          )
-          .catch(() => undefined);
+        let result = map.get(message.content);
+
+        if (!result) {
+          result = await processor
+            .process(
+              message.content,
+              // @ts-expect-error -- avoid conflicts between JSX types and React types
+              {
+                ...defaultMdxComponents,
+                img: undefined, // use JSX
+              },
+            )
+            .catch(() => undefined);
+        }
 
         if (result) {
           map.set(message.content, result);
@@ -369,14 +373,14 @@ const Message = memo(
         </p>
         <div className="prose text-sm">{rendered}</div>
         {references.length > 0 ? (
-          <div className="flex flex-row items-center flex-wrap gap-1 mt-2">
+          <div className="mt-2 flex flex-row flex-wrap items-center gap-1">
             {references.map((item, i) => (
               <Link
                 key={i}
                 href={item.url}
-                className="block p-2 border rounded-lg bg-fd-secondary text-fd-secondary-foreground transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent"
+                className="block rounded-lg border bg-fd-secondary p-2 text-fd-secondary-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
               >
-                <p className="font-medium text-sm">{item.title}</p>
+                <p className="text-sm font-medium">{item.title}</p>
                 <p className="text-xs text-fd-muted-foreground">
                   {item.description}
                 </p>
@@ -445,13 +449,11 @@ export function Trigger(props: ButtonHTMLAttributes<HTMLButtonElement>) {
           <DialogClose
             aria-label="Close Dialog"
             tabIndex={-1}
-            className={cn(
-              'absolute right-1 top-1 rounded-full bg-fd-muted p-1.5 text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
-            )}
+            className="absolute right-1 top-1 rounded-full p-1.5 text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
           >
             <X className="size-4" />
           </DialogClose>
-          <div className="bg-fd-secondary px-2.5 py-2">
+          <div className="bg-fd-muted px-2.5 py-2">
             <div className="flex flex-row items-center">
               <button
                 className={cn(
@@ -472,7 +474,7 @@ export function Trigger(props: ButtonHTMLAttributes<HTMLButtonElement>) {
                 Orama
               </button>
             </div>
-            <p className="text-xs text-fd-muted-foreground mt-2">
+            <p className="mt-2 text-xs text-fd-muted-foreground">
               Answers from AI may be inaccurate, please verify the information.
             </p>
           </div>

examples/next-mdx/content/docs/index.mdx

@@ -24,3 +24,10 @@ Hello World dsasfdafsd
 ### Heading
 
 #### Heading
+
+| Head                            | Description                         |
+| ------------------------------- | ----------------------------------- |
+| `hello`                         | Hello World                         |
+| very **important**              | Hey                                 |
+| _Surprisingly_                  | Fumadocs                            |
+| very long text that looks weird | hello world hello world hello world |

packages/cli/src/utils/get-package-manager.ts

@@ -1,6 +1,6 @@
-import { detect } from 'package-manager-detector';
+import { detect, type AgentName } from 'package-manager-detector';
 
-export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+export type PackageManager = AgentName;
 
 export async function getPackageManager(): Promise<PackageManager> {
   const result = await detect();

packages/openapi/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fuma-docs/openapi
 
+## 5.7.0
+
+### Minor Changes
+
+- c66df64: OpenAPI: Display the server selector only when more than one server is defined in the OpenAPI schema
+  OpenAPI: Improve APIInfo position for better visibility on smaller screens
+
 ## 5.6.2
 
 ### Patch Changes

packages/openapi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.6.2",
+  "version": "5.7.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",

packages/openapi/src/ui/client.tsx

@@ -76,10 +76,11 @@
 
 export function BaseUrlSelect({ baseUrls }: { baseUrls: string[] }) {
   const { baseUrl, setBaseUrl } = useApiContext();
-  if (baseUrls.length === 0) return null;
+
+  if (baseUrls.length <= 1) return null;
 
   return (
-    <div className="flex flex-row items-center gap-1 px-1">
+    <div className="flex flex-row items-center gap-1 px-1 mt-2">
       <span className="p-0.5 text-xs font-medium text-fd-muted-foreground">
         Server
       </span>

packages/openapi/src/ui/index.tsx

@@ -41,7 +41,7 @@ export function APIInfo({
   return (
     <div className={cn('min-w-0 flex-1', className)} {...props}>
       <div className="sticky top-[var(--fd-api-info-top)] z-[4] mb-4 border-b border-fd-foreground/10 bg-fd-card/50 px-4 py-1.5 shadow-lg backdrop-blur-lg max-lg:-mx-3 max-md:-mx-4 md:rounded-xl md:border md:px-1.5">
-        <div className="mb-2 flex flex-row items-center gap-1.5">
+        <div className="flex flex-row items-center gap-1.5">
           <span
             className={cn(
               badgeVariants({ color: getBadgeColor(method) }),
@@ -68,7 +68,7 @@ export function API({
     <div
       {...props}
       className={cn(
-        'flex flex-col gap-x-6 gap-y-4 max-lg:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start',
+        'flex flex-col gap-x-6 gap-y-4 max-xl:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start',
         props.className,
       )}
       style={

packages/ui/package.json

@@ -71,17 +71,19 @@
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@tailwindcss/typography": "^0.5.15",
     "class-variance-authority": "^0.7.0",
-    "fumadocs-core": "workspace:*",
+    "lodash.merge": "^4.6.2",
     "lucide-react": "^0.460.0",
     "next-themes": "^0.4.3",
+    "fumadocs-core": "workspace:*",
+    "postcss-selector-parser": "^7.0.0",
     "react-medium-image-zoom": "^5.2.11",
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@fumadocs/cli": "workspace:*",
     "@next/eslint-plugin-next": "^15.0.3",
+    "@types/lodash.merge": "^4.6.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "eslint-config-custom": "workspace:*",

packages/ui/postcss.config.js

@@ -1,8 +1,5 @@
 export default {
   plugins: {
     tailwindcss: {},
-    'postcss-lightningcss': {
-      browsers: '>= .25%',
-    },
   },
 };

packages/ui/src/tailwind-plugin.ts

@@ -1,9 +1,12 @@
-import typography from '@tailwindcss/typography';
 import plugin from 'tailwindcss/plugin';
 import type { CSSRuleObject, PresetsConfig } from 'tailwindcss/types/config';
 import { presets } from './theme/colors';
 import { animations } from './theme/animations';
-import { typography as typographyConfig } from './theme/typography';
+import {
+  type Options as TypographyOptions,
+  typography,
+} from './theme/typography';
+import { roundedTable } from '@/theme/typography/styles';
 
 export interface DocsUIOptions {
   /**
@@ -43,6 +46,8 @@ export interface DocsUIOptions {
    * Disable custom table styles
    */
   disableRoundedTable?: boolean;
+
+  typography?: TypographyOptions;
 }
 
 type Keys =
@@ -272,15 +277,20 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
 export function createPreset(options: DocsUIOptions = {}): PresetsConfig {
   return {
     darkMode: 'class',
-    plugins: [typography, docsUi(options)],
+    plugins: [typography(options.typography ?? {}), docsUi(options)],
     theme: {
       extend: {
         typography: {
-          DEFAULT: typographyConfig(options),
+          DEFAULT: {
+            css: {
+              ...(!options.disableRoundedTable ? roundedTable : undefined),
+            },
+          },
         },
       },
     },
   };
 }
 
+export { typography };
 export { presets } from './theme/colors';