Opengraph

2026-02-07 00:28:33 -07:00
parent 6b77ce091d
commit dce37681af
13 changed files with 336 additions and 230 deletions
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
    "nix": "nix develop"
  },
  "dependencies": {
-    "@astrojs/mdx": "5.0.0-beta.3",
-    "@astrojs/node": "10.0.0-beta.0",
+    "@astrojs/mdx": "5.0.0-beta.5",
+    "@astrojs/node": "10.0.0-beta.2",
    "@astrojs/rss": "4.0.15",
    "@astrojs/vue": "6.0.0-beta.0",
    "@iarna/toml": "^2.2.5",
@@ -19,7 +19,7 @@
    "@react-pdf/renderer": "^4.3.2",
    "@tailwindcss/typography": "^0.5.19",
    "@tailwindcss/vite": "^4.1.18",
-    "astro": "6.0.0-beta.6",
+    "astro": "6.0.0-beta.9",
    "astro-icon": "^1.1.5",
    "lucide-vue-next": "^0.563.0",
    "react": "^19.2.4",
@@ -32,7 +32,7 @@
    "@catppuccin/daisyui": "^2.1.1",
    "@iconify-json/mdi": "^1.2.3",
    "@iconify-json/simple-icons": "^1.2.69",
-    "@types/react": "^19.2.10",
-    "daisyui": "^5.5.17"
+    "@types/react": "^19.2.13",
+    "daisyui": "^5.5.18"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/logo.webp
+++ b/public/logo.webp
--- a/src/config.ts
+++ b/src/config.ts
@@ -142,6 +142,35 @@ export const config: Config = {
      url: "https://atri.dad",
      author: "Atridad Lahiji",
    },
+    openGraph: {
+      image: "/logo.png",
+      type: "website",
+      locale: "en_US",
+      siteName: "Atridad Lahiji",
+    },
+    pageOpenGraph: {
+      home: {
+        title: "Atridad Lahiji",
+        description:
+          "Personal website of Atridad Lahiji - Researcher, Full-Stack Developer, and IT Professional",
+      },
+      posts: {
+        title: "Blog Posts",
+        description: "Thoughts and ramblings.",
+      },
+      projects: {
+        title: "Projects",
+        description: "Projects I'm working on.",
+      },
+      talks: {
+        title: "Talks",
+        description: "Conference talks and presentations by Atridad Lahiji",
+      },
+      resume: {
+        title: "Resume",
+        description: "My Resume and Resume Generator",
+      },
+    },
    giteaDomains: ["https://git.atri.dad"],
  },

--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,14 +9,25 @@ import "../styles/global.css";
 export interface Props {
    title?: string;
    description?: string;
+    ogImage?: string;
+    ogType?: "website" | "article";
 }

-const { title, description } = Astro.props;
+const { title, description, ogImage, ogType } = Astro.props;

 const pageTitle = title
    ? `${title} | ${config.siteConfig.meta.title}`
    : config.siteConfig.meta.title;
 const pageDescription = description || config.siteConfig.meta.description;
+
+const og = config.siteConfig.openGraph;
+const canonicalUrl = new URL(Astro.url.pathname, config.siteConfig.meta.url)
+    .href;
+const resolvedOgImage = ogImage || og.image;
+const resolvedOgImageUrl = resolvedOgImage
+    ? new URL(resolvedOgImage, config.siteConfig.meta.url).href
+    : undefined;
+const resolvedOgType = ogType || og.type || "website";
 ---

 <!doctype html>
@@ -25,10 +36,24 @@ const pageDescription = description || config.siteConfig.meta.description;
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="canonical" href={canonicalUrl} />
        <meta name="generator" content={Astro.generator} />
        <meta name="description" content={pageDescription} />
        <meta name="author" content={config.siteConfig.meta.author} />
        <title>{pageTitle}</title>
+
+        <meta property="og:title" content={pageTitle} />
+        <meta property="og:description" content={pageDescription} />
+        <meta property="og:type" content={resolvedOgType} />
+        <meta property="og:url" content={canonicalUrl} />
+        {og.siteName && <meta property="og:site_name" content={og.siteName} />}
+        {og.locale && <meta property="og:locale" content={og.locale} />}
+        {
+            resolvedOgImageUrl && (
+                <meta property="og:image" content={resolvedOgImageUrl} />
+            )
+        }
+
        <ClientRouter />
    </head>
    <body class="flex flex-col min-h-screen overflow-x-hidden">
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import FuzzyText from "../components/FuzzyText.vue";
 ---

