switched to mdx

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

View file

@ -6,7 +6,7 @@ import Container from "../components/Container";
import Layout from "../components/Layout";
import Sidemenu from "../components/Sidemenu";
import Card from "../components/Card";
import { gardensFilePath, GARDENS_PATH } from "../utils/mdUtils";
import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
import { motion } from "framer-motion";
export default function Index({ posts }) {
@ -65,7 +65,7 @@ export default function Index({ posts }) {
}
export function getStaticProps() {
const posts = gardensFilePath.map((filePath) => {
const posts = gardenFilePath.map((filePath) => {
const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
const { content, data } = matter(source);

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 } }));