fixed next images, renamed posts to gardens

components/Card.js

@@ -2,11 +2,11 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import Image from "next/image";
 
-export default function Card({ post }) {
+export default function Card({ garden }) {
     return (
         <motion.li
             className="w-60 mr-10 mb-14 space-y-2 opacity-80"
-            key={post.filePath}
+            key={garden.filePath}
             whileHover={{
                 scale: 1.02,
                 opacity: 1,
@@ -17,27 +17,27 @@ export default function Card({ post }) {
             }}
         >
             <Link
-                as={`${post.filePath.replace(/\.mdx?$/, "")}`}
+                as={`${garden.filePath.replace(/\.mdx?$/, "")}`}
                 href={`[slug]`}
             >
                 <a>
-                    {post.data.image && (
+                    {garden.data.image && (
                         <Image
                             className="rounded-md"
-                            src={post.data.image}
+                            src={garden.data.image}
                             width={250}
                             height={200}
-                            alt={post.data.title}
+                            alt={garden.data.title}
                         />
                     )}
                     <h3 className="text-coolGray-600 leading-tight mt-2">
-                        {post.data.title}
+                        {garden.data.title}
                     </h3>
                 </a>
             </Link>
             <motion.div>
-                {post.data.tools &&
-                    post.data.tools.map((tool) => <p>{tool}</p>)}
+                {garden.data.tools &&
+                    garden.data.tools.map((tool) => <p>{tool}</p>)}
             </motion.div>
             <svg className="h-4 w-4 text-coolGray-600" viewBox="0 0 20 20">
                 <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />

gardens/andy-matuschak.mdx

@@ -1,14 +1,13 @@
 ---
 title: Andy Matuschak
-description: Algorithms that make themselves known
-topics: ['evergreen notes', 'education', 'tools for thought']
 url: https://notes.andymatuschak.org/
-image: /public/andy1.jpg
-tools: ['mystery system']
+image: /andy1.png
+tools: ["mystery system"]
+topics: ["evergreen notes", "education", "tools for thought"]
 ---
 
-![Andy Matuschak's website](/public/andy1.jpg)
+![Andy Matuschak's website](/andy3.png)
 
-![Andy Matuschak's website](/public/andy2.jpg)
+![Andy Matuschak's website](/andy2.png)
 
-![Andy Matuschak's website](/public/andy3.jpg)
+![Andy Matuschak's website](/andy1.png)

gardens/bill-seitz.mdx

@@ -1,5 +1,6 @@
 ---
 title: Bill Seitz
+url: ""
 image: https://via.placeholder.com/250
-tools: ['']
+tools: [""]
 ---

gardens/luke-mitchell.mdx

@@ -0,0 +1,13 @@
+---
+title: Luke Mitchell
+url: ""
+image: /lukem4.png
+tools: [""]
+---
+
+![](/lukem5.png)
+![](/lukem4.png)
+![](/lukem3.png)
+![](/lukem6.png)
+![](/lukem1.png)
+![](/lukem2.png)

package.json

@@ -17,7 +17,8 @@
     "next-mdx-remote": "^3.0.1",
     "next-remote-watch": "1.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "rehype-img-size": "^0.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.4",

pages/[slug].js

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

pages/index.js

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

utils/mdxUtils.js

@@ -1,11 +1,11 @@
 import fs from "fs";
 import path from "path";
 
-// POSTS_PATH is useful when you want to get the path to a specific file
+// GARDENS_PATH is useful when you want to get the path to a specific file
 export const GARDENS_PATH = path.join(process.cwd(), "gardens");
 export const TOOLS_PATH = path.join(process.cwd(), "tools");
 
-// patternFilePath is the list of all mdx files inside the POSTS_PATH directory
+// patternFilePath is the list of all mdx files inside the GARDENS_PATH directory
 export const gardenFilePath = fs
     .readdirSync(GARDENS_PATH)
     // Only include md(x) files

yarn.lock

@@ -1897,6 +1897,13 @@ image-size@1.0.0:
   dependencies:
     queue "6.0.2"
 
+image-size@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.9.7.tgz#43b4ead4b1310d5ae310a559d52935a347e47c09"
+  integrity sha512-KRVgLNZkr00YGN0qn9MlIrmlxbRhsCcEb1Byq3WKGnIV4M48iD185cprRtaoK4t5iC+ym2Q5qlArxZ/V1yzDgA==
+  dependencies:
+    queue "6.0.2"
+
 import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
@@ -3113,6 +3120,14 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+rehype-img-size@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-img-size/-/rehype-img-size-0.0.1.tgz#bfdb653c08817171ce78ae37db2bee930533cad9"
+  integrity sha512-AfJgsG0LM81+ozLkdySg5vM93gcw8N9hF8LTs2mKG39pC+wVdId9chelh/oY9MCbqvR8x7jUol4UekgVnPi1rg==
+  dependencies:
+    image-size "^0.9.7"
+    unist-util-visit "^2.0.3"
+
 remark-footnotes@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f"
@@ -3732,7 +3747,7 @@ unist-util-visit-parents@^3.0.0:
     "@types/unist" "^2.0.0"
     unist-util-is "^4.0.0"
 
-unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
+unist-util-visit@2.0.3, unist-util-visit@^2.0.0, unist-util-visit@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
   integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==