feat: barebones implementation of Blog Posts UI (WIP)

Author: Kai-ros

app/components/AppHeader.vue

@@ -48,6 +48,15 @@ onKeyStroke(',', e => {
   e.preventDefault()
   router.push('/settings')
 })
+onKeyStroke('.', e => {
+  const target = e.target as HTMLElement
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+    return
+  }
+
+  e.preventDefault()
+  router.push('/blog')
+})
 </script>
 
 <template>
@@ -121,6 +130,21 @@ onKeyStroke(',', e => {
           <li v-if="isConnected && npmUser" class="flex items-center">
             <HeaderOrgsDropdown :username="npmUser" />
           </li>
+          <li class="flex items-center">
+            <NuxtLink
+              to="/blog"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+              aria-keyshortcuts="."
+            >
+              {{ $t('nav.blog') }}
+              <kbd
+                class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+                aria-hidden="true"
+              >
+                .
+              </kbd>
+            </NuxtLink>
+          </li>
         </ul>
       </div>
 

app/components/BlogPost.server.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{ title: string; htmlContent: string; date: string }>()
+</script>
+<template>
+  <main class="container">
+    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+      {{ title }}
+    </h1>
+    <!-- <time class="text-sm text-gray-500 dark:text-gray-400"> -->
+
+    <DateTime
+      :datetime="date"
+      year="numeric"
+      month="short"
+      day="numeric"
+      class="text-xs text-fg-subtle"
+    />
+
+    <div class="" v-html="htmlContent" />
+  </main>
+</template>
+
+<style>
+.container {
+  background: var(--bg-blue);
+}
+</style>

app/pages/blog/[...path].vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const route = useRoute('blog-post')
+const router = useRouter()
+
+interface Post {
+  title: string
+  date: string
+  body: string
+}
+
+const fakePosts: Record<string, Post> = {
+  'hello-world': {
+    title: 'Hello World',
+    date: 'Jan 28, 2026',
+    body: '<p>This is the first post.</p>',
+  },
+  'server-components': {
+    title: 'Server Components',
+    date: 'Jan 29, 2026',
+    body: '<p>Zero JS is great.</p>',
+  },
+}
+
+const slug = computed<string>(() => {
+  const pathParam = route.params.path
+  return Array.isArray(pathParam) ? pathParam.join('/') : pathParam
+})
+
+const post = computed(() => {
+  const s = slug.value
+  return s ? fakePosts[s] : null
+})
+
+definePageMeta({
+  name: 'blog-post',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.post.title'),
+
+  // description: () => `Blog Article ${post.value}@${post.value}`,
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="">I AM A WEAK HEADER</div>
+    </header>
+
+    <article v-if="post">
+      <BlogPost :title="post.title" :date="post.date" :html-content="post.body" />
+    </article>
+
+    <article v-else>
+      <h1>Post Not Found</h1>
+      <p>We couldn't find a post at /blog/{{ slug }}</p>
+    </article>
+  </main>
+</template>

app/pages/blog/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const route = useRoute('blog')
+const router = useRouter()
+
+// 1. Define your list of posts (This would eventually come from useAsyncData)
+const posts = [
+  { slug: 'hello-world', title: 'Hello World', excerpt: 'My first post' },
+  { slug: 'server-components', title: 'Server Components', excerpt: 'Zero JS' },
+]
+
+definePageMeta({
+  name: 'blog',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.title'),
+  description: () => $t('blog.description'),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="">I AM A MIGHTY HEADER</div>
+    </header>
+
+    <article class="flex flex-col gap-6">
+      <div v-for="post in posts" :key="post.slug" class="p-4 border border-border rounded-lg">
+        <h2 class="text-xl font-semibold">
+          <NuxtLink :to="`/blog/${post.slug}`" class="text-primary hover:underline">
+            {{ post.title }}
+          </NuxtLink>
+        </h2>
+        <p class="text-muted-foreground">{{ post.excerpt }}</p>
+      </div>
+    </article>
+  </main>
+</template>
+
+<style>
+.container {
+  background: var(--bg-red);
+}
+</style>

i18n/locales/en.json

@@ -42,10 +42,15 @@
   "nav": {
     "main_navigation": "Main navigation",
     "popular_packages": "Popular packages",
+    "blog": "blog",
     "search": "search",
     "settings": "settings",
     "back": "back"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Insights and updates from the npmx community"
+  },
   "settings": {
     "title": "settings",
     "tagline": "customize your npmx experience",

i18n/locales/fr-FR.json

@@ -39,10 +39,15 @@
   },
   "nav": {
     "popular_packages": "Paquets populaires",
+    "blog": "blog",
     "search": "recherche",
     "settings": "paramètres",
     "back": "Retour"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Perspectives et actualités de la communauté npmx"
+  },
   "settings": {
     "relative_dates": "Dates relatives",
     "include_types": "Inclure {'@'}types à la commande d'installation",

i18n/locales/it-IT.json

@@ -39,10 +39,15 @@
   },
   "nav": {
     "popular_packages": "Pacchetti popolari",
+    "blog": "blog",
     "search": "cerca",
     "settings": "impostazioni",
     "back": "Indietro"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Approfondimenti e aggiornamenti dalla comunità npmx"
+  },
   "settings": {
     "relative_dates": "Date relative",
     "include_types": "Includi {'@'}types durante l'installazione",

nuxt.config.ts

@@ -79,6 +79,7 @@ export default defineNuxtConfig({
     '/**': { isr: 60 },
     '/package/**': { isr: 60 },
     '/search': { isr: false, cache: false },
+    '/blog/**': { isr: true, prerender: true },
     '/_v/script.js': { proxy: 'https://npmx.dev/_vercel/insights/script.js' },
     '/_v/view': { proxy: 'https://npmx.dev/_vercel/insights/view' },
     '/_v/event': { proxy: 'https://npmx.dev/_vercel/insights/event' },