{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article-1",
  "description": "A centered long-form article layout with a category badge, headline, deck, author byline with avatar and read time, a cover image, prose body with headings, a blockquote and list, and a footer with tags and share buttons. A blog post or editorial reading page.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/article/1/article-block.tsx",
      "content": "import {\n  RiLinkM,\n  RiTimeLine,\n  RiTwitterXLine,\n  RiLinkedinBoxLine,\n} from \"@remixicon/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst tags = [\"Engineering\", \"Performance\", \"Databases\"]\n\nexport default function ArticleBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <article className=\"w-full max-w-2xl\">\n        <div className=\"mb-4 flex items-center justify-between gap-3\">\n          <Badge variant=\"secondary\">Engineering</Badge>\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            Jun 18, 2026\n          </span>\n        </div>\n        <h1 className=\"text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n          How we cut API latency by 60% in three weeks\n        </h1>\n        <p className=\"mt-4 text-lg text-muted-foreground\">\n          A look at the cold-read bottleneck that was quietly slowing every\n          request, and the caching layer we built to fix it.\n        </p>\n\n        <div className=\"mt-6 flex items-center gap-3\">\n          <Avatar className=\"size-10\">\n            <AvatarImage\n              src=\"https://i.pravatar.cc/80?img=45\"\n              alt=\"Lena Park\"\n              className=\"grayscale\"\n            />\n            <AvatarFallback>LP</AvatarFallback>\n          </Avatar>\n          <div className=\"flex flex-col\">\n            <span className=\"text-sm font-medium\">Lena Park</span>\n            <span className=\"text-xs text-muted-foreground\">\n              Staff Engineer\n            </span>\n          </div>\n          <span className=\"ml-auto flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <RiTimeLine className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />7 Min\n            Read\n          </span>\n        </div>\n\n        <div className=\"mt-8 aspect-[16/9] w-full overflow-hidden border border-border bg-muted\">\n          <img\n            src=\"https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1200&q=80\"\n            alt=\"Server racks in a data center\"\n            className=\"size-full object-cover grayscale\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        <div className=\"mt-8 flex flex-col gap-5 text-[15px]/relaxed text-foreground/80\">\n          <p>\n            Our monolith was fast enough, until it wasn&apos;t. As traffic grew,\n            p95 response times crept past a second and our dashboards lit up\n            during every morning spike. The culprit was not the code we\n            expected.\n          </p>\n\n          <h2 className=\"mt-4 text-xl font-semibold tracking-tight text-foreground\">\n            Finding the bottleneck\n          </h2>\n          <p>\n            Tracing a single slow request end to end revealed that nearly every\n            call hit the database for data that almost never changed. We were\n            paying for cold reads on settings, feature flags, and plan limits\n            thousands of times a minute.\n          </p>\n\n          <blockquote className=\"border-l-2 border-foreground/30 pl-4 text-foreground italic\">\n            &ldquo;The fastest query is the one you never make. Caching is not\n            an optimization, it is a design decision.&rdquo;\n          </blockquote>\n\n          <h2 className=\"mt-4 text-xl font-semibold tracking-tight text-foreground\">\n            The fix\n          </h2>\n          <p>\n            We introduced a small read-through cache in front of the hot tables\n            with a per-key TTL and explicit invalidation on writes. The rollout\n            was gradual, table by table, so we could measure the impact at each\n            step.\n          </p>\n          <ul className=\"flex list-disc flex-col gap-1.5 pl-5 marker:text-muted-foreground/40\">\n            <li>p95 latency dropped from 980ms to 390ms</li>\n            <li>Database load fell by roughly half at peak</li>\n            <li>No change to application code beyond the cache wrapper</li>\n          </ul>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <div className=\"flex flex-wrap items-center justify-between gap-4\">\n          <div className=\"flex flex-wrap gap-2\">\n            {tags.map((tag) => (\n              <Badge key={tag} variant=\"outline\">\n                {tag}\n              </Badge>\n            ))}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <span className=\"mr-1 text-xs text-muted-foreground\">Share</span>\n            <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Copy link\">\n              <RiLinkM aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Share on X\">\n              <RiTwitterXLine aria-hidden=\"true\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label=\"Share On LinkedIn\"\n            >\n              <RiLinkedinBoxLine aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n      </article>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "175vh",
    "tier": "free"
  },
  "categories": [
    "article"
  ],
  "type": "registry:block"
}