add open graph support, twitter cards, update source link in footer

ryodari · ryodari · commit e3c57d220859 · 2026-04-27T09:23:00.000+02:00
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -9,6 +9,7 @@ const blog = defineCollection({
     date: z.coerce.date(),
     tags: z.array(z.string()).optional().default([]),
     draft: z.boolean().optional().default(false),
+    image: z.string().optional(),
   }),
 });
 
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -4,14 +4,16 @@ import '../styles/global.css';
 interface Props {
   title?: string;
   description?: string;
+  image?: string;
 }
 
-const { title, description } = Astro.props;
+const { title, description, image } = Astro.props;
 
 const siteName = 'beparano.id';
 const siteDescription = 'Personal website of Ryodari — Berlin.';
 const pageTitle = title ? `${title} — ${siteName}` : siteName;
 const pageDescription = description ?? siteDescription;
+const ogImage = new URL(image ?? '/images/avatar.JPEG', Astro.site).toString();
 
 const navItems = [
   { label: 'Blog',      href: '/blog' },
@@ -41,6 +43,20 @@ const currentPath = Astro.url.pathname;
     <link rel="manifest" href="/site.webmanifest" />
 
     <link rel="alternate" type="application/rss+xml" title="beparano.id" href="/rss.xml" />
+
+    <!-- Open Graph -->
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={pageDescription} />
+    <meta property="og:url" content={`https://beparano.id${currentPath}`} />
+    <meta property="og:site_name" content={siteName} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter/X -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={pageTitle} />
+    <meta name="twitter:description" content={pageDescription} />
+    <meta name="twitter:image" content={ogImage} />
   </head>
 
   <body class="bg-paper text-ink flex flex-col min-h-screen">
@@ -82,7 +98,7 @@ const currentPath = Astro.url.pathname;
         <span>© {new Date().getFullYear()} Ryodari</span>
         <div class="flex gap-4">
           <a
-            href="https://github.com/ryodari/beparano.id"
+            href="https://github.com/ryodari/ryodari.github.io"
             target="_blank"
             rel="noopener noreferrer"
             class="hover:text-ink transition-colors no-underline"
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const { post } = Astro.props;
-const { title, description, date, tags } = post.data;
+const { title, description, date, tags, image } = post.data;
 
 const formattedDate = new Intl.DateTimeFormat('en-US', {
   year: 'numeric',
@@ -16,7 +16,7 @@ const formattedDate = new Intl.DateTimeFormat('en-US', {
 }).format(date);
 ---
 
-<Base title={title} description={description}>
+<Base title={title} description={description} image={image}>
   <article>
     <header class="mb-10">
       <div class="flex items-center gap-2 text-sm text-ink-tertiary mb-3 font-mono">
