From a83755fc3247421bfde96781736b6eed89056632 Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:18:50 -0400
Subject: [PATCH 1/6] Refactor date-range rendering to use macros + and
 duration calcs to experience section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- add a reusable Nunjucks date-range component for education and experience entries
  - renderDateRange covers how we rendered date ranges before
  - renderDateRangeWithDuration adds calculated duration support
- compute human-readable month/year durations in shared date utilities
- enhance ongoing roles client-side with animated “and counting” durations
- add duration-specific styles and accessibility support for reduced motion
- wire the new asset entry and duration filter through Eleventy/Vite
- ensure we compute durations consistently (we were mixing UTC/local dates previously)
---
 _includes/components/date-range.njk |  18 ++++
 _includes/layouts/base.njk          |   1 +
 _includes/sections/education.njk    |   4 +-
 _includes/sections/experience.njk   |   6 +-
 assets/scripts/main.js              | 123 ++++++++++++++++++++++++++++
 assets/styles/_duration.scss        |  83 +++++++++++++++++++
 assets/styles/_layout.scss          |  12 +++
 assets/styles/main.scss             |   1 +
 eleventy.config.mjs                 |  15 +++-
 package.json                        |   4 +-
 src/shared/date.mjs                 | 102 +++++++++++++++++++++--
 11 files changed, 356 insertions(+), 13 deletions(-)
 create mode 100644 _includes/components/date-range.njk
 create mode 100644 assets/scripts/main.js
 create mode 100644 assets/styles/_duration.scss

diff --git a/_includes/components/date-range.njk b/_includes/components/date-range.njk
new file mode 100644
index 0000000..9783f24
--- /dev/null
+++ b/_includes/components/date-range.njk
@@ -0,0 +1,18 @@
+{% macro renderDateRange(start, end, includeDuration=false) %}
+  <aside class="date-range">
+    <time datetime="{{ start }}">{{ start | monthYear }}</time>
+    &ndash;
+    <time{% if end %} datetime="{{ end }}"{% endif %}>{{ end | monthYearOrPresent }}</time>
+    {% if includeDuration %}
+      {% if end %}
+        <span class="duration">({{ start | durationText(end) }})</span>
+      {% else %}
+        <span class="duration duration--ongoing" data-start="{{ start }}" hidden></span>
+      {% endif %}
+    {% endif %}
+  </aside>
+{% endmacro %}
+
+{% macro renderDateRangeWithDuration(start, end) %}
+  {{ renderDateRange(start, end, true) }}
+{% endmacro %}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index f1c8cdc..77d91b9 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -39,6 +39,7 @@
         {{ content | safe }}
       </article>
     </section>
+    <script type="module" src="/assets/scripts/main.js"></script>
     <script async defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.gtag_id }}"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
diff --git a/_includes/sections/education.njk b/_includes/sections/education.njk
index 4c11907..835ead4 100644
--- a/_includes/sections/education.njk
+++ b/_includes/sections/education.njk
@@ -1,3 +1,5 @@
+{% from "components/date-range.njk" import renderDateRange %}
+
 <section class="resume-section education">
   <h2>Education</h2>
   <ul>
@@ -6,7 +8,7 @@
         <input type="checkbox" id="edu_{{ entry.id }}" />
         <label for="edu_{{ entry.id }}">
           {{ entry.degree }}, <a class="company-name" href="{{ entry.institution.url }}" rel="external" target="_blank">{{ entry.institution.name }}</a>
-          <aside class="date-range"><time datetime="{{ entry.start }}">{{ entry.start | monthYear }}</time> &ndash; <time datetime="{{ entry.end }}">{{ entry.end | monthYear }}</time></aside>
+          {{ renderDateRange(entry.start, entry.end) }}
         </label>
         <ul class="expandable-content">
           {% for detail in entry.details %}
diff --git a/_includes/sections/experience.njk b/_includes/sections/experience.njk
index efc6a48..910df6a 100644
--- a/_includes/sections/experience.njk
+++ b/_includes/sections/experience.njk
@@ -1,3 +1,5 @@
+{% from "components/date-range.njk" import renderDateRangeWithDuration %}
+
 <section class="resume-section experience">
   <h2>Experience</h2>
   <ul>
@@ -20,14 +22,14 @@
           {% if entry.company.suffix_html %}
             {{ " " }}{{ entry.company.suffix_html | safe }}
           {% endif %}
