forked from fuma-nama/fumadocs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs: Improve quick start experience
- Loading branch information
Showing
6 changed files
with
213 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| 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', | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| --- | ||
| title: Manual Installation | ||
| description: Create a new fumadocs project from sketch. | ||
| icon: Rocket | ||
| --- | ||
|
|
||
| ## Getting Started | ||
|
|
||
| Create a new Next.js application with `create-next-app`, and install required packages. | ||
|
|
||
| ```package-install | ||
| fumadocs-ui fumadocs-core | ||
| ``` | ||
|
|
||
| ### Configuration | ||
|
|
||
| You can choose a **content source** you prefer. | ||
|
|
||
| There is a list of supported sources: | ||
|
|
||
| - [Setup Fumadocs MDX](/docs/mdx) | ||
| - [Setup Contentlayer](/docs/headless/contentlayer) | ||
|
|
||
| You have to configure the library correctly following their setup guide before continuing. | ||
|
|
||
| ### Root Layout | ||
|
|
||
| Wrap the entire application inside [Root Provider](/docs/ui/blocks/root-provider). | ||
|
|
||
| ```tsx | ||
| import { RootProvider } from 'fumadocs-ui/provider'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| export default function RootLayout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| <RootProvider>{children}</RootProvider> | ||
| </body> | ||
| </html> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### Styles | ||
|
|
||
| <Tabs items={['Vanilla', 'Tailwind CSS']}> | ||
| <Tab value='Vanilla'> | ||
|
|
||
| Import the pre-built stylesheet in the root layout. | ||
|
|
||
| ```ts title="layout.tsx" | ||
| import 'fumadocs-ui/style.css'; | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab value='Tailwind CSS'> | ||
|
|
||
| Use the official Tailwind CSS plugin. | ||
|
|
||
| ```json doc-gen:file | ||
| { | ||
| "file": "./content/docs/example/tailwind.config.js", | ||
| "codeblock": { | ||
| "meta": "title=\"tailwind.config.js\"" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| > It doesn't come with a default font, you may choose one from `next/font`. | ||
| ### Layout | ||
|
|
||
| Create a new catch-all route `/app/docs/[[..slugs]]` for our docs, and give it a proper layout. | ||
|
|
||
| ```tsx title="app/docs/layout.tsx" | ||
| import { DocsLayout } from 'fumadocs-ui/layout'; | ||
| import { pageTree } from '@/app/source'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| export default function RootDocsLayout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <DocsLayout tree={pageTree} nav={{ title: 'My App' }}> | ||
| {children} | ||
| </DocsLayout> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| > `pageTree` refers to Page Tree, it should be provided by your content source. | ||
| ### Page | ||
|
|
||
| For the `page.tsx`, it may vary depending on your source. You should configure static rendering with `generateStaticParams` and metadata with `generateMetadata`. | ||
|
|
||
| Wrap your content in the [Page](/docs/ui/blocks/page) component. | ||
|
|
||
| <Tabs id='content-source' items={['Fumadocs MDX', 'Contentlayer']}> | ||
| <Tab value='Fumadocs MDX'> | ||
|
|
||
| ```json doc-gen:file | ||
| { | ||
| "file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx", | ||
| "codeblock": { | ||
| "meta": "title=\"app/docs/[[...slug]]/page.tsx\"" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab value='Contentlayer'> | ||
|
|
||
| ```json doc-gen:file | ||
| { | ||
| "file": "../../examples/contentlayer/app/docs/[[...slug]]/page.tsx", | ||
| "codeblock": { | ||
| "meta": "title=\"app/docs/[[...slug]]/page.tsx\"" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ### Search | ||
|
|
||
| Use the default document search based on Flexsearch. | ||
|
|
||
| <Tabs id='content-source' items={['Fumadocs MDX', 'Contentlayer']}> | ||
| <Tab value='Fumadocs MDX'> | ||
|
|
||
| ```json doc-gen:file | ||
| { | ||
| "file": "../../examples/next-mdx/app/api/search/route.ts", | ||
| "codeblock": { | ||
| "meta": "title=\"app/api/search/route.ts\"" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab value='Contentlayer'> | ||
|
|
||
| ```json doc-gen:file | ||
| { | ||
| "file": "../../examples/contentlayer/app/api/search/route.ts", | ||
| "codeblock": { | ||
| "meta": "title=\"app/api/search/route.ts\"" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| Learn more about [Document Search](/docs/headless/search). | ||
|
|
||
| ### Done | ||
|
|
||
| You can start the dev server and start writing content. |
Oops, something went wrong.