Move components out from pages to components/blog

Author: carlbarrdahl

components/blog/BlogHeader.tsx

@@ -0,0 +1,12 @@
+export function BlogHeader() {
+  return (
+    <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20">
+      <h1>
+        <span className="font-bold leading-tight lg:text-5xl">Blog</span>
+      </h1>
+      <p className="text-center text-gray-500 dark:text-gray-400">
+        The latest updates and releases from the team at Allo.
+      </p>
+    </div>
+  );
+}

components/blog/BlogIndex.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+// eslint-disable-next-line import/no-unresolved
+import { getPagesUnderRoute } from "nextra/context";
+
+export function BlogIndex() {
+  return getPagesUnderRoute("/blog").map((page) => {
+    return (
+      <div key={page.route} className="mb-10">
+        <Link
+          href={page.route}
+          style={{ color: "inherit", textDecoration: "none" }}
+          className="block font-semibold mt-8 text-2xl"
+        >
+          {page.meta?.title || page.frontMatter?.title || page.name}
+        </Link>
+        <p className="opacity-80" style={{ marginTop: ".5rem" }}>
+          {page.frontMatter?.description}{" "}
+          <span className="inline-block">
+            <Link href={page.route}>{"Read more →"}</Link>
+          </span>
+        </p>
+        {page.frontMatter?.date ? (
+          <p className="opacity-50 text-sm">{page.frontMatter.date}</p>
+        ) : null}
+      </div>
+    );
+  });
+}

pages/blog.mdx

@@ -3,46 +3,8 @@ description: The latest updates and releases from the team at Allo.
 type: posts
 ---
 
-import { getPagesUnderRoute } from "nextra/context";
-import Link from "next/link";
-
-export function BlogHeader() {
-  return (
-    <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20">
-      <h1>
-        <span className="font-bold leading-tight lg:text-5xl">Blog</span>
-      </h1>
-      <p className="text-center text-gray-500 dark:text-gray-400">
-        The latest updates and releases from the team at Allo.
-      </p>
-    </div>
-  );
-}
-
-export function BlogIndex() {
-  return getPagesUnderRoute("/blog").map((page) => {
-    return (
-      <div key={page.route} className="mb-10">
-        <Link
-          href={page.route}
-          style={{ color: "inherit", textDecoration: "none" }}
-          className="block font-semibold mt-8 text-2xl"
-        >
-          {page.meta?.title || page.frontMatter?.title || page.name}
-        </Link>
-        <p className="opacity-80" style={{ marginTop: ".5rem" }}>
-          {page.frontMatter?.description}{" "}
-          <span className="inline-block">
-            <Link href={page.route}>{"Read more →"}</Link>
-          </span>
-        </p>
-        {page.frontMatter?.date ? (
-          <p className="opacity-50 text-sm">{page.frontMatter.date}</p>
-        ) : null}
-      </div>
-    );
-  });
-}
+import { BlogHeader } from "../components/blog/BlogHeader";
+import { BlogIndex } from "../components/blog/BlogIndex";
 
 <BlogHeader />
 <BlogIndex />