-          <aside class="date-range"><time datetime="{{ entry.start }}">{{ entry.start | monthYear }}</time> &ndash; <time{% if entry.end %} datetime="{{ entry.end }}"{% endif %}>{{ entry.end | monthYearOrPresent }}</time></aside>
+          {{ renderDateRangeWithDuration(entry.start, entry.end) }}
         </label>
         <ul class="expandable-content">
           {% if entry.positions %}
             {% for position in entry.positions %}
               <li>
                 <strong>{{ position.title }}</strong>
-                <aside class="date-range"><time datetime="{{ position.start }}">{{ position.start | monthYear }}</time> &ndash; <time{% if position.end %} datetime="{{ position.end }}"{% endif %}>{{ position.end | monthYearOrPresent }}</time></aside>
+                {{ renderDateRangeWithDuration(position.start, position.end) }}
                 <ul>
                   {% for highlight in position.highlights %}
                     <li>{{ highlight | safe }}</li>
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
new file mode 100644
index 0000000..469ac7f
--- /dev/null
+++ b/assets/scripts/main.js
@@ -0,0 +1,123 @@
+import {
+  diffInMonths,
+  formatDuration,
+  getCurrentLocalYearMonth,
+  getDurationParts,
+  parseYearMonth,
+} from '@shared/date.mjs'
+
+function buildAnimatedNumber(document, value, { startAt = 0 } = {}) {
+  const number = document.createElement('span')
+  number.className = 'duration-number'
+  number.style.setProperty('--duration-digits', String(String(value).length))
+
+  const track = document.createElement('span')
+  track.className = 'duration-number-track'
+  track.style.setProperty('--duration-target', String(value - startAt))
+
+  for (let currentValue = startAt; currentValue <= value; currentValue += 1) {
+    const cell = document.createElement('span')
+    cell.className = 'duration-number-cell'
+    cell.textContent = String(currentValue)
+    track.append(cell)
+  }
+
+  number.append(track)
+  return number
+}
+
+function buildAnimatedDuration(document, totalMonths) {
+  const display = document.createElement('span')
+  display.className = 'duration-display'
+  display.setAttribute('aria-hidden', 'true')
+  display.append('(')
+
+  getDurationParts(totalMonths).forEach((part, index) => {
+    if (index > 0) {
+      display.append(', ')
+    }
+
+    const partNode = document.createElement('span')
+    partNode.className = 'duration-part'
+    partNode.append(
+      buildAnimatedNumber(document, part.value, {
+        startAt: 1,
+      }),
+    )
+    partNode.append(` ${part.label}`)
+    display.append(partNode)
+  })
+
+  display.append(' and counting...')
+  display.append(')')
+  return display
+}
+
+function setReducedMotionDuration(node, durationLabel) {
+  node.textContent = durationLabel
+}
+
+function setAnimatedDuration(document, node, durationLabel, totalMonths) {
+  const srText = document.createElement('span')
+  srText.className = 'visually-hidden'
+  srText.textContent = durationLabel
+
+  node.append(srText, buildAnimatedDuration(document, totalMonths))
+}
+
+function enhanceOngoingDurationNode(
+  node,
+  { document, currentMonth, prefersReducedMotion, requestAnimationFrame },
+) {
+  const startDate = parseYearMonth(node.getAttribute('data-start'))
+
+  if (!startDate) {
+    return
+  }
+
+  const totalMonths = diffInMonths(startDate, currentMonth)
+  const durationLabel = `(${formatDuration(totalMonths)} and counting...)`
+  node.textContent = ''
+
+  if (prefersReducedMotion) {
+    setReducedMotionDuration(node, durationLabel)
+  } else {
+    setAnimatedDuration(document, node, durationLabel, totalMonths)
+  }
+
+  node.hidden = false
+
+  if (!prefersReducedMotion) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.classList.add('is-visible')
+      })
+    })
+  }
+}
+
+export function enhanceOngoingDurations({
+  document,
+  now = new Date(),
+  prefersReducedMotion = false,
+  requestAnimationFrame = (callback) => callback(),
+} = {}) {
+  const currentMonth = getCurrentLocalYearMonth(now)
+
+  for (const node of document.querySelectorAll('.duration--ongoing[data-start]')) {
+    enhanceOngoingDurationNode(node, {
+      document,
+      currentMonth,
+      prefersReducedMotion,
+      requestAnimationFrame,
+    })
+  }
+}
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  enhanceOngoingDurations({
+    document,
+    prefersReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    requestAnimationFrame: window.requestAnimationFrame.bind(window),
+  })
+}
diff --git a/assets/styles/_duration.scss b/assets/styles/_duration.scss
new file mode 100644
index 0000000..6b050e6
--- /dev/null
+++ b/assets/styles/_duration.scss
@@ -0,0 +1,83 @@
+.resume-section {
+  --duration-fade-duration: 1s;
+  --duration-fade-easing: ease-out;
+  --duration-roll-duration: 1.5s;
+  --duration-roll-easing: cubic-bezier(0.42, 0, 0.58, 1);
+
+  .duration {
+    white-space: nowrap;
+  }
+
+  .duration--ongoing {
+    opacity: 0;
+  }
+
+  .duration--ongoing.is-visible {
+    opacity: 1;
+    transition: opacity var(--duration-fade-duration) var(--duration-fade-easing);
+  }
+
+  .duration-display {
+    display: inline;
+  }
+
+  .duration-part {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.2em;
+    white-space: nowrap;
+  }
+
+  .duration-number {
+    display: inline-block;
+    width: calc(var(--duration-digits, 1) * 1ch);
+    height: 1em;
+    overflow: hidden;
+    line-height: 1;
+    text-align: right;
+    vertical-align: text-bottom;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .duration-number-track {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    transform: translateY(0);
+    animation: duration-roll var(--duration-roll-duration) var(--duration-roll-easing) forwards;
+  }
+
+  .duration-number-cell {
+    display: block;
+    height: 1em;
+    min-width: calc(var(--duration-digits, 1) * 1ch);
+    text-align: right;
+  }
+}
+
+@keyframes duration-roll {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(calc(var(--duration-target, 0) * -1em));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .resume-section {
+    .duration--ongoing {
+      opacity: 1;
+    }
+
+    .duration--ongoing.is-visible {
+      transition: none;
+    }
+
+    .duration-number-track {
+      animation: none;
+      transform: translateY(calc(var(--duration-target, 0) * -1em));
+    }
+  }
+}
diff --git a/assets/styles/_layout.scss b/assets/styles/_layout.scss
index 565d1d7..bd439b2 100644
--- a/assets/styles/_layout.scss
+++ b/assets/styles/_layout.scss
@@ -21,6 +21,18 @@ abbr[title] {
   border-bottom: none;
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .header {
   position: fixed;
   bottom: 0;
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1d7aafe..b41247c 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,6 +1,7 @@
 @use 'normalize';
 @use '_typography';
 @use '_layout';
+@use '_duration';
 @use '_print';
 
 // http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 8895f9a..5ecc9d7 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -2,7 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import EleventyVitePlugin from '@11ty/eleventy-plugin-vite'
-import { formatMonthYear } from './src/shared/date.mjs'
+import { formatDurationRange, formatMonthYear } from './src/shared/date.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -21,7 +21,15 @@ function toAbsoluteUrl(pathname, origin = deployOrigin) {
 }
 
 export default function (eleventyConfig) {
-  eleventyConfig.addPlugin(EleventyVitePlugin)
+  eleventyConfig.addPlugin(EleventyVitePlugin, {
+    viteOptions: {
+      resolve: {
+        alias: {
+          '@shared': path.join(__dirname, 'src', 'shared'),
+        },
+      },
+    },
+  })
 
   eleventyConfig.addGlobalData('deployOrigin', deployOrigin)
   eleventyConfig.addFilter('absoluteUrl', (pathname, origin = deployOrigin) => {
@@ -57,6 +65,9 @@ export default function (eleventyConfig) {
 
     return formatMonthYear(value)
   })
+  eleventyConfig.addFilter('durationText', (startValue, endValue) => {
+    return formatDurationRange(startValue, endValue)
+  })
 
   eleventyConfig.addPassthroughCopy('assets')
   eleventyConfig.ignores.add('README.md')
diff --git a/package.json b/package.json
index c72ebf3..5283943 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     "test": "echo 'no tests (yet)'",
     "format": "oxfmt --write .",
     "format:check": "oxfmt --check .",
-    "lint": "oxlint eleventy.config.mjs src",
-    "lint:fix": "oxlint --fix eleventy.config.mjs src"
+    "lint": "oxlint eleventy.config.mjs src assets/scripts",
+    "lint:fix": "oxlint --fix eleventy.config.mjs src assets/scripts"
   },
   "dependencies": {},
   "devDependencies": {
diff --git a/src/shared/date.mjs b/src/shared/date.mjs
index e5e6d01..054e23d 100644
--- a/src/shared/date.mjs
+++ b/src/shared/date.mjs
@@ -1,9 +1,16 @@
-const monthYearFormatter = new Intl.DateTimeFormat('en-US', {
+const monthFormatter = new Intl.DateTimeFormat('en-US', {
   month: 'long',
-  year: 'numeric',
   timeZone: 'UTC',
 })
 
+function getYearMonthIndex(yearMonth) {
+  return yearMonth.year * 12 + (yearMonth.month - 1)
+}
+
+function normalizeDisplayMonthCount(totalMonths) {
+  return Math.max(1, totalMonths)
+}
+
 export function parseYearMonth(value) {
   if (!value) {
     return null
@@ -20,7 +27,14 @@ export function parseYearMonth(value) {
     return null
   }
 
-  return new Date(Date.UTC(year, month - 1, 1))
+  return { year, month }
+}
+
+function formatYearMonthValue(yearMonth) {
+  const monthName = monthFormatter.format(
+    new Date(Date.UTC(yearMonth.year, yearMonth.month - 1, 1)),
+  )
+  return `${monthName} ${yearMonth.year}`
 }
 
 export function formatMonthYear(value) {
@@ -28,10 +42,86 @@ export function formatMonthYear(value) {
     return ''
   }
 
-  const date = value instanceof Date ? value : parseYearMonth(value)
-  if (!date) {
+  const yearMonth =
+    typeof value === 'string'
+      ? parseYearMonth(value)
+      : value && typeof value.year === 'number' && typeof value.month === 'number'
+        ? value
+        : null
+
+  if (!yearMonth) {
     return value
   }
 
-  return monthYearFormatter.format(date)
+  return formatYearMonthValue(yearMonth)
+}
+
+export function diffInMonths(start, end) {
+  const totalMonths = getYearMonthIndex(end) - getYearMonthIndex(start)
+
+  if (totalMonths < 0) {
+    throw new Error('End date must not be earlier than start date')
+  }
+
+  return totalMonths
+}
+
+export function getDurationParts(totalMonths) {
+  const normalizedMonths = normalizeDisplayMonthCount(totalMonths)
+  const years = Math.floor(normalizedMonths / 12)
+  const months = normalizedMonths % 12
+  const parts = []
+
+  if (years) {
+    parts.push({
+      unit: 'year',
+      value: years,
+      label: years === 1 ? 'year' : 'years',
+    })
+  }
+
+  if (months || !parts.length) {
+    const monthValue = months || 1
+
+    parts.push({
+      unit: 'month',
+      value: monthValue,
+      label: monthValue === 1 ? 'month' : 'months',
+    })
+  }
+
+  return parts
+}
+
+export function formatDuration(totalMonths) {
+  return getDurationParts(totalMonths)
+    .map(({ value, label }) => `${value} ${label}`)
+    .join(', ')
+}
+
+export function formatDurationRange(startValue, endValue) {
+  const startDate = parseYearMonth(startValue)
+
+  if (!startDate) {
+    throw new Error(`Invalid start date: ${startValue}`)
+  }
+
+  if (!endValue) {
+    return ''
+  }
+
+  const endDate = parseYearMonth(endValue)
+
+  if (!endDate) {
+    throw new Error(`Invalid end date: ${endValue}`)
+  }
+
+  return formatDuration(diffInMonths(startDate, endDate))
+}
+
+export function getCurrentLocalYearMonth(now = new Date()) {
+  return {
+    year: now.getFullYear(),
+    month: now.getMonth() + 1,
+  }
 }

From 54906635c6124c29ca7e48f9d65b699993692e22 Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:24:19 -0400
Subject: [PATCH 2/6] Add test coverage and tooling for the new date-range
 duration feature.

- add Vitest and basic config for the Eleventy/Vite codebase
- cover shared date parsing, formatting, and month-diff helpers
- cover client-side enhancement for ongoing duration displays
- verify the experience template renders ended and ongoing durations correctly
- add a `test:watch` script and include tests in the `checks` workflow
- ensure tests aren't copied to output directory during builds
---
 _includes/sections/experience.test.mjs |  48 ++++
 assets/scripts/main.test.mjs           | 121 ++++++++
 eleventy.config.mjs                    |   4 +-
 package-lock.json                      | 377 ++++++++++++++++++++++++-
 package.json                           |   6 +-
 src/shared/date.test.mjs               | 102 +++++++
 vitest.config.mjs                      |  13 +
 7 files changed, 667 insertions(+), 4 deletions(-)
 create mode 100644 _includes/sections/experience.test.mjs
 create mode 100644 assets/scripts/main.test.mjs
 create mode 100644 src/shared/date.test.mjs
 create mode 100644 vitest.config.mjs

diff --git a/_includes/sections/experience.test.mjs b/_includes/sections/experience.test.mjs
new file mode 100644
index 0000000..2c01009
--- /dev/null
+++ b/_includes/sections/experience.test.mjs
@@ -0,0 +1,48 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import nunjucks from 'nunjucks'
+import { describe, expect, it } from 'vitest'
+import { formatDurationRange, formatMonthYear } from '../../src/shared/date.mjs'
+
+const templatePath = path.join(process.cwd(), '_includes', 'sections', 'experience.njk')
+const templateSource = fs.readFileSync(templatePath, 'utf8')
+
+const env = new nunjucks.Environment(
+  new nunjucks.FileSystemLoader(path.join(process.cwd(), '_includes')),
+)
+env.addFilter('monthYear', (value) => formatMonthYear(value))
+env.addFilter('monthYearOrPresent', (value) => (value ? formatMonthYear(value) : 'Present'))
+env.addFilter('durationText', (startValue, endValue) => formatDurationRange(startValue, endValue))
+
+describe('experience template', () => {
+  it('renders ended and ongoing duration markup correctly', () => {
+    const html = env.renderString(templateSource, {
+      resume: {
+        experience: [
+          {
+            id: 'ended-role',
+            title: 'Engineer',
+            start: '2021-06',
+            end: '2022-06',
+            company: { name: 'Ended Co' },
+            highlights: ['Shipped feature'],
+          },
+          {
+            id: 'ongoing-role',
+            title: 'Lead Engineer',
+            start: '2024-01',
+            company: { name: 'Ongoing Co' },
+            highlights: ['Running team'],
+          },
+        ],
+      },
+    })
+
+    expect(html).toContain('<span class="duration">(1 year)</span>')
+    expect(html).toContain(
+      '<span class="duration duration--ongoing" data-start="2024-01" hidden></span>',
+    )
+    expect(html).toContain('June 2021')
+    expect(html).toContain('Present')
+  })
+})
diff --git a/assets/scripts/main.test.mjs b/assets/scripts/main.test.mjs
new file mode 100644
index 0000000..f25b3fa
--- /dev/null
+++ b/assets/scripts/main.test.mjs
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest'
+import { enhanceOngoingDurations } from './main.js'
+
+class FakeElement {
+  constructor(tagName) {
+    this.tagName = tagName
+    this.children = []
+    this.className = ''
+    this.attributes = new Map()
+    this.hidden = true
+    this._textContent = ''
+    this.style = {
+      properties: new Map(),
+      setProperty: (name, value) => {
+        this.style.properties.set(name, value)
+      },
+    }
+    this.classList = {
+      classes: new Set(),
+      add: (name) => {
+        this.classList.classes.add(name)
+      },
+      contains: (name) => this.classList.classes.has(name),
+    }
+  }
+
+  set textContent(value) {
+    this._textContent = value
+    this.children = []
+  }
+
+  get textContent() {
+    return `${this._textContent}${this.children.map((child) => child.textContent).join('')}`
+  }
+
+  setAttribute(name, value) {
+    this.attributes.set(name, String(value))
+  }
+
+  getAttribute(name) {
+    return this.attributes.get(name) ?? null
+  }
+
+  append(...nodes) {
+    for (const node of nodes) {
+      if (typeof node === 'string') {
+        const textNode = new FakeElement('#text')
+        textNode.textContent = node
+        this.children.push(textNode)
+        continue
+      }
+
+      this.children.push(node)
+    }
+  }
+}
+
+class FakeDocument {
+  constructor(nodes) {
+    this.nodes = nodes
+  }
+
+  createElement(tagName) {
+    return new FakeElement(tagName)
+  }
+
+  querySelectorAll(selector) {
+    if (selector === '.duration--ongoing[data-start]') {
+      return this.nodes
+    }
+
+    return []
+  }
+}
+
+function createDurationNode(startValue) {
+  const node = new FakeElement('span')
+  node.className = 'duration duration--ongoing'
+  node.setAttribute('data-start', startValue)
+  return node
+}
+
+describe('enhanceOngoingDurations', () => {
+  it('renders reduced-motion text for ongoing durations', () => {
+    const node = createDurationNode('2025-02')
+    const document = new FakeDocument([node])
+
+    enhanceOngoingDurations({
+      document,
+      now: new Date('2026-04-18T15:45:00.000Z'),
+      prefersReducedMotion: true,
+    })
+
+    expect(node.hidden).toBe(false)
+    expect(node.textContent).toBe('(1 year, 2 months and counting...)')
+  })
+
+  it('renders accessible text plus animated markup when motion is allowed', () => {
+    const node = createDurationNode('2025-02')
+    const document = new FakeDocument([node])
+    let animationScheduled = false
+
+    enhanceOngoingDurations({
+      document,
+      now: new Date('2026-04-18T15:45:00.000Z'),
+      requestAnimationFrame: (callback) => {
+        animationScheduled = true
+        callback()
+      },
+    })
+
+    expect(node.hidden).toBe(false)
+    expect(node.children).toHaveLength(2)
+    expect(node.children[0].className).toBe('visually-hidden')
+    expect(node.children[0].textContent).toBe('(1 year, 2 months and counting...)')
+    expect(node.children[1].className).toBe('duration-display')
+    expect(node.children[1].attributes.get('aria-hidden')).toBe('true')
+    expect(node.classList.contains('is-visible')).toBe(true)
+    expect(animationScheduled).toBe(true)
+  })
+})
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 5ecc9d7..9171e54 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -69,6 +69,8 @@ export default function (eleventyConfig) {
     return formatDurationRange(startValue, endValue)
   })
 
-  eleventyConfig.addPassthroughCopy('assets')
+  eleventyConfig.addPassthroughCopy('assets', {
+    filter: ['**/*', '!**/*.test.*'],
+  })
   eleventyConfig.ignores.add('README.md')
 }
diff --git a/package-lock.json b/package-lock.json
index 40f68b6..080719e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "oxfmt": "^0.35.0",
         "oxlint": "^1.50.0",
         "sass": "^1.97.3",
-        "vite": "^7.3.1"
+        "vite": "^7.3.1",
+        "vitest": "^4.1.2"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -662,6 +663,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@oxfmt/binding-android-arm-eabi": {
       "version": "0.35.0",
       "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.35.0.tgz",
@@ -2001,6 +2009,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2008,6 +2041,119 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.2.tgz",
+      "integrity": "sha512-gbu+7B0YgUJ2nkdsRJrFFW6X7NTP44WlhiclHniUhxADQJH5Szt9mZ9hWnJPJ8YwOK5zUOSSlSvyzRf0u1DSBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.2",
+        "@vitest/utils": "4.1.2",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.2.tgz",
+      "integrity": "sha512-Ize4iQtEALHDttPRCmN+FKqOl2vxTiNUhzobQFFt/BM1lRUTG7zRCLOykG/6Vo4E4hnUdfVLo5/eqKPukcWW7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.2",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.2.tgz",
+      "integrity": "sha512-dwQga8aejqeuB+TvXCMzSQemvV9hNEtDDpgUKDzOmNQayl2OG241PSWeJwKRH3CiC+sESrmoFd49rfnq7T4RnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.2.tgz",
+      "integrity": "sha512-Gr+FQan34CdiYAwpGJmQG8PgkyFVmARK8/xSijia3eTFgVfpcpztWLuP6FttGNfPLJhaZVP/euvujeNYar36OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.2",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.2.tgz",
+      "integrity": "sha512-g7yfUmxYS4mNxk31qbOYsSt2F4m1E02LFqO53Xpzg3zKMhLAPZAjjfyl9e6z7HrW6LvUdTwAQR3HHfLjpko16A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.2",
+        "@vitest/utils": "4.1.2",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.2.tgz",
+      "integrity": "sha512-DU4fBnbVCJGNBwVA6xSToNXrkZNSiw59H8tcuUspVMsBDBST4nfvsPsEHDHGtWRRnqBERBQu7TrTKskmjqTXKA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.2.tgz",
+      "integrity": "sha512-xw2/TiX82lQHA06cgbqRKFb5lCAy3axQ4H4SoUFhUsg+wztiet+co86IAMDtF6Vm1hc7J6j09oh/rgDn+JdKIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.2",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -2125,6 +2271,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2211,6 +2367,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2253,6 +2419,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2414,6 +2587,13 @@
         "errno": "cli.js"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -2500,6 +2680,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -2520,6 +2710,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -2967,6 +3167,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/markdown-it": {
       "version": "14.1.1",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
@@ -3200,6 +3410,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -3315,6 +3536,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3644,6 +3872,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3694,6 +3929,13 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -3704,6 +3946,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz",
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/strip-bom-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
@@ -3714,6 +3963,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
+      "integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3741,6 +4007,16 @@
         "node": "^20.0.0 || >=22.0.0"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3863,6 +4139,105 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.2.tgz",
+      "integrity": "sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.2",
+        "@vitest/mocker": "4.1.2",
+        "@vitest/pretty-format": "4.1.2",
+        "@vitest/runner": "4.1.2",
+        "@vitest/snapshot": "4.1.2",
+        "@vitest/spy": "4.1.2",
+        "@vitest/utils": "4.1.2",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.2",
+        "@vitest/browser-preview": "4.1.2",
+        "@vitest/browser-webdriverio": "4.1.2",
+        "@vitest/ui": "4.1.2",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ws": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
diff --git a/package.json b/package.json
index 5283943..fbfa9ea 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "build": "eleventy",
     "clean": "rm -rf _site",
     "rebuild": "npm run clean && npm run build",
-    "test": "echo 'no tests (yet)'",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "format": "oxfmt --write .",
     "format:check": "oxfmt --check .",
     "lint": "oxlint eleventy.config.mjs src assets/scripts",
@@ -30,6 +31,7 @@
     "oxfmt": "^0.35.0",
     "oxlint": "^1.50.0",
     "sass": "^1.97.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.1.2"
   }
 }
diff --git a/src/shared/date.test.mjs b/src/shared/date.test.mjs
new file mode 100644
index 0000000..8ef4cd0
--- /dev/null
+++ b/src/shared/date.test.mjs
@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import {
+  diffInMonths,
+  formatDuration,
+  formatDurationRange,
+  formatMonthYear,
+  getCurrentLocalYearMonth,
+  getDurationParts,
+  parseYearMonth,
+} from './date.mjs'
+
+describe('parseYearMonth', () => {
+  it('parses valid year-month strings', () => {
+    expect(parseYearMonth('2021-06')).toEqual({ year: 2021, month: 6 })
+  })
+
+  it('returns null for invalid values', () => {
+    expect(parseYearMonth('2021-13')).toBeNull()
+    expect(parseYearMonth('2021-6')).toBeNull()
+    expect(parseYearMonth(null)).toBeNull()
+  })
+})
+
+describe('diffInMonths', () => {
+  it('returns zero for the same month', () => {
+    expect(diffInMonths(parseYearMonth('2021-06'), parseYearMonth('2021-06'))).toBe(0)
+  })
+
+  it('returns month differences across boundaries', () => {
+    expect(diffInMonths(parseYearMonth('2021-06'), parseYearMonth('2021-07'))).toBe(1)
+    expect(diffInMonths(parseYearMonth('2015-04'), parseYearMonth('2021-05'))).toBe(73)
+  })
+
+  it('throws when the end date is earlier than the start date', () => {
+    expect(() => diffInMonths(parseYearMonth('2021-07'), parseYearMonth('2021-06'))).toThrow(
+      /earlier/,
+    )
+  })
+})
+
+describe('getDurationParts', () => {
+  it('normalizes zero months to a one-month display minimum', () => {
+    expect(getDurationParts(0)).toEqual([{ unit: 'month', value: 1, label: 'month' }])
+  })
+
+  it('returns a month-only duration when under a year', () => {
+    expect(getDurationParts(1)).toEqual([{ unit: 'month', value: 1, label: 'month' }])
+    expect(getDurationParts(2)).toEqual([{ unit: 'month', value: 2, label: 'months' }])
+  })
+
+  it('omits zero-month tails for whole years', () => {
+    expect(getDurationParts(12)).toEqual([{ unit: 'year', value: 1, label: 'year' }])
+  })
+
+  it('returns years and months for mixed durations', () => {
+    expect(getDurationParts(16)).toEqual([
+      { unit: 'year', value: 1, label: 'year' },
+      { unit: 'month', value: 4, label: 'months' },
+    ])
+  })
+})
+
+describe('formatDuration', () => {
+  it('formats singular and plural durations for display', () => {
+    expect(formatDuration(1)).toBe('1 month')
+    expect(formatDuration(12)).toBe('1 year')
+    expect(formatDuration(16)).toBe('1 year, 4 months')
+  })
+})
+
+describe('formatDurationRange', () => {
+  it('formats a complete date range for display', () => {
+    expect(formatDurationRange('2021-06', '2022-06')).toBe('1 year')
+  })
+
+  it('returns an empty string for ongoing ranges', () => {
+    expect(formatDurationRange('2021-06')).toBe('')
+  })
+
+  it('returns plain text rather than HTML markup', () => {
+    expect(formatDurationRange('2021-06', '2021-08')).toBe('2 months')
+    expect(formatDurationRange('2021-06', '2021-08')).not.toMatch(/<[^>]+>/)
+  })
+})
+
+describe('formatMonthYear', () => {
+  it('formats a parsed date in month-year form', () => {
+    expect(formatMonthYear('2021-06')).toBe('June 2021')
+  })
+})
+
+describe('getCurrentLocalYearMonth', () => {
+  it('returns the current local year and month', () => {
+    const result = getCurrentLocalYearMonth(new Date(2026, 3, 18, 15, 45, 0))
+    expect(result).toEqual({ year: 2026, month: 4 })
+  })
+
+  it('uses the local calendar month rather than the UTC month near boundaries', () => {
+    const result = getCurrentLocalYearMonth(new Date(2026, 4, 1, 0, 30, 0))
+    expect(result).toEqual({ year: 2026, month: 5 })
+  })
+})
diff --git a/vitest.config.mjs b/vitest.config.mjs
new file mode 100644
index 0000000..f85fb4b
--- /dev/null
+++ b/vitest.config.mjs
@@ -0,0 +1,13 @@
+import path from 'node:path'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@shared': path.resolve(__dirname, 'src', 'shared'),
+    },
+  },
+  test: {
+    exclude: ['**/node_modules/**', '**/.git/**', '**/_site/**', '**/.11ty-vite/**'],
+  },
+})

