From a7be257e0f69aa94da5c9bd03694b87eb5602355 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Mon, 9 Oct 2023 12:29:03 +0200 Subject: [PATCH] feat(dev): Ported to new mdx loader --- sites/dev/components/design-examples.mjs | 1 + sites/dev/pages/[...slug].mjs | 115 ++++++++++------------- 2 files changed, 52 insertions(+), 64 deletions(-) create mode 100644 sites/dev/components/design-examples.mjs diff --git a/sites/dev/components/design-examples.mjs b/sites/dev/components/design-examples.mjs new file mode 100644 index 00000000000..b1c6ea436a5 --- /dev/null +++ b/sites/dev/components/design-examples.mjs @@ -0,0 +1 @@ +export default {} diff --git a/sites/dev/pages/[...slug].mjs b/sites/dev/pages/[...slug].mjs index 71c5a33a22b..e22b9916a61 100644 --- a/sites/dev/pages/[...slug].mjs +++ b/sites/dev/pages/[...slug].mjs @@ -2,13 +2,11 @@ import { pages } from 'site/prebuild/docs.en.mjs' // Dependencies import { serverSideTranslations } from 'next-i18next/serverSideTranslations' -// Hooks -import { useState, useEffect } from 'react' +import { loadMdxAsStaticProps } from 'shared/mdx/load.mjs' // 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 { components } from 'shared/components/mdx/index.mjs' import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs' import { Toc } from 'shared/components/mdx/toc.mjs' import { MdxMetaData } from 'shared/components/mdx/meta.mjs' @@ -27,68 +25,51 @@ import { * * See the page-templates folder for more info. */ -const DocsPage = ({ page, slug }) => { - const [frontmatter, setFrontmatter] = useState({ title: 'FreeSewing.dev' }) - const [MDX, setMDX] = useState() - - /* Load MDX dynamically */ - useEffect(() => { - const loadMDX = async () => { - import(`../../../markdown/dev/${slug}/en.md`).then((mod) => { - setFrontmatter(mod.frontmatter) - const Component = mod.default - setMDX() - }) - } - loadMDX() - }, [slug]) - - return ( - - - - - - - - - - - - - - {frontmatter.title} - FreeSewing.dev - - - - - - - -
- -

{frontmatter.title}

-
- -
-
- {MDX} - - - - -
+const DocsPage = ({ page, slug, frontmatter, mdx, mdxSlug }) => ( + + + + + + + + + + + + + + {frontmatter.title} + + + + + + + +
+ +

{frontmatter.title}

+
- - - - ) -} +
+ + + + + +
+ +
+ + + +) export default DocsPage @@ -100,7 +81,13 @@ export async function getStaticProps({ params }) { return { props: { ...(await serverSideTranslations('en', ['docs', 'tutorial', ...ns])), + ...(await loadMdxAsStaticProps({ + language: 'en', + site: 'dev', + slug: params.slug.join('/'), + })), slug: params.slug.join('/'), + mdxSlug: params.slug, page: { locale: 'en', path: params.slug,