From 20aa44f8e4e7a466cdd15580c59fe220d60bb1fe Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Wed, 1 Oct 2025 16:59:40 +0100
Subject: [PATCH] feat(post-head): generate clean meta excerpts from post
 content

---
 src/lib/components/post/PostHead.svelte | 14 +++++--
 src/lib/utils/textExtractor.ts          | 49 +++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/utils/textExtractor.ts

diff --git a/src/lib/components/post/PostHead.svelte b/src/lib/components/post/PostHead.svelte
index de40375..d7f352f 100644
--- a/src/lib/components/post/PostHead.svelte
+++ b/src/lib/components/post/PostHead.svelte
@@ -3,14 +3,20 @@
   const { page } = getStores();
   import type { Post } from "$components/shared";
   import { env } from "$env/dynamic/public";
+  import { extractTextFromHTML } from "$utils/textExtractor";
 
   export let post: Post | undefined;
+
+  // Generate a clean excerpt from HTML content for meta tags
+  $: metaExcerpt = post?.content 
+    ? extractTextFromHTML(post.content, 50) // Shorter excerpt for meta tags
+    : post?.excerpt || '';
 </script>
 
 <svelte:head>
   {#if post !== undefined}
     <title>{post?.title} - Blog - Ewan's Corner</title>
-    <meta name="description" content={post.excerpt} />
+    <meta name="description" content={metaExcerpt} />
     <meta
       name="keywords"
       content="Ewan, personal blog, coding, technology, programming, tech blog, Blog - Ewan's Corner"
@@ -23,7 +29,7 @@
       property="og:title"
       content={`${post.title} - Blog - Ewan's Corner`}
     />
-    <meta property="og:description" content={post.excerpt} />
+    <meta property="og:description" content={metaExcerpt} />
     <meta property="og:site_name" content="Blog - Ewan's Corner" />
     <meta
       property="og:image"
@@ -49,7 +55,7 @@
       name="twitter:title"
       content={`${post.title} - Blog - Ewan's Corner`}
     />
-    <meta name="twitter:description" content={post.excerpt} />
+    <meta name="twitter:description" content={metaExcerpt} />
     <meta
       name="twitter:image"
       content={`${$page.url.origin}/api/og/blog/${post.rkey}.png`}
@@ -61,4 +67,4 @@
       content="The requested blog post could not be found."
     />
   {/if}
-</svelte:head>
+</svelte:head>
\ No newline at end of file
diff --git a/src/lib/utils/textExtractor.ts b/src/lib/utils/textExtractor.ts
new file mode 100644
index 0000000..6b67ad2
--- /dev/null
+++ b/src/lib/utils/textExtractor.ts
@@ -0,0 +1,49 @@
+/**
+ * Extracts plain text from HTML content and limits by word count.
+ *
+ * @param html - The HTML string to strip down
+ * @param maxWords - Maximum number of words in the result
+ * @returns Clean plain text excerpt
+ */
+export function extractTextFromHTML(html: string, maxWords: number = 200): string {
+  if (!html) return '';
+
+  // SSR fallback: regex-based stripping
+  if (typeof document === 'undefined') {
+    let text = html
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    const words = text.split(/\s+/);
+    if (words.length <= maxWords) {
+      return text;
+    }
+    return words.slice(0, maxWords).join(' ') + '...';
+  }
+
+  // Browser environment: use DOM parsing
+  const temp = document.createElement('div');
+  temp.innerHTML = html;
+
+  // Remove script and style elements
+  const scripts = temp.querySelectorAll('script, style');
+  scripts.forEach(el => el.remove());
+
+  // Get text content
+  let text = temp.textContent || temp.innerText || '';
+
+  // Clean up whitespace
+  text = text.replace(/\s+/g, ' ').trim();
+
+  // Split into words and truncate
+  const words = text.split(/\s+/);
+  if (words.length <= maxWords) {
+    return text;
+  }
+
+  return words.slice(0, maxWords).join(' ') + '...';
+}
+
-- 
2.51.2