feat: add image to blog posts

lucsmachado · lucsmachado · commit 75bb4fc8eaf6 · 2024-02-28T19:10:30.000-03:00
diff --git a/src/content/posts/why-astro.md b/src/content/posts/why-astro.md
@@ -3,6 +3,9 @@ title: "Why Astro?"
 pubDate: 2023-12-21
 description: "My first blog post, which explains my reasoning for choosing Astro to build my personal website"
 author: "Lucas Machado"
+image:
+    url: "https://docs.astro.build/assets/full-logo-light.png"
+    alt: "The full Astro logo."
 tags: ["astro", "blogging", "learning in public"]
 ---
 
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -5,14 +5,19 @@ import DateTime from "../components/DateTime.astro";
 const { frontmatter } = Astro.props;
 ---
 
-<Layout title={frontmatter.title} description={frontmatter.description}>
+<Layout
+  title={frontmatter.title}
+  description={frontmatter.description}
+  image={frontmatter.image}
+>
   <article
     class="prose lg:prose-xl prose-slate dark:prose-invert hover:prose-headings:underline prose-headings:text-teal-300"
   >
     <h1 class="leading-tight font-bold text-3xl text-slate-200">
       {frontmatter.title}
     </h1>
     <DateTime pubDate={frontmatter.pubDate} />
+    <img src={frontmatter.image.url} alt={frontmatter.image.alt} />
     <slot />
     <p class="pt-8 font-medium text-slate-200">
       Written by {frontmatter.author}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -6,9 +6,13 @@ import Footer from "../components/Footer.astro";
 interface Props {
   title: string;
   description: string;
+  image: {
+    url: string;
+    alt: string;
+  };
 }
 
-const { title, description } = Astro.props;
+const { title, description, image } = Astro.props;
 ---
 
 <!doctype html>
@@ -22,21 +26,15 @@ const { title, description } = Astro.props;
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:type" content="website" />
-    <meta
-      property="og:image"
-      content="https://avatars.githubusercontent.com/u/73367620?v=4"
-    />
+    <meta property="og:image" content={image.url} />
     <meta property="og:url" content={Astro.url.href} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@lucascarmac" />
     <meta name="twitter:creator" content="@lucascarmac" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
-    <meta
-      name="twitter:image"
-      content="https://avatars.githubusercontent.com/u/73367620?v=4"
-    />
-    <meta name="twitter:image:alt" content={description} />
+    <meta name="twitter:image" content={image.url} />
+    <meta name="twitter:image:alt" content={image.alt} />
     <meta name="twitter:url" content={Astro.url.href} />
     <meta name="twitter:domain" content={Astro.url.host} />
     <title>{title}</title>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,10 @@ const metadata = {
   title: "Lucas Machado",
   description:
     "Lucas Machado is a software engineer who builds accessible and interactive user experiences for the web.",
+  image: {
+    url: "https://avatars.githubusercontent.com/u/73367620?v=4",
+    alt: "A picture of Lucas, a young man with glasses, a beard and a black t-shirt, smiling on a bright day outside",
+  },
 };
 ---
 
