BlogPosts.vue

<script setup lang="ts">
const posts = [
  {
    title: 'Introducing Agent Leases',
    description: 'ARCP now supports time-bounded leases for stateful agent sessions, enabling predictable resource reclamation and graceful shutdown.',
    date: '2025-11-12',
    badge: { label: 'Release', color: 'primary' as const, variant: 'subtle' as const },
    authors: [{ name: 'Ada Lovelace', avatar: { fallback: 'AL' } }],
    to: '#',
  },
  {
    title: 'Trace Streaming with the Runtime Protocol',
    description: 'Deep dive into the new event-stream trace format that lets you observe agent job execution in real time with sub-millisecond overhead.',
    date: '2025-10-28',
    badge: { label: 'Guide', color: 'info' as const, variant: 'subtle' as const },
    authors: [{ name: 'Grace Hopper', avatar: { fallback: 'GH' } }],
    to: '#',
  },
  {
    title: 'Session Lifecycle and Error Recovery',
    description: 'A practical guide to handling transient runtime errors, session resumption tokens, and configuring retry policies in the ARCP SDK.',
    date: '2025-10-05',
    badge: { label: 'Tutorial', color: 'success' as const, variant: 'subtle' as const },
    authors: [{ name: 'Alan Turing', avatar: { fallback: 'AT' } }],
    to: '#',
  },
]

const featurePosts = [
  {
    title: 'Multi-Agent Orchestration',
    description: 'Coordinate fleets of specialized agents under a single runtime session using the new orchestration primitives.',
    date: '2025-09-18',
    badge: { label: 'Deep Dive', color: 'warning' as const, variant: 'subtle' as const },
    authors: [{ name: 'Margaret Hamilton', avatar: { fallback: 'MH' } }],
    to: '#',
  },
  {
    title: 'Securing Agent Runtimes',
    description: 'Best practices for scoping capabilities, validating payloads, and auditing job traces in production ARCP deployments.',
    date: '2025-09-01',
    badge: { label: 'Security', color: 'error' as const, variant: 'subtle' as const },
    authors: [{ name: 'Claude Shannon', avatar: { fallback: 'CS' } }],
    to: '#',
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Horizontal (default)">
      <UBlogPosts :posts="posts" orientation="horizontal" />
    </GallerySection>

    <GallerySection title="Vertical">
      <UBlogPosts :posts="featurePosts" orientation="vertical" />
    </GallerySection>
  </div>
</template>