e2bf337bb2
Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
// Dependencies
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
// Hooks
|
|
import { useState, useEffect } from 'react'
|
|
// Components
|
|
import { ns } from 'shared/components/wrappers/page.mjs'
|
|
import { components } from 'shared/components/mdx/index.mjs'
|
|
import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
|
|
//import { TocWrapper } from 'shared/components/wrappers/toc.mjs'
|
|
import { Loading, HeadInfo, Page } from './[...slug].mjs'
|
|
|
|
const DocsHomePage = ({ page, slug, locale }) => {
|
|
// State
|
|
const [frontmatter, setFrontmatter] = useState({ title: 'FreeSewing.org' })
|
|
const [MDX, setMDX] = useState(<Loading />)
|
|
|
|
/* Load MDX dynamically */
|
|
useEffect(() => {
|
|
const loadMDX = async () => {
|
|
import(`../../../../markdown/org/docs/${locale}.md`).then((mod) => {
|
|
setFrontmatter(mod.frontmatter)
|
|
const Component = mod.default
|
|
setMDX(<Component components={components} />)
|
|
})
|
|
}
|
|
loadMDX()
|
|
}, [slug])
|
|
|
|
return <Page {...{ page, slug, frontmatter, MDX, locale }} />
|
|
}
|
|
|
|
export default DocsHomePage
|
|
|
|
/*
|
|
* getStaticProps() is used to fetch data at build-time.
|
|
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
|
*/
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations('en', ['docs', ...ns])),
|
|
slug: 'docs',
|
|
locale,
|
|
page: {
|
|
locale,
|
|
path: ['docs'],
|
|
},
|
|
},
|
|
}
|
|
}
|