ad87a6c7fd
Did some digging into why the page size had ballooned, and it turns out it was due to viz.js taking up half the bundle size. So I've dropped the Dot custom mdx component, and reverted to having all pages served from one page using getStaticPaths. Might optimize a bit more later, but for now page size first load JS went from 816KB to 272KB so that's a big improvement.
111 lines
3.8 KiB
JavaScript
111 lines
3.8 KiB
JavaScript
import Page from 'site/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 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 jargon from 'site/jargon.mjs'
|
|
|
|
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>
|
|
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end px-8 xl:px-0">
|
|
{props.toc && (
|
|
<div className="mb-8 px-0 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
|
|
<TocWrapper toc={props.toc} app={app}/>
|
|
</div>
|
|
)}
|
|
<div className="px-0 xl:pl-8 2xl:pl-16">
|
|
<MdxWrapper mdx={props.mdx} app={app} />
|
|
<HelpUs mdx slug={`/${props.page.slug}`} />
|
|
</div>
|
|
</div>
|
|
</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, locale }) {
|
|
|
|
const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'), jargon)
|
|
|
|
return {
|
|
props: {
|
|
mdx,
|
|
toc,
|
|
intro: intro.join(' '),
|
|
page: {
|
|
slug: params.mdxslug.join('/'),
|
|
path: '/' + params.mdxslug.join('/'),
|
|
slugArray: params.mdxslug,
|
|
...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
|
|
}
|
|
}
|
|
|