added more gardens

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>