feat: npmx 0.8 release blog post

app/components/global/BlueskyPostEmbed.client.vue

@@ -26,11 +26,18 @@
   aspectRatio?: { width: number; height: number }
 }
 
+interface EmbedExternal {
+  description?: string
+  thumb?: string
+  title?: string
+  uri: string
+}
+
 interface BlueskyPost {
   uri: string
   author: PostAuthor
   record: { text: string; createdAt: string }
-  embed?: { $type: string; images?: EmbedImage[] }
+  embed?: { $type: string; images?: EmbedImage[]; external?: EmbedExternal }
   likeCount?: number
   replyCount?: number
   repostCount?: number
@@ -81,6 +88,7 @@
 )
 
 const postUrl = computed(() => {
+  console.log(post.value?.embed)
   // Prefer the explicit URL prop if provided
   if (props.url) return props.url
 
@@ -107,7 +115,7 @@
     :href="postUrl ?? '#'"
     target="_blank"
     rel="noopener noreferrer"
-    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
+    class="not-prose block my-4 rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
   >
     <!-- Bluesky icon -->
     <span
@@ -154,6 +162,27 @@
       />
     </template>
 
+    <!-- Embedded external embed -->
+    <template v-if="post.embed?.external && post.embed.external.uri">
+      <div class="block mb-3 p-0.5 bg-bg-muted rounded-lg">
+        <img
+          v-if="post.embed.external.thumb"
+          :src="post.embed.external.thumb"
+          :alt="post.embed.external.title"
+          class="w-full rounded-lg object-cover"
+          loading="lazy"
+        />
+        <div class="text-fg-muted text-sm p-2">
+          <p class="font-medium truncate">
+            {{ post.embed.external.title || post.embed.external.uri }}
+          </p>
+          <p v-if="post.embed.external.description" class="text-sm line-clamp-2 mt-1">
+            {{ post.embed.external.description }}
+          </p>
+        </div>
+      </div>
+    </template>
+
     <!-- Timestamp + engagement -->
     <div class="flex items-center gap-4 text-sm text-fg-subtle">
       <DateTime :datetime="post.record.createdAt" date-style="medium" />

app/pages/blog/release/0.8.md

@@ -0,0 +1,77 @@
+---
+authors:
+  - name: Alex Savelyev
+    blueskyHandle: alexdln.com
+  - name: Philippe Serhal
+    blueskyHandle: philippeserhal.com
+  - name: Matias Capeletto
+    blueskyHandle: patak.cat
+title: 'npmx 0.8: around the moon'
+tags: ['OpenSource', 'Release']
+excerpt: "Today we're releasing npmx 0.8 – including a new command palette and a lot of other features."
+date: '2026-04-08'
+slug: '0.8'
+description: "Today we're releasing npmx 0.8 – including a new command palette and a lot of other features."
+draft: false
+---
+
+# npmx 0.8: around the moon
+
+Today we're releasing [npmx.dev](https://npmx.dev) 0.8. 3K+ stars, 240+ contributors.
+
+## Unleash your mechanical keyboard
+
+npmx now has a rich command palette for efficient, keyboard-driven access to every page, toggle, and action across the website. Open it by hitting ⌘ K on macOS or Ctrl+K on Windows/Linux, or by clicking the new “jump to…” item in the header.
+
+TODO: demo
+
+There are already 68 total commands across the website, but you’ll always see just what’s relevant to your current view:
+
+- On a package page, quickly download its tarball, copy its install command to your clipboard, open its repo, jump to its `@types/` package, and more
+- On the compare page, toggle between the table and charts views, copy the table to your clipboard, and more
+- When viewing a package’s code, copy a link or the raw file contents to your clipboard, toggle between raw and preview mode, and more
+- From anywhere, jump to another page, toggle dark/light mode, change your language, get help by showing all keyboard shortcuts, jumping to the docs or to the npmx Discord server.
+
+You’ll always see a fallback option to submit your input as a search:
+
+TODO: command palette
+
+… Oh, and one more thing.
+
+On a package page, type or paste any version or [SemVer range specifier](https://docs.npmx.dev/guide/semver-ranges) and you’ll immediately see matching versions of that package.
+
+TODO: second image
+
+The command palette is intended to be accessible to everyone, with a full, rich experience on mobile and desktop, keyboard, mouse, touch screens, and screen readers.
+
+## We were @ ATmosphereConf 26!
+
+The atproto community gathered in Vancouver for their annual conference. Five members of the npmx community were there, enjoying the conversations and talks.
+
+<BlueskyPostEmbed url="https://bsky.app/profile/npmx.dev/post/3miamtd537s2m" />
+
+There is a lot to unpack, a lot of potential for collaborating with other atproto projects on shared lexicons and cross-linking between our websites. We’d like to thanks the organizers and the community at large once more for the warm welcome, and for inviting us to present npmx in one of the keynotes:
+
+[ keynote video: youtube or streamplace ].
+
+## Noodles!
+
+Thinking about who we are and what we stand for, we decided to launch noodles. The little change on the main page focused on what we care about.
+
+https://npmx.dev/?kawaii
+
+<BlueskyPostEmbed url="https://bsky.app/profile/npmx.dev/post/3miet6zoc5s2i" />
+
+## News
+
+A lot has happened since our [alpha launch](link). You can read Alex’s post for an overview of this past month, and to learn about some of the ideas the community is working on.
+
+<BlueskyPostEmbed url="https://bsky.app/profile/alexdln.com/post/3mijbaws34c2q" />
+
+We were also featured the latest Igalia Chats episode discussing about the history of npmx, the community, our ideas regarding funding, and more.
+
+<BlueskyPostEmbed url="https://bsky.app/profile/igalia.com/post/3miwbkgbgyk2m" />
+
+## What’s next
+
+We have several features in the making, npmx 0.9 is already looking like a very interesting milestone for us. If you’re interested in getting involved, join us at [build.npmx.dev](https://build.npmx.dev). We’re just getting started!