Move webmentions fetch to an Astro Action and fetch client-side instead of at build time

Author: webstackdev

.vscode/settings.json

@@ -10,6 +10,7 @@
     "AACN",
     "Abbrs",
     "Acronis",
+    "addrs",
     "adtech",
     "agentic",
     "AIMD",
@@ -133,6 +134,7 @@
     "HMGET",
     "HMSET",
     "hocho",
+    "Hrana",
     "HSTS",
     "htmlcsstoimage",
     "httpchk",
@@ -402,6 +404,7 @@
     "uppy",
     "upserts",
     "upstreamsvc",
+    "urandom",
     "uuidv",
     "valyala",
     "VCALENDAR",

HUBSPOT.md

@@ -202,13 +202,8 @@ All code samples in this article are licensed under the MIT License. Feel free t
 - Re-enable link validator in `astro.config.ts` when pdf / downloads sorted out
 
 - Uppy, Tus server, whatever other server needed for file upload on Contact Form component
-
-- There's a pretty long delay when you push the Content Switcher to go from short to deep dive, what's causing it? It should be fast - maybe it's a prefetch issue and should prefetch on page load
-
 - Contact page Uppy file upload not displaying. Submit button is huge on Contact page.
 
-- Hero animation not loading on home page.
-
 - Improve `<abbr>` styling: https://codepen.io/ire/pen/NoqWpm
 
 ## Header - "Squish" Effect
@@ -223,15 +218,4 @@ All code samples in this article are licensed under the MIT License. Feel free t
 
 - Home page reorganization: move the "What I Deliver" box from the Hero into the Backstage image. Move the Backstage image / video to the hero.
 
-- We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag like "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag
-
 - Add a "Preview Special" item to our Download CTA that lets the user know the Deep Dive content can be previewed in HTML format, and offer a switch to it.
-
-- Tags should break more evenly across two lines when there's a lot of them, instead of forcing the author name and date to break across two lines: platform-engineering-metrics-lead-time-developer-friction/index.mdx
-
-17:15:36 [200] /articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation 414ms
-[WebMentions] Failed to fetch mentions for https://www.webstackbuilders.com/articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation. Will retry in 60s. DOMException [TimeoutError]: The operation was aborted due to timeout
-    at node:internal/deps/undici/undici:15445:13
-    at async requestWebmentions (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/components/WebMentions/server/index.ts:199:20)
-    at async eval (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/components/WebMentions/index.astro:27:18)
-17:15:46 [200] /_vtbot_inspection_chamber.js 1ms

TAGS.md

@@ -238,6 +238,6 @@
     "zod": "4.3.6"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.59.0"
+    "@rollup/rollup-linux-x64-gnu": "^4.60.0"
   }
 }

_TODO.md

@@ -3,11 +3,13 @@ import { downloads } from './downloads/action'
 import { gdpr } from './gdpr/action'
 import { newsletter } from './newsletter/action'
 import { search } from './search/action'
+import { webmentions } from './webmentions/action'
 
 export const server = {
   contact,
   downloads,
   gdpr,
   newsletter,
   search,
+  webmentions,
 }

MERMAID.md docs/MERMAID.mdMERMAID.md renamed to docs/MERMAID.md

@@ -0,0 +1,15 @@
+export interface WebmentionDisplayItem {
+  authorName: string
+  authorUrl: string
+  avatarUrl: string
+  contentHtml: string
+  id: string
+  published: string
+  sourceUrl: string
+}
+
+export interface WebmentionsListResult {
+  likesCount: number
+  mentions: WebmentionDisplayItem[]
+  repostsCount: number
+}

package-lock.json

