import Page from 'shared/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import mdxMeta from 'site/prebuild/mdx.en.js' import mdxLoader from 'shared/mdx/loader' import MdxWrapper from 'shared/components/wrappers/mdx' import Head from 'next/head' import HelpUs from 'site/components/help-us.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 ( <Page app={app} {...props.page}> <Head> <meta property="og:title" content={props.page.title} key="title" /> <meta property="og:type" content="article" key='type' /> <meta property="og:description" content={props.intro} key='type' /> <meta property="og:article:author" content='Joost De Cock' key='author' /> <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' /> <meta property="og:locale" content="en_US" key='locale' /> <meta property="og:site_name" content="freesewing.dev" key='site' /> </Head> <MdxWrapper mdx={props.mdx} app={app}/> <HelpUs mdx slug={`/${props.page.slug}`} /> </Page> ) } /* * 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 } = await mdxLoader('en', 'dev', params.mdxslug.join('/')) return { props: { mdx, intro: intro.join(' '), page: { slug: params.mdxslug.join('/'), path: '/' + params.mdxslug.join('/'), slugArray: params.mdxslug, ...mdxMeta[params.mdxslug.join('/')], }, params } } } /* * 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 } }