a4f192e090
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.
105 lines
3.6 KiB
JavaScript
105 lines
3.6 KiB
JavaScript
// Used in static paths
|
|
import mdxMeta from 'site/prebuild/mdx.en.js'
|
|
// Dependencies
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
// Hooks
|
|
import { useState, useEffect } from 'react'
|
|
// Components
|
|
import Head from 'next/head'
|
|
import { PageWrapper, ns } from 'shared/components/wrappers/page.mjs'
|
|
import { Spinner } from 'shared/components/spinner.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'
|
|
|
|
/*
|
|
* This page is auto-generated by the prebuild script.
|
|
* Any changes you make will be overwritten on the next (pre)build.
|
|
*
|
|
* See the page-templates folder for more info.
|
|
*/
|
|
const DocsPage = ({ page, slug }) => {
|
|
const [frontmatter, setFrontmatter] = useState({ title: 'FreeSewing.dev' })
|
|
const [MDX, setMDX] = useState(<Spinner />)
|
|
|
|
/* Load MDX dynamically */
|
|
useEffect(() => {
|
|
const loadMDX = async () => {
|
|
import(`../../../markdown/dev/${slug}/en.md`).then((mod) => {
|
|
setFrontmatter(mod.frontmatter)
|
|
const Component = mod.default
|
|
setMDX(<Component components={components} />)
|
|
})
|
|
}
|
|
loadMDX()
|
|
}, [slug])
|
|
|
|
return (
|
|
<PageWrapper {...page} title={frontmatter.title}>
|
|
<Head>
|
|
<meta property="og:title" content={frontmatter.title} key="title" />
|
|
<meta property="og:type" content="article" key="type" />
|
|
<meta property="og:description" content={``} key="type" />
|
|
<meta property="og:article:author" content="Joost De Cock" key="author" />
|
|
<meta
|
|
property="og:image"
|
|
content={`https://canary.backend.freesewing.org/og-img/en/org/${slug}}`}
|
|
key="image"
|
|
/>
|
|
<meta property="og:image:type" content="image/png" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:url" content={`https://freesewing.dev/${slug}`} key="url" />
|
|
<meta property="og:locale" content="en" key="locale" />
|
|
<meta property="og:site_name" content="freesewing.dev" key="site" />
|
|
<title>{frontmatter.title} - FreeSewing.dev</title>
|
|
</Head>
|
|
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
|
|
{false && frontmatter.toc && (
|
|
<div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
|
|
{/* FIXME: Implement toc plugin to add it to the frontmatter */}
|
|
{/* <TocWrapper toc={frontmatter.toc} /> */}
|
|
</div>
|
|
)}
|
|
<MdxWrapper>{MDX}</MdxWrapper>
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
export default DocsPage
|
|
|
|
/*
|
|
* 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({ params }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations('en', ['docs', ...ns])),
|
|
slug: params.slug.join('/'),
|
|
page: {
|
|
locale: 'en',
|
|
path: params.slug,
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
/*
|
|
* getStaticPaths() is used to specify for which routes (think URLs)
|
|
* this page should be used to generate the result.
|
|
*
|
|
* On this page, it is returning a list of routes (think URLs) for all
|
|
* the mdx (markdown) content.
|
|
* That list comes from mdxMeta, which is build in the prebuild step
|
|
* and contains paths, titles, and intro for all markdown.
|
|
*
|
|
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
|
*/
|
|
export async function getStaticPaths() {
|
|
return {
|
|
paths: Object.keys(mdxMeta).map((slug) => '/' + slug),
|
|
fallback: false,
|
|
}
|
|
}
|