fixed

_posts/blog-update.mdx

@@ -0,0 +1,13 @@
+---
+title: Back to it!
+rating: 10
+cuisine: no
+date: '2023-12-18T12:12:12'
+author:
+  name: Jacob Aronoff
+  picture: '/assets/blog/authors/jacob.jpeg'
+---
+
+# Hello
+
+... If you're reading this we are so back. I'm going to try and write more here in the new year for things I cook, places I visit, etc.

app/page.tsx

@@ -1,9 +1,17 @@
 import Link from "next/link";
 import PostPreview from "../components/PostPreview";
+import PostHero from "../components/PostHero";
 import { getAllPosts } from "../lib/api";
 
 export default function Home() {
-  const posts = getAllPosts(["title", "date", "excerpt", "coverImage", "slug"]);
+  const posts = getAllPosts([
+    "title",
+    "date",
+    "excerpt",
+    "coverImage",
+    "slug",
+    "rating",
+  ]);
   const recentPosts = posts.slice(0, 2);
 
   return (
@@ -18,7 +26,7 @@ export default function Home() {
 
         <div className="h-12"></div>
 
-        {/* <PostHero /> */}
+        <PostHero />
 
         <div className="h-16"></div>
 

app/posts/page.tsx

@@ -2,7 +2,14 @@ import { getAllPosts } from "../../lib/api";
 import PostPreview from "../../components/PostPreview";
 
 export default function Blog() {
-  const posts = getAllPosts(["title", "date", "excerpt", "coverImage", "slug"]);
+  const posts = getAllPosts([
+    "title",
+    "date",
+    "excerpt",
+    "coverImage",
+    "slug",
+    "rating",
+  ]);
 
   return (
     <div className="container mx-auto px-5">
@@ -11,7 +18,7 @@ export default function Blog() {
 
         <div className="h-12"></div>
 
-        <div className="grid md:grid-cols-2 grid-cols-1 lg:gap-32 gap-8">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-32">
           {posts.map((post) => (
             <div key={post.title}>
               <PostPreview post={post} path="posts" />

components/PostHero.tsx

@@ -1,36 +1,37 @@
-
 import DateFormatter from "./DateFormatter";
 import Image from "next/image";
 import Link from "next/link";
-import { getPostBySlug } from "../lib/api";
+import { getAllPosts, getPostBySlug } from "../lib/api";
 
 type Items = {
   [key: string]: string;
 };
 
 export default function PostHero() {
-  const heroPost = getPostBySlug("example", [
+  const heroPost = getAllPosts([
     "title",
     "excerpt",
     "slug",
     "date",
     "coverImage",
-  ]);
+  ])[0];
 
   return (
     <Link href={`/posts/${heroPost.slug}`}>
-      <div className="w-full mx-auto group">
-        <Image
-          alt={`cover image for ${heroPost.title}`}
-          src={heroPost.coverImage}
-          width={400}
-          height={400}
-          style={{ width: "100%" }}
-        />
+      <div className="group mx-auto w-full">
+        {heroPost.coverImage && (
+          <Image
+            alt={`cover image for ${heroPost.title}`}
+            src={heroPost.coverImage}
+            width={400}
+            height={400}
+            style={{ width: "100%" }}
+          />
+        )}
 
-        <div className="grid mt-4 md:grid-cols-2 grid-cols-1">
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-2">
           <div className="mb-2">
-            <p className="font-semibold text-xl group-hover:underline">
+            <p className="text-xl font-semibold group-hover:underline">
               {heroPost.title}
             </p>
             <DateFormatter dateString={heroPost.date} />

lib/api.ts

@@ -37,7 +37,6 @@ export function getPostBySlug(slug: string, fields: string[] = []) {
 
   return items;
 }
-
 export function getArchivedPosts(fields: string[] = []) {
   const slugs = getPostSlugs();
   const posts = slugs

next.config.js

@@ -2,7 +2,7 @@ const withMDX = require("@next/mdx")();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // output: "export",
+  output: "export",
   // Configure `pageExtensions` to include MDX files
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   // Optionally, add any other Next.js config below