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

133 lines
4.5 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
feat(sites): Overhauled prebuild system
2023-07-19 19:08:41 +02:00
import { pages } from 'site/prebuild/docs.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'
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
import { useNavigation } from 'site/hooks/use-navigation.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
// 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'
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
chore(dev): Use shared layout components for pages
2023-07-15 17:10:28 +02:00
import {
BaseLayout,
BaseLayoutLeft,
BaseLayoutProse,
BaseLayoutRight,
} from 'shared/components/base-layout.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 />)
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
/*
* Get the siteNav object from the useNavigation hook
* FIXME: ignorecontrol is not yet implmented here
*/
const { siteNav } = useNavigation({ ignoreControl: true })
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
/* 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>
chore(dev): Use shared layout components for pages
2023-07-15 17:10:28 +02:00
<BaseLayout>
<BaseLayoutLeft>
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
<MainSections {...{ siteNav, slug }} />
<NavLinks {...{ siteNav, slug }} />
chore(dev): Use shared layout components for pages
2023-07-15 17:10:28 +02:00
</BaseLayoutLeft>
<BaseLayoutProse>
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
<div className="w-full">
<Breadcrumbs {...{ siteNav, slug }} />
<h1 className="break-words searchme">{frontmatter.title}</h1>
<div className="block xl:hidden">
<Toc toc={frontmatter.toc} wrap />
</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>
feat(dev/shared): Ported PrevNext component to new nav structure
2023-07-14 09:23:37 +02:00
<MdxWrapper>{MDX}</MdxWrapper>
<PrevNext slug={slug} />
chore(dev): Use shared layout components for pages
2023-07-15 17:10:28 +02:00
</BaseLayoutProse>
<BaseLayoutRight>
chore(dev): Updated docs page layout
2023-07-15 10:38:10 +02:00
<MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
<div className="hidden xl:block">
<Toc toc={frontmatter.toc} wrap />
</div>
chore(dev): Use shared layout components for pages
2023-07-15 17:10:28 +02:00
</BaseLayoutRight>
</BaseLayout>
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
</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 {
feat(sites): Overhauled prebuild system
2023-07-19 19:08:41 +02:00
paths: Object.keys(pages).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