記事の本文からmeta descriptionを生成する

src/lib/components/OpenGraph.svelte

@@ -6,10 +6,30 @@
 
   type Props = {
     title: string;
-    description: string;
+    body: string;
     url: string;
-  }
-  const { title, description, url }: Props = $props()
+  };
+  const { title, body, url }: Props = $props();
+
+  const generateDescriptionFromText = (body: string) => {
+    const hasHTMLTags = /<[a-z][\s\S]*>/i.test(body);
+
+    const plainText: string = hasHTMLTags ? body.replace(/<[^>]+>/g, "") : body;
+
+    const normalizedText = plainText.replace(/\s+/g, " ").trim();
+    let description = normalizedText.slice(0, 100);
+
+    if (normalizedText.length > 100) {
+      const lastChar = description.slice(-1);
+      if (!/[。、．，!！?？]/.test(lastChar)) {
+        description += "…";
+      }
+    }
+
+    return description;
+  };
+
+  let description = $derived(generateDescriptionFromText(body));
 </script>
 
 <svelte:head>

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
   <OpenGraph
     url={page.data.image.url}
     title={page.data.title}
-    description={page.data.description}
+    body={page.data.body}
   ></OpenGraph>
 
   <Header url={page.data.image.url} title={page.data.title}></Header>

src/routes/+page.ts

@@ -18,7 +18,7 @@ export const load: PageLoad = async ({ url }) => {
       url: "https://images.microcms-assets.io/assets/99c53a99ae2b4682938f6c435d83e3d9/ca63de19468e45b2833ebf325dbfd56c/Microsoft-Fluentui-Emoji-3d-Cat-3d.1024.png"
     },
     title: "nagutabbyの考え事",
-    description: "学んだことをまとめるブログ"
+    body: "学んだことをまとめるブログ"
   };
   const data = {
     ...articleData,

src/routes/search/+page.ts

@@ -23,7 +23,7 @@ export const load: PageLoad = async ({ url }) => {
       url: "https://images.microcms-assets.io/assets/99c53a99ae2b4682938f6c435d83e3d9/ca63de19468e45b2833ebf325dbfd56c/Microsoft-Fluentui-Emoji-3d-Cat-3d.1024.png"
     },
     title: `「${query}」を含む記事`,
-    description: ""
+    body: `「${query}」を含む記事の検索結果を表示しています`
   };
   const data = {
     ...articleData,

src/routes/slides/+page.svelte

@@ -14,7 +14,7 @@
 <OpenGraph
   {url}
   {title}
-  {description}
+  body={description}
 ></OpenGraph>
 
 <Header