From dee8c8706f9de9b2278a136265133231f22e997e Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.o.hurrington@gmail.com>
Date: Sun, 1 Mar 2026 16:09:31 +0100
Subject: [PATCH 1/3] fix: simplified component logic and removed external
 scraping requests

---
 app/components/BlogPostFederatedArticles.vue | 48 +++++++----
 app/composables/useFederatedArticles.ts      | 67 ---------------
 app/pages/blog/alpha-release.md              | 11 ++-
 nuxt.config.ts                               |  2 +-
 server/api/atproto/blog-meta.get.ts          | 87 --------------------
 shared/types/blog-post.ts                    | 11 +--
 6 files changed, 45 insertions(+), 181 deletions(-)
 delete mode 100644 app/composables/useFederatedArticles.ts
 delete mode 100644 server/api/atproto/blog-meta.get.ts

diff --git a/app/components/BlogPostFederatedArticles.vue b/app/components/BlogPostFederatedArticles.vue
index da7edcf645..ea001b662e 100644
--- a/app/components/BlogPostFederatedArticles.vue
+++ b/app/components/BlogPostFederatedArticles.vue
@@ -1,21 +1,42 @@
 <script setup lang="ts">
 import type { FederatedArticleInput } from '#shared/types/blog-post'
+import type { Author } from '#shared/schemas/blog'
 
 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: () => [],
-  },
+// Prepare authors list for the composable
+const authors = computed<Author[]>(() =>
+  props.articles.map(article => ({
+    name: article.authorHandle,
+    blueskyHandle: article.authorHandle,
+  })),
 )
+
+// Fetch author profiles for avatars
+const { resolvedAuthors } = useBlueskyAuthorProfiles(authors.value)
+
+// Merge the input data with the fetched avatars
+const federatedArticles = computed(() => {
+  return props.articles.map((article, index) => {
+    const profile = resolvedAuthors.value[index]
+
+    return {
+      url: article.url,
+      title: article.title,
+      description: article.description,
+      authorHandle: article.authorHandle,
+      author: {
+        name: profile?.name || article.authorHandle,
+        blueskyHandle: article.authorHandle,
+        avatar: profile?.avatar || null,
+        profileUrl: profile?.profileUrl || null,
+      },
+    }
+  })
+})
 </script>
 
 <template>
@@ -24,7 +45,7 @@ const { data: federatedArticles, status } = await useAsyncData(
       {{ headline }}
     </h2>
     <section
-      v-if="federatedArticles?.length"
+      v-if="federatedArticles.length"
       class="grid gap-4 grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] transition-[grid-template-cols]"
     >
       <a
@@ -35,12 +56,7 @@ const { data: federatedArticles, status } = await useAsyncData(
         :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"
-        />
+        <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 leading-tight m-0">
             {{ article.title }}
diff --git a/app/composables/useFederatedArticles.ts b/app/composables/useFederatedArticles.ts
deleted file mode 100644
index ec0fdf2b5c..0000000000
--- a/app/composables/useFederatedArticles.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-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,
-    }
-  })
-}
diff --git a/app/pages/blog/alpha-release.md b/app/pages/blog/alpha-release.md
index b4137e4b92..84035a4990 100644
--- a/app/pages/blog/alpha-release.md
+++ b/app/pages/blog/alpha-release.md
@@ -13,7 +13,7 @@ extension, everyone who works in the JavaScript ecosystem."
 date: "2026-03-03"
 slug: "alpha-release"
 description: "npmx is an open-source project built by a rapidly growing community. It's for open-source developers, and by extension, everyone who works in the JavaScript ecosystem."
-draft: false
+draft: true
 ---
 
 # Announcing npmx: a fast, modern browser for the npm registry
