VSinerva/freesewing
1
0
Fork 0
Code Activity
freesewing/sites/dev/pages/[...slug].mjs

109 lines
3.7 KiB
JavaScript
Raw Normal View History

fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
// Used in static paths
wip(sites): Prebuild tweaks
2023-05-20 16:56:51 +02:00
import { mdxPaths } from 'site/prebuild/mdx-paths.en.mjs'
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
// Hooks
import { useState, useEffect } from 'react'
// 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'
feat(shared): Re-implement MDX TOX. Closes #4129
2023-06-17 17:29:28 +02:00
import { Toc } from 'shared/components/mdx/toc.mjs'
chore: Tweaks to MDX metadata display
2023-07-13 21:15:25 +02:00
import { MdxMetaData } from 'shared/components/mdx/meta.mjs'
feat(dev/shared): Ported PrevNext component to new nav structure
2023-07-14 09:23:37 +02:00
import { PrevNext } from 'shared/components/prev-next.mjs'
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
/*
* 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(<Spinner />)
/* Load MDX dynamically */
useEffect(() => {
const loadMDX = async () => {
import(`../../../markdown/dev/${slug}/en.md`).then((mod) => {
setFrontmatter(mod.frontmatter)
const Component = mod.default
chore(dev): Changed to prebuild and ReadMore
2023-05-21 09:41:20 +02:00
setMDX(<Component components={components('dev')} />)
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
})
}
loadMDX()
}, [slug])
return (
<PageWrapper {...page} title={frontmatter.title}>
<Head>
<meta property="og:title" content={frontmatter.title} key="title" />
<meta property="og:type" content="article" key="type" />
<meta property="og:description" content={``} 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/org/${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/${slug}`} key="url" />
<meta property="og:locale" content="en" key="locale" />
<meta property="og:site_name" content="freesewing.dev" key="site" />
<title>{frontmatter.title} - FreeSewing.dev</title>
</Head>
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
feat(shared): Re-implement MDX TOX. Closes #4129
2023-06-17 17:29:28 +02:00
{frontmatter.toc && frontmatter.toc.length > 0 && (
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
<div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
chore: Tweaks to MDX metadata display
2023-07-13 21:15:25 +02:00
<MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
feat(shared): Re-implement MDX TOX. Closes #4129
2023-06-17 17:29:28 +02:00
<Toc toc={frontmatter.toc} wrap />
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
</div>
)}
feat(dev/shared): Ported PrevNext component to new nav structure
2023-07-14 09:23:37 +02:00
<div>
<MdxWrapper>{MDX}</MdxWrapper>
<PrevNext slug={slug} />
</div>
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
</div>
</PageWrapper>
)
}
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 {
wip(sites): Prebuild tweaks
2023-05-20 16:56:51 +02:00
paths: mdxPaths.map((slug) => '/' + slug),
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
fallback: false,
}
}
Copy permalink