Remove underline from footnote superscript, add local time zone and timeZone prop to Time component, spacing in Testimonials component and testimonials integration and that checks length

Author: webstackdev

_TODO.md

@@ -197,3 +197,18 @@ We have generated detailed outlines for each of the MDX proposed articles we hav
 Act as a principal software engineer. Your goal is to write a detailed technical article based on the provided outline. Context: The target audience is Senior DevOps and infrastructure Engineers. The tone should be authoritative, professional, and concise, avoiding fluff or filler words. Think step-by-step before writing to improve the accuracy of technical explanations. Use a friendly first-person voice. Anything that reads like generic marketing copy is not what we want but we still want the effect of being "real" and approachable - try not to sound like technical documentation. We want to show empathy for our readers.
 
 Let's work through each article section by section based on the H2 headers in the outline. If the section looks good as-is, I'll just type "ok" so you know to continue to the next section.
+
+## Move hard-coded options from integrations to astro.config.ts
+
+### CTA validator
+
+Let's also refactor the CtaValidator integration to allow passing in options from astro.config.ts instead of hard-coding things in the integration. We should be able to:
+
+- pass in the required CallToActions in the src/components/CallToAction as an array
+- pass in the debug flag
+
+I think we can remove the additionalPatterns option, it appears unused but need to check.
+
+I added a new folder in the CallToAction component folder that won't be required for articles.
+
+

astro.config.ts

@@ -38,6 +38,7 @@ import { callToActionValidator } from './src/integrations/CtaValidator'
 import { faviconGenerator } from './src/integrations/FaviconGenerator'
 import { packageRelease } from './src/integrations/PackageRelease'
 import { privacyPolicyVersion } from './src/integrations/PrivacyPolicyVersion'
+import { testimonialsLengthWarning } from './src/integrations/TestimonialsLengthWarning'
 import { pwaDevAssetServer } from './src/lib/plugins/pwaDevAssetServer'
 import { createSerializeFunction, pagesJsonWriter } from './src/integrations/sitemapSerialize'
 
