2023-01-29 16:44:02 +01:00
|
|
|
// Dependencies
|
2022-01-02 17:16:15 +01:00
|
|
|
import Head from 'next/head'
|
2022-05-28 17:52:51 +02:00
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
2023-01-29 16:44:02 +01:00
|
|
|
import { mdxLoader } from 'shared/mdx/loader.mjs'
|
2022-12-24 22:57:43 +01:00
|
|
|
import { jargon } from 'site/jargon.mjs'
|
2023-01-29 16:44:02 +01:00
|
|
|
import { mdxPaths } from 'site/prebuild/mdx.paths.mjs'
|
2023-03-26 16:50:46 +02:00
|
|
|
import mdxMeta from 'site/prebuild/mdx.js'
|
2023-01-29 16:44:02 +01:00
|
|
|
// Components
|
|
|
|
|
import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
|
|
|
|
|
import { TocWrapper } from 'shared/components/wrappers/toc.mjs'
|
2023-03-26 16:50:46 +02:00
|
|
|
import { PageWrapper } from 'shared/components/wrappers/page.mjs'
|
2023-01-29 16:44:02 +01:00
|
|
|
import { components } from 'site/components/mdx/index.mjs'
|
2022-01-02 17:16:15 +01:00
|
|
|
|
2023-04-28 21:23:06 +02:00
|
|
|
/*
|
|
|
|
|
* Each page MUST be wrapped in the PageWrapper component.
|
|
|
|
|
* You also MUST spread props.page into this wrapper component
|
|
|
|
|
* when path and locale come from static props (as here)
|
|
|
|
|
* or set them manually.
|
|
|
|
|
*/
|
|
|
|
|
const MdxPage = ({ page, mdx, toc, intro }) => (
|
|
|
|
|
<PageWrapper {...page}>
|
|
|
|
|
<Head>
|
|
|
|
|
<meta property="og:title" content={page.t} key="title" />
|
|
|
|
|
<meta property="og:type" content="article" key="type" />
|
|
|
|
|
<meta property="og:description" content={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/${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/${page.slug}`} key="url" />
|
|
|
|
|
<meta property="og:locale" content="en_US" key="locale" />
|
|
|
|
|
<meta property="og:site_name" content="freesewing.dev" key="site" />
|
|
|
|
|
<title>{typeof page.t === 'string' ? page.t : ''} - FreeSewing.org</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
|
|
|
|
|
{toc && (
|
|
|
|
|
<div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
|
|
|
|
|
<TocWrapper toc={toc} />
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
<div className="max-w-prose">
|
|
|
|
|
<MdxWrapper mdx={mdx} components={components} />
|
2022-05-28 17:52:51 +02:00
|
|
|
</div>
|
2023-04-28 21:23:06 +02:00
|
|
|
</div>
|
|
|
|
|
</PageWrapper>
|
|
|
|
|
)
|
2022-01-02 17:16:15 +01:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* 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
|
|
|
|
|
*/
|
2022-05-28 17:52:51 +02:00
|
|
|
export async function getStaticProps({ params, locale }) {
|
2023-03-26 16:50:46 +02:00
|
|
|
const path = ['docs', ...params.mdxslug]
|
2023-04-16 17:13:18 +02:00
|
|
|
const { mdx, intro, toc } = await mdxLoader(
|
2022-06-10 12:25:56 +02:00
|
|
|
locale,
|
|
|
|
|
'org',
|
2022-12-24 22:57:43 +01:00
|
|
|
['docs', ...params.mdxslug].join('/'),
|
|
|
|
|
jargon[locale]
|
2022-06-10 12:25:56 +02:00
|
|
|
)
|
2022-01-02 17:16:15 +01:00
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
mdx,
|
2022-05-28 17:52:51 +02:00
|
|
|
toc,
|
2022-01-02 17:16:15 +01:00
|
|
|
intro: intro.join(' '),
|
|
|
|
|
page: {
|
2023-03-26 16:50:46 +02:00
|
|
|
path, // path to page as array
|
2023-04-28 21:23:06 +02:00
|
|
|
locale,
|
2023-03-26 16:50:46 +02:00
|
|
|
...mdxMeta[locale][path.join('/')],
|
2022-01-02 17:16:15 +01:00
|
|
|
},
|
2022-05-28 17:52:51 +02:00
|
|
|
params,
|
2022-05-29 13:19:02 +02:00
|
|
|
...(await serverSideTranslations(locale)),
|
2022-12-24 22:57:43 +01:00
|
|
|
},
|
2022-01-02 17:16:15 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* 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() {
|
2022-06-10 12:25:56 +02:00
|
|
|
const somePaths = mdxPaths
|
2022-12-24 22:57:43 +01:00
|
|
|
.filter((path) => path.split('/').length < 5)
|
|
|
|
|
.filter((path) => path !== 'docs')
|
2022-06-06 18:30:19 +02:00
|
|
|
|
2022-01-02 17:16:15 +01:00
|
|
|
return {
|
2022-05-29 13:19:02 +02:00
|
|
|
paths: [
|
2022-12-24 22:57:43 +01:00
|
|
|
...somePaths.map((key) => `/${key}`),
|
|
|
|
|
...somePaths.map((key) => `/es/${key}`),
|
|
|
|
|
...somePaths.map((key) => `/de/${key}`),
|
|
|
|
|
...somePaths.map((key) => `/fr/${key}`),
|
|
|
|
|
...somePaths.map((key) => `/nl/${key}`),
|
2022-05-29 13:19:02 +02:00
|
|
|
],
|
2022-12-24 22:57:43 +01:00
|
|
|
fallback: 'blocking',
|
2022-01-02 17:16:15 +01:00
|
|
|
}
|
|
|
|
|
}
|
