BlogPost.vue

<script setup lang="ts">
const variants = ['outline', 'soft', 'subtle', 'ghost', 'naked'] as const

const samplePost = {
  title: 'Introducing Lease-Based Job Scheduling in ARCP',
  description: 'Learn how the Agent Runtime Control Protocol uses time-bounded leases to coordinate distributed job execution across heterogeneous runtimes.',
  date: '2026-06-15',
  badge: { label: 'Engineering', color: 'primary' as const, variant: 'soft' as const },
  image: { src: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&q=80', alt: 'Server racks in a data center' },
  authors: [
    { name: 'Aria Chen', description: 'Runtime Engineer', avatar: { src: 'https://i.pravatar.cc/150?u=aria' } },
    { name: 'Marco Rios', description: 'Protocol Architect', avatar: { src: 'https://i.pravatar.cc/150?u=marco' } },
  ],
}

const shortPosts = [
  {
    title: 'Tracing Agent Sessions End-to-End',
    description: 'A deep-dive into distributed tracing for multi-agent sessions using OpenTelemetry and ARCP trace contexts.',
    date: '2026-05-28',
    badge: { label: 'Observability', color: 'info' as const, variant: 'soft' as const },
    authors: [{ name: 'Priya Nair', avatar: { src: 'https://i.pravatar.cc/150?u=priya' } }],
  },
  {
    title: 'Runtime Plugins: Extending ARCP with Custom Middleware',
    description: 'Build and register custom runtime plugins to intercept events, validate payloads, and enforce policies.',
    date: '2026-05-10',
    badge: { label: 'Tutorial', color: 'success' as const, variant: 'soft' as const },
    authors: [{ name: 'Dev Patel', avatar: { src: 'https://i.pravatar.cc/150?u=dev' } }],
  },
  {
    title: 'Error Recovery Patterns for Long-Running Jobs',
    description: 'Strategies for checkpointing, retry budgets, and graceful degradation when agents encounter transient failures.',
    date: '2026-04-22',
    badge: { label: 'Best Practices', color: 'warning' as const, variant: 'soft' as const },
    authors: [{ name: 'Sam Torres', avatar: { src: 'https://i.pravatar.cc/150?u=sam' } }],
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Default (vertical, outline)">
      <div class="w-full max-w-sm">
        <UBlogPost
          :title="samplePost.title"
          :description="samplePost.description"
          :date="samplePost.date"
          :badge="samplePost.badge"
          :image="samplePost.image"
          :authors="samplePost.authors"
          to="#"
        />
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <UBlogPost
          v-for="v in variants"
          :key="v"
          :variant="v"
          :title="`Variant: ${v}`"
          description="Agent sessions are tracked per runtime lease boundary."
          date="2026-06-15"
          :badge="{ label: 'ARCP', color: 'neutral', variant: 'subtle' }"
          :authors="[{ name: 'Runtime Bot', avatar: { icon: 'i-material-symbols-smart-toy-outline' } }]"
        />
      </div>
    </GallerySection>

    <GallerySection title="Horizontal orientation">
      <div class="flex w-full max-w-3xl flex-col gap-4">
        <UBlogPost
          orientation="horizontal"
          title="Session Lifecycle and Event Streaming"
          description="Understand how ARCP sessions emit real-time events from job acceptance through lease expiry and final teardown."
          date="2026-06-01"
          :badge="{ label: 'Deep Dive', color: 'secondary', variant: 'soft' }"
          :image="{ src: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80', alt: 'Network cables' }"
          :authors="[{ name: 'Lena Vogel', description: 'Platform Lead', avatar: { src: 'https://i.pravatar.cc/150?u=lena' } }]"
          to="#"
        />
      </div>
    </GallerySection>

    <GallerySection title="Post grid">
      <div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <UBlogPost
          v-for="(post, i) in shortPosts"
          :key="i"
          :title="post.title"
          :description="post.description"
          :date="post.date"
          :badge="post.badge"
          :authors="post.authors"
          variant="subtle"
          to="#"
        />
      </div>
    </GallerySection>

    <GallerySection title="Without image (naked)">
      <div class="w-full max-w-sm">
        <UBlogPost
          variant="naked"
          title="Lease Renewal Strategies"
          description="Explore proactive and reactive lease renewal patterns to prevent job eviction under high-load runtime conditions."
          date="2026-06-10"
          :badge="{ label: 'Runtime', color: 'error', variant: 'soft' }"
          :authors="[
            { name: 'Kai Müller', avatar: { src: 'https://i.pravatar.cc/150?u=kai' } },
          ]"
          to="#"
        />
      </div>
    </GallerySection>
  </div>
</template>