feat: SEO improvements + astro upgrade (#28)

* feat: SEO improvements + astro upgrade

* chore: lint fix

Author: lmammino

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm build:*)",
+      "Bash(pnpm exec astro build:*)",
+      "Bash(pnpm install:*)"
+    ]
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "spiffy-shepherd",
+  "name": "nodejs-design-patterns-site",
   "type": "module",
-  "version": "0.0.1",
+  "version": "4.0.0",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -15,16 +15,16 @@
   },
   "dependencies": {
     "@astrojs/partytown": "^2.1.4",
-    "@astrojs/react": "^4.3.1",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/sitemap": "^3.7.0",
     "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@lucide/astro": "^0.522.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.8",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "astro": "^5.13.10",
+    "astro": "^5.16.16",
     "astro-expressive-code": "^0.41.3",
     "astro-masonry": "^1.2.2",
     "class-variance-authority": "^0.7.1",

pnpm-lock.yaml

@@ -26,6 +26,8 @@ export interface Props {
   ogDescription?: string
   ogImage?: string
   canonical?: string
+  additionalSchema?: object
+  noindex?: boolean
 }
 
 const {
@@ -35,6 +37,8 @@ const {
   ogDescription = OG_DESCRIPTION,
   ogImage = OG_IMAGE,
   canonical,
+  additionalSchema,
+  noindex = false,
 } = Astro.props
 ---
 
@@ -59,7 +63,13 @@ const {
       name="keywords"
       content="Node.js, Design Patterns, JavaScript, Backend Development, Software Architecture, Programming, Web Development, Scalable Applications"
     />
-    <meta name="robots" content="index, follow" />
+    {
+      noindex ? (
+        <meta name="robots" content="noindex, nofollow" />
+      ) : (
+        <meta name="robots" content="index, follow" />
+      )
+    }
     <meta name="theme-color" content={THEME_COLOR} />
 
     <!-- Canonical URL -->
@@ -132,6 +142,15 @@ const {
       }
     </script>
 
+    {
+      additionalSchema && (
+        <script
+          type="application/ld+json"
+          set:html={JSON.stringify(additionalSchema)}
+        />
+      )
+    }
+
     <script>
       import { initTheme } from './lib/theme.ts'
       initTheme()

src/Layout.astro

@@ -8,6 +8,7 @@ import Footer from '@components/Footer.astro'
 import BookPromo from '@components/blog/BookPromo.astro'
 import { List } from '@lucide/astro'
 import { calculateReadingTime, formatDate } from '@lib/utils'
+import { generateBlogPostingSchema } from '@lib/schema'
 import Breadcrumb from './Breadcrumb.astro'
 import BlogCard from './BlogCard.astro'
 
@@ -41,6 +42,18 @@ const formattedUpdatedDate =
 
 const readingTime = calculateReadingTime(post.body as string)
 
+const wordCount = (post.body as string).split(/\s+/).length
+const blogPostingSchema = generateBlogPostingSchema({
+  title,
+  description,
+  datePublished: date,
+  dateModified: updatedAt || date,
+  authors,
+  url: `${SITE_URL}/blog/${post.id}/`,
+  wordCount,
+  siteUrl: SITE_URL,
+})
+
 // Groups ToC in a way that it's easier to render as nested lists
 const nestedToc: NestedCollectionHeadingsItem[] = []
 let lastNestedTocEntry: NestedCollectionHeadingsItem | null = null
@@ -65,6 +78,7 @@ if (post.rendered?.metadata?.headings) {
   ogTitle={title}
   ogDescription={description}
   canonical={`${SITE_URL}/blog/${post.id}/`}
+  additionalSchema={blogPostingSchema}
 >
   <main class="min-h-screen bg-base-100">
     <!-- Blog Header -->

src/components/blog/BlogLayout.astro

@@ -2,6 +2,7 @@
 import { Picture } from 'astro:assets'
 import manReading from '@images/mktg/young-man-reading-nodejs-design-patterns.jpg'
 import { getCollection, render } from 'astro:content'
+import { generateFAQPageSchema } from '@lib/schema'
 
 const faq = await getCollection('faq')
 const renderedFaq = await Promise.all(
@@ -13,12 +14,27 @@ const renderedFaq = await Promise.all(
         ...f,
         Content: renderedContent.Content,
         data: f.data,
+        plainTextAnswer: f.body
+          ? f.body
+              .replace(/\*\*(.*?)\*\*/g, '$1')
+              .replace(/\*(.*?)\*/g, '$1')
+              .replace(/\[(.*?)\]\(.*?\)/g, '$1')
+              .replace(/#+\s/g, '')
+              .trim()
+          : '',
       }
     }),
 )
+
+const faqSchemaItems = renderedFaq.map((item) => ({
+  question: item.data.question,
+  answer: item.plainTextAnswer,
+}))
+const faqPageSchema = generateFAQPageSchema(faqSchemaItems)
 ---
 
 <section id="faq" class="bg-base-100 py-16 lg:py-24">
+  <script type="application/ld+json" set:html={JSON.stringify(faqPageSchema)} />
   <div class="max-w-7xl mx-auto px-6">
     <div class="max-w-4xl mx-auto text-center mb-16">
       <h2

src/components/pages/Home/Faq.astro

@@ -93,7 +93,8 @@ const numberFormatter = new Intl.NumberFormat('en-US', {
             class: 'w-full max-w-sm lg:max-w-md',
           }}
           class="w-full max-w-sm lg:max-w-md drop-shadow-2xl shadow-2xl lg:absolute rounded-tr-sm rounded-br-sm"
-          loading="lazy"
+          loading="eager"
+          fetchpriority="high"
           width={1000}
           height={1234}
         />

src/components/pages/Home/Hero.astro

@@ -0,0 +1,59 @@
+import type { CollectionEntry } from 'astro:content'
+
+export interface BlogPostingSchemaOptions {
+  title: string
+  description: string
+  datePublished: Date
+  dateModified: Date
+  authors: CollectionEntry<'authors'>[]
+  url: string
+  wordCount: number
+  siteUrl: string
+}
+
+export function generateBlogPostingSchema(
+  options: BlogPostingSchemaOptions,
+): object {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: options.title,
+    description: options.description,
+    datePublished: options.datePublished.toISOString(),
+    dateModified: options.dateModified.toISOString(),
+    author: options.authors.map((author) => ({
+      '@type': 'Person',
+      name: author.data.name,
+      url: author.data.link,
+    })),
+    publisher: {
+      '@type': 'Organization',
+      name: 'Node.js Design Patterns',
+      url: options.siteUrl,
+      logo: {
+        '@type': 'ImageObject',
+        url: `${options.siteUrl}/images/og-image.jpg`,
+      },
+    },
+    mainEntityOfPage: { '@type': 'WebPage', '@id': options.url },
+    wordCount: options.wordCount,
+    inLanguage: 'en-US',
+  }
+}
+
+export interface FAQItem {
+  question: string
+  answer: string
+}
+
+export function generateFAQPageSchema(items: FAQItem[]): object {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: items.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+  }
+}

src/lib/schema.ts

@@ -13,6 +13,7 @@ const pageDescription =
   description={pageDescription}
   ogTitle={pageTitle}
   ogDescription={pageDescription}
+  noindex={true}
 >
   <main class="min-h-screen bg-base-100 relative overflow-hidden">
     <!-- ASCII Text Background -->