@half-built/astro 0.5.0 → 0.6.0

package/README.md

@@ -12,8 +12,39 @@ is the design record for this package.
 
 ## Icons
 
-Default icon glyphs are derived from Lucide (https://lucide.dev), ISC
-license. See `ICONS-LICENSE`.
+Every glyph the package draws comes from one registry,
+`scripts/core/icons.ts`, derived from Lucide (https://lucide.dev), ISC
+license; see `ICONS-LICENSE`. Templates render one through
+`components/Icon.astro`:
+
+```astro
+<Icon name="search" size={14} />
+```
+
+`name` is a registry key (`x`, `play`, `sparkles`, `pause`,
+`rotate-ccw`, `chevron-left`, `chevron-right`, `chevron-up`,
+`arrow-left`, `arrow-right`, `sun`, `moon`, `search`, `clock`, `user`,
+`calendar`, `circle`), `size` a CSS
+length or pixel count (default `1em`, tracking the parent's font
+size), `strokeWidth` defaults to 2.5, and `class` lands on the svg.
+The icon is decorative by contract (aria-hidden, pointer-events none),
+so the accessible name belongs to the button or link around it. The
+svg arrives through `set:html` and carries no scoped-style attribute;
+style it from the parent with `:global(svg)`. Client scripts take the
+`ICON_*` strings from the same file. Add a glyph to the registry,
+never as inline `<svg>` in a component; a test enforces that.
+
+## Corner badges
+
+`CornerBadges.astro` takes its chips as data, `badges: Badge[]` from
+`scripts/core/badges.ts`: a `key` (rendered as the `badge-<key>` class,
+the styling hook), a `label`, and an `icon` name from the registry.
+The two house conventions ship as `GENAI_BADGE` and `DEMO_BADGE`; a
+site's view-model lists the badges a post carries, in order, and can
+add its own without a package change. `PostCardModel.badges` carries
+them to the card. The content components (`BlogImage`, `GalleryImage`,
+`MediaText`) keep a `genai` boolean as authoring sugar for MDX and take
+`badges` for anything else.
 
 ## EditorNote
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@half-built/astro",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Astro components, islands, and pure helpers for the half-built design system.",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,10 @@
     "directory": "packages/astro"
   },
   "type": "module",
-  "files": ["src", "ICONS-LICENSE"],
+  "files": [
+    "src",
+    "ICONS-LICENSE"
+  ],
   "exports": {
     "./components/Masthead.astro": "./src/components/SiteHeader.astro",
     "./components/*": "./src/components/*",
@@ -19,6 +22,10 @@
     "./shiki/code-theme": "./src/shiki/code-theme.mjs",
     "./shiki/code-vars": "./src/shiki/code-vars.mjs"
   },
-  "peerDependencies": { "astro": "^5.0.0" },
-  "publishConfig": { "access": "public" }
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/components/CategoryCard.astro

@@ -1,10 +1,17 @@
 ---
 import type { ImageMetadata } from "astro";
 
-interface Props { name: string; href: string; image: ImageMetadata; class?: string }
+interface Props {
+  name: string;
+  href: string;
+  image: ImageMetadata;
+  class?: string;
+}
+
 const { name, href, image, class: className } = Astro.props;
 const bg = `background-image:url('${image.src.replace(/'/g, "%27").replace(/"/g, "%22")}')`;
 ---
+
 <a class:list={["category-single", className]} href={href}>
   <span class="category-img" style={bg}></span>
   <span class="category-label chip">{name}</span>
@@ -21,6 +28,7 @@ const bg = `background-image:url('${image.src.replace(/'/g, "%27").replace(/"/g,
     text-decoration: none;
   }
   .category-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
+
   /* Chip look comes from the .chip pattern; card-specific metrics only. */
   .category-label {
     position: relative;

package/src/components/CornerBadges.astro

@@ -1,27 +1,20 @@
 ---
-/* Corner badges (owner request 2026-08-27, after launch): the chip
-   family the archive cards' read-time chip belongs to, pinned to the
-   lower-right corner of the image they sit on.
-   - AI Art marks an AI-generated image: heroes through the heroGenAI
-     frontmatter flag, content images through the genai prop on
-     BlogImage, GalleryImage, and MediaText. Images that only went
-     through ordinary editing carry nothing.
-   - Demo marks a post that carries an interactive demo (the demo
-     frontmatter flag), on the card and the post hero.
-   Renders nothing when neither applies. The container is absolutely
-   positioned, so the parent supplies position: relative. pointer-events
-   off: a badge inside a lightbox link must not swallow the tap. */
-import { ICON_PLAY, ICON_SPARKLES } from "../scripts/core/icons";
+import Icon from "./Icon.astro";
+import type { Badge } from "../scripts/core/badges";
 
-interface Props { genai?: boolean; demo?: boolean; class?: string; genaiLabel?: string; demoLabel?: string }
-const { genai = false, demo = false, class: className, genaiLabel = "AI Art", demoLabel = "Demo" } = Astro.props;
+interface Props {
+  badges?: Badge[];
+  class?: string;
+}
+
+const { badges = [], class: className } = Astro.props;
 ---
-{(genai || demo) && (
-  <span class:list={["corner-badges", className]}>
-    {genai && <span class="chip badge-genai"><Fragment set:html={ICON_SPARKLES} /> {genaiLabel}</span>}
-    {demo && <span class="chip badge-demo"><Fragment set:html={ICON_PLAY} /> {demoLabel}</span>}
-  </span>
-)}
+
+{badges.length > 0 && <span class:list={["corner-badges", className]}>
+  {badges.map((badge) => <span class:list={["chip", `badge-${badge.key}`]}>
+    <Icon name={badge.icon} /> {badge.label}
+  </span>)}
+</span>}
 
 <style>
   /* Chip look comes from the .chip pattern; the read-time chip sits

package/src/components/Footer.astro

@@ -1,25 +1,28 @@
 ---
 import type { SitemapGroup, EcosystemEntry } from "./models";
 import { BP_PHONE_MAX } from "../scripts/core/breakpoints";
-/* The real half-built-robots.com footer is a single bottom bar with the
-   copyright line, and the live site has no footer widget row. The sitemap
-   below the copyright line is a deliberate divergence, owner-directed
-   2026-07-30 (docs/superpowers/specs/2026-07-30-footer-sitemap-design.md).
-   The old theme credit stays dropped: this build is original code, not the
-   Adore theme. Everything below renders from the sitemap/ecosystem props
-   Base.astro passes in; SitemapGroup and EcosystemEntry live in models.ts. */
+
 interface Props {
   siteName: string;
   legalHolder: string;
   sitemap: SitemapGroup[];
   ecosystem: EcosystemEntry[];
-  /* The entry rendered as this site itself (unlinked, bold). */
   ecosystemSelf: string;
   ecosystemTitle?: string;
 }
-const { siteName, legalHolder, sitemap, ecosystem, ecosystemSelf, ecosystemTitle = "Ecosystem" } = Astro.props;
+
+const {
+  siteName,
+  legalHolder,
+  sitemap,
+  ecosystem,
+  ecosystemSelf,
+  ecosystemTitle = "Ecosystem",
+} = Astro.props;
+
 const year = new Date().getFullYear();
 ---
+
 <footer id="colophon" class="site-footer">
   <div class="bottom-footer tint-overlay">
     <div class="shell">
@@ -30,32 +33,38 @@ const year = new Date().getFullYear();
               which the line break replaces below the mobile breakpoint
               (owner call 2026-08-20). Desktop and tablet render the
               one line exactly as before. */}
-          <slot name="site-info"><span>
+          <slot name="site-info"
+            ><span>
               <span class="site-info-seg">Copyright © {year}</span>{" "}
               <span class="site-info-seg">{legalHolder}</span>{" "}
               <span class="site-info-sep" aria-hidden="true">|</span>{" "}
               <a class="site-info-seg" href="/">{siteName}</a>
-            </span></slot>
+            </span></slot
+          >
         </div>
       </div>
       <nav class="footer-sitemap" aria-label="Sitemap">
         {sitemap.map((group) =>
           group.collapsible ? (
-            <details class="footer-sitemap-group footer-sitemap-collapsible" open data-phone-open={group.phoneOpen ? "" : undefined}>
+            <details
+              class="footer-sitemap-group footer-sitemap-collapsible"
+              open
+              data-phone-open={group.phoneOpen ? "" : undefined}
+            >
               <summary><h2>{group.title}</h2></summary>
               <ul>
-                {group.links.map((link) => (
-                  <li><a href={link.href}>{link.label}</a></li>
-                ))}
+                {group.links.map((link) => <li>
+                  <a href={link.href}>{link.label}</a>
+                </li>)}
               </ul>
             </details>
           ) : (
             <section class="footer-sitemap-group">
               <h2>{group.title}</h2>
               <ul>
-                {group.links.map((link) => (
-                  <li><a href={link.href}>{link.label}</a></li>
-                ))}
+                {group.links.map((link) => <li>
+                  <a href={link.href}>{link.label}</a>
+                </li>)}
               </ul>
             </section>
           ),
@@ -63,17 +72,23 @@ const year = new Date().getFullYear();
         <details class="footer-sitemap-group footer-sitemap-collapsible" open>
           <summary><h2>{ecosystemTitle}</h2></summary>
           <ul data-ecosystem>
-            {ecosystem.map((entry) => (
-              <li>
-                {entry.key === ecosystemSelf ? (
-                  <span class="footer-sitemap-self" aria-current="page">{entry.label}</span>
-                ) : entry.href !== null ? (
-                  <a href={entry.href}>{entry.label}</a>
-                ) : (
-                  <span class="footer-sitemap-pending">{entry.label}</span>
-                )}
-              </li>
-            ))}
+            {ecosystem.map((entry) => {
+              /* Three states, one block each: this site, a live
+                 property, a property with no href yet. */
+              const self = entry.key === ecosystemSelf;
+              const live = !self && entry.href !== null;
+              const pending = !self && !live;
+
+              return <li>
+                {self && <span class="footer-sitemap-self" aria-current="page"
+                  >{entry.label}</span
+                >}{live && <a href={entry.href}
+                  >{entry.label}</a
+                >}{pending && <span class="footer-sitemap-pending"
+                  >{entry.label}</span
+                >}
+              </li>;
+            })}
           </ul>
         </details>
       </nav>
@@ -97,12 +112,14 @@ const year = new Date().getFullYear();
 
 <style>
   .site-footer { margin-top: 50px; }
+
   /* Tint comes from the .tint-overlay pattern (default 0.1 opacity).
      The bottom padding adds --dock-bottom (tokens/primitives.css): a
      site with a viewport-fixed bottom cluster sets it to the room
      that cluster occupies, and the tinted band runs on below the last
      link by that much, so the page scrolls far enough to clear it. */
   .bottom-footer { padding: 15px 0 calc(20px + var(--dock-bottom, 0px)); z-index: 1; }
+
   .bottom-footer-info {
     display: flex;
     flex-wrap: wrap;
@@ -111,9 +128,11 @@ const year = new Date().getFullYear();
     position: relative;
     font-size: var(--font-size-sm);
   }
+
   /* The wrapped phone lines center under each other like the sitemap
      below (owner report 2026-08-25); one line on desktop, as before. */
   .site-info { text-align: center; }
+
   /* Underlined, unlike the sitemap links below: this one sits inside
      running text (the copyright line), where the same ink at 0.8
      opacity is not a visible link mark (WCAG 1.4.1, axe
@@ -121,6 +140,7 @@ const year = new Date().getFullYear();
      where the pipe retires and the line break is all that frames it). */
   .site-info a { text-decoration: underline; opacity: 0.8; transition: var(--transition); color: var(--ink); }
   .site-info-seg { white-space: nowrap; }
+
   /* The pipe's separating job is done by the line break when the
      segments wrap; below the mobile breakpoint the break is expected,
      so the pipe retires there. */
@@ -141,25 +161,30 @@ const year = new Date().getFullYear();
     border-top: 1px solid var(--hairline);
     font-size: var(--font-size-sm);
   }
+
   .footer-sitemap-group h2 {
     margin: 0 0 8px;
     font-size: var(--font-size-xs);
     font-weight: 700;
     text-transform: uppercase;
   }
+
   .footer-sitemap-group ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .footer-sitemap-group li { margin: 4px 0; }
+
   .footer-sitemap a {
     text-decoration: none;
     opacity: 0.8;
     transition: var(--transition);
   }
+
   .footer-sitemap a:hover,
   .footer-sitemap a:focus { opacity: 1; text-decoration: underline; }
+
   /* The monochrome theme makes a color marker invisible (text already IS
      the primary color), so "you are here" is weight, not hue. */
   .footer-sitemap-self { font-weight: 700; }
@@ -186,12 +211,14 @@ const year = new Date().getFullYear();
       gap: 14px;
     }
     .footer-sitemap-group { text-align: center; width: 100%; }
+
     .footer-sitemap-collapsible summary {
       display: block;
       position: relative;
       cursor: pointer;
       pointer-events: auto;
     }
+
     .footer-sitemap-collapsible summary::before {
       content: "+";
       position: absolute;
@@ -208,6 +235,7 @@ const year = new Date().getFullYear();
     }
     .footer-sitemap-collapsible[open] summary::before { content: "\2212"; }
     .footer-sitemap-collapsible:not([open]) summary h2 { margin-bottom: 0; }
+
     /* Keyboard focus is the site-wide ring (base/reset.css). */
   }
 </style>

package/src/components/Icon.astro

@@ -0,0 +1,16 @@
+---
+import { iconMarkup, type IconName } from "../scripts/core/icons";
+
+interface Props {
+  name: IconName;
+  size?: number | string;
+  strokeWidth?: number;
+  class?: string;
+}
+
+const { name, size, strokeWidth, class: className } = Astro.props;
+---
+
+<Fragment
+  set:html={iconMarkup(name, { size, strokeWidth, class: className })}
+/>

package/src/components/LightboxLink.astro

@@ -1,13 +1,22 @@
 ---
-/* The build-time lightbox anchor (step 5, 2026-08-30): owner of the
-   data-lb-* contract that scripts/lightbox.ts itemFor() reads. The
-   caption string feeds both data-lb-caption and the aria-label detail;
-   every pre-step-5 site passed the same string to both. class:list
-   stays FIRST in the tag: content-components and kitchen-sink pin
-   `<a class="lightbox-link"` as the anchor's opening. Base styling
-   (display, position, cursor) lives in styles/lightbox.css; no scoped
-   CSS here so callers' :global-wrapped rules reach the anchor. */
-interface Props extends Record<string, unknown> { href: string; w: number; h: number; caption?: string; class?: string }
+interface Props extends Record<string, unknown> {
+  href: string;
+  w: number;
+  h: number;
+  caption?: string;
+  class?: string;
+}
+
 const { href, w, h, caption = "", class: className, ...rest } = Astro.props;
 ---
-<a class:list={["lightbox-link", className]} href={href} data-lb-w={w} data-lb-h={h} data-lb-caption={caption} aria-label={`View full-size image${caption ? `: ${caption}` : ""}`} {...rest}><slot /></a>
+
+<a
+  class:list={["lightbox-link", className]}
+  href={href}
+  data-lb-w={w}
+  data-lb-h={h}
+  data-lb-caption={caption}
+  aria-label={`View full-size image${caption ? `: ${caption}` : ""}`}
+  {...rest}
+  ><slot
+/></a>

package/src/components/LinkListWidget.astro

@@ -1,19 +1,21 @@
 ---
-/* One list widget for the sidebar's three lists (step 6, 2026-08-30):
-   a Widget holding a link list, counts rendered when present. Replaces
-   RecentPosts, CategoriesWidget, and ArchivesWidget; the sidebar builds
-   the items via src/lib/view-models.ts. The class prop rides down to
-   Widget's root, so this file has no class:list of its own. */
 import Widget from "./Widget.astro";
 import type { LinkListItem } from "./models";
 
-interface Props { title: string; items: LinkListItem[]; headingLevel?: 2 | 3 | 4; class?: string }
+interface Props {
+  title: string;
+  items: LinkListItem[];
+  headingLevel?: 2 | 3 | 4;
+  class?: string;
+}
+
 const { title, items, headingLevel = 2, class: className } = Astro.props;
 ---
+
 <Widget title={title} headingLevel={headingLevel} class={className}>
   <ul>
-    {items.map((i) => (
-      <li><a href={i.href}>{i.label}</a>{i.count !== undefined && ` (${i.count})`}</li>
-    ))}
+    {items.map((i) => <li>
+      <a href={i.href}>{i.label}</a>{i.count !== undefined && ` (${i.count})`}
+    </li>)}
   </ul>
 </Widget>

package/src/components/Pagination.astro

@@ -1,7 +1,7 @@
 ---
-/* Pagination matching the live WordPress markup: nav.navigation.pagination
-   with .nav-links containing .page-numbers boxes and Prev/Next arrows. */
 import { archivePagePath } from "../lib/paginate";
+import Icon from "./Icon.astro";
+
 interface Props {
   current: number;
   total: number;
@@ -9,34 +9,54 @@ interface Props {
   class?: string;
   labels?: { heading?: string; prev?: string; next?: string };
 }
-const { current, total, base = "", class: className, labels: labelsOverride = {} } = Astro.props;
-const labels = { heading: "Posts pagination", prev: "Previous", next: "Next", ...labelsOverride };
+
+const {
+  current,
+  total,
+  base = "",
+  class: className,
+  labels: labelsOverride = {},
+} = Astro.props;
+
+const labels = {
+  heading: "Posts pagination",
+  prev: "Previous",
+  next: "Next",
+  ...labelsOverride,
+};
+
 const pageHref = (n: number) => archivePagePath(n, base);
 ---
-{total > 1 && (
-  <nav class:list={["navigation", "pagination", className]} aria-label={labels.heading}>
-    <h2 class="screen-reader-text">{labels.heading}</h2>
-    <div class="nav-links">
-      {current > 1 && (
-        <a class="prev page-numbers press-box" href={pageHref(current - 1)}>
-          <svg viewBox="0 0 448 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
-          <span class="screen-reader-text">{labels.prev}</span>
-        </a>
-      )}
-      {Array.from({ length: total }, (_, i) => i + 1).map((n) =>
-        n === current
-          ? <span aria-current="page" class="page-numbers current">{n}</span>
-          : <a class="page-numbers press-box" href={pageHref(n)}>{n}</a>
-      )}
-      {current < total && (
-        <a class="next page-numbers press-box" href={pageHref(current + 1)}>
-          <svg viewBox="0 0 448 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
-          <span class="screen-reader-text">{labels.next}</span>
-        </a>
-      )}
-    </div>
-  </nav>
-)}
+
+{total > 1 && <nav
+  class:list={["navigation", "pagination", className]}
+  aria-label={labels.heading}
+>
+  <h2 class="screen-reader-text">{labels.heading}</h2>
+  <div class="nav-links">
+    {current > 1 && <a
+      class="prev page-numbers press-box"
+      href={pageHref(current - 1)}
+    >
+      <Icon name="arrow-left" size={14} />
+      <span class="screen-reader-text">{labels.prev}</span>
+    </a>}
+    {Array.from({ length: total }, (_, i) => i + 1).map((n) =>
+      n === current ? (
+        <span aria-current="page" class="page-numbers current">{n}</span>
+      ) : (
+        <a class="page-numbers press-box" href={pageHref(n)}>{n}</a>
+      ),
+    )}
+    {current < total && <a
+      class="next page-numbers press-box"
+      href={pageHref(current + 1)}
+    >
+      <Icon name="arrow-right" size={14} />
+      <span class="screen-reader-text">{labels.next}</span>
+    </a>}
+  </div>
+</nav>}
 
 <style>
   .nav-links {
@@ -45,6 +65,7 @@ const pageHref = (n: number) => archivePagePath(n, base);
     margin: 10px 0 20px;
     justify-content: center;
   }
+
   .nav-links a,
   .nav-links span {
     text-decoration: none;
@@ -57,11 +78,13 @@ const pageHref = (n: number) => archivePagePath(n, base);
     color: var(--ink);
     border: 1px solid var(--ink);
   }
+
   .nav-links a:hover,
   .nav-links a:focus {
     color: var(--ink);
     border-color: var(--rule);
   }
+
   /* Press feedback comes from .press-box on the links; the shared rule
      above keeps this site's 1px cell border over the pattern's 2px. */
   .nav-links span.current {