add og image support

Author: Brookke

public/images/2026-01-17-3d-printer.jpg

@@ -25,6 +25,7 @@
   }
 
   .brand__image {
+    margin: 0;
     width: 3.5rem;
     height: 3.5rem;
     border-radius: 50%;

src/components/Navigation.astro

@@ -7,6 +7,7 @@ description:
   have said no. My experience of 3D printers back when I was in college was that
   they were very slow, expensive, frequently failed mid-print, and needed
   constant calibration..."
+image: /images/2026-01-17-3d-printer.jpg
 ---
 
 import STLViewer from "../../components/STLViewer.tsx";

src/content/blog/2026-01-17-3d-printer.mdx

@@ -13,6 +13,7 @@ const blog = defineCollection({
         return val || [];
       }),
     description: z.string().optional(),
+    image: z.string().optional(),
     draft: z.boolean().optional().default(false),
   }),
 });

src/content/config.ts

@@ -2,11 +2,13 @@
 export interface Props {
   title: string;
   description?: string;
+  image?: string;
 }
 
 const {
   title,
   description = "Brooke Hatton, Full Stack Developer. 1st Class Honours, BEng Computer Science, University Of York.",
+  image,
 } = Astro.props;
 
 // Import the global stylesheet
@@ -25,6 +27,18 @@ import "../styles/global.css";
     />
     <title>{title}</title>
 
+    <!-- Open Graph / Social Media Preview -->
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    {image && <meta property="og:image" content={new URL(image, Astro.site).href} />}
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    {image && <meta name="twitter:image" content={new URL(image, Astro.site).href} />}
+
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/layouts/BaseLayout.astro

@@ -31,7 +31,7 @@ function formatDate(date: Date): string {
 }
 ---
 
-<BaseLayout title={post.data.title} description={post.data.description}>
+<BaseLayout title={post.data.title} description={post.data.description} image={post.data.image}>
   <Navigation />
   <article class="post">
     <header class="post__header header--xl">