-<Layout title="404 - Not Found">
+<Layout title="404 - Not Found" description="Page not found">
    <div class="flex flex-col items-center justify-center w-full">
        <FuzzyText
            text="404"
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,12 @@ import Layout from "../layouts/Layout.astro";
 import { config } from "../config";
 ---

-<Layout>
+<Layout
+    title={config.siteConfig.pageOpenGraph.home.title}
+    description={config.siteConfig.pageOpenGraph.home.description}
+    ogImage={config.siteConfig.pageOpenGraph.home.image}
+    ogType={config.siteConfig.pageOpenGraph.home.type}
+>
    <Image
        src={config.personalInfo.profileImage.src}
        alt={config.personalInfo.profileImage.alt}
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -17,7 +17,11 @@ const { post }: { post: CollectionEntry<"posts"> } = Astro.props;
 const { Content } = await render(post);
 ---

-<Layout>
+<Layout
+    title={post.data.title}
+    description={post.data.description}
+    ogType="article"
+>
    <div class="w-full p-4 md:p-8">
        <div class="max-w-3xl mx-auto">
            <div class="p-4 md:p-8">
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import { Icon } from "astro-icon/components";
+import { config } from "../config";

 // Get all posts from the content collection
 const posts = await getCollection("posts");
@@ -21,7 +22,12 @@ function formatDate(date: Date): string {
 }
 ---

-<Layout>
+<Layout
+    title={config.siteConfig.pageOpenGraph.posts.title}
+    description={config.siteConfig.pageOpenGraph.posts.description}
+    ogImage={config.siteConfig.pageOpenGraph.posts.image}
+    ogType={config.siteConfig.pageOpenGraph.posts.type}
+>
    <div class="w-full max-w-3xl mx-auto p-4 sm:p-8">
        <h1
            class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center"
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -51,7 +51,12 @@ const sortedProjects = projectsWithGiteaInfo.sort((a, b) => {
 });
 ---

-<Layout>
+<Layout
+    title={config.siteConfig.pageOpenGraph.projects.title}
+    description={config.siteConfig.pageOpenGraph.projects.description}
+    ogImage={config.siteConfig.pageOpenGraph.projects.image}
+    ogType={config.siteConfig.pageOpenGraph.projects.type}
+>
    <div class="w-full max-w-3xl mx-auto p-4 sm:p-8">
        <h1
            class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center"
--- a/src/pages/resume.astro
+++ b/src/pages/resume.astro
@@ -95,7 +95,12 @@ if (!data) {
 }
 ---

-<Layout title="Resume">
+<Layout
+    title={config.siteConfig.pageOpenGraph.resume.title}
+    description={config.siteConfig.pageOpenGraph.resume.description}
+    ogImage={config.siteConfig.pageOpenGraph.resume.image}
+    ogType={config.siteConfig.pageOpenGraph.resume.type}
+>
    <ResumeSettingsModal client:load />
    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl w-full">
        <h1
--- a/src/pages/talks.astro
+++ b/src/pages/talks.astro
@@ -18,7 +18,12 @@ function formatDate(dateStr: string): string {
 }
 ---

-<Layout>
+<Layout
+    title={config.siteConfig.pageOpenGraph.talks.title}
+    description={config.siteConfig.pageOpenGraph.talks.description}
+    ogImage={config.siteConfig.pageOpenGraph.talks.image}
+    ogType={config.siteConfig.pageOpenGraph.talks.type}
+>
    <div class="w-full max-w-3xl mx-auto p-4 sm:p-8">
        <h1
            class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center"
--- a/src/types.ts
+++ b/src/types.ts
@@ -169,6 +169,20 @@ export interface HomepageSections {
  };
 }

+export interface OpenGraphConfig {
+  image?: string;
+  type?: "website" | "article";
+  locale?: string;
+  siteName?: string;
+}
+
+export interface PageOpenGraph {
+  title?: string;
+  description?: string;
+  image?: string;
+  type?: "website" | "article";
+}
+
 export interface SiteConfig {
  personal: PersonalInfo;
  homepage: HomepageSections;
@@ -179,6 +193,14 @@ export interface SiteConfig {
    url: string;
    author: string;
  };
+  openGraph: OpenGraphConfig;
+  pageOpenGraph: {
+    home: PageOpenGraph;
+    posts: PageOpenGraph;
+    projects: PageOpenGraph;
+    talks: PageOpenGraph;
+    resume: PageOpenGraph;
+  };
  giteaDomains?: string[];
 }