// 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'
import { useNavigation } from 'site/hooks/use-navigation.mjs'
// 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'
import { MdxMetaData } from 'shared/components/mdx/meta.mjs'
import { PrevNext } from 'shared/components/prev-next.mjs'
import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
import {
BaseLayout,
BaseLayoutLeft,
BaseLayoutProse,
BaseLayoutRight,
} from 'shared/components/base-layout.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()
/*
* Get the siteNav object from the useNavigation hook
* FIXME: ignorecontrol is not yet implmented here
*/
const { siteNav } = useNavigation({ ignoreControl: true })
/* 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
{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,
}
}