4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T95c,/** * The single icon import site for the whole AgentBlog block. * * WHAT THIS IS * Every icon rendered by `components/blog/*` and `components/mdx/*` is imported * from here, never from `lucide-react` directly. * * WHY IT IS SHAPED THIS WAY * A shadcn `registry:base` item sets `iconLibrary`, so a consumer may be on * Tabler, Phosphor, or Radix icons rather than Lucide. AgentBlog installs no * base in Mode A, which means we inherit whatever the project already chose. * Routing every icon through one re-export module makes swapping libraries a * single-file edit instead of a grep across twelve components, and it is what * `shadcn migrate icons` rewrites. * * WHAT BREAKS IF YOU CHANGE IT * - Import an icon straight from `lucide-react` inside a component and you have * silently reintroduced the grep. Add the icon here first. * - Rename an export here and every component using it fails to compile, which * is the intended blast radius: loud, immediate, one file. * * SWAPPING ICON LIBRARIES * Replace the import source below and re-map the names. Every export must keep * accepting `className` and `aria-hidden`, because callers style icons with * `size-*` utilities and mark them decorative. Nothing else is assumed. * * NOTE ON BRAND ICONS * Lucide deprecated its brand glyphs (`Twitter`, `Linkedin`, `Facebook`) and may * drop them in a future minor. `share-buttons.tsx` therefore uses text labels * plus neutral icons rather than brand marks, so a Lucide upgrade cannot break a * consumer's install. * * @see https://docs.agentblog.dev/guides/match-your-design * @see https://docs.agentblog.dev/guides/match-your-design#installing-the-blog-installs-no-base-and-no-theme */ export { ArrowLeft as ArrowLeftIcon, ArrowRight as ArrowRightIcon, BookOpen as BookOpenIcon, Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, CircleAlert as CircleAlertIcon, CircleCheck as CircleCheckIcon, CircleHelp as CircleHelpIcon, Copy as CopyIcon, ExternalLink as ExternalLinkIcon, Hash as HashIcon, Info as InfoIcon, Lightbulb as LightbulbIcon, Link2 as LinkIcon, List as ListIcon, Mail as MailIcon, Quote as QuoteIcon, Rss as RssIcon, Share2 as ShareIcon, Tag as TagIcon, TriangleAlert as TriangleAlertIcon, User as UserIcon, } from 'lucide-react' 4e:T1719,/** * The block's type scale and spacing rhythm, as class strings. * * --------------------------------------------------------------------------- * WHY THIS FILE EXISTS * --------------------------------------------------------------------------- * Six routes render a page heading and a lede, and before this file they each * spelled out their own. They drifted, which is the only thing repeated class * strings reliably do: the index heading and the author heading were the same * size, the FAQ heading and the sources heading were not, and nothing anywhere * said which of them was right. * * These are plain strings rather than components on purpose. A component would * hide the styling behind a prop and break the shadcn premise that you can read * a page and see exactly what it renders. A string can be spread into a * `className`, overridden by a later utility through `cn`, or deleted outright * by a consumer who wants their own scale, and none of those need this file to * cooperate. * * --------------------------------------------------------------------------- * THE SCALE * --------------------------------------------------------------------------- * Four text roles, three weights, three tones. Anything on a blog page is one * of these, and a page that needs a fifth role is usually a page that is doing * too much. * * display The page H1. One per route. * lede The sentence under the H1. Muted, and held to the reading * measure even on the wide rail, because a 1,152px line of prose is * not a lede, it is a mistake. * section An H2 outside the article body: Sources, Related posts, the FAQ. * eyebrow The small capitalised label above or beside something else. * meta Bylines, dates, reading times, counts. * * Weights are 400 for body, 500 for meta emphasis and the display headline, and * 600 for the smaller headings. There is no 700 in the block. Tones are * `text-foreground`, `text-muted-foreground`, and `text-primary` for links * inside prose, and there is no fourth. * * The display weight is the one that looks inconsistent written down and is not. * Weight and size both carry emphasis, so they trade against each other: at 48px * a 500 already reads as the heaviest thing on the page, while a 600 at that * size reads as a headline shouting over the sentence it introduces. At 24px the * section headings have no such size advantage and need the 600 to hold their * place above body text. Same optical weight, two different numbers. * * --------------------------------------------------------------------------- * WHY THE TRACKING IS `tracking-tight` AND NEVER TIGHTER * --------------------------------------------------------------------------- * A display size wants negative tracking, and how much depends entirely on the * typeface. This block does not know the typeface: it inherits whatever the * consumer set on `--font-sans`, which might be a geometric sans that needs * -0.04em or a humanist serif that falls apart below -0.01em. `tracking-tight` * is -0.025em, which improves a large heading in almost every face and breaks * none of them. Tune it in your own app once you know your font; do not tune it * here, where it has to be right for everybody's. * * --------------------------------------------------------------------------- * THE SPACING RULE, WHICH IS NOT NEGOTIABLE * --------------------------------------------------------------------------- * **No component in this block sets its own outer margin.** Pages compose with * a flex column and a `gap`, and that is the only mechanism. * * The rule exists because the alternative failed in a specific and invisible * way. Every component used to carry its own `mt-*`, several carried none, and * the ones that carried none were exactly the ones that collided: the category * pills sat flush against the post grid, and the byline sat flush against the * table of contents, both at a measured zero pixels, on the production site, * for as long as the block existed. A missing margin is silent. A missing item * in a flex column is impossible. * * `SECTION_GAP` is the rhythm between top-level regions of a page. * `CLUSTER_GAP` is the rhythm between things that belong together. * * @see styles/agentblog.css for the three layout rails these compose against. */ /** Page H1. One per route, and it never changes on page 2 of a paginated list. */ export const DISPLAY = 'text-foreground text-4xl font-medium tracking-tight text-balance sm:text-5xl' /** * The sentence under the H1. Capped at the reading measure so it stays readable * on the wide rail, where the grid beside it is three times as wide. */ export const LEDE = 'text-muted-foreground max-w-(--agentblog-measure) text-lg leading-relaxed text-pretty sm:text-xl' /** An H2 outside the article body: Sources, Related posts, Areas of expertise. */ export const SECTION_HEADING = 'text-foreground text-2xl font-semibold tracking-tight text-balance' /** The small capitalised label above a section or beside a control. */ export const EYEBROW = 'text-muted-foreground text-xs font-medium tracking-wider uppercase' /** Bylines, dates, reading times, post counts. */ export const META = 'text-muted-foreground text-sm' /** Between top-level regions of a page. */ export const SECTION_GAP = 'flex flex-col gap-12 sm:gap-14' /** Between things that belong to each other: a heading and its list, pills and their grid. */ export const CLUSTER_GAP = 'flex flex-col gap-6' /** The header block on every route: breadcrumb, then the title cluster. */ export const PAGE_HEADER = 'flex flex-col items-start gap-6' /** * Inside the title cluster: H1, then whatever belongs to it. A lede and a count * line on a list page, the byline and the answer capsule on a post. */ export const TITLE_CLUSTER = 'flex flex-col gap-4' 4f:T101d,import type { ElementType, ReactNode } from 'react' import { cn } from '@/lib/utils' /** * Long-form typography wrapper. * * WHERE IT RENDERS * Around the compiled MDX body on `app/blog/[slug]/page.tsx`, and around any * other block of authored prose (the editorial policy page, an author's long * bio). It is the only place the `prose` utility is applied. * * WHY IT IS SHAPED THIS WAY * Two jobs, and deliberately no third: * * 1. Apply `prose` from `@tailwindcss/typography`. * 2. Constrain the measure to `--agentblog-measure` (68ch by default), because * line length is the one typographic decision the plugin does not make for * you and the one that most affects long-form reading. * * It does NOT define colours. The `--tw-prose-*` bridge that binds the plugin's * palette to the consumer's shadcn tokens lives in `styles/agentblog.css`. That * separation is the point: the CSS file is theme wiring, this file is layout. * * DO NOT ADD THE TYPOGRAPHY PLUGIN'S `prose-invert` MODIFIER, AND DO NOT PUT IT * BEHIND A DARK VARIANT. * The bridge maps `--tw-prose-body` and friends to `var(--foreground)` and the * other shadcn tokens, and those tokens already flip under `.dark`. Adding the * inverted palette layers a second, hardcoded set of greys on top of tokens that * have already switched, so dark mode ends up fighting itself. It also breaks * outright for any consumer whose dark theme is not near-black. * @see https://docs.agentblog.dev/guides/match-your-design#only-semantic-tokens-never-a-palette-utility * * WHAT BREAKS IF YOU CHANGE IT * - Adding `'use client'` here pulls the entire article body out of the static * HTML shell. AI crawlers do not execute JavaScript, so the post becomes an * empty div to exactly the readers this block exists to reach. * - Removing the heading `scroll-mt-*` utilities makes every table-of-contents * jump land with the target heading tucked under a sticky header. */ export interface ProseProps { readonly children: ReactNode // Every optional prop in this block is declared `?: T | undefined` rather than // `?: T`. Under `exactOptionalPropertyTypes` those are not the same type, and // the plain form rejects the most ordinary call a consumer makes: // ``. readonly className?: string | undefined /** * The rendered element. Defaults to `div`. Pass `'article'` only when this * wrapper is the article itself; the post route already supplies its own * `

` with the H1, the answer capsule, and the byline in a * `

`, so nesting a second one would give the page two article * landmarks. */ readonly as?: ElementType | undefined } export function Prose({ children, className, as }: ProseProps) { const Component: ElementType = as ?? 'div' return ( {children} ) } 50:T2358,import Image from 'next/image' import Link from 'next/link' import { Badge } from '@/components/ui/badge' import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { categoryPath, postPath } from '@/lib/config' import { readingTime } from '@/lib/reading-time' import type { PublishedPost } from '@/lib/types' import { cn } from '@/lib/utils' import { formatPostDateShort } from './byline' /** * One post, as a card, in a list. * * WHERE IT RENDERS * `post-list.tsx`, which is used by the blog index, category hubs, tag pages, * and author pages. * * WHY IT IS SHAPED THIS WAY * The card is built out of the consumer's own `Card` and `Badge` from * `@/components/ui/*`, not out of a private copy. `shadcn add` refuses to * overwrite a component the user has already customized, so a project that * restyled its `Card` gets that restyled card here for free. That inheritance is * the entire reason the block declares `card` and `badge` as bare-name registry * dependencies. * * ⚠️ ADDING `'use client'` TO THIS FILE REMOVES EVERY POST LIST FROM THE RAW * HTML THAT AI CRAWLERS READ. * The blog index, every category hub, and every author page are nothing but a * grid of these cards. Client components hydrate; crawlers that do not run * JavaScript see whatever was in the first response byte. Keep this a server * component. If you need interactivity (a bookmark toggle, a hover preview), * put it in a small leaf client component and render it *inside* this card, * so the links and the titles stay in the server HTML. * * THE `priority` PROP * When true the hero image is passed `preload`, which emits a * `` for it. `priority` is the deprecated Next.js prop name * and is intentionally not what we pass through. At most ONE image per route may * be preloaded, and only when it is definitively the LCP element. Preloading * every card in a grid makes the browser fetch twelve images at highest priority * and reliably makes LCP worse than doing nothing. `post-list.tsx` exposes * `priorityFirst` for the single legitimate case. * * THE WHOLE CARD IS THE CLICK TARGET, AND IT IS STILL ONE LINK * The title's `` carries `after:absolute after:inset-0`, which stretches a * transparent pseudo-element over the whole card. A reader can click anywhere; * a screen reader still hears exactly one link per card, whose accessible name * is the post title. This is the standard "stretched link" pattern and it has * one standard failure mode: any other interactive element inside the card is * covered by the pseudo-element and stops being clickable. The category badge * therefore carries `relative z-10` to sit above it. If you add a second control * to this card, it needs the same two classes or it will look enabled and do * nothing. * * Because the click target is now the card and not the words, the focus ring is * on the card too, via `has-[a:focus-visible]:ring-2`. Keyboard focus that lands * on a 20px underline inside a 350px card is technically visible and practically * missable. * * WHAT BREAKS IF YOU CHANGE IT * - Replacing the title `` with an onClick handler removes the post from * the crawlable link graph, and the index page stops being a discovery path. * - Dropping `sizes` from the `fill` image makes Next.js serve the largest * candidate to every viewport. * - Removing `relative` from the `Card` un-anchors the stretched link, which * then covers the nearest positioned ancestor instead. In a grid that is the * whole page. * * @see https://docs.agentblog.dev/guides/match-your-design#primitives-are-requested-by-bare-name * @see https://docs.agentblog.dev/reference/files */ export interface PostCardProps { readonly post: PublishedPost /** * Preload the hero image. Only for the single LCP image on a route. Read the * note above before setting this on more than one card. */ readonly priority?: boolean | undefined /** * Heading level for the card title. Defaults to 2, which is correct under a * page whose H1 is the list heading. Pass 3 when the list itself sits under an * H2, so the document keeps a heading order with no skipped levels. */ readonly headingLevel?: 2 | 3 | undefined readonly className?: string | undefined } export function PostCard({ post, priority, headingLevel, className }: PostCardProps) { const Heading = headingLevel === 3 ? 'h3' : 'h2' const href = postPath(post.slug) const { minutes } = readingTime(post.body) // `PostSchema` refuses a heroImage without a heroAlt, so the pair is either // fully present or fully absent. The render path narrows to an object rather // than casting, because an unlabelled image is an accessibility failure and a // cast would quietly let one through if the schema ever loosened. const hero = post.heroImage !== undefined && post.heroAlt !== undefined ? { src: post.heroImage, alt: post.heroAlt } : null return ( {hero ? ( // The image link duplicates the title link, so it is hidden from // assistive tech and removed from the tab order. A screen reader reader // hears one link per card, a mouse user can click the picture.

) : null} {/* `Card` is set to `pt-0` above so the hero can sit flush with the top border. With no hero there is nothing to sit flush with, so the header takes the padding back. */}

