90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
import { pages as posts } from 'site/prebuild/showcase.mjs'
|
|
import { getPostSlugPaths } from 'site/components/mdx/posts/utils.mjs'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import { useDynamicMdx } from 'shared/hooks/use-dynamic-mdx.mjs'
|
|
import { useCallback } from 'react'
|
|
import { PostLayout, ns as layoutNs } from 'site/components/layouts/post.mjs'
|
|
import { PostArticle, ns as postNs } from 'site/components/mdx/posts/article.mjs'
|
|
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
|
|
|
const namespaces = [...layoutNs, ...postNs, ...pageNs]
|
|
|
|
/*
|
|
* 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 ShowcasePage = ({ locale, dir, page }) => {
|
|
// function to load the correct markdown
|
|
const loader = useCallback(
|
|
() => import(`orgmarkdown/showcase/${dir}/${locale}.md`),
|
|
[dir, locale]
|
|
)
|
|
|
|
const { frontmatter, MDX } = useDynamicMdx(loader)
|
|
|
|
return (
|
|
<PageWrapper
|
|
{...page}
|
|
locale={locale}
|
|
title={frontmatter.title}
|
|
layout={(props) => <PostLayout {...props} {...{ slug: page.path.join('/'), frontmatter }} />}
|
|
>
|
|
<PostArticle {...{ frontmatter, MDX }} imgId={`showcase-${dir}`} />
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* getStaticProps() is used to fetch data at build-time.
|
|
*
|
|
* On this page, it it passes the name of the bundle to be loaded on the client.
|
|
*
|
|
* This, in combination with getStaticPaths() below means this
|
|
* page will be used to render/generate all showcase content.
|
|
*
|
|
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
|
*/
|
|
export async function getStaticProps({ params, locale }) {
|
|
const { dir } = params
|
|
|
|
// if the dir isn't present in the prebuilt posts, return 404
|
|
if (!Object.keys(posts[locale]).includes(`showcase/${dir}`)) return { notFound: true }
|
|
|
|
return {
|
|
props: {
|
|
dir,
|
|
locale,
|
|
...(await serverSideTranslations(locale, namespaces)),
|
|
page: {
|
|
locale,
|
|
path: ['showcase', dir],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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 truncated list of routes (think URLs) for all
|
|
* the mdx showcase (markdown) content.
|
|
* That list comes from prebuild/showcase-paths.mjs, which is built in the prebuild step
|
|
* and contains paths, titles, imageUrls, and intro for all showcase posts.
|
|
*
|
|
* the fallback: 'blocking' property means that
|
|
* any pages that haven't been pre-generated
|
|
* will generate and cache the first time someone visits them
|
|
*
|
|
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
|
*/
|
|
export const getStaticPaths = async () => {
|
|
return {
|
|
paths: getPostSlugPaths(posts),
|
|
fallback: 'blocking',
|
|
}
|
|
}
|
|
|
|
export default ShowcasePage
|