From 93402bf19b617b2b2d191f02e93cf682b35a4fa2 Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:25:45 -0400
Subject: [PATCH 3/6] package.json: add 'checks' script that runs lin, format,
 tests, and build

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index fbfa9ea..d7295a3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "start": "ELEVENTY_ENV=development eleventy --serve",
     "build": "eleventy",
     "clean": "rm -rf _site",
+    "checks": "npm run lint && npm run format:check && npm test && npm run build",
     "rebuild": "npm run clean && npm run build",
     "test": "vitest run",
     "test:watch": "vitest",

From 32241f556f3f0bac1017bf4fab206d33b431e9ec Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:26:06 -0400
Subject: [PATCH 4/6] package.json: remove empy 'dependencies' property

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index d7295a3..471cc0c 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "lint": "oxlint eleventy.config.mjs src assets/scripts",
     "lint:fix": "oxlint --fix eleventy.config.mjs src assets/scripts"
   },
-  "dependencies": {},
   "devDependencies": {
     "@11ty/eleventy": "^3.1.2",
     "@11ty/eleventy-plugin-vite": "^7.0.0",

From 8e555b809d92f97adb810a2e337478dbd86d6c2e Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:27:34 -0400
Subject: [PATCH 5/6] .gitignore: ignore .codex scratch file

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 18ce53a..a0a06f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 _site
+.codex

From c007a5a4e9a62e9462d3c267e4020ae585f0ffdf Mon Sep 17 00:00:00 2001
From: Dane Bertram <dbertram@gmail.com>
Date: Sat, 11 Apr 2026 09:37:47 -0400
Subject: [PATCH 6/6] pr-checks: include building in PR checks

---
 .github/workflows/pr-checks.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index 3cbec76..3b7d728 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -10,7 +10,7 @@ on:
 
 jobs:
   quality:
-    name: Lint, Format, Test
+    name: Lint, Format, Test, Build
     runs-on: ubuntu-latest
 
     steps:
@@ -34,3 +34,6 @@ jobs:
 
       - name: Test
         run: npm run test
+
+      - name: Build
+        run: npm run build