fabian/digital-gardeners
1
0
Fork 0
mirror of https://github.com/MaggieAppleton/digital-gardeners.git synced 2025-12-14 09:08:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

switched to mdx

Browse source
This commit is contained in:
Maggie Appleton 2021-09-05 16:09:03 +01:00
parent 1d7be78e38
commit 67b393a1f0
12 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
pages/posts/[slug].js
View file

@ -5,18 +5,21 @@ import { serialize } from "next-mdx-remote/serialize";
import dynamic from "next/dynamic";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import path from "path";
import Layout from "../../components/Layout";
import { gardensFilePath, GARDENS_PATH } from "../../utils/mdUtils";
import { gardenFilePath, GARDENS_PATH } from "../../utils/mdxUtils";
// Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
// to handle import statements. Instead, you must include components in scope
// here.
const components = {
img: (props) => <Image {...props} layout="fill" loading="lazy" />,
// It also works with dynamically-imported components, which is especially
// useful for conditionally loading components for certain routes.
// See the notes in README.md for more details.
// TestComponent: dynamic(() => import("../../components/TestComponent")),
Head,
};
@ -42,7 +45,7 @@ export default function GardenPage({ source, frontMatter }) {
}
export const getStaticProps = async ({ params }) => {
const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.md`);
const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.mdx`);
const source = fs.readFileSync(gardenFilePath);
const { content, data } = matter(source);
@ -65,9 +68,9 @@ export const getStaticProps = async ({ params }) => {
};
export const getStaticPaths = async () => {
const paths = gardensFilePath
const paths = gardenFilePath
// Remove file extensions for page paths
.map((path) => path.replace(/\.md?$/, ""))
.map((path) => path.replace(/\.mdx?$/, ""))
// Map the path into the static paths object required by Next.js
.map((slug) => ({ params: { slug } }));