feat: blog federated links section (#1699)

Author: Kai-ros

app/components/BlogPostFederatedArticles.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { FederatedArticleInput } from '#shared/types/blog-post'
+
+const props = defineProps<{
+  headline: string
+  articles: FederatedArticleInput[]
+}>()
+
+const contentKey = computed(() => props.articles.map(a => a.url).join('-'))
+
+const { data: federatedArticles, status } = await useAsyncData(
+  `federated-articles-${contentKey.value}`,
+  () => useFederatedArticles(props.articles),
+  {
+    watch: [() => props.articles],
+    default: () => [],
+  },
+)
+</script>
+
+<template>
+  <article class="px-4 py-2 sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md">
+    <h2 class="font-mono text-xl font-medium text-fg">
+      {{ headline }}
+    </h2>
+    <section
+      v-if="federatedArticles?.length"
+      class="grid gap-4 grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] transition-[grid-template-cols]"
+    >
+      <a
+        :href="article.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        v-for="article in federatedArticles"
+        :key="article.url"
+        class="grid grid-cols-[auto_1fr] gap-x-5 no-underline hover:no-underline rounded-lg border border-border p-4 transition-shadow hover:shadow-lg hover:shadow-gray-500/50"
+      >
+        <AuthorAvatar
+          v-if="article?.author"
+          :author="article.author"
+          size="md"
+          class="row-span-2"
+        />
+        <div class="flex flex-col">
+          <p class="text-lg text-fg uppercase leading-tight m-0">
+            {{ article.title }}
+          </p>
+          <p class="text-md font-semibold text-fg-muted leading-none mt-2">
+            {{ article.author.name }}
+          </p>
+          <p class="text-xs text-fg-subtle leading-snug m-0">
+            {{ article.description }}
+          </p>
+        </div>
+      </a>
+    </section>
+  </article>
+</template>

app/composables/useFederatedArticles.ts

@@ -0,0 +1,67 @@
+import type { BlogMetaResponse } from '#shared/schemas/atproto'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
+import type { FederatedArticleInput, ResolvedFederatedArticle } from '#shared/types/blog-post'
+import { type AtIdentifierString } from '@atproto/lex'
+
+export async function useFederatedArticles(
+  federatedArticles: FederatedArticleInput[],
+): Promise<ResolvedFederatedArticle[]> {
+  if (!federatedArticles || federatedArticles.length === 0) return []
+
+  // 1. Prepare batch author request
+  const authorQueryItems = federatedArticles.map(article => ({
+    name: article.authorHandle,
+    blueskyHandle: article.authorHandle,
+  }))
+
+  // 2. Execute Fetches
+  const [authorResponse, ...blogMetaResponses] = await Promise.all([
+    // Batch Author Fetch
+    $fetch<{ authors: any[] }>('/api/atproto/bluesky-author-profiles', {
+      query: { authors: JSON.stringify(authorQueryItems) },
+    }).catch(error => {
+      console.error('Failed to fetch bluesky authors:', error)
+      return { authors: [] }
+    }),
+
+    // Parallel Blog Meta Fetches
+    ...federatedArticles.map(article =>
+      $fetch<BlogMetaResponse>('/api/atproto/blog-meta', {
+        query: { url: article.url },
+      }).catch(
+        () =>
+          ({
+            // Fallback if scraping fails
+            title: 'Untitled Article',
+            author: undefined,
+            description: undefined,
+            image: undefined,
+            _meta: {},
+            _fetchedAt: '',
+          }) as BlogMetaResponse,
+      ),
+    ),
+  ])
+
+  // 3. Merge Data
+  return federatedArticles.map((article, index) => {
+    const meta = blogMetaResponses[index]
+    const authorProfile = authorResponse?.authors?.[index]
+
+    const resolvedAuthor: ResolvedAuthor = {
+      name: meta?.author || authorProfile?.displayName || article.authorHandle,
+      blueskyHandle: article.authorHandle as AtIdentifierString,
+      avatar: authorProfile?.avatar || null,
+      profileUrl: authorProfile?.profileUrl || null,
+    }
+
+    return {
+      url: article.url,
+      title: meta?.title || 'Untitled',
+      // INFO: Prefer input description, otherwise fallback to fetched meta
+      description: article.description || meta?.description,
+      image: meta?.image,
+      author: resolvedAuthor,
+    }
+  })
+}

app/pages/blog/alpha-release.md

@@ -112,3 +112,51 @@ project from a wide variety of perspectives and experiences.
 The alpha release of npmx is intentionally early. We want real-world feedback from _you_ to guide our roadmap and priorities. Try [npmx](https://npmx.dev) today, let us know what you think and share your use-cases and missing features at [chat.npmx.dev](https://chat.npmx.dev). [Open an issue on GitHub](https://github.com/npmx-dev/npmx.dev/issues) or submit a pull request, and [follow npmx.dev on Bluesky](https://bsky.app/profile/npmx.dex) to keep up to date with what we're working on.
 
 And thank you: thank you to every single human who has contributed to npmx so far, whether that's in the form of code, documentation, testing, community activities, and more. You are the people building npmx; you are the people building the future we want.
+
+---
+
+<BlogPostFederatedArticles 
+  headline="Read more from the community"
+  :articles="[
+        { 
+          url: 'https://dholms.leaflet.pub/3meluqcwky22a', 
+          authorHandle: 'dholms.dev', 
+          description: ''  
+        },
+        { 
+          url: 'https://whitep4nth3r.com/blog/website-redesign-2026/', 
+          authorHandle: 'whitep4nth3r.com', 
+          description: 'I am a hardcoded description of Salma\'s lovely article!!'   
+        },
+        { 
+          url: 'https://roe.dev/blog/the-golden-thread', 
+          authorHandle: 'danielroe.dev', 
+          description: ''  
+        },
+        { 
+          url: 'https://blog.muni.town/village-scale-resilience/', 
+          authorHandle: 'erlend.sh', 
+          description: ''  
+        },
+        { 
+          url: 'https://www.pfrazee.com/blog/atmospheric-computing', 
+          authorHandle: 'pfrazee.com', 
+          description: ''  
+        },
+        { 
+          url: 'https://marvins-guide.leaflet.pub/3mckm76mfws2h', 
+          authorHandle: 'baileytownsend.dev', 
+          description: ''  
+        },
+        { 
+          url: 'https://patak.cat/blog/update.html', 
+          authorHandle: 'patak.cat', 
+          description: ''  
+        },
+        { 
+          url: 'https://zeu.dev/blog/rnlive-partykit/', 
+          authorHandle: 'zeu.dev', 
+          description: ''  
+        }
+      ]"
+/>

app/pages/blog/first-post.md

@@ -7,7 +7,7 @@ authors:
 title: 'Hello World'
 tags: ['OpenSource', 'Nuxt']
 excerpt: 'My first post'
-date: '2026-01-28'
+date: '2026-01-28T15:30:00Z'
 slug: 'first-post'
 description: 'My first post on the blog'
 draft: true

app/plugins/blog-post-federated-articles.ts

@@ -0,0 +1,10 @@
+import BlogPostFederatedArticles from '~/components/BlogPostFederatedArticles.vue'
+
+/**
+ * INFO: .md files are transformed into Vue SFCs by unplugin-vue-markdown during the Vite transform pipeline
+ * That transformation happens before Nuxt's component auto-import scanning can inject the proper imports
+ * Global registration ensures the component is available in the Vue runtime regardless of how the SFC was generated
+ */
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.component('BlogPostFederatedArticles', BlogPostFederatedArticles)
+})

lunaria/files/en-US.json

@@ -80,6 +80,10 @@
     "title": "Blog",
     "heading": "blog",
     "meta_description": "Insights and updates from the npmx community",
+    "atproto": {
+      "loading_bluesky_post": "Loading Bluesky post...",
+      "view_on_bluesky": "View this post on Bluesky"
+    },
     "author": {
       "view_profile": "View {name}'s profile on Bluesky"
     },