@@ -0,0 +1,123 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+type MockedAction<Input, Output> = {
+  handler: (input: Input) => Promise<Output>
+}
+
+const throwActionErrorMock = vi.fn()
+
+vi.mock('astro:actions', () => ({
+  defineAction: (config: unknown) => config,
+}))
+
+vi.mock('@actions/utils/errors', () => ({
+  throwActionError: throwActionErrorMock,
+}))
+
+vi.mock('@components/WebMentions/server', () => ({
+  fetchWebmentions: vi.fn(),
+}))
+
+describe('webmentions actions', () => {
+  beforeEach(() => {
+    throwActionErrorMock.mockReset()
+    vi.resetModules()
+  })
+
+  it('returns normalized mention display data and interaction counts', async () => {
+    const { fetchWebmentions } = await import('@components/WebMentions/server')
+    const fetchWebmentionsMock = vi.mocked(fetchWebmentions)
+
+    fetchWebmentionsMock.mockResolvedValue([
+      {
+        'wm-id': 'mention-1',
+        'wm-target': 'https://example.com/post',
+        'wm-source': 'https://elsewhere.example.com/1',
+        'wm-property': 'mention-of',
+        published: '2024-01-01T00:00:00.000Z',
+        author: {
+          name: 'Alice',
+          photo: 'https://elsewhere.example.com/alice.jpg',
+          url: 'https://elsewhere.example.com/alice',
+        },
+        content: {
+          value: '<p>Nice post</p>',
+        },
+      },
+      {
+        'wm-id': 'like-1',
+        'wm-target': 'https://example.com/post',
+        'wm-source': 'https://elsewhere.example.com/2',
+        'wm-property': 'like-of',
+        published: '2024-01-02T00:00:00.000Z',
+        author: {
+          name: 'Bob',
+          url: 'https://elsewhere.example.com/bob',
+        },
+      },
+      {
+        'wm-id': 'repost-1',
+        'wm-target': 'https://example.com/post',
+        'wm-source': 'https://elsewhere.example.com/3',
+        'wm-property': 'repost-of',
+        published: '2024-01-03T00:00:00.000Z',
+        author: {
+          name: 'Charlie',
+          url: 'https://elsewhere.example.com/charlie',
+        },
+      },
+    ])
+
+    const { webmentions } = await import('../action')
+    const listAction = webmentions.list as unknown as MockedAction<
+      { url: string },
+      {
+        likesCount: number
+        mentions: Array<{
+          authorName: string
+          authorUrl: string
+          avatarUrl: string
+          contentHtml: string
+          id: string
+          published: string
+          sourceUrl: string
+        }>
+        repostsCount: number
+      }
+    >
+    const result = await listAction.handler({ url: 'https://example.com/post' })
+
+    expect(fetchWebmentionsMock).toHaveBeenCalledWith('https://example.com/post')
+    expect(result.likesCount).toBe(1)
+    expect(result.repostsCount).toBe(1)
+    expect(result.mentions).toHaveLength(1)
+    expect(result.mentions[0]).toMatchObject({
+      authorName: 'Alice',
+      authorUrl: 'https://elsewhere.example.com/alice',
+      avatarUrl: 'https://elsewhere.example.com/alice.jpg',
+      contentHtml: '<p>Nice post</p>',
+      id: 'mention-1',
+      published: '2024-01-01T00:00:00.000Z',
+      sourceUrl: 'https://elsewhere.example.com/1',
+    })
+  })
+
+  it('reports unexpected handler failures through the shared action error helper', async () => {
+    const failure = new Error('Unexpected parse failure')
+    const { fetchWebmentions } = await import('@components/WebMentions/server')
+    vi.mocked(fetchWebmentions).mockRejectedValue(failure)
+    throwActionErrorMock.mockImplementation(() => {
+      throw failure
+    })
+
+    const { webmentions } = await import('../action')
+    const listAction = webmentions.list as unknown as MockedAction<{ url: string }, unknown>
+
+    await expect(listAction.handler({ url: 'https://example.com/post' })).rejects.toThrow(failure)
+    expect(throwActionErrorMock).toHaveBeenCalledWith(
+      failure,
+      { route: '/_actions/webmentions/list', operation: 'list' },
+      { fallbackMessage: 'Webmentions could not be loaded.' }
+    )
+  })
+})