add separate faq section
This commit is contained in:
Timothy Lin
@@ -251,18 +251,7 @@ See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-j
|
||||
|
||||
1. Add `output: 'export'` in `next.config.js`. See [static exports documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration) for more information.
|
||||
2. Comment out `headers()` from `next.config.js`.
|
||||
3. Change `components/Image.tsx` to use a standard `<img>` tag instead of `next/image`:
|
||||
|
||||
```ts
|
||||
/* eslint-disable jsx-a11y/alt-text */
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import NextImage, { ImageProps } from 'next/image'
|
||||
|
||||
// @ts-ignore
|
||||
const Image = ({ ...rest }: ImageProps) => <img {...rest} />
|
||||
|
||||
export default Image
|
||||
```
|
||||
3. Add `unoptimized: true` to the `images` key in `next.config.js`:
|
||||
|
||||
Alternatively, to continue using `next/image`, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See [image optimization documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#image-optimization) for more details.
|
||||
|
||||
@@ -270,127 +259,13 @@ See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-j
|
||||
5. Run `yarn build`. The generated static content is in the `out` folder.
|
||||
6. Deploy the `out` folder to your hosting service of choice or run `npx serve out` to view the website locally.
|
||||
|
||||
__Note__: Deploying on Github pages require addition modifications to the base path. Please refer to the FAQ for more information.
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
### How can I add a custom MDX component?
|
||||
|
||||
Here's an example on how to create a donut chart from Chart.js (assuming you already have the dependencies installed) and use it in MDX posts. First, create a new `DonutChart.tsx` component in `components`:
|
||||
|
||||
```tsx
|
||||
'use client'
|
||||
|
||||
import { Doughnut } from 'react-chartjs-2'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const DonutChart = ({ data }) => {
|
||||
return <Doughnut data={data} />
|
||||
}
|
||||
|
||||
export default Doughnut
|
||||
```
|
||||
|
||||
Since the underlying `Doughnut` component uses React hooks, we add the `'use client'` directive to specify that it is a client side component. Also, there is an existing issue which prevents named components from being used, so we need to export the component as the default export.
|
||||
|
||||
Next, add the component to `MDXComponents.tsx`:
|
||||
|
||||
```diff
|
||||
...
|
||||
+ import DonutChart from './DonutChart'
|
||||
|
||||
export const components: MDXComponents = {
|
||||
Image,
|
||||
TOCInline,
|
||||
a: CustomLink,
|
||||
pre: Pre,
|
||||
+ DonutChart,
|
||||
BlogNewsletterForm,
|
||||
}
|
||||
```
|
||||
|
||||
You can now use the component in `.mdx` files:
|
||||
|
||||
```mdx
|
||||
## Example Donut Chart
|
||||
|
||||
export const data = {
|
||||
labels: ['Red', 'Blue', 'Yellow'],
|
||||
datasets: [
|
||||
{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
],
|
||||
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
<DonutChart data={data} />
|
||||
```
|
||||
|
||||
### How can I customize the `kbar` search?
|
||||
|
||||
Add a `SearchProvider` component such as the one shown below and use it in place of the default `SearchProvider` component in `app/layout.tsx`.
|
||||
|
||||
`defaultActions` are the initial list of actions.
|
||||
|
||||
`onSearchDocumentsLoad` is a callback function that is called when the documents specified by `searchDocumentsPath` are loaded. Set `searchDocumentsPath` to `false` to disable the dynamically loaded search feature.
|
||||
|
||||
```tsx
|
||||
'use client'
|
||||
|
||||
import { KBarSearchProvider } from 'pliny/search/KBar'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { CoreContent } from 'pliny/utils/contentlayer'
|
||||
import { Blog } from 'contentlayer/generated'
|
||||
|
||||
export const SearchProvider = ({ children }) => {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<KBarSearchProvider
|
||||
kbarConfig={{
|
||||
searchDocumentsPath: 'search.json',
|
||||
defaultActions: [
|
||||
{
|
||||
id: 'homepage',
|
||||
name: 'Homepage',
|
||||
keywords: '',
|
||||
shortcut: ['h', 'h'],
|
||||
section: 'Home',
|
||||
perform: () => router.push('/'),
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
name: 'Projects',
|
||||
keywords: '',
|
||||
shortcut: ['p'],
|
||||
section: 'Home',
|
||||
perform: () => router.push('/projects'),
|
||||
},
|
||||
],
|
||||
onSearchDocumentsLoad(json) {
|
||||
return json.map((post: CoreContent<Blog>) => ({
|
||||
id: post.path,
|
||||
name: post.title,
|
||||
keywords: post?.summary || '',
|
||||
section: 'Blog',
|
||||
subtitle: post.tags.join(', '),
|
||||
perform: () => router.push(post.path),
|
||||
}))
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</KBarSearchProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
[How can I add a custom MDX component?](/faq/custom-mdx-component.md)
|
||||
[How can I customize the `kbar` search?](/faq/customize-kbar-search.md)
|
||||
[How do I deploy on Github pages](/faq/github-pages-deployment.md)
|
||||
|
||||
## Support
|
||||
|
||||
|
||||
Reference in New Issue
Block a user