{/* `relative z-10` lifts the badge above the title's stretched link. Without it this is a link that cannot be clicked. */} {post.category.name}

{post.title} {post.description} {/* `mt-auto` pins the meta to the bottom of a `h-full` card, so a two-line title and a three-line title still align across a row. The hairline gives the row a floor without adding a second surface. */} {/* Plain text, not a link. One link target per card keeps the card's anchor text unambiguous and stops list pages turning into link soup. */} {post.author.name} {formatPostDateShort(post.datePublished)} {/* No clock icon, and the words carry the meaning instead. A glyph beside "min read" draws the noun the phrase already contains, and at this size it draws it badly. Same reasoning, same wording, as ``. */} {`${minutes} min read`} ) } 51:Tff1,import type { PublishedPost } from '@/lib/types' import { cn } from '@/lib/utils' import { PostCard } from './post-card' /** * A grid of `PostCard`s. * * WHERE IT RENDERS * The blog index (`app/blog/page.tsx`), category hubs, tag pages, and author * pages. Every list surface in the block goes through this component so they all * paginate, wrap, and empty out the same way. * * WHY IT IS SHAPED THIS WAY * A real `

`s, not a bag of divs. Screen readers announce the * item count, and a parser gets an unambiguous collection boundary instead of * having to infer one from class names. The grid lives on the `
- ` needs no wrapper of its own. * * The empty state is text, not an illustration: "No posts published yet." by * default, which is what every route currently gets because none of them * override it. A hub with no posts is a page a crawler may still fetch, and a * plain sentence is a truthful thin-content signal, which is better than an * empty grid that reads as broken. Pass `emptyMessage` when a route can say * something more specific ("No posts in this category yet."). * * WHAT BREAKS IF YOU CHANGE IT * - Adding `'use client'` (or infinite scroll, or a "load more" button) takes * every post link out of the crawlable HTML. Infinite scroll in particular is * a listed extraction killer: the links below the fold never exist in the * markup at all. Pagination stays server rendered, with real hrefs. * @see https://docs.agentblog.dev/concepts/geo-playbook* - Turning the `

{title ?? 'Related posts'}

{post.title}

{shouldLink ? ( {author.name} ) : ( author.name )}