feat: blog

app/assets/main.css

@@ -12,6 +12,7 @@
   --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
   --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
   --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
+  --bg-blog: oklch(0.195 0 0);
 
   /* text colors */
   --fg: oklch(0.982 0 0);

app/components/AppFooter.vue

@@ -21,6 +21,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'blog' }">
+            {{ $t('footer.blog') }}
+          </LinkBase>
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>

app/components/AuthorAvatar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ResolvedAuthor } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  author: ResolvedAuthor
+  size?: 'sm' | 'md' | 'lg'
+}>()
+
+const sizeClasses = computed(() => {
+  switch (props.size ?? 'md') {
+    case 'sm':
+      return 'w-8 h-8 text-sm'
+    case 'lg':
+      return 'w-12 h-12 text-xl'
+    default:
+      return 'w-10 h-10 text-lg'
+  }
+})
+
+const initials = computed(() =>
+  props.author.name
+    .split(' ')
+    .map(n => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2),
+)
+</script>
+
+<template>
+  <div
+    class="shrink-0 flex items-center justify-center border border-border rounded-full bg-bg-muted overflow-hidden"
+    :class="[sizeClasses]"
+  >
+    <img
+      v-if="author.avatar"
+      :src="author.avatar"
+      :alt="author.name"
+      class="w-full h-full object-cover"
+    />
+    <span v-else class="text-fg-subtle font-mono" aria-hidden="true">
+      {{ initials }}
+    </span>
+  </div>
+</template>

app/components/AuthorList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Author } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  authors: Author[]
+  variant?: 'compact' | 'expanded'
+}>()
+
+const { resolvedAuthors } = useAuthorProfiles(props.authors)
+</script>
+
+<template>
+  <!-- Expanded variant: vertical list with larger avatars -->
+  <div v-if="variant === 'expanded'" class="flex flex-wrap items-center gap-4">
+    <div v-for="author in resolvedAuthors" :key="author.name" class="flex items-center gap-2">
+      <AuthorAvatar :author="author" size="md" disable-link />
+      <div class="flex flex-col">
+        <span class="text-sm font-medium text-fg">{{ author.name }}</span>
+        <a
+          v-if="author.blueskyHandle && author.profileUrl"
+          :href="author.profileUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          :aria-label="$t('blog.author.view_profile', { name: author.name })"
+          class="text-xs text-fg-muted hover:text-primary transition-colors"
+        >
+          @{{ author.blueskyHandle }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Compact variant: no avatars -->
+  <div v-else class="flex items-center gap-2 min-w-0">
+    <div class="flex items-center">
+      <AuthorAvatar
+        v-for="(author, index) in resolvedAuthors"
+        :key="author.name"
+        :author="author"
+        size="md"
+        class="ring-2 ring-bg"
+        :class="index > 0 ? '-ms-3' : ''"
+      />
+    </div>
+    <span class="text-xs text-fg-muted font-mono truncate">
+      {{ resolvedAuthors.map(a => a.name).join(', ') }}
+    </span>
+  </div>
+</template>

app/components/BlogPostListCard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Author } from '#shared/schemas/blog'
+
+defineProps<{
+  /** Authors of the blog post */
+  authors: Author[]
+  /** Blog Title */
+  title: string
+  /** Tags such as OpenSource, Architecture, Community, etc. */
+  topics: string[]
+  /** Brief line from the text. */
+  excerpt: string
+  /** The datetime value (ISO string or Date) */
+  published: string
+  /** Path/Slug of the post */
+  path: string
+  /** For keyboard nav scaffold */
+  index: number
+}>()
+</script>
+
+<template>
+  <article
+    class="group relative hover:bg-bg-subtle transition-colors duration-150 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 -mx-4 px-4 -my-2 py-2 sm:-mx-6 sm:px-6 sm:-my-3 sm:py-3 sm:rounded-md"
+  >
+    <NuxtLink
+      :to="`/blog/${path}`"
+      :data-suggestion-index="index"
+      class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
+    >
+      <!-- Text Content -->
+      <div class="flex-1 min-w-0 text-start gap-2">
+        <span class="text-xs text-fg-muted font-mono">{{ published }}</span>
+        <h2
+          class="font-mono text-xl font-medium text-fg group-hover:text-primary transition-colors hover:underline"
+        >
+          {{ title }}
+        </h2>
+        <p v-if="excerpt" class="text-fg-muted leading-relaxed line-clamp-2 no-underline">
+          {{ excerpt }}
+        </p>
+        <div class="flex flex-wrap items-center gap-2 text-xs text-fg-muted font-mono mt-4">
+          <AuthorList :authors="authors" />
+        </div>
+      </div>
+
+      <span
+        class="i-carbon:arrow-right w-4 h-4 text-fg-subtle group-hover:text-fg relative inset-is-0 group-hover:inset-is-1 transition-all duration-200 shrink-0"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+  </article>
+</template>

app/components/BlogPostWrapper.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  frontmatter: BlogPostFrontmatter
+}>()
+
+useSeoMeta({
+  title: props.frontmatter.title,
+  description: props.frontmatter.description || props.frontmatter.excerpt,
+  ogTitle: props.frontmatter.title,
+  ogDescription: props.frontmatter.description || props.frontmatter.excerpt,
+  ogType: 'article',
+})
+
+const slug = computed(() => props.frontmatter.slug)
+
+// Use Constellation to find the Bluesky post linking to this blog post
+const { data: blueskyLink } = await useBlogPostBlueskyLink(slug)
+const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
+</script>
+
+<template>
+  <main class="container w-full py-8">
+    <div v-if="frontmatter.authors" class="mb-12 max-w-prose mx-auto">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <AuthorList :authors="frontmatter.authors" variant="expanded" />
+      </div>
+    </div>
+    <article class="max-w-prose mx-auto p-2 border-b border-border prose dark:prose-invert">
+      <div class="text-sm text-fg-muted font-mono mb-4">
+        <DateTime :datetime="frontmatter.date" year="numeric" month="short" day="numeric" />
+      </div>
+      <slot />
+    </article>
+
+    <!--
+      - Only renders if Constellation found a Bluesky post linking to this slug
+      - Cached API route avoids rate limits during build
+    -->
+    <LazyBlueskyComments v-if="blueskyPostUri" :post-uri="blueskyPostUri" />
+  </main>
+</template>
+
+<style scoped>
+:deep(.markdown-body) {
+  @apply prose dark:prose-invert;
+}
+</style>