@@ -67,6 +68,8 @@ const standardIntegrations = [
   packageRelease(),
   /** Inject privacy policy version from git commit date for GDPR record keeping */
   privacyPolicyVersion(),
+  /** Warn when testimonial bodies are too short/too long (helps keep carousel cards consistent) */
+  testimonialsLengthWarning({ min: 350, max: 400 }),
   /** Only include Sentry integration in Vercel environments */
   ...(isVercel() ? [sentry({
     project: "webstack-builders-corporate-website",

src/components/Testimonials/index.astro

@@ -57,9 +57,9 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
 {
   testimonials.length > 0 &&
     (shouldRenderSingle ? (
-      <section class="bg-page-base-offset py-16" aria-labelledby={headingId}>
+      <section class="bg-page-base-offset py-8" aria-labelledby={headingId}>
         <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <header class="text-center mb-12">
+          <header class="text-center mb-6">
             <h2 id={headingId} class="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
             {leadText && (
               <p class="text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
@@ -79,9 +79,9 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
         aria-roledescription="carousel"
         aria-label={title}
       >
-        <section class="bg-page-base-offset py-16" aria-labelledby={headingId}>
+        <section class="bg-page-base-offset py-8" aria-labelledby={headingId}>
           <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-            <header class="text-center mb-12">
+            <header class="text-center mb-6">
               <h2 id={headingId} class="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
               {leadText && (
                 <p class="text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
@@ -111,7 +111,7 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
                 <>
                   <button
                     type="button"
-                    class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed"
+                    class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
                     aria-label="Previous testimonial"
                   >
                     <svg
@@ -133,7 +133,7 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
 
                   <button
                     type="button"
-                    class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed"
+                    class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
                     aria-label="Next testimonial"
                   >
                     <svg
@@ -161,7 +161,7 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
                     />
                     <button
                       type="button"
-                      class="flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-base-offset"
+                      class="relative flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-base-offset focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
                       data-testimonials-autoplay-toggle
                       aria-label="Pause testimonials"
                       aria-pressed="false"

src/components/Time/__tests__/index.spec.ts

@@ -53,6 +53,24 @@ describe('Time (Astro)', () => {
     })
   })
 
+  test('defaults to datetime format and renders fallback text when format is omitted', async () => {
+    const Time = (await import('@components/Time/index.astro')).default
+
+    const renderedHtml = await container.renderToString(Time, {
+      props: {
+        datetime: '2026-01-01T00:00:00.000Z',
+      },
+    })
+
+    await withJsdomEnvironment(async ({ window }) => {
+      window.document.body.innerHTML = renderedHtml
+
+      const element = window.document.querySelector('relative-time')
+      expect(element?.getAttribute('format')).toBe('datetime')
+      expect((element?.textContent ?? '').trim().length).toBeGreaterThan(0)
+    })
+  })
+
   test('uses current time when now=true and datetime is omitted', async () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2030-01-02T03:04:05.000Z'))
@@ -99,6 +117,26 @@ describe('Time (Astro)', () => {
     })
   })
 
+  test('forces a timeZone when provided and appends it in parentheses', async () => {
+    const Time = (await import('@components/Time/index.astro')).default
+
+    const renderedHtml = await container.renderToString(Time, {
+      props: {
+        format: 'datetime',
+        datetime: '2020-01-01T00:00:00Z',
+        timeZone: 'America/New_York',
+      },
+    })
+
+    await withJsdomEnvironment(async ({ window }) => {
+      window.document.body.innerHTML = renderedHtml
+
+      const element = window.document.querySelector('relative-time')
+      expect(element?.getAttribute('time-zone')).toBe('America/New_York')
+      expect(window.document.body.textContent).toContain('(America/New_York)')
+    })
+  })
+
   test('passes through supported attributes to <relative-time>', async () => {
     const Time = (await import('@components/Time/index.astro')).default
 

src/components/Time/index.astro

@@ -1,11 +1,12 @@
 ---
 type Common = {
-  format: 'datetime' | 'relative' | 'duration'
+  format?: 'datetime' | 'relative' | 'duration'
   tense?: 'auto' | 'past' | 'future'
   precision?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'
   threshold?: string
   prefix?: string
   formatStyle?: 'long' | 'short' | 'narrow'
+  timeZone?: string
   second?: 'numeric' | '2-digit'
   minute?: 'numeric' | '2-digit'
   hour?: 'numeric' | '2-digit'
@@ -21,21 +22,91 @@ export interface Props extends Common {
   now?: boolean
 }
 
-const { now, datetime, formatStyle, timeZoneName, ...attrs } = Astro.props as Props
+const {
+  now,
+  datetime,
+  format = 'datetime',
+  formatStyle,
+  timeZone,
+  timeZoneName,
+  weekday,
+  year,
+  month,
+  day,
+  hour,
+  minute,
+  second,
+  ...attrs
+} = Astro.props as Props
 const resolvedDatetime = datetime ?? (now ? new Date() : undefined)
+
+const resolvedDatetimeString =
+  resolvedDatetime instanceof Date ? resolvedDatetime.toISOString() : resolvedDatetime
+
+const parsedDate =
+  typeof resolvedDatetimeString === 'string' ? new Date(resolvedDatetimeString) : undefined
+
+const isValidDate = parsedDate instanceof Date && !Number.isNaN(parsedDate.getTime())
+
+const dateStyleByFormatStyle: Record<NonNullable<Props['formatStyle']>, Intl.DateTimeFormatOptions['dateStyle']> = {
+  long: 'long',
+  short: 'short',
+  narrow: 'short',
+}
+
+const hasExplicitParts = Boolean(weekday || year || month || day || hour || minute || second || timeZoneName)
+
+const fallbackText = (() => {
+  if (!resolvedDatetimeString) {
+    return ''
+  }
+
+  if (format === 'duration') {
+    return typeof resolvedDatetimeString === 'string' ? resolvedDatetimeString : ''
+  }
+
+  if (!isValidDate || !parsedDate) {
+    return ''
+  }
+
+  const options: Intl.DateTimeFormatOptions = hasExplicitParts
+    ? {
+        weekday,
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        timeZoneName,
+        timeZone,
+      }
+    : {
+        dateStyle: formatStyle ? dateStyleByFormatStyle[formatStyle] : 'medium',
+        timeZone,
+      }
+
+  try {
+    return new Intl.DateTimeFormat(undefined, options).format(parsedDate)
+  } catch {
+    return ''
+  }
+})()
 ---
 
 <script>
   import '@github/relative-time-element'
 </script>
 
 <relative-time
-  datetime={resolvedDatetime instanceof Date ? resolvedDatetime.toISOString() : resolvedDatetime}
+  datetime={resolvedDatetimeString}
   {...{
     ...attrs,
+    format,
     'format-style': formatStyle,
     'time-zone-name': timeZoneName,
+    'time-zone': timeZone,
   }}
 >
-  <slot />
-</relative-time>
+  {/** Closing tag must be on same line to prevent trailing space */ }
+  <slot>{fallbackText}</slot></relative-time>{timeZone ? ` (${timeZone})` : ''}

src/content/articles/demo/index.mdx

@@ -13,24 +13,6 @@ import Demo from '@components/Test/Demo.mdx'
 
 ## Components (looping)
 
-### Social Sharing Component
-
-Add social sharing buttons for the article. The social image is auto-generated, and can be passed as an optional param to override the generated version.
-
-```markdown
-<Shares
-  title="Demo Page"
-  description="This is just a demo page to show how things work on the site"
-  url="/articles/demo"
-/>
-```
-
-<Shares
-  title="Demo Page"
-  description="This is just a demo page to show how things work on the site"
-  url="/articles/demo"
-/>
-
 ### Testimonials Component
 
 Display customer feedback and testimonials:
@@ -49,6 +31,42 @@ Let's go to the disco <Time datetime="2026-01-01T00:00:00.000Z" />.
 
 Let's go to the disco <Time datetime="2026-01-01T00:00:00.000Z" />.
 
+```markdown
+This demonstrates `format="datetime"` explicitly (same as the default): <Time format="datetime" datetime="2026-01-01T00:00:00.000Z" />.
+```
+
+This demonstrates `format="datetime"` explicitly (same as the default): <Time format="datetime" datetime="2026-01-01T00:00:00.000Z" />.
+
+```markdown
+This demonstrates `formatStyle="short"` for a compact date: <Time format="datetime" formatStyle="short" datetime="2026-01-01T00:00:00.000Z" />.
+```
+
+This demonstrates `formatStyle="short"` for a compact date: <Time format="datetime" formatStyle="short" datetime="2026-01-01T00:00:00.000Z" />.
+
+```markdown
+This demonstrates showing a time and time zone name: <Time format="datetime" hour="2-digit" minute="2-digit" datetime="2026-01-01T00:00:00.000Z" />.
+```
+
+This demostrates showing a time that should adjust to user's local timezone: <Time format="datetime" hour="2-digit" minute="2-digit" datetime="2026-01-01T00:00:00.000Z" />.
+
+```markdown
+This demonstrates showing a time and time zone name: <Time format="datetime" hour="2-digit" minute="2-digit" timeZoneName="short" datetime="2026-01-01T00:00:00.000Z" />.
+```
+
+This demostrates showing a time and time zone name: <Time format="datetime" hour="2-digit" minute="2-digit" timeZoneName="short" datetime="2026-01-01T00:00:00.000Z" />.
+
+```markdown
+This demonstrates `format="relative"` with `tense="past"` and `precision="day"`: <Time format="relative" tense="past" precision="day" datetime="2020-01-01T00:00:00Z" />.
+```
+
+This demonstrates `format="relative"` with `tense="past"` and `precision="day"`: <Time format="relative" tense="past" precision="day" datetime="2020-01-01T00:00:00Z" />.
+
+```markdown
+This demonstrates `now` (uses the current time at render): <Time format="datetime" now />.
+```
+
+This demonstrates `now` (uses the current time at render): <Time format="datetime" now />.
+
 ## GFM
 
 ### Footnote
@@ -85,7 +103,11 @@ The references can be anywhere in the document, before or after their use:
 
 ### Strikethrough
 
-`~one~` or `~~two~~` tildes: ~one~ ~~two~~
+`~~two~~` tildes: ~~two~~
+
+### Subscript
+
+`~one~` tilde: Subscript~one~
 
 ### Table
 
@@ -1240,3 +1262,21 @@ Use SVG sprites for icons throughout your content:
 Encourage readers to subscribe to your newsletter:
 
 <Newsletter />
+
+### Social Sharing Component
+
+Add social sharing buttons for the article. The social image is auto-generated, and can be passed as an optional param to override the generated version.
+
+```markdown
+<Shares
+  title="Demo Page"
+  description="This is just a demo page to show how things work on the site"
+  url="/articles/demo"
+/>
+```
+
+<Shares
+  title="Demo Page"
+  description="This is just a demo page to show how things work on the site"
+  url="/articles/demo"
+/>

src/content/testimonials/english-first/index.mdx

@@ -5,4 +5,4 @@ publishDate: 2021-03-31
 tags: []
 ---
 
-We have had a web presence since 2006. When advancements in web technology passed our skill levels we hired various developers, but there was always a certain amount of monitoring and adjustment required to achieve the proper result. Working with Kevin has been a refreshing change. Kevin is an authority on web development and is clearly in the upper percentile in terms of developer qualifications. Kevin's invaluable suggestions and improvements helped create a stable, cross platform site.
+We have had a web presence since 2006. When advancements in web technology passed our skill levels we hired various developers, but there was always a certain amount of monitoring and adjustment required to achieve the proper result. Working with Kevin has been a refreshing change.

src/integrations/TestimonialsLengthWarning/__tests__/index.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { getVisibleCharacterCount, stripFrontmatter } from '../index'
+
+describe('TestimonialsLengthWarning', () => {
+  describe('stripFrontmatter', () => {
+    it('returns original string when no frontmatter exists', () => {
+      expect(stripFrontmatter('Hello world')).toBe('Hello world')
+    })
+
+    it('removes YAML frontmatter and trims body', () => {
+      const raw = [
+        '---',
+        'name: Test',
+        '---',
+        '',
+        'This is the body.',
+        '',
+      ].join('\n')
+
+      expect(stripFrontmatter(raw)).toBe('This is the body.')
+    })
+
+    it('returns original string when frontmatter is unterminated', () => {
+      const raw = ['---', 'name: Test', 'This is still frontmatter'].join('\n')
+      expect(stripFrontmatter(raw)).toBe(raw)
+    })
+  })
+
+  describe('getVisibleCharacterCount', () => {
+    it('normalizes whitespace before counting', () => {
+      const text = '  Hello\n\nworld\t  '
+      expect(getVisibleCharacterCount(text)).toBe('Hello world'.length)
+    })
+
+    it('returns 0 for blank strings', () => {
+      expect(getVisibleCharacterCount('   \n\n\t')).toBe(0)
+    })
+  })
+})