hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-25 04:20:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Chore: Update docs & migrate packages to Tailwind CSS v4

Browse Source
This commit is contained in:
Fuma Nama
2025-01-24 20:30:20 +08:00
parent c8821b25e1
commit a89d6e0441
28 changed files with 217 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/chatty-cows-approve.md
+5
View File
@@ -0,0 +1,5 @@
---
'fumadocs-twoslash': major
---
Require Fumadocs v15 & Tailwind CSS v4
.changeset/fuzzy-llamas-cough.md
+9
View File
@@ -0,0 +1,9 @@
---
'@fumadocs/content-collections': patch
'create-fumadocs-app': patch
'@fumadocs/mdx-remote': patch
'fumadocs-mdx': patch
'fumadocs-ui': patch
---
Support Fumadocs v15
.changeset/lucky-crabs-shout.md
+26 -1
View File
@@ -2,4 +2,29 @@
'fumadocs-ui': major
---
Migrate to Tailwind CSS v4
### Migrate to Tailwind CSS v4
**migrate:**
Follow https://tailwindcss.com/blog/tailwindcss-v4 for official migrate guide of Tailwind CSS v4.
Fumadocs UI v15 redesigned the Tailwind CSS config to fully adhere the new config style, no JavaScript and options needed for plugins.
Add the following to your CSS file:
```css
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* if you have Twoslash enabled */
@import 'fumadocs-twoslash/twoslash.css';
@source '../node_modules/fumadocs-ui/dist/**/*.js';
/* if you have OpenAPI enabled */
@source '../node_modules/fumadocs-openapi/dist/**/*.js';
```
The `fumadocs-ui/css/preset.css` import is required, it declares necessary plugins & styles for Fumadocs UI, and `fumadocs-ui/css/neutral.css` defines the color palette of UI.
Like the previous `preset` option in Tailwind CSS plugin, you can import other color presets like `fumadocs-ui/css/vitepress.css`.
You should also pay attention to `@source`, the file paths are relative to the CSS file itself. For your project, it might not be `../node_modules/fumadocs-ui/dist/**/*.js`.
apps/docs/content/docs/example/tailwind.config.js
-15
View File
@@ -1,15 +0,0 @@
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
presets: [createPreset()],
content: [
'./node_modules/fumadocs-ui/dist/**/*.js',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./content/**/*.mdx',
'./mdx-components.tsx',
],
};
apps/docs/content/docs/ui/(integrations)/openapi/index.mdx
+10 -13
View File
@@ -51,22 +51,19 @@ fumadocs-openapi shiki
### Generate Styles
The interactive UI of OpenAPI integration is styled with Tailwind CSS, it doesn't include a pre-built stylesheet by default.
You must use it in conjunction with the [official Tailwind CSS plugin](/docs/ui/theme#docsui-plugin).
The interactive UI of OpenAPI integration is styled with Tailwind CSS, it doesn't include a pre-built stylesheet.
You must use it with Tailwind CSS configured.
Add the package to `content` under your Tailwind CSS configuration.
Add the package to `@source` in your Tailwind CSS configuration.
```js title="tailwind.config.js"
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
```css title="Tailwind CSS"
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./node_modules/fumadocs-ui/dist/**/*.js',
'./node_modules/fumadocs-openapi/dist/**/*.js',
],
presets: [createPreset()],
};
@source '../node_modules/fumadocs-ui/dist/**/*.js';
/* [!code highlight] */
@source '../node_modules/fumadocs-openapi/dist/**/*.js';
```
### Configure Pages
apps/docs/content/docs/ui/(integrations)/twoslash.mdx
+3 -3
View File
@@ -34,10 +34,10 @@ export default defineConfig({
</Callout>
Add required styles and components, note that you have to configure Tailwind CSS and the official Tailwind CSS plugin first.
Add required styles and components, note that you have to configure Tailwind CSS first.
```tsx title="layout.tsx"
import 'fumadocs-twoslash/twoslash.css';
```css title="Tailwind CSS"
@import 'fumadocs-twoslash/twoslash.css';
```
```tsx title="page.tsx"
apps/docs/content/docs/ui/(integrations)/typescript.model.mdx
+1 -1
View File
@@ -54,7 +54,7 @@ title: Hello World
Run this script with `node ./script.mjs`.
Generated MDX files assumes you are using the [Tailwind CSS preset](/docs/ui/theme) of Fumadocs UI.
Generated MDX files assumes you are using Tailwind CSS.
If you want to customise generated output, use the `templates` option.
### Generate from MDX Content
apps/docs/content/docs/ui/index.mdx
+18 -21
View File
@@ -9,7 +9,7 @@ import { CpuIcon, PanelsTopLeft, Database, Terminal } from 'lucide-react';
## Introduction
Fumadocs is a **documentation framework** based on Next.js, designed to be fast and flexible.
Fumadocs <span className='text-fd-muted-foreground text-sm'>(Foo-ma docs)</span> is a **documentation framework** based on Next.js, designed to be fast and flexible.
It composes seamlessly into Next.js App Router, allowing a high flexibility with code.
Fumadocs has different parts:
@@ -44,11 +44,11 @@ A command line tool to configure features automatically, and install UI componen
### Terminology
For a better understanding of the docs, there are some common terminologies you should know:
For a better understanding of the docs, there's some common terminologies:
**Page Tree:** A tree of all the pages, separators and folders. It is essential for navigation elements, usually generated by the content source or hardcoded. See [Types definitions](/docs/headless/page-tree).
**Page Tree:** A tree of all the pages, separators and folders. You can use it customise navigation elements, usually generated by content source or hardcoded. See [Types definitions](/docs/headless/page-tree).
**Markdown/MDX:** Markdown is a markup language for creating formatted text. By default, Fumadocs supports Markdown and MDX (superset of Markdown).
**Markdown/MDX:** Markdown is a markup language for creating formatted text. Fumadocs supports Markdown and MDX (superset of Markdown) out-of-the-box.
Some basic knowledge of Next.js App Router would be useful for further customisations.
@@ -108,7 +108,7 @@ npm run dev
In the project, you can see:
- `lib/source.ts`: Where you organize code for content source adapter, we use [`loader`](/docs/headless/source-api) API to load from your content source.
- `lib/source.ts`: Where you organize code for content source adapter, we use [`loader()`](/docs/headless/source-api) to parse and interact with your content source.
- `app/layout.config.tsx`: Shared options for layouts, this is optional but preferred to keep.
- `app/(home)`: The route group for your landing page and other pages.
- `app/docs`: The documentation layout and pages.
@@ -116,7 +116,7 @@ In the project, you can see:
#### Content Source
You can explore the docs of your content source, it manages the validation and type definitions of content (e.g. frontmatter properties), and transform them to data on JavaScript runtime.
You can explore the docs of your content source, it manages the validation and type definitions of content (e.g. frontmatter properties), and transform them to readable data on JavaScript runtime.
For Fumadocs MDX, a `source.config.ts` config file is included by default. See [Introduction](/docs/mdx).
@@ -156,20 +156,20 @@ This is inspired and very similar to Shadcn UI.
Sometimes, `fumadocs-ui` is not installed in the workspace of your Tailwind CSS configuration file. (e.g. a monorepo setup).
When using the official Tailwind CSS plugin, it will not be able to find the files from `fumadocs-ui` package.
You have to ensure the `fumadocs-ui` package is scanned by Tailwind CSS, and give a correct relative path to `@source`.
To fix this, edit the Tailwind CSS configuration and replace `./node_modules` with `../../node_modules` in the `content` section.
For example, add `../../` to point to the `node_modules` folder in root workspace.
```js
export default {
content: [
'./node_modules/fumadocs-ui/dist/**/*.js', // [!code --]
'../../node_modules/fumadocs-ui/dist/**/*.js', // [!code ++]
'./components/**/*.{ts,tsx}',
// ...
],
};
```
```css
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* [!code --] */
@source '../node_modules/fumadocs-ui/dist/**/*.js';
/* [!code ++] */
@source '../../../node_modules/fumadocs-ui/dist/**/*.js';
```
</Accordion>
<Accordion id='change-base-url' title="How to change the base route of /docs?">
@@ -208,9 +208,6 @@ Hence, it is as fast as static pages.
You can enable Static Exports on Next.js to get a static build output. (Notice that Route Handler doesn't work with static export, you have to configure static search)
</Accordion>
<Accordion id='pronunciation' title='How to say Fumadocs?'>
Fumadocs (Foo-ma docs).
</Accordion>
<Accordion id='custom-layout-docs-page' title='How to create a page in /docs without docs layout?'>
Same as managing layouts in Next.js App Router, remove the original MDX file from content directory (`/content/docs`).
apps/docs/content/docs/ui/manual-installation.mdx
+8 -8
View File
@@ -52,15 +52,15 @@ export default function Layout({ children }: { children: ReactNode }) {
### Styles
Setup Tailwind CSS on your Next.js app, and add the official Tailwind CSS plugin.
Setup Tailwind CSS on your Next.js app, add the following to `global.css`.
```json doc-gen:file
{
"file": "./content/docs/example/tailwind.config.js",
"codeblock": {
"meta": "title=\"tailwind.config.js\""
}
}
```css title="Tailwind CSS"
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';
```
> It doesn't come with a default font, you may choose one from `next/font`.
apps/docs/content/docs/ui/theme.mdx
+31 -79
View File
@@ -7,30 +7,25 @@ import { WidthTrigger } from './theme';
## Usage
Initialize Tailwind CSS on your Next.js app, use the official Tailwind CSS plugin:
Initialize Tailwind CSS on your Fumadocs app:
```json doc-gen:file
{
"file": "./content/docs/example/tailwind.config.js",
"codeblock": {
"meta": "title=\"tailwind.config.js\""
}
}
```css title="Tailwind CSS"
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';
```
<Callout type="warn" title="ESM-Only">
Use ESM syntax on your configuration file.
</Callout>
### Global Styles
### Preflight Changes
By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background
colors will be changed.
### Light/Dark Modes
Fumadocs supports light/dark modes with [`next-themes`](https://github.com/pacocoursey/next-themes).
The Theme Provider is a part of Root Provider.
Fumadocs supports light/dark modes with [`next-themes`](https://github.com/pacocoursey/next-themes), it is included in Root Provider.
See [Root Provider](/docs/ui/layouts/root-provider#theme-provider) to learn more.
@@ -55,28 +50,17 @@ export default function RootLayout({ children }: { children: ReactNode }) {
}
```
## CSS Variables
Fumadocs UI provides some CSS variables for customising the layout.
### Prefix
By default, it has a `fd-` prefix to avoid conflicts with Shadcn UI or your own CSS variables.
Fumadocs UI has its own colors, animations, and utilities.
By default, it adds a `fd-` prefix to avoid conflicts with Shadcn UI or your own CSS variables.
You can set or remove the prefix in `createPreset`:
You can use them without the prefix by adding some aliases:
```js
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
presets: [
createPreset({
// no prefix
cssPrefix: '',
}),
],
};
```css title="Tailwind CSS"
@theme {
--color-primary: var(--color-fd-primary);
}
```
### Navbar Height
@@ -91,7 +75,7 @@ You should set the `--fd-nav-height` variable to the height of your navbar.
}
```
> You can use it with CSS media queries.
> You can use it with CSS media queries for responsive design.
### Layout Width
@@ -107,43 +91,31 @@ Customise the max width of docs layout with CSS Variables.
### Colors
The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can easily customize all colors using CSS variables.
The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can easily customize the colors using CSS variables.
```css title="global.css"
:root {
/* hsl colors */
/* use whitespace instead of comma */
--fd-background: 0 0% 100%;
--fd-foreground: 222.2 47.4% 11.2%;
--color-fd-background: hsl(0, 0%, 100%);
}
--fd-muted: 210 40% 96.1%;
--fd-muted-foreground: 215.4 16.3% 46.9%;
.dark {
--color-fd-background: hsl(0, 0%, 0%);
}
```
> Only a subset of colors are provided by Fumadocs UI.
>
> It may not be compatible with Shadcn UI.
## Tailwind CSS Preset
## Tailwind CSS Plugin [#docsui-plugin]
The Tailwind CSS preset introduces new colors and extra utilities including `fd-steps`.
The official Tailwind CSS plugin introduces new colors and extra utilities including `steps`.
### Themes
### Presets
It comes with many themes out-of-the-box, you can pick one you prefer.
It comes with many theme presets out-of-the-box, you can pick one you prefer rather than the default one.
```css
@import 'fumadocs-ui/css/<theme>.css';
```js
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
presets: [
createPreset({
preset: 'ocean',
}),
],
};
/* Example */
@import 'fumadocs-ui/css/black.css';
```
#### `neutral`
@@ -188,23 +160,3 @@ The plugin adds a `prose` class and variants to customise it.
> The plugin works with and only with Fumadocs UI's MDX components, it may conflict with `@tailwindcss/typography`.
> If you need to use `@tailwindcss/typography` over the default plugin, [set a class name option](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/README.md#changing-the-default-class-name) to avoid conflicts.
### Colors
Fumadocs UI has its own colors, animations, and utilities.
It adds the colors with a `fd-` prefix, you can reference them with the prefix like `bg-fd-background`.
To remove the prefix, enable `addGlobalColors`.
```js
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
presets: [
createPreset({
addGlobalColors: true,
}),
],
};
```
examples/openapi/app/global.css
+6 -3
View File
@@ -1,6 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@import 'fumadocs-ui/css/black.css';
@import 'fumadocs-ui/css/preset.css';
@source '../node_modules/fumadocs-ui/dist/**/*.js';
@source '../node_modules/fumadocs-openapi/dist/**/*.js';
.prose {
--tw-prose-body: hsl(var(--foreground) / 0.8);
examples/openapi/postcss.config.mjs
+1 -2
View File
@@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
};
examples/openapi/tailwind.config.js
-19
View File
@@ -1,19 +0,0 @@
// @ts-check
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./content/**/*.mdx',
'./mdx-components.tsx',
'./node_modules/fumadocs-ui/dist/**/*.js',
'./node_modules/fumadocs-openapi/dist/**/*.js',
],
presets: [
createPreset({
preset: 'black',
}),
],
};
packages/content-collections/package.json
+1 -1
View File
@@ -47,7 +47,7 @@
"peerDependencies": {
"@content-collections/core": "0.x.x",
"@content-collections/mdx": "0.x.x",
"fumadocs-core": "^13.2.1 || ^14.0.0"
"fumadocs-core": "^14.0.0 || ^15.0.0"
},
"publishConfig": {
"access": "public"
packages/create-app-versions/package.json
+1 -1
View File
@@ -12,12 +12,12 @@
"@types/node": "22.10.9",
"@types/react": "^19.0.7",
"@types/react-dom": "^19.0.3",
"autoprefixer": "^10.4.20",
"next": "15.1.6",
"postcss": "^8.5.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^4.0.0",
"@tailwindcss/postcss": "^4.0.0",
"typescript": "^5.7.3"
}
}
packages/create-app/src/create-app.ts
+49 -41
View File
@@ -107,58 +107,51 @@ function createPackageJson(projectName: string, options: Options): string {
start: 'next start',
} as Record<string, string>,
dependencies: {
next: versionPkg.dependencies.next,
'fumadocs-ui': localVersions['fumadocs-ui'],
'fumadocs-core': localVersions['fumadocs-core'],
react: versionPkg.dependencies.react,
'react-dom': versionPkg.dependencies['react-dom'],
} as Record<string, string>,
devDependencies: {
'@types/node': versionPkg.dependencies['@types/node'],
'@types/react': versionPkg.dependencies['@types/react'],
'@types/react-dom': versionPkg.dependencies['@types/react-dom'],
typescript: versionPkg.dependencies.typescript,
...pick(versionPkg.dependencies, ['next', 'react', 'react-dom']),
...pick(localVersions, ['fumadocs-ui', 'fumadocs-core']),
} as Record<string, string>,
devDependencies: pick(versionPkg.dependencies, [
'@types/node',
'@types/react',
'@types/react-dom',
'typescript',
]) as Record<string, string>,
};
if (options.template === 'content-collections') {
packageJson.dependencies = {
...packageJson.dependencies,
'@fumadocs/content-collections':
localVersions['@fumadocs/content-collections'],
'@content-collections/core':
versionPkg.dependencies['@content-collections/core'],
'@content-collections/mdx':
versionPkg.dependencies['@content-collections/mdx'],
'@content-collections/next':
versionPkg.dependencies['@content-collections/next'],
};
Object.assign(
packageJson.dependencies,
pick(versionPkg.dependencies, [
'@content-collections/mdx',
'@content-collections/core',
'@content-collections/next',
]),
pick(localVersions, ['@fumadocs/content-collections']),
);
}
if (options.template === 'fuma-docs-mdx') {
packageJson.scripts = {
...packageJson.scripts,
postinstall: 'fumadocs-mdx',
};
packageJson.scripts.postinstall = 'fumadocs-mdx';
packageJson.dependencies = {
...packageJson.dependencies,
'fumadocs-mdx': localVersions['fumadocs-mdx'],
};
packageJson.devDependencies = {
...packageJson.devDependencies,
'@types/mdx': versionPkg.dependencies['@types/mdx'],
};
Object.assign(
packageJson.dependencies,
pick(localVersions, ['fumadocs-mdx']),
);
Object.assign(
packageJson.devDependencies,
pick(versionPkg.dependencies, ['@types/mdx']),
);
}
if (options.tailwindcss) {
packageJson.devDependencies = {
...packageJson.devDependencies,
autoprefixer: versionPkg.dependencies.autoprefixer,
postcss: versionPkg.dependencies.postcss,
tailwindcss: versionPkg.dependencies.tailwindcss,
};
Object.assign(
packageJson.devDependencies,
pick(versionPkg.dependencies, [
'@tailwindcss/postcss',
'tailwindcss',
'postcss',
]),
);
}
if (options.eslint) {
@@ -171,3 +164,18 @@ function createPackageJson(projectName: string, options: Options): string {
return JSON.stringify(packageJson, undefined, 2);
}
function pick<T extends object, K extends keyof T>(
obj: T,
keys: K[],
): Pick<T, K> {
const result: Partial<T> = {};
for (const key of keys) {
if (key in obj) {
result[key] = obj[key];
}
}
return result as Pick<T, K>;
}
packages/create-app/template/+tailwindcss/app/global.css
+5 -3
View File
@@ -1,3 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@source '../node_modules/fumadocs-ui/dist/**/*.js';
packages/create-app/template/+tailwindcss/postcss.config.js
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
packages/create-app/template/+tailwindcss/postcss.config.mjs
+5
View File
@@ -0,0 +1,5 @@
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
packages/create-app/template/+tailwindcss/tailwind.config.js
-14
View File
@@ -1,14 +0,0 @@
// @ts-check
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./content/**/*.{md,mdx}',
'./mdx-components.{ts,tsx}',
'./node_modules/fumadocs-ui/dist/**/*.js',
],
presets: [createPreset()],
};
packages/mdx-remote/package.json
+1 -1
View File
@@ -49,7 +49,7 @@
"vfile": "^6.0.3"
},
"peerDependencies": {
"fumadocs-core": "^13.2.1 || ^14.0.0",
"fumadocs-core": "^14.0.0 || ^15.0.0",
"next": "14.x.x || 15.x.x",
"react": "18.x.x || 19.x.x"
},
packages/mdx/package.json
+1 -1
View File
@@ -72,7 +72,7 @@
"webpack": "^5.97.1"
},
"peerDependencies": {
"fumadocs-core": "^14.0.0",
"fumadocs-core": "^14.0.0 || ^15.0.0",
"next": "14.x.x || 15.x.x"
},
"publishConfig": {
packages/twoslash/package.json
+2 -5
View File
@@ -50,16 +50,13 @@
"@types/react": "^19.0.7",
"eslint-config-custom": "workspace:*",
"fumadocs-ui": "workspace:*",
"postcss": "^8.5.1",
"postcss-lightningcss": "^1.0.1",
"shiki": "^2.1.0",
"tailwindcss": "^4.0.0",
"tsconfig": "workspace:*"
},
"peerDependencies": {
"fumadocs-ui": "^13.0.0 || ^14.0.0",
"fumadocs-ui": "^15.0.0",
"react": "18.x.x || 19.x.x",
"shiki": "1.x.x"
"shiki": "1.x.x || 2.x.x"
},
"publishConfig": {
"access": "public"
packages/twoslash/postcss.config.js
-8
View File
@@ -1,8 +0,0 @@
export default {
plugins: {
tailwindcss: {},
'postcss-lightningcss': {
browsers: '>= .25%',
},
},
};
packages/twoslash/styles/twoslash.css
+31 -10
View File
@@ -28,8 +28,8 @@
border-radius: 6px;
padding: 8px;
z-index: 8;
@apply text-fd-popover-foreground bg-fd-popover;
color: var(--color-fd-popover-foreground);
background-color: var(--color-fd-popover);
}
.twoslash-query-presisted .twoslash-popup-container:hover,
@@ -47,8 +47,7 @@
height: 6px;
border-top-width: 1px;
border-right-width: 1px;
@apply bg-fd-popover;
background-color: var(--color-fd-popover);
}
.twoslash-popup-docs-tag {
@@ -75,8 +74,7 @@
font-size: 14px !important;
line-height: 20px !important;
margin-top: 8px !important;
@apply text-fd-muted-foreground;
color: var(--color-fd-muted-foreground);
}
/* ===== Hover Info ===== */
@@ -118,7 +116,7 @@
height: 1em;
left: -1px;
content: ' ';
@apply bg-fd-foreground;
background-color: var(--color-fd-foreground);
}
.twoslash-completion-list li {
@@ -132,7 +130,7 @@
}
.twoslash-completion-list li span.twoslash-completions-unmatched {
@apply text-fd-muted-foreground;
color: var(--color-fd-muted-foreground);
}
.twoslash-completion-list .deprecated {
@@ -144,7 +142,7 @@
.twoslash-completion-list .twoslash-completions-icon {
width: 1em;
flex: none;
@apply text-fd-muted-foreground;
color: var(--color-fd-muted-foreground);
}
/* Custom Tags */
@@ -191,5 +189,28 @@
}
.fd-twoslash-popover {
@apply z-50 min-w-[220px] max-w-[380px] max-h-[400px] overflow-auto rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in focus-visible:outline-none;
z-index: 50;
min-width: 220px;
max-width: 380px;
max-height: 400px;
overflow: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--color-fd-border);
background-color: var(--color-fd-popover);
padding: calc(var(--spacing) * 2);
font-size: var(--text-sm);
color: var(--color-fd-popover-foreground);
box-shadow: var(--shadow-md);
}
.fd-twoslash-popover[data-state='open'] {
animation: var(--animate-fd-popover-in);
}
.fd-twoslash-popover[data-state='closed'] {
animation: var(--animate-fd-popover-out);
}
.fd-twoslash-popover:focus-visible {
outline-style: none;
}
packages/twoslash/tailwind.config.js
-7
View File
@@ -1,7 +0,0 @@
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{ts,tsx}'],
presets: [createPreset()],
};
packages/ui/css/preset.css
-1
View File
@@ -5,7 +5,6 @@
@plugin '../dist/theme/typography/index.js';
@theme {
--spacing-fd-layout-top: calc(var(--fd-banner-height) + var(--fd-nav-height));
--spacing-fd-container: 1400px;
}
pnpm-lock.yaml
Generated
+3 -166
View File
@@ -665,6 +665,9 @@ importers:
'@content-collections/next':
specifier: ^0.2.4
version: 0.2.4(@content-collections/[email protected]([email protected]))([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))
'@tailwindcss/postcss':
specifier: ^4.0.0
version: 4.0.0
'@types/mdx':
specifier: ^2.0.13
version: 2.0.13
@@ -677,9 +680,6 @@ importers:
'@types/react-dom':
specifier: ^19.0.3
version: 19.0.3(@types/[email protected])
autoprefixer:
specifier: ^10.4.20
version: 10.4.20([email protected])
next:
specifier: 15.1.6
version: 15.1.6(@opentelemetry/[email protected])([email protected]([email protected]))([email protected])
@@ -1019,18 +1019,9 @@ importers:
fumadocs-ui:
specifier: workspace:*
version: link:../ui
postcss:
specifier: ^8.5.1
version: 8.5.1
postcss-lightningcss:
specifier: ^1.0.1
version: 1.0.1([email protected])
shiki:
specifier: ^2.1.0
version: 2.1.0
tailwindcss:
specifier: ^4.0.0
version: 4.0.0
tsconfig:
specifier: workspace:*
version: link:../tsconfig
@@ -3611,13 +3602,6 @@ packages:
resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
hasBin: true
[email protected]:
resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
engines: {node: ^10 || ^12 || >=14}
hasBin: true
peerDependencies:
postcss: ^8.1.0
[email protected]:
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'}
@@ -4443,9 +4427,6 @@ packages:
resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
engines: {node: '>=0.4.x'}
[email protected]:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
[email protected]:
resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
engines: {node: '>=6 <7 || >=8'}
@@ -4951,130 +4932,66 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'}
[email protected]:
resolution: {integrity: sha512-Gl/lqIXY+d+ySmMbgDf0pgaWSqrWYxVHoc88q+Vhf2YNzZ8DwoRzGt5NZDVqqIW5ScpSnmmjcgXP87Dn2ylSSQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
[email protected]:
resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
[email protected]:
resolution: {integrity: sha512-0+mZa54IlcNAoQS9E0+niovhyjjQWEMrwW0p2sSdLRhLDc8LMQ/b67z7+B5q4VmjYCMSfnFi3djAAQFIDuj/Tg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
[email protected]:
resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
[email protected]:
resolution: {integrity: sha512-n1sEf85fePoU2aDN2PzYjoI8gbBqnmLGEhKq7q0DKLj0UTVmOTwDC7PtLcy/zFxzASTSBlVQYJUhwIStQMIpRA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
[email protected]:
resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
[email protected]:
resolution: {integrity: sha512-MUMRmtdRkOkd5z3h986HOuNBD1c2lq2BSQA1Jg88d9I7bmPGx08bwGcnB75dvr17CwxjxD6XPi3Qh8ArmKFqCA==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
[email protected]:
resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
[email protected]:
resolution: {integrity: sha512-cPsxo1QEWq2sfKkSq2Bq5feQDHdUEwgtA9KaB27J5AX22+l4l0ptgjMZZtYtUnteBofjee+0oW1wQ1guv04a7A==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
[email protected]:
resolution: {integrity: sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
[email protected]:
resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
[email protected]:
resolution: {integrity: sha512-/OJLj94Zm/waZShL8nB5jsNj3CfNATLCTyFxZyouilfTmSoLDX7VlVAmhPHoZWVFp4vdmoiEbPEYC8HID3m6yw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
[email protected]:
resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
[email protected]:
resolution: {integrity: sha512-8f7aNmS1+etYSLHht0fQApPc2kNO8qGRutifN5rVIc6Xo6ABsEbqOr758UwI7ALVbTt4x1fllKt0PYgzD9S3yQ==}
engines: {node: '>= 12.0.0'}
[email protected]:
resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
engines: {node: '>= 12.0.0'}
@@ -5458,10 +5375,6 @@ packages:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
[email protected]:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
engines: {node: '>=0.10.0'}
[email protected]:
resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
engines: {node: '>=18'}
@@ -5675,12 +5588,6 @@ packages:
resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
engines: {node: '>= 0.4'}
[email protected]:
resolution: {integrity: sha512-9IrtZVt2HQ92iZJTkO43Qipx7E3PM+lLzZM8aGwMmMjNQHcir5jNC42U33p3Gh2lj1nES/ireYWEbMrJNiRBoQ==}
engines: {node: ^18.0.0 || ^20.0.0 || >= 21}
peerDependencies:
postcss: ^8.0.0
[email protected]:
resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
engines: {node: '>= 18'}
@@ -5703,9 +5610,6 @@ packages:
resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
engines: {node: '>=4'}
[email protected]:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
[email protected]:
resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
engines: {node: ^10 || ^12 || >=14}
@@ -9113,16 +9017,6 @@ snapshots:
[email protected]: {}
[email protected]([email protected]):
dependencies:
browserslist: 4.24.2
caniuse-lite: 1.0.30001692
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.1.1
postcss: 8.5.1
postcss-value-parser: 4.2.0
[email protected]:
dependencies:
possible-typed-array-names: 1.0.0
@@ -10156,8 +10050,6 @@ snapshots:
[email protected]: {}
[email protected]: {}
[email protected]:
dependencies:
graceful-fs: 4.2.11
@@ -10734,81 +10626,36 @@ snapshots:
prelude-ls: 1.2.1
type-check: 0.4.0
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
optional: true
[email protected]:
dependencies:
detect-libc: 1.0.3
optionalDependencies:
lightningcss-darwin-arm64: 1.27.0
lightningcss-darwin-x64: 1.27.0
lightningcss-freebsd-x64: 1.27.0
lightningcss-linux-arm-gnueabihf: 1.27.0
lightningcss-linux-arm64-gnu: 1.27.0
lightningcss-linux-arm64-musl: 1.27.0
lightningcss-linux-x64-gnu: 1.27.0
lightningcss-linux-x64-musl: 1.27.0
lightningcss-win32-arm64-msvc: 1.27.0
lightningcss-win32-x64-msvc: 1.27.0
[email protected]:
dependencies:
detect-libc: 1.0.3
@@ -11509,8 +11356,6 @@ snapshots:
[email protected]: {}
[email protected]: {}
[email protected]:
dependencies:
path-key: 4.0.0
@@ -11730,12 +11575,6 @@ snapshots:
[email protected]: {}
[email protected]([email protected]):
dependencies:
browserslist: 4.24.2
lightningcss: 1.27.0
postcss: 8.5.1
[email protected]([email protected])([email protected])([email protected])([email protected]):
dependencies:
lilconfig: 3.1.3
@@ -11750,8 +11589,6 @@ snapshots:
cssesc: 3.0.0
util-deprecate: 1.0.2
[email protected]: {}
[email protected]:
dependencies:
nanoid: 3.3.8