// Hooks import { useApp } from 'shared/hooks/use-app.mjs' // Dependencies import mdxMeta from 'site/prebuild/mdx.en.js' import { mdxLoader } from 'shared/mdx/loader.mjs' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' // Components import Head from 'next/head' import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs' import { TocWrapper } from 'shared/components/wrappers/toc.mjs' import { HelpUs } from 'site/components/help-us.mjs' import { jargon } from 'site/jargon.mjs' const MdxPage = (props) => { // This hook is used for shared code and global state const app = useApp(props) /* * Each page should be wrapped in the Page wrapper component * You MUST pass it the result of useApp() as the `app` prop * and for MDX pages you can spread the props.page props to it * to automatically set the title and navigation * * Like breadcrumbs and updating the primary navigation with * active state */ return (
{props.toc && (
)}
) } /* * Default export is the NextJS page object */ export default MdxPage /* * getStaticProps() is used to fetch data at build-time. * * On this page, it is loading the mdx (markdown) content * from the markdown file on disk. * * This, in combination with getStaticPaths() below means this * page will be used to render/generate all markdown/mdx content. * * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching */ export async function getStaticProps({ params }) { const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'), jargon) return { props: { mdx, toc, intro: intro.join(' '), page: { saa: params.mdxslug, // slug as array (saa) ...mdxMeta[params.mdxslug.join('/')], }, params, ...(await serverSideTranslations('en')), }, } } /* * 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, } }