@@ -118,46 +118,55 @@ headline="Read more from the community"
 :articles="[
   {
     url: 'https://whitep4nth3r.com/blog/how-to-make-your-first-open-source-contribution/',
+    title: 'How to Make Your First Open Source Contribution',
     authorHandle: 'whitep4nth3r.com',
     description: 'Getting involved in open source doesn\'t have to be scary! Understand how to find a great project and make your first contribution in this guide from Salma.'
   },
   {
     url: 'https://graphieros.github.io/graphieros-blog/blog/2026/npmx.html',
+    title: 'vue-data-ui is on npmx npmx is on vue-data-ui',
     authorHandle: 'graphieros.com',
     description: 'Graphieros explores a minimal npm-based workflow and why it exists.'
   },
   {
     url: 'https://www.alexdln.com/blog/npmx-the-month',
+    title: 'The month. npmx',
     authorHandle: 'alexdln.com',
     description: 'Alex reflects on the project, warm stories, wonderful people, and a look into the future'
   },
   {
     url: 'https://johnnyreilly.com/npmx-with-a-little-help-from-my-friends',
+    title: 'npmx: With a Little Help From My Friends',
     authorHandle: 'johnnyreilly.com',
     description: 'How to contribute to npmx.dev, and thoughts on Johnny\'s experience with the project.'
   },
   {
     url: 'https://blog.trueberryless.org/blog/npmx/',
+    title: 'PLACEHOLDER_TITLE',
     authorHandle: 'trueberryless.org',
     description: 'Telling the story of a newly founded community.'
   },
   {
     url: 'https://www.sybers.fr/blog/3mfhn5xoawz24',
+    title: 'From a Bluesky post to my favorite open source community',
     authorHandle: 'sybers.fr',
     description: 'The best open source projects aren\'t just about great code. They\'re about the people behind them.'
   },
   {
     url: 'https://storybook.js.org/blog/storybook-npmx',
+    title: 'PLACEHOLDER_TITLE',
     authorHandle: 'storybook.js.org',
     description: 'We\'re huge fans of what the npmx community is building. Today\'s alpha is just the starting line, and we\'re proud to be running alongside them.'
   },
   {
     url: 'https://jensroemer.com/writing/open-source-whats-in-it-for-me/',
+    title: 'Open source, what\'s in it for me?',
     authorHandle: 'jensroemer.com',
     description: 'Reflections on learning, community, and change.'
   },
   {
     url: 'https://paulie.codes/blog/3mfs2stugzp2v',
+    title: 'Overcoming Imposter Syndrome: My First Open Source Contribution',
     authorHandle: 'paulie.codes',
     description: 'The most important part of open source is the people, and everyone has something valuable to bring to the table.'
   }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 11ba3cd214..7e20485312 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -157,7 +157,7 @@ export default defineNuxtConfig({
     '/settings': { prerender: true },
     '/recharging': { prerender: true },
     // proxy for insights
-    '/blog/**': { isr: true, prerender: true },
+    '/blog/**': { prerender: true },
     '/_v/script.js': {
       proxy: 'https://npmx.dev/_vercel/insights/script.js',
     },
diff --git a/server/api/atproto/blog-meta.get.ts b/server/api/atproto/blog-meta.get.ts
deleted file mode 100644
index 774e9fb566..0000000000
--- a/server/api/atproto/blog-meta.get.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { flatten, safeParse } from 'valibot'
-import { BlogMetaRequestSchema } from '#shared/schemas/atproto'
-import { handleApiError } from '#server/utils/error-handler'
-import { BLOG_META_TAG_REGEX, META_TAG_TITLE_REGEX } from '#shared/utils/constants'
-
-export default defineEventHandler(async event => {
-  const query = getQuery(event)
-  const parsed = safeParse(BlogMetaRequestSchema, query)
-
-  if (!parsed.success) {
-    throw createError({
-      statusCode: 400,
-      message: 'Invalid URL provided',
-      data: flatten(parsed.issues),
-    })
-  }
-
-  const { url } = parsed.output
-
-  try {
-    const html = await $fetch<string>(url, {
-      headers: { 'User-Agent': 'Mozilla/5.0 (compatible; Bot/1.0)' },
-    })
-
-    const metaTags: Record<string, string> = {}
-    const matches = html.matchAll(BLOG_META_TAG_REGEX)
-
-    for (const match of matches) {
-      // INFO: match[1] is the name/property, match[2] is the content
-      if (match[1] && match[2]) {
-        metaTags[match[1]] = match[2]
-      }
-    }
-
-    // Capture the raw meta values
-    const rawTitle = getMeta(html, metaTags, ['og:title', 'twitter:title', 'title'])
-    const rawAuthor = getMeta(html, metaTags, ['author', 'og:site_name', 'twitter:site'])
-    const rawDesc = getMeta(html, metaTags, [
-      'og:description',
-      'twitter:description',
-      'description',
-    ])
-
-    return {
-      title: decodeHtmlEntities(rawTitle),
-      author: decodeHtmlEntities(rawAuthor),
-      description: decodeHtmlEntities(rawDesc),
-      image: getMeta(html, metaTags, ['og:image', 'twitter:image', 'og:image:secure_url']),
-      // INFO: Extract all meta tags for debugging
-      _meta: metaTags,
-      _fetchedAt: new Date().toISOString(),
-    }
-  } catch (error) {
-    handleApiError(error, {
-      statusCode: 502,
-      message: 'Failed to fetch URL',
-    })
-  }
-})
-
-// INFO: Extracts the specific meta tags via a simple regex
-const getMeta = (html: string, metaTags: Record<string, string>, keys: string[]) => {
-  for (const key of keys) {
-    if (metaTags[key]) return metaTags[key]
-    // Try different case variations
-    const found = Object.keys(metaTags).find(k => k.toLowerCase() === key.toLowerCase())
-    if (found) return metaTags[found]
-  }
-  // Fallback to title tag
-  if (keys.includes('title')) {
-    return html.match(META_TAG_TITLE_REGEX)?.[1] || null
-  }
-  return null
-}
-
-// INFO: Prettifies the HTML entities via a simple decoder
-function decodeHtmlEntities(str: string | null | undefined): string | null {
-  if (!str) return null
-  return str
-    .replace(/&#x27;/g, "'")
-    .replace(/&#39;/g, "'")
-    .replace(/&quot;/g, '"')
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&amp;/g, '&')
-  // Add more if needed, but these cover 99% of OG tag issues
-}
diff --git a/shared/types/blog-post.ts b/shared/types/blog-post.ts
index 0a705d2137..2da1b95b0a 100644
--- a/shared/types/blog-post.ts
+++ b/shared/types/blog-post.ts
@@ -1,6 +1,4 @@
 import type * as app from '#shared/types/lexicons/app'
-import type { BlogMetaResponse } from '#shared/schemas/atproto'
-import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 export type CommentEmbed =
   | { type: 'images'; images: app.bsky.embed.images.ViewImage[] }
@@ -24,16 +22,11 @@ export interface Comment {
   WARN: FederatedArticleInput specifics
   interface - All strings must be captured in single quotes in order to be parsed correctly in the MD file
   authorHandle - Must not contain `@` symbol prefix
-  description - Passing an empty string `''` will fallback to the description provided by the scraped meta tags
   description - Any additional single quotes must be properly escaped with a `\`
 */
 export interface FederatedArticleInput {
   url: string
+  title: string
   authorHandle: string
-  description?: string
-}
-
-export type ResolvedFederatedArticle = Omit<BlogMetaResponse, 'author' | '_meta'> & {
-  url: string
-  author: ResolvedAuthor
+  description: string
 }

From 82143a45388aff6adfd74e899ec770309acb8111 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <52798353+whitep4nth3r@users.noreply.github.com>
Date: Sun, 1 Mar 2026 15:45:33 +0000
Subject: [PATCH 2/3] Apply suggestion from @whitep4nth3r

---
 app/pages/blog/alpha-release.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/blog/alpha-release.md b/app/pages/blog/alpha-release.md
index 84035a4990..53aaa1e364 100644
--- a/app/pages/blog/alpha-release.md
+++ b/app/pages/blog/alpha-release.md
@@ -142,7 +142,7 @@ headline="Read more from the community"
   },
   {
     url: 'https://blog.trueberryless.org/blog/npmx/',
-    title: 'PLACEHOLDER_TITLE',
+    title: 'Rising community at tomorrow's horizon',
     authorHandle: 'trueberryless.org',
     description: 'Telling the story of a newly founded community.'
   },

From 7ca6508b2393e08e03a16773b5cc23c73cc88ec5 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <52798353+whitep4nth3r@users.noreply.github.com>
Date: Sun, 1 Mar 2026 15:45:41 +0000
Subject: [PATCH 3/3] Apply suggestion from @whitep4nth3r

---
 app/pages/blog/alpha-release.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/blog/alpha-release.md b/app/pages/blog/alpha-release.md
index 53aaa1e364..7b7332cb7c 100644
--- a/app/pages/blog/alpha-release.md
+++ b/app/pages/blog/alpha-release.md
@@ -154,7 +154,7 @@ headline="Read more from the community"
   },
   {
     url: 'https://storybook.js.org/blog/storybook-npmx',
-    title: 'PLACEHOLDER_TITLE',
+    title: 'The npm browsing experience we always wanted',
     authorHandle: 'storybook.js.org',
     description: 'We\'re huge fans of what the npmx community is building. Today\'s alpha is just the starting line, and we\'re proud to be running alongside them.'
   },