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

fixed next images, renamed posts to gardens

Browse source
This commit is contained in:
Maggie Appleton 2021-09-06 16:08:18 +01:00
parent 131130785e
commit d6cf6d10fc
21 changed files with 58 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

5
pages/[slug].js
View file

@ -2,6 +2,7 @@ import fs from "fs";
import matter from "gray-matter";
import { MDXRemote } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";
import imageSize from "rehype-img-size";
import dynamic from "next/dynamic";
import Head from "next/head";
import Link from "next/link";
@ -15,7 +16,7 @@ import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
// to handle import statements. Instead, you must include components in scope
// here.
const components = {
img: (props) => <Image {...props} layout="fill" loading="lazy" />,
img: (props) => <Image {...props} layout="responsive" 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.
@ -54,7 +55,7 @@ export const getStaticProps = async ({ params }) => {
// Optionally pass remark/rehype plugins
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [],
rehypePlugins: [[imageSize, { dir: "public" }]],
},
scope: data,
});

10
pages/index.js
View file

@ -9,7 +9,7 @@ import Card from "../components/Card";
import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
import { motion } from "framer-motion";
export default function Index({ posts }) {
export default function Index({ gardens }) {
return (
<Container>
<Sidemenu />
@ -55,8 +55,8 @@ export default function Index({ posts }) {
}}
className="flex flex-wrap mt-24"
>
{posts.map((post) => (
<Card post={post} />
{gardens.map((garden) => (
<Card garden={garden} />
))}
</motion.ul>
</Layout>
@ -65,7 +65,7 @@ export default function Index({ posts }) {
}
export function getStaticProps() {
const posts = gardenFilePath.map((filePath) => {
const gardens = gardenFilePath.map((filePath) => {
const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
const { content, data } = matter(source);
@ -76,5 +76,5 @@ export function getStaticProps() {
};
});
return { props: { posts } };
return { props: { gardens } };
}