initial setup

pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/tailwind.css'
+
+function MyApp({Component, pageProps}) {
+    return <Component {...pageProps} />
+}
+
+export default MyApp;

pages/directory.js

@@ -0,0 +1,9 @@
+import Layout from "../components/Layout";
+
+export default function Directory() {
+    return (
+        <Layout>
+            <div>hello</div>
+        </Layout>
+    );
+}

pages/index.js

@@ -0,0 +1,80 @@
+import fs from "fs";
+import matter from "gray-matter";
+import Link from "next/link";
+import path from "path";
+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 { motion } from "framer-motion";
+
+export default function Index({ posts }) {
+    return (
+        <Container>
+            <Sidemenu />
+            <Layout>
+                <motion.div
+                    initial="hidden"
+                    animate="visible"
+                    variants={{
+                        hidden: { opacity: 0, y: -50 },
+                        visible: {
+                            opacity: 1,
+                            y: 0,
+                            transition: {
+                                delay: 0.1,
+                                ease: "easeInOut",
+                                duration: 0.7,
+                            },
+                        },
+                    }}
+                >
+                    <h1 className="sm:text-4xl text-coolGray-700 mb-6 font-semibold">
+                        Garden of Digital Gardens
+                    </h1>
+                    <p className="text-xl text-coolGray-600 font-serif font-light max-w-5xl leading-tight">
+                        A collection of digital gardens, tools, and resources
+                        for gardeners
+                    </p>
+                </motion.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"
+                >
+                    {posts.map((post) => (
+                        <Card post={post} />
+                    ))}
+                </motion.ul>
+            </Layout>
+        </Container>
+    );
+}
+
+export function getStaticProps() {
+    const posts = gardensFilePath.map((filePath) => {
+        const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
+        const { content, data } = matter(source);
+
+        return {
+            content,
+            data,
+            filePath,
+        };
+    });
+
+    return { props: { posts } };
+}

pages/posts/[slug].js

@@ -0,0 +1,78 @@
+import fs from "fs";
+import matter from "gray-matter";
+import { MDXRemote } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import dynamic from "next/dynamic";
+import Head from "next/head";
+import Link from "next/link";
+import path from "path";
+import Layout from "../../components/Layout";
+import { gardensFilePath, GARDENS_PATH } from "../../utils/mdUtils";
+
+// 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 = {
+    // 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.
+    Head,
+};
+
+export default function GardenPage({ source, frontMatter }) {
+    return (
+        <Layout>
+            <header>
+                <nav>
+                    <Link href="/">
+                        <a>Go back home</a>
+                    </Link>
+                </nav>
+            </header>
+            <div>
+                <h1>{frontMatter.title}</h1>
+                {frontMatter.description && <p>{frontMatter.description}</p>}
+            </div>
+            <main>
+                <MDXRemote {...source} components={components} />
+            </main>
+        </Layout>
+    );
+}
+
+export const getStaticProps = async ({ params }) => {
+    const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.md`);
+    const source = fs.readFileSync(gardenFilePath);
+
+    const { content, data } = matter(source);
+
+    const mdxSource = await serialize(content, {
+        // Optionally pass remark/rehype plugins
+        mdxOptions: {
+            remarkPlugins: [],
+            rehypePlugins: [],
+        },
+        scope: data,
+    });
+
+    return {
+        props: {
+            source: mdxSource,
+            frontMatter: data,
+        },
+    };
+};
+
+export const getStaticPaths = async () => {
+    const paths = gardensFilePath
+        // Remove file extensions for page paths
+        .map((path) => path.replace(/\.md?$/, ""))
+        // Map the path into the static paths object required by Next.js
+        .map((slug) => ({ params: { slug } }));
+
+    return {
+        paths,
+        fallback: false,
+    };
+};

pages/theory.js

@@ -0,0 +1,9 @@
+import Layout from "../components/Layout";
+
+export default function Theory() {
+    return (
+        <Layout>
+            <div>hello</div>
+        </Layout>
+    );
+}

pages/tools.js

@@ -0,0 +1,9 @@
+import Layout from "../components/Layout";
+
+export default function Tools() {
+    return (
+        <Layout>
+            <div>hello</div>
+        </Layout>
+    );
+}

pages/tutorials.js

@@ -0,0 +1,9 @@
+import Layout from "../components/Layout";
+
+export default function Tutorials() {
+    return (
+        <Layout>
+            <div>hello</div>
+        </Layout>
+    );
+}

pages/what.js

@@ -0,0 +1,9 @@
+import Layout from "../components/Layout";
+
+export default function What() {
+    return (
+        <Layout>
+            <div>hello</div>
+        </Layout>
+    );
+}