import Page from 'site/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import mdxLoader from 'shared/mdx/loader' import MdxWrapper from 'shared/components/wrappers/mdx' import TocWrapper from 'shared/components/wrappers/toc' import Head from 'next/head' import HelpUs from 'site/components/help-us.js' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import components from 'site/components/mdx/index.js' // MDX paths import mdxPaths from 'site/prebuild/mdx.paths.js' const MdxPage = props => { // This hook is used for shared code and global state const app = useApp() /* * 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, locale }) { const { mdx, intro, toc, frontmatter } = await mdxLoader(locale, 'org', params.mdxslug.join('/')) const { title='FIXME: Please give this page a title' } = frontmatter return { props: { mdx, toc, intro: intro.join(' '), page: { slug: params.mdxslug.join('/'), path: '/' + params.mdxslug.join('/'), slugArray: params.mdxslug, title, order: frontmatter.order ? frontmatter.order+title : title }, params, ...(await serverSideTranslations(locale)), } } } /* * 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() { const somePaths = mdxPaths.filter(path => (path.split('/').length < 5)) return { paths: [ ...somePaths.map(key => `/${key}`), ...somePaths.map(key => `/es/${key}`), ...somePaths.map(key => `/de/${key}`), ...somePaths.map(key => `/fr/${key}`), ...somePaths.map(key => `/nl/${key}`), ], fallback: 'blocking' } }