// Used in static paths import { mdxPaths } from 'site/prebuild/mdx-paths.en.mjs' // 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 { Toc } from 'shared/components/mdx/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() /* Load MDX dynamically */ useEffect(() => { const loadMDX = async () => { import(`../../../markdown/dev/${slug}/en.md`).then((mod) => { setFrontmatter(mod.frontmatter) const Component = mod.default setMDX() }) } loadMDX() }, [slug]) return ( {frontmatter.title} - FreeSewing.dev
{frontmatter.toc && frontmatter.toc.length > 0 && (
)} {MDX}
) } 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. * * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching */ export async function getStaticPaths() { return { paths: mdxPaths.map((slug) => '/' + slug), fallback: false, } }