added more gardens

gardens/azlen-elza.mdx

@@ -0,0 +1,10 @@
+---
+title: Azlen Elza
+url: https://notes.azlen.me/
+image: /azlen1.png
+tools: ["Notion"]
+---
+
+![](/azlen1.png)
+![](/azlen3.png)
+![](/azlen2.png)

gardens/buster-benson.mdx

@@ -1,7 +1,10 @@
 ---
 title: Buster Benson
-image: https://via.placeholder.com/250
+image: /buster3.png
-tools: ['']
+tools: [""]
 ---
 
-This is an example post
+![](/buster1.png)
+![](/buster2.png)
+![](/buster3.png)
+![](/buster4.png)

gardens/shawn-wang.mdx

@@ -0,0 +1,10 @@
+---
+title: Shawn Wang
+url: https://www.swyx.io/
+image: /swyx1.png
+tools: ["svelte"]
+---
+
+![](/swyx1.png)
+![](/swyx2.png)
+![](/swyx3.png)

pages/directory.js

@@ -1,9 +1,50 @@
 import Layout from "../components/Layout";
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import Card from "../components/Card";
+import { motion } from "framer-motion";
+import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 
-export default function Directory() {
+export default function Directory({ gardens }) {
     return (
         <Layout>
-            <div>hello</div>
+            <motion.ul
+                initial="hidden"
+                animate="show"
+                variants={{
+                    hidden: { opacity: 0, y: 50 },
+                    show: {
+                        opacity: 1,
+                        y: 0,
+                        transition: {
+                            delay: 0.6,
+                            ease: "easeInOut",
+                            duration: 0.7,
+                        },
+                    },
+                }}
+                className="flex flex-wrap mt-24"
+            >
+                {gardens.map((garden) => (
+                    <Card garden={garden} />
+                ))}
+            </motion.ul>
         </Layout>
     );
 }
+
+export function getStaticProps() {
+    const gardens = gardenFilePath.map((filePath) => {
+        const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
+        const { content, data } = matter(source);
+
+        return {
+            content,
+            data,
+            filePath,
+        };
+    });
+
+    return { props: { gardens } };
+}

pages/index.js

@@ -55,7 +55,7 @@ export default function Index({ gardens }) {
                     }}
                     className="flex flex-wrap mt-24"
                 >
-                    {gardens.map((garden) => (
+                    {gardens.slice(0, 7).map((garden) => (
                         <Card garden={garden} />
                     ))}
                 </motion.ul>