thumbnail stuff

src/components/Footer.astro

@@ -2,10 +2,7 @@
 ---
 
 <footer>
-  <p>
-    Copyright 2022 - <a href="https://ghall.dev">Graham Hall</a>
-  </p>
-  <p>
+  <p style={{ fontSize: "0.8rem" }}>
     Built with <a href="https://astro.build">Astro</a> and <a
       href="https://picocss.com">Pico.css</a
     >

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import "@picocss/pico";
+import "../styles/global.css";
 
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";

src/pages/index.astro

@@ -20,6 +20,11 @@ const posts = await response.json();
     {
       posts.objects.map((post) => (
         <article>
+          {post.thumbnail ? (
+            <div style={{ marginBottom: "25px" }}>
+              <img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
+            </div>
+          ) : null}
           <div>
             <div style={{ display: "flex", justifyContent: "space-between" }}>
               <h4>{post.title}</h4>

src/pages/posts/[slug].astro

@@ -20,6 +20,13 @@ const post = posts.objects[0];
 
 <Layout title={post.title}>
   <article>
+    {
+      post.thumbnail ? (
+        <div style={{ marginBottom: "25px" }}>
+          <img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
+        </div>
+      ) : null
+    }
     <div style={{ display: "flex", justifyContent: "space-between" }}>
       <h4>{post.title}</h4>
       <h5>{`🗓️ ${format(new Date(post.published_at), "MMM do, y")}`}</h5>

src/styles/global.css

@@ -0,0 +1,3 @@
+img {
+  border-radius: 5px;
+}