VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(dev): Ported dev site to named exports

Browse source
This commit is contained in:
joostdecock 2023-01-29 17:36:15 +01:00
parent 595417a23b
commit db789180b6
22 changed files with 287 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

110
sites/dev/pages/[...mdxslug].js
View file

@ -1,110 +0,0 @@
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: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://freesewing.dev/og/${props.page.slug}/og.png`}
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="grid grid-cols-3 lg:gap-4">
{props.toc && (
<div className="mb-8 w-full col-span-3 row-start-1 col-start-1 xl:col-span-1 xl:col-start-3">
<TocWrapper toc={props.toc} app={app} />
</div>
)}
<div className="col-span-3 col-start-1 xl:col-span-2 xl:row-start-1 row-start-2 xl:pl-4">
<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 }) {
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,
}
}