astro-awesomeness 1.2.2 → 2.0.0

package/src/astro/header.astro

@@ -1,5 +1,5 @@
 ---
-import { ThemeToggle } from "../components/theme-toggle";
+import { ThemeToggle } from "../compositions/theme-toggle";
 import { cn } from "../lib/cn";
 
 type Props = {

package/src/astro/post-card.astro

@@ -27,11 +27,3 @@ const href = postHref ? postHref(post) : `/blog/${post.id}`;
   </a>
   {tags.length > 0 && <TagList tags={tags} class="mt-3" />}
 </article>
-
-<style>
-  /* Keep first 3 eager so above-the-fold paint isn't gated on containment checks. */
-  .post-card:nth-child(n + 4) {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 200px;
-  }
-</style>

package/src/astro/seo.astro

@@ -6,8 +6,10 @@ type Props = {
   image?: string;
   locale?: string;
   modifiedTime?: Date;
+  noindex?: boolean;
   publishedTime?: Date;
   siteName?: string;
+  siteTitle?: string;
   title: string;
   type?: "website" | "article";
 };
@@ -19,17 +21,20 @@ const {
   image,
   locale = "en_US",
   modifiedTime,
+  noindex = false,
   publishedTime,
   siteName,
+  siteTitle,
   title,
   type = "website",
 } = Astro.props;
 const url = canonical ?? new URL(Astro.url.pathname, Astro.site ?? Astro.url.origin).toString();
+const documentTitle = siteTitle !== undefined && title !== siteTitle ? `${title} · ${siteTitle}` : title;
 ---
-<title>{title}</title>
+<title>{documentTitle}</title>
 <meta name="description" content={description} />
 {authorName && <meta name="author" content={authorName} />}
-<link rel="canonical" href={url} />
+{noindex ? <meta name="robots" content="noindex,follow" /> : <link rel="canonical" href={url} />}
 
 <meta property="og:type" content={type} />
 <meta property="og:title" content={title} />

package/src/astro/tag-list.astro

@@ -1,5 +1,5 @@
 ---
-import { DEFAULT_TAG_BASE, tagUrl } from "../lib/tag-url";
+import { DEFAULT_TAG_BASE, tagLabel, tagUrl, uniqueTags } from "../lib/tag-url";
 import { cn } from "../lib/cn";
 
 type Props = {
@@ -11,13 +11,13 @@ type Props = {
 const { base = DEFAULT_TAG_BASE, class: className = "", tags } = Astro.props;
 ---
 <ul class={cn("flex flex-wrap gap-2", className)}>
-  {tags.map((tag) => (
+  {uniqueTags(tags).map((tag) => (
     <li>
       <a
         href={tagUrl(tag, base)}
         class="border-border bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground inline-flex items-center rounded-md border px-2 py-0.5 text-xs transition-colors"
       >
-        {tag}
+        {tagLabel(tag)}
       </a>
     </li>
   ))}

package/src/components/button.tsx

@@ -0,0 +1,56 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-lg": "size-9",
+        "icon-sm": "size-7 rounded-control in-data-[slot=button-group]:rounded-lg",
+        "icon-xs":
+          "size-6 rounded-control-sm in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 gap-1 rounded-control px-2.5 text-(length:--text-control) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-control-sm px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary-hover aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+      },
+    },
+  },
+);
+
+const Button = ({
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {
+  return (
+    <ButtonPrimitive
+      className={cn(buttonVariants({ className, size, variant }))}
+      data-slot="button"
+      {...props}
+    />
+  );
+};
+
+export { Button, buttonVariants };

package/src/components/index.ts

@@ -1,3 +1,2 @@
-export { Button } from "./ui/button";
-export { buttonVariants } from "./ui/button-variants";
-export { ThemeToggle } from "./theme-toggle";
+export { Button, buttonVariants } from "./button";
+export { ThemeToggle } from "../compositions/theme-toggle";

package/src/{components → compositions}/theme-toggle.tsx

@@ -1,7 +1,7 @@
 import { Moon, Sun } from "lucide-react";
 import { useSyncExternalStore } from "react";
 
-import { Button } from "./ui/button";
+import { Button } from "../components/button";
 
 type Theme = "light" | "dark";
 
@@ -59,7 +59,16 @@ type Props = {
   ariaLabel?: string;
 };
 
+const subscribeHydration = () => () => {};
+const getHydratedSnapshot = () => true;
+const getServerHydratedSnapshot = () => false;
+
 const ThemeToggle = ({ ariaLabel = "Toggle theme" }: Props) => {
+  const isHydrated = useSyncExternalStore(
+    subscribeHydration,
+    getHydratedSnapshot,
+    getServerHydratedSnapshot,
+  );
   const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);
   const override = useSyncExternalStore(subscribeStoredTheme, getStoredTheme, () => null);
   const theme: Theme = override ?? (prefersDark ? "dark" : "light");
@@ -71,7 +80,13 @@ const ThemeToggle = ({ ariaLabel = "Toggle theme" }: Props) => {
   };
 
   return (
-    <Button aria-label={ariaLabel} onClick={handleToggleTheme} size="icon" variant="ghost">
+    <Button
+      aria-label={ariaLabel}
+      disabled={!isHydrated}
+      onClick={handleToggleTheme}
+      size="icon"
+      variant="ghost"
+    >
       {theme === "dark" ? <Sun /> : <Moon />}
     </Button>
   );

package/src/layouts/base-layout.astro

@@ -10,6 +10,7 @@ type Props = {
   lang?: string;
   locale?: string;
   modifiedTime?: Date;
+  noindex?: boolean;
   publishedTime?: Date;
   rssHref?: string;
   siteName?: string;
@@ -27,6 +28,7 @@ const {
   lang = "en",
   locale,
   modifiedTime,
+  noindex,
   publishedTime,
   rssHref,
   siteName,
@@ -35,6 +37,9 @@ const {
   type = "website",
 } = Astro.props;
 
+const SKIP_LABELS = new Map([["pt", "Pular para o conteúdo"]]);
+const skipLabel = SKIP_LABELS.get(lang.split("-")[0] ?? "") ?? "Skip to content";
+
 const colorSchemeScript =
   colorScheme === "auto"
     ? `(() => {
@@ -59,10 +64,12 @@ const colorSchemeScript =
       image={image}
       type={type}
       siteName={siteName ?? siteTitle}
+      siteTitle={siteTitle}
       locale={locale}
       publishedTime={publishedTime}
       modifiedTime={modifiedTime}
       authorName={authorName}
+      noindex={noindex}
     />
     {rssHref && (
       <link rel="alternate" type="application/rss+xml" title={siteTitle ?? title} href={rssHref} />
@@ -83,7 +90,7 @@ const colorSchemeScript =
       href="#main-content"
       class="bg-background text-foreground border-border focus:ring-ring sr-only z-50 rounded-md border px-3 py-2 focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:ring-2"
     >
-      Skip to content
+      {skipLabel}
     </a>
     <slot name="header" />
     <div class="flex-1">

package/src/layouts/list-layout.astro

@@ -38,16 +38,16 @@ const {
   <Fragment slot="header">{siteTitle && <Header siteTitle={siteTitle} />}</Fragment>
   <Fragment slot="footer">{siteTitle && <Footer siteTitle={siteTitle} />}</Fragment>
   <main id="main-content" tabindex="-1" class="mx-auto w-full max-w-5xl px-5 py-12 sm:px-8 sm:py-20">
-    <header class="mb-12 grid gap-8 border-b border-border pb-12 md:grid-cols-[1.2fr_0.8fr] md:items-end">
+    <header class="mb-12 grid gap-8 border-b border-border pb-12 md:grid-cols-list-heading md:items-end">
       <div>
         {eyebrow && (
-          <p class="text-muted-foreground font-mono text-xs font-semibold tracking-[0.16em]">{eyebrow}</p>
+          <p class="text-muted-foreground font-mono text-xs font-semibold tracking-(--tracking-eyebrow)">{eyebrow}</p>
         )}
-        <h1 class="text-foreground mt-4 max-w-[14ch] font-serif text-5xl leading-[0.95] font-semibold tracking-[-0.045em] sm:text-7xl">
+        <h1 class="text-foreground mt-4 max-w-(--measure-list-title) font-serif text-5xl leading-(--leading-list-title) font-semibold tracking-(--tracking-list-title) sm:text-7xl">
           {title}
         </h1>
       </div>
-      <p class="text-muted-foreground max-w-[38ch] text-lg text-pretty md:justify-self-end">{description}</p>
+      <p class="text-muted-foreground max-w-(--measure-list-intro) text-lg text-pretty md:justify-self-end">{description}</p>
     </header>
     <section class="post-grid">
       {posts.map((post) => <PostCard post={post} locale={locale} postHref={postHref} />)}
@@ -61,41 +61,3 @@ const {
     )}
   </main>
 </BaseLayout>
-
-<style is:global>
-  .post-grid {
-    display: grid;
-    gap: 1px;
-    overflow: hidden;
-    border: 1px solid var(--color-border);
-    background: var(--color-border);
-  }
-
-  .post-grid .post-card {
-    border: 0;
-    background: var(--color-background);
-    padding: 1.75rem;
-  }
-
-  .post-grid .post-card:first-child h2 {
-    max-width: 18ch;
-    font-family: var(--font-serif);
-    font-size: clamp(1.75rem, 4vw, 2.75rem);
-    line-height: 1.05;
-  }
-
-  @media (min-width: 48rem) {
-    .post-grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .post-grid .post-card:first-child {
-      grid-column: 1 / -1;
-      min-height: 18rem;
-      display: flex;
-      flex-direction: column;
-      justify-content: end;
-      padding: 3rem;
-    }
-  }
-</style>

package/src/lib/category-index.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+
+import { createCategoryIndex } from "./category-index";
+
+const map = {
+  Architecture: "arquitetura",
+  "Art & Design": "arte-design",
+  "Arte & Design": "arte-design",
+};
+const DEFAULT = "sem-categoria";
+
+const post = (id: string, categories: Array<string>, canonical?: string, day = 1) => ({
+  data: {
+    categories,
+    pubDate: new Date(Date.UTC(2026, 0, day)),
+    seo: { canonical_url: canonical },
+  },
+  id,
+});
+
+describe("createCategoryIndex", () => {
+  it("names a slug shared by a mapped and a native category after the native one", () => {
+    const { categoryName, groupByCategory } = createCategoryIndex(map, DEFAULT, [
+      post("a", ["Architecture"]),
+      post("b", ["Architecture"]),
+      post("c", ["Arquitetura"]),
+    ]);
+    expect(categoryName("arquitetura")).toBe("Arquitetura");
+    expect(groupByCategory()).toEqual([
+      { name: "Arquitetura", posts: expect.any(Array), slug: "arquitetura" },
+    ]);
+  });
+
+  it("treats a name that slugifies to the slug once decoded as native", () => {
+    const { categoryName } = createCategoryIndex(map, DEFAULT, [
+      post("a", ["Art &amp; Design"]),
+      post("b", ["Arte &amp; Design"]),
+    ]);
+    expect(categoryName("arte-design")).toBe("Arte & Design");
+  });
+
+  it("falls back to the first name when no native name reaches the slug", () => {
+    const { categoryName } = createCategoryIndex(map, DEFAULT, [
+      post("a", ["Architecture"]),
+      post("b", ["Architecture"]),
+    ]);
+    expect(categoryName("arquitetura")).toBe("Architecture");
+  });
+
+  it("resolves a post's eyebrow through the same name as its category page", () => {
+    const { postCategory } = createCategoryIndex(map, DEFAULT, [
+      post("a", ["Business"], "https://x.com/arquitetura/a/"),
+      post("b", ["Architecture"], "https://x.com/arquitetura/b/"),
+      post("c", ["Arquitetura"]),
+    ]);
+    expect(postCategory(post("a", ["Business"], "https://x.com/arquitetura/a/"))).toEqual({
+      name: "Arquitetura",
+      slug: "arquitetura",
+    });
+  });
+
+  it("uses a post's first category for a slug only its canonical url names", () => {
+    const { categoryName } = createCategoryIndex(map, DEFAULT, [
+      post("a", ["Locação de Espaços"], "https://x.com/aluguel-de-espacos/a/"),
+    ]);
+    expect(categoryName("aluguel-de-espacos")).toBe("Locação de Espaços");
+    expect(categoryName("locacao-de-espacos")).toBe("Locação de Espaços");
+  });
+
+  it("humanizes a slug no post names", () => {
+    const { categoryName, postCategory } = createCategoryIndex(map, DEFAULT, []);
+    expect(categoryName("sem-categoria")).toBe("Sem categoria");
+    expect(postCategory(post("orphan", []))).toEqual({ name: "Sem categoria", slug: DEFAULT });
+  });
+
+  it("groups by the canonical category and sorts each bucket newest first", () => {
+    const { groupByCategory } = createCategoryIndex(map, DEFAULT, [
+      post("old", ["Arquitetura"], undefined, 1),
+      post("new", ["Arquitetura"], undefined, 9),
+      post("orphan", []),
+    ]);
+    const buckets = groupByCategory();
+    expect(buckets.map((b) => b.slug)).toEqual(["arquitetura", "sem-categoria"]);
+    expect(buckets[0]?.posts.map((p) => p.id)).toEqual(["new", "old"]);
+    expect(buckets[1]?.name).toBe("Sem categoria");
+  });
+
+  it("adds a post to each secondary category bucket only when asked", () => {
+    const posts = [post("a", ["Arquitetura", "Interiores"])];
+    const { groupByCategory } = createCategoryIndex(map, DEFAULT, posts);
+    expect(groupByCategory().map((b) => b.slug)).toEqual(["arquitetura"]);
+    expect(
+      groupByCategory({ includeSecondaryCategories: true }).map((b) => [b.slug, b.name]),
+    ).toEqual([
+      ["arquitetura", "Arquitetura"],
+      ["interiores", "Interiores"],
+    ]);
+  });
+});

package/src/lib/category-index.ts

@@ -0,0 +1,97 @@
+import { byPubDateDesc } from "../content/index";
+import { categoryLabel } from "./category-label";
+import type { PostLike } from "./post-url";
+import { createPostUrl } from "./post-url";
+import { slugify } from "./slugify";
+
+type CategoryPostLike = PostLike & { data: { categories: Array<string>; pubDate: Date } };
+
+type CategoryBucket<P> = { name: string; posts: Array<P>; slug: string };
+
+type PostCategory = { name: string; slug: string };
+
+type GroupOptions = {
+  includeSecondaryCategories?: boolean;
+};
+
+const humanize = (slug: string): string => {
+  const words = slug.replaceAll("-", " ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
+
+const createCategoryIndex = <P extends CategoryPostLike>(
+  categorySlugMap: Record<string, string>,
+  defaultCategory: string,
+  posts: Array<P>,
+) => {
+  const { postParams } = createPostUrl(categorySlugMap, defaultCategory);
+  const categorySlug = (name: string) => categorySlugMap[name] ?? slugify(name);
+
+  const namesBySlug = new Map<string, Set<string>>();
+  const register = (slug: string, name: string) => {
+    namesBySlug.set(slug, (namesBySlug.get(slug) ?? new Set()).add(name));
+  };
+  for (const post of posts) {
+    const { category } = postParams(post);
+    const names = post.data.categories;
+    for (const name of names) {
+      register(categorySlug(name), name);
+    }
+    const first = names[0];
+    if (first !== undefined && !names.some((name) => categorySlug(name) === category)) {
+      register(category, first);
+    }
+  }
+
+  const categoryName = (slug: string): string => {
+    const names = [...(namesBySlug.get(slug) ?? [])];
+    const native = names.find((name) => slugify(categoryLabel(name)) === slug);
+    const mapped = names.find((name) => categorySlug(name) === slug);
+    const name = native ?? mapped ?? names[0];
+    return name === undefined ? humanize(slug) : categoryLabel(name);
+  };
+
+  const postCategory = (post: PostLike): PostCategory => {
+    const { category } = postParams(post);
+    return { name: categoryName(category), slug: category };
+  };
+
+  const groupByCategory = ({ includeSecondaryCategories = false }: GroupOptions = {}): Array<
+    CategoryBucket<P>
+  > => {
+    const postsBySlug = new Map<string, Array<P>>();
+    const add = (slug: string, post: P) => {
+      const bucket = postsBySlug.get(slug);
+      if (bucket) {
+        bucket.push(post);
+      } else {
+        postsBySlug.set(slug, [post]);
+      }
+    };
+
+    for (const post of posts) {
+      const { category } = postParams(post);
+      add(category, post);
+      if (!includeSecondaryCategories) {
+        continue;
+      }
+      for (const name of post.data.categories) {
+        const slug = categorySlug(name);
+        if (slug !== category) {
+          add(slug, post);
+        }
+      }
+    }
+
+    return [...postsBySlug].map(([slug, bucketPosts]) => ({
+      name: categoryName(slug),
+      posts: bucketPosts.toSorted(byPubDateDesc),
+      slug,
+    }));
+  };
+
+  return { categoryName, groupByCategory, postCategory };
+};
+
+export type { CategoryBucket, CategoryPostLike, PostCategory };
+export { createCategoryIndex };

package/src/lib/cn.test.ts

@@ -4,12 +4,12 @@ import { cn } from "./cn";
 
 describe("cn", () => {
   it("merges class names", () => {
-    expect(cn("a", "b")).toBe("a b");
+    expect(cn("block", "relative")).toBe("block relative");
   });
   it("dedupes conflicting tailwind classes (last wins)", () => {
     expect(cn("p-2", "p-4")).toBe("p-4");
   });
   it("filters falsy values", () => {
-    expect(cn("a", false, undefined, null, "b")).toBe("a b");
+    expect(cn("block", false, undefined, null, "relative")).toBe("block relative");
   });
 });

package/src/lib/index.ts

@@ -1,4 +1,6 @@
 export { cn } from "./cn";
+export type { CategoryBucket, CategoryPostLike, PostCategory } from "./category-index";
+export { createCategoryIndex } from "./category-index";
 export { categoryLabel } from "./category-label";
 export { formatDate } from "./format-date";
 export { getRelatedPosts } from "./get-related-posts";
@@ -7,4 +9,4 @@ export { createPostUrl } from "./post-url";
 export { readingTime } from "./reading-time";
 export { requireEnv } from "./require-env";
 export { slugify } from "./slugify";
-export { DEFAULT_TAG_BASE, tagUrl } from "./tag-url";
+export { DEFAULT_TAG_BASE, tagLabel, tagUrl, uniqueTags } from "./tag-url";

package/src/lib/tag-url.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { DEFAULT_TAG_BASE, tagUrl } from "./tag-url";
+import { DEFAULT_TAG_BASE, tagLabel, tagUrl, uniqueTags } from "./tag-url";
 
 describe("tagUrl", () => {
   it("defaults to the /tag base every consuming blog routes on", () => {
@@ -21,3 +21,34 @@ describe("tagUrl", () => {
     expect(tagUrl("Área Externa")).toBe("/tag/area-externa/");
   });
 });
+
+describe("tagLabel", () => {
+  it("drops a leading hashtag and nothing else", () => {
+    expect(tagLabel("#construção")).toBe("construção");
+    expect(tagLabel("construção")).toBe("construção");
+    expect(tagLabel("c#")).toBe("c#");
+  });
+});
+
+describe("uniqueTags", () => {
+  it("collapses tags that share a slug onto the first occurrence", () => {
+    expect(
+      uniqueTags([
+        "#construção",
+        "construção",
+        "#LocaçõesDeEspaços",
+        "#locaçõesdeespaços",
+        "Tendências2025",
+        "#tendências2025",
+        "decoração",
+      ]),
+    ).toEqual(["#construção", "#LocaçõesDeEspaços", "Tendências2025", "decoração"]);
+  });
+
+  it("keeps tags whose slugs differ", () => {
+    expect(uniqueTags(["arquitetura", "arquitetura de luxo"])).toEqual([
+      "arquitetura",
+      "arquitetura de luxo",
+    ]);
+  });
+});

package/src/lib/tag-url.ts

@@ -5,4 +5,18 @@ const DEFAULT_TAG_BASE = "/tag";
 const tagUrl = (tag: string, base: string = DEFAULT_TAG_BASE): string =>
   `${base.replace(/\/+$/v, "")}/${slugify(tag)}/`;
 
-export { DEFAULT_TAG_BASE, tagUrl };
+const tagLabel = (tag: string): string => tag.replace(/^#/v, "");
+
+const uniqueTags = (tags: Array<string>): Array<string> => {
+  const seen = new Set<string>();
+  return tags.filter((tag) => {
+    const slug = slugify(tag);
+    if (seen.has(slug)) {
+      return false;
+    }
+    seen.add(slug);
+    return true;
+  });
+};
+
+export { DEFAULT_TAG_BASE, tagLabel, tagUrl, uniqueTags };

package/src/styles/globals.css

@@ -2,6 +2,7 @@
    It contributes tokens, base styles, prose, and the dark variant. */
 
 @import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 /* Scan our own .astro/.tsx files so consumer Tailwind generates utilities
    used by the theme. Paths resolve from dist/styles/globals.css after build:
@@ -9,10 +10,17 @@
 @source "../../src/astro/**/*.astro";
 @source "../../src/layouts/**/*.astro";
 @source "../../src/components/**/*.{ts,tsx}";
+@source "../../src/compositions/**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  --tracking-eyebrow: 0.16em;
+  --tracking-list-title: -0.045em;
+  --leading-list-title: 0.95;
+  --measure-list-title: 14ch;
+  --measure-list-intro: 38ch;
+
   --color-background: oklch(1 0 0);
   --color-foreground: oklch(0.145 0 0);
   --color-card: oklch(1 0 0);
@@ -24,7 +32,7 @@
   --color-secondary: oklch(0.97 0 0);
   --color-secondary-foreground: oklch(0.205 0 0);
   --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.556 0 0);
+  --color-muted-foreground: oklch(0.54 0 0);
   --color-accent: oklch(0.97 0 0);
   --color-accent-foreground: oklch(0.205 0 0);
   --color-destructive: oklch(0.577 0.245 27.325);
@@ -264,3 +272,58 @@
     text-align: left;
   }
 }
+
+@utility post-grid {
+  display: grid;
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background: var(--color-border);
+}
+
+.post-grid .post-card {
+  border: 0;
+  background: var(--color-background);
+  padding: 1.75rem;
+}
+
+.post-grid .post-card:first-child h2 {
+  max-width: 18ch;
+  font-family: var(--font-serif);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+}
+
+@media (min-width: 48rem) {
+  .post-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .post-grid .post-card:first-child {
+    grid-column: 1 / -1;
+    min-height: 18rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    padding: 3rem;
+  }
+}
+
+/* Keep first 3 eager so above-the-fold paint isn't gated on containment checks. */
+@utility post-card {
+  &:nth-child(n + 4) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+  }
+}
+
+@utility grid-cols-list-heading {
+  grid-template-columns: 1.2fr 0.8fr;
+}
+
+@theme inline {
+  --radius-control-sm: min(var(--radius-md), 10px);
+  --radius-control: min(var(--radius-md), 12px);
+  --text-control: 0.8rem;
+  --color-secondary-hover: color-mix(in oklch, var(--color-secondary), var(--color-foreground) 5%);
+}