Installation
yarn add guild-docs @theguild/components
yarn add -D @theguild/tailwind-config
1. Add dependencies
{
"dependencies": {
+ "@theguild/components": "3.0.0",
+ "guild-docs": "4.0.0",
"next": "12.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
+ "@theguild/tailwind-config": "0.0.2"
}
}
2. Add Tailwind CSS config
module.exports = require('@theguild/tailwind-config')
3. Add PostCSS config
module.exports = require('@theguild/tailwind-config/postcss.config')
4. Add theme config
import { DocsThemeConfig } from '@theguild/components'
const config: DocsThemeConfig = {
// Your theme
}
export default config
5. Use withGuildDocs
in your Next.js config
import { withGuildDocs } from 'guild-docs/next.config'
export default withGuildDocs({
// Your next config options, for example:
eslint: {
ignoreDuringBuilds: true
}
})
6. Import styles in _app.tsx
import { ReactElement } from 'react'
import { AppProps } from 'next/app'
import { Header, FooterExtended, ThemeProvider } from '@theguild/components'
import 'guild-docs/style.css'
export default function App({ Component, pageProps }: AppProps): ReactElement {
return (
<ThemeProvider>
<Header accentColor="#1cc8ee" themeSwitch searchBarProps={{ version: 'v2' }} />
<Component {...pageProps} />
<FooterExtended />
</ThemeProvider>
)
}
Last updated on August 23, 2022