Update Head component with client folder, refactor structured data JSON-LD output with unit tests and strong typing, add e2e tests for structured-data

Author: webstackdev

src/components/Head/Meta.astro

@@ -1,6 +1,6 @@
 ---
 import contactData from '@content/contact.json'
-import themes from '@content/themes.json'
+import themeConfig from '@content/themes.json'
 import { absoluteUrl } from '@components/scripts/utils'
 import Seo from '@components/Head/Seo.astro'
 import Social from '@components/Head/Social.astro'
@@ -34,7 +34,13 @@ const {
   noindex = false,
 } = Astro.props
 
-const defaultTheme = themes.default
+const defaultThemeId = themeConfig.defaultTheme.id
+const defaultTheme =
+  themeConfig.themes.find(theme => theme.id === defaultThemeId) || themeConfig.themes[0]
+
+if (!defaultTheme) {
+  throw new Error('No themes configured in themes.json; unable to set meta theme-color.')
+}
 const slug = path.replace(/^\//, '').replace(/\/$/, '') || 'home'
 ---
 

src/components/Head/Social.astro

@@ -11,8 +11,11 @@ export interface Props {
 
 const { title, description, slug, image } = Astro.props
 
-// Filter out undefined values to work with exactOptionalPropertyTypes
-const options: SocialMetadataOptions = { url: Astro.url.href }
+if (!(Astro.site instanceof URL)) {
+  throw new Error('Astro.site must be configured to generate social metadata.')
+}
+
+const options: SocialMetadataOptions = { url: Astro.url.href, baseUrl: Astro.site.origin }
 if (title !== undefined) options.title = title
 if (description !== undefined) options.description = description
 if (slug !== undefined) options.slug = slug

src/components/Head/StructuredData.astro

@@ -1,152 +1,31 @@
 ---
-import contactData from '@content/contact.json'
-import { absoluteUrl } from '@components/scripts/utils/absoluteUrl'
-
-export interface Props {
-  path: string
-  pageTitle: string
-  description?: string
-  contentType?: 'article' | 'website'
-  publishDate?: Date
-  modifiedDate?: Date
-  author?: string
-  image?: string
-}
+import { getSchemas } from '@components/Head/server/structuredData'
+export type { StructuredDataProps as Props } from '@components/Head/server/structuredData'
 
 const {
   path,
   pageTitle,
   description,
-  contentType = 'website',
+  contentType,
   publishDate,
   modifiedDate,
   author,
   image,
 } = Astro.props
 
-const baseUrl = Astro.site?.href ?? 'https://webstackbuilders.com'
-const currentUrl = absoluteUrl(path, Astro.site)
-
-// Organization schema - always included
-const organizationSchema = {
-  '@context': 'https://schema.org',
-  '@type': 'Organization',
-  'name': contactData.company.name,
-  'url': contactData.company.url,
-  'logo': absoluteUrl('/public/images/logos/company-card.png', Astro.site),
-  'description': contactData.company.description,
-  'email': contactData.company.email,
-  'address': {
-    '@type': 'PostalAddress',
-    'addressLocality': contactData.company.city,
-    'addressRegion': contactData.company.state,
-    'addressCountry': contactData.company.country,
-  },
-  'sameAs': contactData.company.social.map(social => social.url),
-}
-
-// WebSite schema - include on homepage
-const webSiteSchema = path === '/' || path === '' ? {
-  '@context': 'https://schema.org',
-  '@type': 'WebSite',
-  'name': contactData.company.name,
-  'url': contactData.company.url,
-  'description': contactData.company.description,
-  'publisher': {
-    '@type': 'Organization',
-    'name': contactData.company.name,
-    'logo': {
-      '@type': 'ImageObject',
-      'url': absoluteUrl('icon-512.png', Astro.site),
-    },
-  },
-} : null
-
-// Article schema - for blog posts
-const articleSchema = contentType === 'article' && publishDate ? {
-  '@context': 'https://schema.org',
-  '@type': 'Article',
-  'headline': pageTitle,
-  'description': description || contactData.company.description,
-  'datePublished': publishDate.toISOString(),
-  'dateModified': modifiedDate?.toISOString() || publishDate.toISOString(),
-  'author': {
-    '@type': 'Person',
-    'name': author || contactData.company.author.name,
-  },
-  'publisher': {
-    '@type': 'Organization',
-    'name': contactData.company.name,
-    'logo': {
-      '@type': 'ImageObject',
-      'url': absoluteUrl('icon-512.png', Astro.site),
-    },
-  },
-  'url': currentUrl,
-  ...(image && { 'image': absoluteUrl(image, Astro.site) }),
-} : null
-
-// BreadcrumbList schema - for deep pages (2+ levels)
-const pathSegments = path.split('/').filter(Boolean)
-const breadcrumbSchema = pathSegments.length >= 2 ? {
-  '@context': 'https://schema.org',
-  '@type': 'BreadcrumbList',
-  'itemListElement': [
-    {
-      '@type': 'ListItem',
-      'position': 1,
-      'name': 'Home',
-      'item': baseUrl,
-    },
-    ...pathSegments.slice(0, -1).map((segment, index) => ({
-      '@type': 'ListItem',
-      'position': index + 2,
-      'name': segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
-      'item': absoluteUrl(pathSegments.slice(0, index + 1).join('/'), Astro.site),
-    })),
-  ],
-} : null
-
-// Service schema - for service pages
-const serviceSchema = path.startsWith('/services/') && path !== '/services' && path !== '/services/' ? {
-  '@context': 'https://schema.org',
-  '@type': 'Service',
-  'name': pageTitle,
-  'description': description || contactData.company.description,
-  'provider': {
-    '@type': 'Organization',
-    'name': contactData.company.name,
-    'url': contactData.company.url,
-  },
-  'url': currentUrl,
-} : null
-
-// ContactPage schema - for contact page
-const contactPageSchema = path === '/contact' || path === '/contact/' ? {
-  '@context': 'https://schema.org',
-  '@type': 'ContactPage',
-  'name': pageTitle,
-  'description': description || contactData.company.description,
-  'url': currentUrl,
-  'mainEntity': {
-    '@type': 'Organization',
-    'name': contactData.company.name,
-    'email': contactData.company.email,
-    'url': contactData.company.url,
-  },
-} : null
-
-// Collect all schemas
-const schemas = [
-  organizationSchema,
-  webSiteSchema,
-  articleSchema,
-  breadcrumbSchema,
-  serviceSchema,
-  contactPageSchema,
-].filter(Boolean)
+const schemas = getSchemas({
+  astro: Astro,
+  path,
+  pageTitle,
+  ...(description && { description }),
+  ...(contentType && { contentType }),
+  ...(publishDate && { publishDate }),
+  ...(modifiedDate && { modifiedDate }),
+  ...(author && { author }),
+  ...(image && { image }),
+})
 ---
 
-{schemas.map((schema) => (
-  <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />
+{schemas.map(schema => (
+  <script is:inline type="application/ld+json" set:html={schema} />
 ))}

src/components/Head/ThemeInit.astro

@@ -8,13 +8,24 @@
  * CRITICAL: This script MUST be inlined (is:inline) and run as early as possible
  * to prevent Flash of Unstyled Content (FOUC).
  *
- * !!! DO NOT EXPAND THE SCOPE OF THIS SCRIPT !!!
+ * !!! DO NOT EXPAND THE SCOPE OF THIS SCRIPT OR MOVE OUT OF THIS FILE !!!
  *
  * It runs synchronously and blocks rendering.
  */
+import { themeData } from './server/themeData'
+
+const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
 ---
 
-<script is:inline>
+<script
+  is:inline
+  define:vars={{
+    defaultThemeIdJson,
+    darkThemeIdJson,
+    metaColorsJson,
+  }}
+>
+  // @ts-nocheck
   document.addEventListener('DOMContentLoaded', () => {
     /**
      * This code is only for initial page load from the site. DOMContentLoaded does
@@ -23,39 +34,50 @@
      * "astro:before-swap" event.
      */
     try {
+      const defaultThemeId = JSON.parse(defaultThemeIdJson)
+      const darkThemeId = JSON.parse(darkThemeIdJson)
+      const themeMetaColors = JSON.parse(metaColorsJson)
+
       // Read theme preference from localStorage (set by user's previous selection)
       const stored = localStorage.getItem('theme')
 
-      if (stored && stored !== 'light') {
+      if (stored && stored !== defaultThemeId) {
         // User explicitly chose a theme - apply it immediately
         // <html> element
         document.documentElement.dataset['theme'] =  stored
       } else if (!stored) {
         // No stored preference - use system preference
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
         // <html> element
-        document.documentElement.dataset['theme'] =  prefersDark ? 'dark' : 'light'
+        document.documentElement.dataset['theme'] =  prefersDark ? darkThemeId : defaultThemeId
       }
 
       // 2. Turn <body> visible. It's set to hidden in BaseLayout.astro to avoid FOUC. Do
       // here to make sure it gets turned on, in case the <meta> element selector throws.
       document.body.classList.remove('invisible')
 
-      // 3. Update meta theme-color used for PWAs
+      // 3. Add theme entries from src/content/themes.json to the window.metaColors object
+      window.metaColors = window.metaColors || {}
+      Object.assign(window.metaColors, themeMetaColors)
+
+      // 4. Update meta theme-color used for PWAs
       const metaElement = document.querySelector('meta[name="theme-color"]')
-      if (stored && stored !== 'light' && metaElement && window.metaColors) {
+      if (stored && stored !== defaultThemeId && metaElement && window.metaColors) {
         // User explicitly chose a theme - apply it immediately
         metaElement.setAttribute('content', window.metaColors[stored] || '')
       } else if (!stored && metaElement && window.metaColors) {
         // No stored preference - use system preference
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-        metaElement.setAttribute('content', window.metaColors[prefersDark ? 'dark' : 'light'] || '')
+        metaElement.setAttribute(
+          'content',
+          window.metaColors[prefersDark ? darkThemeId : defaultThemeId] || ''
+        )
       }
 
-      // 4. If stored === 'light', BaseLayout.astro already set it on <html> data-theme attribute
+      // 5. If stored === defaultThemeId, BaseLayout.astro already set it on <html> data-theme attribute
       // and Meta.astro already set it on <meta name="theme-color">, so nothing to do
 
-      // 5. Success!
+      // 6. Success!
       console.log('🎨 Theme init on "DOMContentLoaded" executed')
     } catch (error) {
       // localStorage access can fail (privacy mode, etc.)

src/components/Head/client.ts

@@ -0,0 +1,46 @@
+import type { StructuredDataParams } from '../structuredData'
+
+const DEFAULT_SITE_URL = 'https://webstackbuilders.com'
+
+const normalizeFixturePath = (value: string): string => {
+  if (value === '') {
+    return '/'
+  }
+
+  return value.startsWith('/') ? value : `/${value}`
+}
+
+export const createStructuredDataParams = (
+  overrides: Partial<StructuredDataParams> = {}
+): StructuredDataParams => {
+  const path = normalizeFixturePath(overrides.path ?? '/')
+  const site = overrides.astro?.site ?? new URL(DEFAULT_SITE_URL)
+  const url = overrides.astro?.url ?? new URL(path, site)
+
+  const params: StructuredDataParams = {
+    astro: overrides.astro ?? { site, url },
+    path,
+    pageTitle: overrides.pageTitle ?? 'Example Page Title',
+  }
+
+  if (overrides.description !== undefined) {
+    params.description = overrides.description
+  }
+  if (overrides.contentType !== undefined) {
+    params.contentType = overrides.contentType
+  }
+  if (overrides.publishDate !== undefined) {
+    params.publishDate = overrides.publishDate
+  }
+  if (overrides.modifiedDate !== undefined) {
+    params.modifiedDate = overrides.modifiedDate
+  }
+  if (overrides.author !== undefined) {
+    params.author = overrides.author
+  }
+  if (overrides.image !== undefined) {
+    params.image = overrides.image
+  }
+
+  return params
+}