diff --git a/apps/docs/app/(home)/page.client.tsx b/apps/docs/app/(home)/page.client.tsx index 0bf3da35c..f5b2af59e 100644 --- a/apps/docs/app/(home)/page.client.tsx +++ b/apps/docs/app/(home)/page.client.tsx @@ -88,7 +88,7 @@ export function Rain( export function Previews(): JSX.Element { return (
-

I'm satisfied with it

+

I'm satisfied with it

- - - - - + + + + +
diff --git a/apps/docs/app/style.css b/apps/docs/app/global.css similarity index 100% rename from apps/docs/app/style.css rename to apps/docs/app/global.css diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index 76b5e2dc8..9d55855a8 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -1,4 +1,4 @@ -import './style.css'; +import './global.css'; import 'fumadocs-ui/twoslash.css'; import { Star } from 'lucide-react'; import type { Viewport } from 'next'; diff --git a/apps/docs/components/code-block.tsx b/apps/docs/components/code-block.tsx index 1b257a050..aa385b425 100644 --- a/apps/docs/components/code-block.tsx +++ b/apps/docs/components/code-block.tsx @@ -20,43 +20,35 @@ export function CodeBlock({ wrapper, ...props }: CodeBlockProps): JSX.Element { - const tokens = useMemo( + const html = useMemo( () => - highlighter.codeToTokensWithThemes(code, { + highlighter.codeToHtml(code, { lang, + defaultColor: false, themes: { light: 'github-light', dark: 'github-dark', }, + transformers: [ + { + name: 'remove-pre', + root: (root) => { + if (root.children[0].type !== 'element') return; + + return { + type: 'root', + children: root.children[0].children, + }; + }, + }, + ], }), [code, lang], ); return ( - - - {tokens.map((token, i) => ( - // eslint-disable-next-line react/no-array-index-key -- Should not re-render - - {token.map((s, j) => ( - [ - `--shiki-${k}`, - v.color, - ]), - )} - > - {s.content} - - ))} - - ))} - - + ); } diff --git a/apps/docs/components/preview/index.tsx b/apps/docs/components/preview/index.tsx index 119f4a978..1ce3a1f90 100644 --- a/apps/docs/components/preview/index.tsx +++ b/apps/docs/components/preview/index.tsx @@ -1,7 +1,7 @@ import { HomeIcon } from 'lucide-react'; import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; import { Callout } from 'fumadocs-ui/components/callout'; -import { File, Files } from 'fumadocs-ui/components/files'; +import { File, Folder, Files } from 'fumadocs-ui/components/files'; import { ImageZoom } from 'fumadocs-ui/components/image-zoom'; import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; import { RollButton } from 'fumadocs-ui/components/roll-button'; @@ -90,11 +90,7 @@ export default { ), accordion: ( - + A framework for building documentations @@ -112,17 +108,20 @@ export default { files: ( - - - - - - - - - - - + + + + + + + + + + + + + + ), @@ -194,5 +193,10 @@ export default { ), - 'roll-button': , + 'roll-button': ( +
+

Scroll down to see the button

+ +
+ ), } as Record; diff --git a/apps/docs/components/ui/button.tsx b/apps/docs/components/ui/button.tsx index a96d7d47b..4943a47e6 100644 --- a/apps/docs/components/ui/button.tsx +++ b/apps/docs/components/ui/button.tsx @@ -9,8 +9,7 @@ const buttonVariants = cva( variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', - outline: - 'border border-input hover:bg-accent hover:text-accent-foreground', + outline: 'border hover:bg-accent hover:text-accent-foreground', secondary: 'border bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', diff --git a/apps/docs/content/docs/ui/components/files.mdx b/apps/docs/content/docs/ui/components/files.mdx index 4036cbe1b..14788a5ec 100644 --- a/apps/docs/content/docs/ui/components/files.mdx +++ b/apps/docs/content/docs/ui/components/files.mdx @@ -9,21 +9,27 @@ preview: 'files' Wrap file components in `Files`. ```mdx -import { File, Files } from 'fumadocs-ui/components/files'; +import { File, Folder, Files } from 'fumadocs-ui/components/files'; - - - - - - - - - - - + + + + + + + + + + + ``` +### File + + +### Folder + + diff --git a/apps/docs/content/docs/ui/index.mdx b/apps/docs/content/docs/ui/index.mdx index 1c7f1a00d..e8b86d801 100644 --- a/apps/docs/content/docs/ui/index.mdx +++ b/apps/docs/content/docs/ui/index.mdx @@ -73,7 +73,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { Create a new catch-all route for our docs, and give it a proper layout. -```tsx title="app/docs/[[...slug]]/layout.tsx" +```tsx title="app/docs/layout.tsx" import { DocsLayout } from 'fumadocs-ui/layout'; import type { ReactNode } from 'react'; diff --git a/apps/docs/content/docs/ui/props.ts b/apps/docs/content/docs/ui/props.ts index 2f4ae1e71..896d8d1c4 100644 --- a/apps/docs/content/docs/ui/props.ts +++ b/apps/docs/content/docs/ui/props.ts @@ -1,6 +1,6 @@ import type { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; import type { Callout } from 'fumadocs-ui/components/callout'; -import type { File } from 'fumadocs-ui/components/files'; +import type { File, Folder } from 'fumadocs-ui/components/files'; import type { InlineTOC } from 'fumadocs-ui/components/inline-toc'; import type { RollButton } from 'fumadocs-ui/components/roll-button'; import type { TypeTable } from 'fumadocs-ui/components/type-table'; @@ -26,7 +26,15 @@ export type CalloutProps = Omit< keyof ComponentPropsWithoutRef<'div'> >; -export type FileProps = ComponentPropsWithoutRef; +export type FileProps = Omit< + ComponentPropsWithoutRef, + keyof ComponentPropsWithoutRef<'div'> +>; + +export type FolderProps = Omit< + ComponentPropsWithoutRef, + keyof ComponentPropsWithoutRef<'div'> +>; export type InlineTOCProps = Omit< ComponentPropsWithoutRef, diff --git a/apps/docs/content/docs/ui/theme.mdx b/apps/docs/content/docs/ui/theme.mdx index 6d363d5b7..972d5f4f7 100644 --- a/apps/docs/content/docs/ui/theme.mdx +++ b/apps/docs/content/docs/ui/theme.mdx @@ -63,53 +63,9 @@ The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can ea } ``` - - - -```css -:root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 45.1%; - --card: 0 0% 99.7%; - --card-foreground: 0 0% 3.9%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --accent: 0 0% 94.1%; - --accent-foreground: 0 0% 9%; - --ring: 0 0% 63.9%; -} - -.dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 60.9%; - --popover: 0 0% 7%; - --popover-foreground: 0 0% 98%; - --card: 0 0% 8%; - --card-foreground: 0 0% 98%; - --border: 0 0% 18%; - --input: 0 0% 14.9%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --ring: 0 0% 14.9%; -} -``` - - - +> Only a subset of colors are provided by Fumadocs UI. +> +> It may not compatible with Shadcn UI. ## DocsUI Plugin diff --git a/apps/docs/package.json b/apps/docs/package.json index d589adcea..6437b6c04 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -13,11 +13,9 @@ }, "dependencies": { "@next/env": "^14.0.0", - "@radix-ui/react-hover-card": "^1.0.7", "algoliasearch": "^4.20.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", - "fast-glob": "^3.3.1", "fumadocs-core": "workspace:*", "fumadocs-mdx": "workspace:*", "fumadocs-twoslash": "workspace:^", @@ -31,7 +29,7 @@ "react-dom": "18.2.0", "rehype-katex": "^7.0.0", "remark-math": "^6.0.0", - "shiki": "^1.0.0-beta.2", + "shiki": "^1.1.2", "tailwind-merge": "^2.0.0", "zod": "^3.22.4" }, diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index 12e277bcd..2f3151205 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -2,7 +2,6 @@ const { createPreset } = require('fumadocs-ui/tailwind-plugin'); /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: 'class', content: [ './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', diff --git a/examples/contentlayer/package.json b/examples/contentlayer/package.json index bcbba5638..3aa2a8613 100644 --- a/examples/contentlayer/package.json +++ b/examples/contentlayer/package.json @@ -9,9 +9,9 @@ }, "dependencies": { "contentlayer": "0.3.4", - "fumadocs-contentlayer": "1.0.4", - "fumadocs-core": "8.2.0", - "fumadocs-ui": "8.2.0", + "fumadocs-contentlayer": "1.0.5", + "fumadocs-core": "8.3.0", + "fumadocs-ui": "8.3.0", "next": "14.0.4", "next-contentlayer": "0.3.4", "react": "18.2.0", diff --git a/examples/next-mdx/package.json b/examples/next-mdx/package.json index 87a149dad..c23692a57 100644 --- a/examples/next-mdx/package.json +++ b/examples/next-mdx/package.json @@ -8,9 +8,9 @@ "start": "next start" }, "dependencies": { - "fumadocs-core": "8.2.0", - "fumadocs-mdx": "8.0.3", - "fumadocs-ui": "8.2.0", + "fumadocs-core": "8.3.0", + "fumadocs-mdx": "8.0.4", + "fumadocs-ui": "8.3.0", "next": "14.0.4", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/package.json b/package.json index 84e829935..9119578cc 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,14 @@ "prettier": "@vercel/style-guide/prettier", "devDependencies": { "@changesets/cli": "^2.26.2", - "@typescript-eslint/eslint-plugin": "^6.7.0", - "@typescript-eslint/parser": "^6.7.0", + "@typescript-eslint/eslint-plugin": "^7.0.0", + "@typescript-eslint/parser": "^7.0.0", "@vercel/style-guide": "^5.1.0", "concurrently": "^8.2.1", "prettier": "^3.0.3", "rimraf": "^5.0.5", "tsup": "8.0.2", - "turbo": "1.12.3", + "turbo": "1.12.4", "typescript": "5.3.3", "vitest": "^1.0.4" }, diff --git a/packages/contentlayer/CHANGELOG.md b/packages/contentlayer/CHANGELOG.md index f58f528db..f5a3179f6 100644 --- a/packages/contentlayer/CHANGELOG.md +++ b/packages/contentlayer/CHANGELOG.md @@ -1,5 +1,11 @@ # fumadocs-contentlayer +## 1.0.5 + +### Patch Changes + +- fumadocs-core@8.3.0 + ## 1.0.4 ### Patch Changes diff --git a/packages/contentlayer/package.json b/packages/contentlayer/package.json index 5d2b6d2e2..895a735a7 100644 --- a/packages/contentlayer/package.json +++ b/packages/contentlayer/package.json @@ -1,6 +1,6 @@ { "name": "fumadocs-contentlayer", - "version": "1.0.4", + "version": "1.0.5", "description": "The Contentlayer adapter for Fumadocs", "keywords": [ "NextJs", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index cf46d02d8..4680dc742 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,7 @@ # next-docs-zeta +## 8.3.0 + ## 8.2.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index d0e53d0f6..be5729b67 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "fumadocs-core", - "version": "8.2.0", + "version": "8.3.0", "description": "The library for building a documentation website in Next.js", "keywords": [ "NextJs", @@ -123,8 +123,8 @@ }, "dependencies": { "@formatjs/intl-localematcher": "^0.5.0", - "@shikijs/rehype": "v1.1.1", - "@shikijs/transformers": "v1.1.1", + "@shikijs/rehype": "1.1.3", + "@shikijs/transformers": "1.1.3", "flexsearch": "0.7.21", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.0", @@ -134,7 +134,7 @@ "remark-gfm": "^4.0.0", "remark-mdx": "^3.0.0", "scroll-into-view-if-needed": "^3.1.0", - "shiki": "v1.1.1", + "shiki": "1.1.3", "swr": "^2.2.2", "unist-util-visit": "^5.0.0" }, diff --git a/packages/core/tsup.config.ts b/packages/core/tsup.config.ts index dca3fd52b..2b90b15f3 100644 --- a/packages/core/tsup.config.ts +++ b/packages/core/tsup.config.ts @@ -1,17 +1,12 @@ import { defineConfig } from 'tsup'; -const sharedConfig = { +export default defineConfig({ external: [ '@algolia/client-search', 'algoliasearch', - 'contentlayer', 'unified', 'typescript', ], -}; - -export default defineConfig({ - ...sharedConfig, dts: true, target: 'es6', format: 'esm', diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md index 54e3189b6..6dcbdcbba 100644 --- a/packages/create-app/CHANGELOG.md +++ b/packages/create-app/CHANGELOG.md @@ -1,5 +1,7 @@ # create-next-docs-app +## 8.3.0 + ## 8.2.0 ## 8.1.1 diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 6a542c879..c3e4c977e 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "create-fumadocs-app", - "version": "8.2.0", + "version": "8.3.0", "description": "Create a new documentation site with Fumadocs", "keywords": [ "NextJs", diff --git a/packages/mdx/CHANGELOG.md b/packages/mdx/CHANGELOG.md index f17742a3e..b6d3ff949 100644 --- a/packages/mdx/CHANGELOG.md +++ b/packages/mdx/CHANGELOG.md @@ -1,5 +1,11 @@ # next-docs-mdx +## 8.0.4 + +### Patch Changes + +- fumadocs-core@8.3.0 + ## 8.0.3 ### Patch Changes diff --git a/packages/mdx/package.json b/packages/mdx/package.json index 55aaf8a19..a83d02f1d 100644 --- a/packages/mdx/package.json +++ b/packages/mdx/package.json @@ -1,6 +1,6 @@ { "name": "fumadocs-mdx", - "version": "8.0.3", + "version": "8.0.4", "description": "The built-in source for Fumadocs", "keywords": [ "NextJs", diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json index 595c8f17b..5012ce39d 100644 --- a/packages/twoslash/package.json +++ b/packages/twoslash/package.json @@ -25,11 +25,11 @@ "types:check": "tsc --noEmit" }, "dependencies": { - "@shikijs/twoslash": "v1.1.1", + "@shikijs/twoslash": "1.1.3", "mdast-util-from-markdown": "^2.0.0", "mdast-util-gfm": "^3.0.0", "mdast-util-to-hast": "^13.1.0", - "shiki": "v1.1.1" + "shiki": "1.1.3" }, "devDependencies": { "@types/hast": "^3.0.4", diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 9a405d738..1c4df2b87 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,20 @@ # next-docs-ui +## 8.3.0 + +### Minor Changes + +- b0003d44: Add `purple` theme +- 9bdb49dd: Add `Folder` export to `fumadocs-ui/components/files` +- 99d66d2d: Rename `title` prop to `name` in `File` and `Folder` component + +### Patch Changes + +- 5e314eee: Deprecate `input` color and `medium` font size from Tailwind CSS preset +- 52d578d0: Set `darkMode` to `class` by default +- 84667d2f: Improve Accordions + - fumadocs-core@8.3.0 + ## 8.2.0 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index b4ce5c762..a658f6cb2 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "fumadocs-ui", - "version": "8.2.0", + "version": "8.3.0", "description": "The framework for building a documentation website in Next.js", "keywords": [ "NextJs", diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx index dda5a7077..b7ee5fc13 100644 --- a/packages/ui/src/components/accordion.tsx +++ b/packages/ui/src/components/accordion.tsx @@ -17,7 +17,11 @@ import { cn } from '@/utils/cn'; import { useCopyButton } from '@/utils/use-copy-button'; import { buttonVariants } from '@/theme/variants'; -const variants = cva('divide-y divide-border'); +const variants = cva( + 'divide-y divide-border overflow-hidden rounded-lg border bg-card', +); + +// todo: Use `single` unless especially use `MultipleAccordions` export const Accordions = forwardRef< HTMLDivElement, @@ -97,26 +101,27 @@ export const Accordion = forwardRef< Omit, 'value'> & { title: string; } ->(({ title, className, children, ...props }, ref) => { +>(({ title, className, id, children, ...props }, ref) => { return ( - - - - - {title} - + + + + {title} - {props.id ? : null} + {id ? : null} -
{children}
+
{children}
 ); @@ -137,8 +142,7 @@ function CopyButton({ id }: { id: string }): JSX.Element { className={cn( buttonVariants({ color: 'ghost', - className: - 'opacity-0 transition-all group-data-[state=open]/accordion:opacity-100', + className: 'absolute top-4 right-4 text-muted-foreground', }), )} onClick={onClick} diff --git a/packages/ui/src/components/files.tsx b/packages/ui/src/components/files.tsx index 55ca232aa..28645f955 100644 --- a/packages/ui/src/components/files.tsx +++ b/packages/ui/src/components/files.tsx @@ -2,7 +2,7 @@ import { cva } from 'class-variance-authority'; import { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react'; -import type { HTMLAttributes, ReactNode } from 'react'; +import { useState, type HTMLAttributes, type ReactNode } from 'react'; import { cn } from '@/utils/cn'; import { Collapsible, @@ -28,9 +28,13 @@ export function Files({ ); } -interface FileProps { - title: string; +export interface FileProps extends HTMLAttributes { + name: string; icon?: ReactNode; +} + +export interface FolderProps extends HTMLAttributes { + name: string; /** * Open folder by default @@ -38,37 +42,40 @@ interface FileProps { * @defaultValue false */ defaultOpen?: boolean; - - /** - * hildren files of the folder, considered as file if empty - */ - children?: ReactNode; } -export function File({ - title, - icon, - defaultOpen, - children, -}: FileProps): JSX.Element { - if (!children) { - return ( -

- {icon ?? } - {title} -

- ); +export function File(props: FileProps): JSX.Element { + // todo: remove in next major + if ('children' in props) { + return ; } + const { name, icon = , className, ...rest } = props; + return ( +
+ {icon} + {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- remove in next major */} + {name ?? props.title} +
+ ); +} + +export function Folder({ + name, + defaultOpen = false, + ...props +}: FolderProps): JSX.Element { + const [open, setOpen] = useState(defaultOpen); + return ( - - - - - {title} + + + {open ? : } + {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- remove in next major */} + {name ?? props.title} -
{children}
+
{props.children}
 ); diff --git a/packages/ui/src/components/inline-toc.tsx b/packages/ui/src/components/inline-toc.tsx index 5019ac369..cce7f501e 100644 --- a/packages/ui/src/components/inline-toc.tsx +++ b/packages/ui/src/components/inline-toc.tsx @@ -23,13 +23,13 @@ export function InlineTOC({ return ( {children ?? (