Today I would like to speak about a new experimental feature available in Astro 5.10 and beyond: live content collections. A live content collection allows you to fetch its data at runtime rather than build time, which is how a regular content collection would normally be used.
\nA well-known use case for a content collection is retrieving all the blog posts you have written and then rendering the matching post based on path processing in a āslug pageā. Anyone who has gone through the complete āBuild your first Astro Blogā tutorial should be familiar with how that works.
\nWhen running your Astro site in static mode, this requires all potential post paths to be either manually specified in the slug page or dynamically built using the getStaticPaths method. In either case, these paths are created at build time and cannot be changed afterwards. This is also true when you use server-side rendering (SSR), but the method for matching a path to a post is slightly different and not part of the goal of this post.
The important thing to realize is that all āregularā content collections need to have their matching paths resolved at build time for static sites and all the content must be present at build time when using either static builds or SSR.
\nWith live content collections, developers can take more control over how they obtain content for rendering. One thing you cannot do with regular content collections is have them fetch their data on-demand when a page is requested. Live content collections enable this.
\nFor this site, I have been slowly integrating bits and pieces of interesting concepts from the IndieWeb. One of these is āwebmentionsā. Without going into too much detail, webmentions are based on microformats and enable disparate, unconnected sites and services to āmentionā your content and for your site to be able to discover those mentions and process them how you see fit.
\nI am using a custom content loader to fetch webmentions from Webmention.io. I call it webmentionLoader because that seems appropriate. I have defined a Webmention interface based on suggestions from Claude Sonnet 4. This is a naive first pass, so Iām only going to show the parts that I actually needed to get this all to work:
export interface Webmention {\n // Core webmention properties\n id: string;\n source: string; // URL of the page that mentions your content\n target: string; // URL of your content being mentioned\n targetPath: string; // Path of the target URL (for easier filtering)\n ...\n}I also have a helper function to retrieve the webmentions for my domain. An API key is generated for each site you add to Webmention.io.
\nconst getMentionsHTML = async (apiKey: string) => {\n const response = await fetch(\n `https://webmention.io/api/mentions.html?token=${apiKey}`\n );\n if (!response.ok) {\n throw new Error(`Failed to fetch webmentions: ${response.statusText}`);\n }\n return response.text();\n};The actual live content loader function needs to return an object with three required properties:
\nname: a string to represent the name of the loaderloadCollection: an async function that will return the entire collection of data or a filtered setloadEntry: an async function that will return a single item in the collection based on a filterSince I want to customize the display of webmention data, I am using JSDOM to parse the HTML returned from the fetch in loadCollection. Another thing to note is that since webmentions are a many-to-one relation with posts, loadEntry will never be used, so I am only returning an error indicating it is not supported.
export const webmentionLoader = ({\n apiKey\n}: {\n apiKey: string;\n}): LiveLoader<Webmention> => {\n return {\n name: 'webmention-loader',\n loadCollection: async ({filter}) => {\n const {targetPath} = filter || {targetPath: ''};\n try {\n const webmentions: Webmention[] = await getMentionsHTML(apiKey).then(\n (html) => {\n const dom = new JSDOM(html);\n const doc = dom.window.document;\n const mentions = Array.from(\n doc.querySelectorAll('.h-entry.mention')\n );\n const items = mentions.map((element, index) => {\n // construct a target path from the target URL\n const target = element\n .querySelector('.u-mention-of')\n ?.getAttribute('href') as string;\n const postPath = target ? new URL(target).pathname : '';\n return {\n id: `${postPath}:${index}`,\n data: {\n author: {\n name: element.querySelector('.p-author')\n ?.textContent as string\n }\n },\n source: element\n .querySelector('.u-url')\n ?.getAttribute('href') as string,\n target,\n targetPath: postPath\n };\n });\n if (targetPath) {\n // Filter by targetPath if provided\n return items.filter((item) => item.targetPath === targetPath);\n }\n return items;\n }\n );\n\n return {\n entries: webmentions.map((mention) => ({\n id: mention.id,\n data: mention\n }))\n };\n } catch (error) {\n return {\n error: new Error(\n `Failed to retrieve webmentions: ${error instanceof Error ? error.message : 'Unknown error'}`\n )\n };\n }\n },\n // there can be multiple webmentions for the same target, so we will never use loadEntry\n loadEntry: async () => {\n return {\n error: new Error(`webmentionLoader does not support loadEntry`)\n };\n }\n };\n};Now, in my slug page I can handle blog posts as a regular content collection just like Iāve been doing and also grab any webmentions that match them.
\n---\nimport type {CollectionEntry} from 'astro:content';\nimport type {LiveDataEntry} from 'astro';\nimport type {Webmention} from '@lib/webmentionLoader';\nimport {getCollection, getLiveCollection, render} from 'astro:content';\nimport MarkdownPostLayout from '@layouts/MarkdownPostLayout.astro';\n\ninterface Props {\n post: CollectionEntry<'blog'>;\n postMentions: LiveDataEntry<Webmention>[];\n}\n\nconst {\n params: {slug},\n url\n} = Astro;\nconst currentPath = url.pathname.endsWith('/')\n ? url.pathname.slice(0, -1)\n : url.pathname;\nconst [post] = (await getCollection('blog', ({id}) => {\n return id === slug || id.startsWith(`${slug}/`);\n})) as Props['post'][];\nconst frontmatter = post?.data;\nconst {entries: webmentions, error} = await getLiveCollection('webmentions', {\n targetPath: currentPath\n});\nconst postMentions: Props['postMentions'] = [];\n\nif (error) {\n console.error(`Error fetching webmentions:, ${error}`);\n} else if (webmentions && webmentions.length > 0) {\n postMentions.push(\n ...(webmentions as LiveDataEntry<Webmention>[]).filter((mention) => {\n const {source, target} = mention.data;\n if (!target || !source) {\n return false;\n }\n try {\n const targetUrl = new URL(target);\n return targetUrl.pathname === currentPath;\n } catch {\n return target === currentPath;\n }\n })\n );\n}\nlet Content;\nif (post) {\n ({Content} = await render(post));\n}\n\nexport const prerender = false;\n---\n\n<MarkdownPostLayout\n frontmatter={frontmatter ?? {}}\n mentions={postMentions.map((m) => m.data)}\n>\n {Content && <Content />}\n</MarkdownPostLayout>It may be a little messy, but it gets the job done. If you want to see it in action, why not link to this page from your site and submit a mention to the handy manual submission form? The source URL will be the page where you linked to this page and the target URL will be this page. After a successful submission, reload this page and you should see it displayed above the footer. Hopefully š
After putting it all together, I can now retrieve and display webmentions associated with any blog post on sugardave.cloud, huzzah! In the future, I hope to implement other appropriate webmention collections for my posts. My next target is the u-in-reply-to type so I can see what others think about my posts. Once I have that, I am sure I will have another blog post about that journey.
Last week I found out that Robb Knight has a site called called Slash Pages, which details common top-level URLs that are found at /<name>.
I'd found out about this as someone had started contributing a /salary page section, and looking at both my own site, and the list of pages that have already been collected, I thought I'd create my own /slashes page.
I'll also be adding a few new options to the upstream Slash Pages site to add some things I've been doing too.
","text":"Last week I found out that Robb Knight has a site called called Slash Pages, which details common top-level URLs that are found at /