// 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()
/* 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
{false && frontmatter.toc && (
{/* FIXME: Implement toc plugin to add it to the frontmatter */}
{/* */}
)}
{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.
* 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,
}
}