feat: ogimage自動生成を実装した(ブログのみ)

astro.config.mjs

@@ -7,9 +7,11 @@ import cloudflare from "@astrojs/cloudflare";
 
 import mdx from "@astrojs/mdx";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx()],
+  integrations: [tailwind(), mdx(), react()],
   site: "https://yukky-sandbox.dev/",
   vite: {
     optimizeDeps: {
@@ -28,4 +30,4 @@ export default defineConfig({
     defaultStrategy: "viewport",
     prefetchAll: false,
   },
-});
+});

package.json

@@ -14,18 +14,26 @@
   "dependencies": {
     "@astrojs/cloudflare": "11.0.4",
     "@astrojs/mdx": "^3.1.6",
+    "@astrojs/react": "^3.6.2",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/tailwind": "^5.1.0",
     "@formkit/tempo": "^0.1.2",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "astro": "4.15.6",
     "microcms-js-sdk": "^3.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "satori": "^0.11.0",
+    "sharp": "^0.33.5",
     "tailwindcss": "^3.3.3",
     "typescript-eslint": "^7.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.36.2",
     "@tailwindcss/typography": "^0.5.9",
     "@types/bun": "^1.0.8",
+    "@types/sharp": "^0.32.0",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",

src/layouts/Layout.astro

@@ -6,9 +6,10 @@ export interface Props {
   title: string;
   description: string;
   ogType?: string;
+  ogImageUrl?: string;
 }
 
-const { title, description, ogType } = Astro.props;
+const { title, description, ogType, ogImageUrl } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 ---
 
@@ -23,17 +24,26 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <meta content={description} name="description" />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
-    <meta property="og:type" content={ogType ? ogType : "website"} />
+    <meta property="og:type" content={ogType ?? "website"} />
     <meta property="og:url" content={Astro.url} />
+    { ogImageUrl !== undefined ? <meta property="og:image" content={ogImageUrl} /> : '' }
+    { ogImageUrl !== undefined ? <meta property="og:image:width" content="800" /> : '' }
+    { ogImageUrl !== undefined ? <meta property="og:image:height" content="400" /> : '' }
     <meta property="og:site_name" content="ゆっきーの砂場" />
     <meta property="og:locale" content="ja_JP" />
     <meta property="twitter:site" content="@Yu_yukk_Y" />
+    <meta property="twitter:creator" content="@Yu_yukk_Y" />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    { ogImageUrl !== undefined ? <meta property="twitter:card" content="summary_large_image" /> : <meta property="twitter:card" content="summary" /> }
+    { ogImageUrl !== undefined ? <meta property="twitter:image" content={ogImageUrl} /> : '' }
     <meta name="msapplication-config" content="/browserconfig.xml">
     <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fefce8" />
+    <link rel="alternate" type="application/rss+xml" title="RSS feed for yukky-sandbox.dev" href="/rss.xml" />
     <meta name="msapplication-TileImage" content="/mstile-150x150.png"/>
     <meta name="msapplication-TileImage" content="#fefce8" />
     <meta name="theme-color" content="#fefce8" />

src/layouts/PostLayout.astro

@@ -5,13 +5,14 @@ export interface Props {
   title: string;
   description: string;
   createdAt: string;
+  slug: string;
 }
-const { title, description, createdAt } = Astro.props;
+const { title, description, createdAt, slug } = Astro.props;
 const OG_TYPE = "article";
 const dateTypeCreatedAt = new Date(createdAt);
 ---
 
-<Layout title={title} description={description} ogType={OG_TYPE}>
+<Layout title={title} description={description} ogType={OG_TYPE} ogImageUrl={`https://yukky-sandbox.dev/og/${slug}.png`}>
   <article
     class="mt-5 pt-5 lg:w-1/2 bg-amber-50 dark:bg-gray-500 w-full"
   >

src/pages/og/[...slug].png.ts

@@ -0,0 +1,24 @@
+import type { APIContext, APIRoute } from "astro";
+import { getEntry } from "astro:content";
+import { getOgImage } from "./_OgImage";
+
+export const prerender = false;
+
+export async function GET({ params, redirect }: APIContext) {
+  const { slug } = params;
+  if (slug === undefined) {
+    return new Response(null, {
+      status: 500,
+      statusText: "No slug provided",
+    });
+  }
+  const post = await getEntry("post", slug);
+  if (post === undefined) {
+    return new Response(null, {
+      status: 404,
+      statusText: "Not found",
+    });
+  }
+  const body = await getOgImage(post?.data.title ?? "No title");
+  return new Response(body);
+}

src/pages/post/[...slug].astro

@@ -10,7 +10,7 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
-<PostLayout title={entry.data.title} description={entry.data.description} createdAt={entry.data.createdAt}>
+<PostLayout title={entry.data.title} description={entry.data.description} createdAt={entry.data.createdAt} slug={entry.slug}>
   <Content />
 </PostLayout>
 

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "types": ["bun-types"]
+    "types": [
+      "bun-types"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
-}
+}