@half-built/astro 0.4.2 → 0.6.0

package/src/components/SiteHeader.astro

@@ -1,27 +1,20 @@
 ---
-/* The real half-built-robots.com header, matching the live DOM structure:
-   site-header-wrapper (bracket frame) containing three bands.
-   - masthead-top: date box + social icons, pulled UP to straddle the top rule
-   - masthead-brand: centered site branding (h1 on home, p elsewhere)
-   - masthead-nav: nav boxes + search flyout, pulled DOWN to straddle the bottom rule
-   No logo image in the header: the live site renders text branding only. */
 import ThemeToggle from "./ThemeToggle.astro";
+import Icon from "./Icon.astro";
 import type { NavItem, SocialItem } from "./models";
+
 interface Props {
   siteName: string;
   tagline: string;
   nav: NavItem[];
   socials: SocialItem[];
-  /* Preformatted date for the top band's box; the caller owns the format
-     (the blog passes lib/header-date's live-theme format). The client
-     refresh takes a formatDate option (step 11.2) defaulting to lib/header-date;
-     only its package-time home remains a step 11.3 decision. */
   dateStr: string;
   isHome?: boolean;
   searchAction?: string;
   searchParam?: string;
   searchLabels?: { prompt?: string; placeholder?: string; submit?: string };
 }
+
 const {
   siteName,
   tagline,
@@ -33,107 +26,153 @@ const {
   searchParam = "s",
   searchLabels = {},
 } = Astro.props;
+
 const {
   prompt: searchPrompt = "Search for:",
-  /* The static markup this replaces wrote the placeholder as the HTML
-     entity `Search …`, which the compiler decodes to this same
-     character at build time for static text. Written here as the
-     decoded character (not the entity spelling) because a prop value
-     goes through Astro's dynamic attribute path, which escapes a
-     literal "&" instead of decoding it, and would otherwise double
-     encode the entity into `…` in the built output. */
   placeholder: searchPlaceholder = "Search …",
   submit: searchSubmit = "Search",
 } = searchLabels;
 
 const current = Astro.url.pathname;
-/* Home stays the current item on paginated index pages, like WordPress,
-   the component's own documented opinion (not a prop). */
+
 const isCurrent = (href: string) =>
-  href === "/" ? current === "/" || current.startsWith("/page/") : current === href;
+  href === "/"
+    ? current === "/" || current.startsWith("/page/")
+    : current === href;
 ---
+
 <header id="masthead" class="site-header">
   <div class="shell">
     <div class="site-header-wrapper bracket-frame">
       <div class="masthead-top">
-        <slot name="band-top"><div class="header-tools">
-          <div class="date boxed-label" id="header-date">{dateStr}</div>
-          <ThemeToggle />
-        </div>
-        <div class="social-icons">
-          {/* Tips drop below and pin to the icon's right edge (scripts/link-tip.ts). */}
-          <ul class="social-links" data-tip-place="below" data-tip-align="end">
-            {socials.map((s) => (
-              <li>
+        <slot name="band-top"
+          ><div class="header-tools">
+            <div class="date boxed-label" id="header-date">{dateStr}</div>
+            <ThemeToggle />
+          </div>
+          <div class="social-icons">
+            {/* Tips drop below and pin to the icon's right edge (scripts/link-tip.ts). */}
+            <ul
+              class="social-links"
+              data-tip-place="below"
+              data-tip-align="end"
+            >
+              {socials.map((s) => <li>
                 <a class="icon-box" href={s.href}>
                   <span class="screen-reader-text">{s.label}</span>
                   <Fragment set:html={s.icon} />
                 </a>
-              </li>
-            ))}
-          </ul>
-        </div></slot>
+              </li>)}
+            </ul>
+          </div></slot
+        >
       </div>
       <div class="masthead-brand">
-        <slot name="band-brand"><div class="site-branding">
-          <div class="site-identity">
-            {isHome
-              ? <h1 class="site-title"><a href="/" rel="home">{siteName}</a></h1>
-              : <p class="site-title"><a href="/" rel="home">{siteName}</a></p>}
-            <p class="site-description">{tagline}</p>
-          </div>
-        </div></slot>
+        <slot name="band-brand"
+          ><div class="site-branding">
+            <div class="site-identity">
+              {isHome ? (
+                <h1 class="site-title">
+                  <a href="/" rel="home">{siteName}</a>
+                </h1>
+              ) : (
+                <p class="site-title"><a href="/" rel="home">{siteName}</a></p>
+              )}
+              <p class="site-description">{tagline}</p>
+            </div>
+          </div></slot
+        >
       </div>
       <div class="masthead-nav">
-        <slot name="band-nav"><div class="masthead-nav-inner">
-          <div class="header-nav-search">
-            <div class="header-navigation">
-              <nav id="site-navigation" class="main-navigation" aria-label="Primary">
-                <button type="button" class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
-                  <span></span><span></span><span></span>
-                  <span class="screen-reader-text">Menu</span>
-                </button>
-                <div class="menu-container">
-                  <ul id="primary-menu" class="menu">
-                    {nav.map((item) => (
-                      <li class={`menu-item${isCurrent(item.href) ? " current-menu-item" : ""}`}>
-                        <a class:list={["press-box", isCurrent(item.href) && "tint-overlay"]} href={item.href} aria-current={isCurrent(item.href) ? "page" : undefined}>{item.label}</a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </nav>
-            </div>
-            <div class="header-end">
-              {/* Phones lose the top band, so the toggle sits beside the
+        <slot name="band-nav"
+          ><div class="masthead-nav-inner">
+            <div class="header-nav-search">
+              <div class="header-navigation">
+                <nav
+                  id="site-navigation"
+                  class="main-navigation"
+                  aria-label="Primary"
+                >
+                  <button
+                    type="button"
+                    class="menu-toggle"
+                    aria-controls="primary-menu"
+                    aria-expanded="false"
+                  >
+                    <span></span><span></span><span></span>
+                    <span class="screen-reader-text">Menu</span>
+                  </button>
+                  <div class="menu-container">
+                    <ul id="primary-menu" class="menu">
+                      {nav.map((item) => <li
+                        class={`menu-item${isCurrent(item.href) ? " current-menu-item" : ""}`}
+                      >
+                        <a
+                          class:list={[
+                            "press-box",
+                            isCurrent(item.href) && "tint-overlay",
+                          ]}
+                          href={item.href}
+                          aria-current={
+                            isCurrent(item.href) ? "page" : undefined
+                          }
+                          >{item.label}</a
+                        >
+                      </li>)}
+                    </ul>
+                  </div>
+                </nav>
+              </div>
+              <div class="header-end">
+                {/* Phones lose the top band, so the toggle sits beside the
                   search there (owner request 2026-08-26). */}
-              <ThemeToggle placement="phone" />
-              <div class="navigation-search">
-                <div class="navigation-search-wrap">
-                  {/* A control that reveals UI is a button, not a link: a
+                <ThemeToggle placement="phone" />
+                <div class="navigation-search">
+                  <div class="navigation-search-wrap">
+                    {/* A control that reveals UI is a button, not a link: a
                       bare-hash anchor navigates (scroll jump + history
                       entry), audit finding A3. With the island mounted it
                       is the flyout's toggle (site-header.ts); without
                       JavaScript, focus-within still opens the flyout when
                       the button takes focus. */}
-                  <button type="button" title="Search" class="navigation-search-icon icon-box" aria-expanded="false">
-                    <svg viewBox="0 0 512 512" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M505 442.7L405.3 343c28.4-34.9 45.7-79 45.7-127C451 96.5 354.5 0 235.5 0S20 96.5 20 215.5 116.5 431 235.5 431c48 0 92.1-17.3 127-45.7L462.3 485c5.9 5.9 15.4 5.9 21.3 0l21.4-21.4c5.9-5.9 5.9-15.4 0-20.9zM235.5 371c-85.9 0-155.5-69.6-155.5-155.5S149.6 60 235.5 60 391 129.6 391 215.5 321.4 371 235.5 371z"/></svg>
-                    <span class="screen-reader-text">Search</span>
-                  </button>
-                  <div class="navigation-search-form">
-                    <form role="search" class="search-form field-join" action={searchAction} method="get">
-                      <label>
-                        <span class="screen-reader-text">{searchPrompt}</span>
-                        <input type="search" class="search-field field-join-input" placeholder={searchPlaceholder} name={searchParam} />
-                      </label>
-                      <input type="submit" class="search-submit field-join-button press-box press-box-shaded" value={searchSubmit} />
-                    </form>
+                    <button
+                      type="button"
+                      title="Search"
+                      class="navigation-search-icon icon-box"
+                      aria-expanded="false"
+                    >
+                      <Icon name="search" size={14} />
+                      <span class="screen-reader-text">Search</span>
+                    </button>
+                    <div class="navigation-search-form">
+                      <form
+                        role="search"
+                        class="search-form field-join"
+                        action={searchAction}
+                        method="get"
+                      >
+                        <label>
+                          <span class="screen-reader-text">{searchPrompt}</span>
+                          <input
+                            type="search"
+                            class="search-field field-join-input"
+                            placeholder={searchPlaceholder}
+                            name={searchParam}
+                          />
+                        </label>
+                        <input
+                          type="submit"
+                          class="search-submit field-join-button press-box press-box-shaded"
+                          value={searchSubmit}
+                        />
+                      </form>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div></slot>
+          </div></slot
+        >
       </div>
     </div>
   </div>
@@ -153,18 +192,22 @@ const isCurrent = (href: string) =>
     justify-content: space-between;
     margin-top: calc(-30px + (-12px));
   }
+
   .masthead-top .date {
     padding: 4px 10px;
     display: grid;
     place-items: center;
     font-size: var(--font-size-sm);
   }
+
   /* Date box and the day/night toggle sit together on the left of the
      top band, spaced like the social icons on the right. */
   .header-tools { display: flex; align-items: center; gap: 10px; }
+
   /* Bottom band's right end: the phone toggle (hidden on desktop) beside
      the search icon, spaced like the top band's tools. */
   .header-end { display: flex; align-items: center; gap: 10px; }
+
   /* No background on the list itself: the header's top rule must stay
      visible in the gaps between the boxed icons. */
   ul.social-links {
@@ -174,6 +217,7 @@ const isCurrent = (href: string) =>
     display: flex;
     gap: 10px;
   }
+
   .masthead-brand {
     display: flex;
     align-items: center;
@@ -181,6 +225,7 @@ const isCurrent = (href: string) =>
     padding-block: 20px;
   }
   .site-branding { padding-block: 10px; text-align: center; width: 100%; }
+
   .site-title {
     font-size: var(--font-size-xl);
     line-height: 1.1;
@@ -188,6 +233,7 @@ const isCurrent = (href: string) =>
     margin: 0;
   }
   .site-title a { text-decoration: none; color: var(--ink); }
+
   /* The tagline wears the accent box (owner call 2026-09-03): the
      callout's combination, the same one the press box and the demo
      launcher wear. Accent line, the accent's legible ink for the text,
@@ -196,6 +242,7 @@ const isCurrent = (href: string) =>
      white at 1.9:1 (test/a11y.test.ts). Static: no hover, no press. */
   .site-description {
     display: inline-block;
+
     /* 14 above, 8 below (owner pick 2026-09-03, option B of three):
        the box sits as its own element between the title and the nav
        band rather than as a subtitle stuck to the title. */
@@ -211,6 +258,7 @@ const isCurrent = (href: string) =>
     position: relative;
     margin-bottom: calc(-30px + (-17px));
   }
+
   .header-nav-search {
     width: 100%;
     display: flex;
@@ -218,6 +266,7 @@ const isCurrent = (href: string) =>
     align-items: center;
     justify-content: space-between;
   }
+
   .main-navigation .menu {
     list-style: none;
     padding: 0;
@@ -227,6 +276,7 @@ const isCurrent = (href: string) =>
     flex-wrap: wrap;
     font-size: var(--font-size-sm);
   }
+
   /* Box, ink, and press feedback from .press-box; the nav's own size,
      case, and hover ring are here. */
   .main-navigation .menu a {
@@ -240,6 +290,7 @@ const isCurrent = (href: string) =>
   .main-navigation .menu a:hover { outline: var(--stroke) solid var(--rule); }
 
   .menu-toggle { display: none; }
+
   @media (--bp-sidebar) {
     .menu-toggle {
       display: block;
@@ -252,6 +303,7 @@ const isCurrent = (href: string) =>
       border: var(--stroke) solid var(--rule);
       background-color: var(--surface);
     }
+
     .menu-toggle span:not(.screen-reader-text) {
       display: block;
       position: absolute;
@@ -265,6 +317,7 @@ const isCurrent = (href: string) =>
     .menu-toggle span:nth-child(1) { top: 7px; }
     .menu-toggle span:nth-child(2) { top: 14px; }
     .menu-toggle span:nth-child(3) { top: 21px; }
+
     /* The open menu is a pop-out under the hamburger, floating over the
        page like the search flyout (same z tier), not a block that grows
        the header (owner request 2026-08-27, after launch). The header
@@ -272,6 +325,7 @@ const isCurrent = (href: string) =>
        bottom rule: hamburger, toggle, and magnifier hang off the rule
        instead of sitting inside the frame. */
     .main-navigation { position: relative; }
+
     .main-navigation .menu {
       display: none;
       flex-direction: column;
@@ -287,6 +341,7 @@ const isCurrent = (href: string) =>
     }
     .main-navigation .menu.open { display: flex; }
   }
+
   /* Phone-width header simplification (owner call 2026-08-20): the
      date box competes for pixels a phone already spends on its own
      clock, and the social tray collided with it. Both retire; the
@@ -303,6 +358,7 @@ const isCurrent = (href: string) =>
      button). Without the island the focus-within rule stands, so the
      flyout still opens with no script. */
   .navigation-search { width: 30px; position: relative; display: inline-block; text-align: center; }
+
   .navigation-search-form {
     position: absolute;
     right: 0;
@@ -314,18 +370,21 @@ const isCurrent = (href: string) =>
     z-index: var(--z-search-flyout);
     background-color: var(--surface);
     border: var(--stroke) solid var(--rule);
+
     /* Opacity fades both ways; visibility flips at once on open and
        waits out the fade on close. Under the house all-transition the
        visibility interpolation read hidden at the instant the open
        class landed, so the island's focus() on the field was refused. */
     transition: opacity 0.1s ease, visibility 0s linear 0.1s;
   }
+
   .navigation-search-wrap:not([data-search-js]):focus-within .navigation-search-form,
   .navigation-search-wrap.search-open .navigation-search-form {
     opacity: 1;
     visibility: visible;
     transition-delay: 0s;
   }
+
   /* Form anatomy comes from the .field-join house pattern (owner request
      2026-07-30, replacing the live theme's 75/25 split form). Only the
      label wrapper's sizing is contextual. */

package/src/components/SmartImage.astro

@@ -2,15 +2,6 @@
 import { Image } from "astro:assets";
 import type { ImageMetadata } from "astro";
 
-/* The one responsive-image element (step 5, 2026-08-30). GIFs pass
-   through untouched (conversion drops animation) and SVGs need no
-   rasterizing; everything else gets responsive widths + modern formats
-   (audit D5). Callers pick widths/sizes for their column; omitting
-   `widths` renders at intrinsic size (MediaText's natural mode, where a
-   `sizes` attribute would defeat natural-size rendering). No scoped CSS
-   on purpose: styling stays with the caller and the global pattern
-   files, which keep reaching the img because this component adds no
-   scope of its own. */
 interface Props {
   src: ImageMetadata;
   alt: string;
@@ -21,14 +12,54 @@ interface Props {
   fetchpriority?: "high";
   style?: string;
 }
-const { src, alt, class: className, widths, sizes, loading = "lazy", fetchpriority, style } = Astro.props;
+
+const {
+  src,
+  alt,
+  class: className,
+  widths,
+  sizes,
+  loading = "lazy",
+  fetchpriority,
+  style,
+} = Astro.props;
+
 const passthrough = src.format === "gif" || src.format === "svg";
-/* eager is the img element's default; omitting it keeps the passthrough
-   markup byte-compatible with the pre-step-5 sites. */
+const responsive = !passthrough && widths !== undefined;
+const fixed = !passthrough && widths === undefined;
 const imgLoading = loading === "eager" ? undefined : loading;
 ---
-{passthrough
-  ? <img src={src.src} width={src.width} height={src.height} alt={alt} class={className} loading={imgLoading} style={style} fetchpriority={fetchpriority} />
-  : widths
-    ? <Image src={src} widths={widths} sizes={sizes} alt={alt} class={className} loading={loading} style={style} fetchpriority={fetchpriority} />
-    : <Image src={src} width={src.width} alt={alt} class={className} loading={loading} style={style} fetchpriority={fetchpriority} />}
+
+{passthrough && (
+  <img
+    src={src.src}
+    width={src.width}
+    height={src.height}
+    alt={alt}
+    class={className}
+    loading={imgLoading}
+    style={style}
+    fetchpriority={fetchpriority}
+  />
+)}{responsive && (
+  <Image
+    src={src}
+    widths={widths}
+    sizes={sizes}
+    alt={alt}
+    class={className}
+    loading={loading}
+    style={style}
+    fetchpriority={fetchpriority}
+  />
+)}{fixed && (
+  <Image
+    src={src}
+    width={src.width}
+    alt={alt}
+    class={className}
+    loading={loading}
+    style={style}
+    fetchpriority={fetchpriority}
+  />
+)}

package/src/components/Subscribe.astro

@@ -1,58 +1,76 @@
 ---
-/* Newsletter CTA, lifted from the BEADZ Subscribe island: the shared amber
-   block that bridges every project back to this blog, meant to read the
-   same everywhere it appears. Rebuilt as a no-React Astro component with
-   the copy in the blog's own voice (the deadpan BEADZ register stays on
-   BEADZ). Three variants: "sidebar" sits above Recent Posts, "post" sits
-   between a post's end and the prev/next navigation, "page" is the block
-   on /newsletter/ itself (the sidebar heading with the post blurb, no
-   outer margins; the page's own prose introduces it).
-
-   The form posts straight to Buttondown's keyless embed-subscribe
-   endpoint. It is a real form (method + action) so it works with no
-   JavaScript: Buttondown redirects that path to /newsletter/subscribed/.
-   With JavaScript, src/scripts/subscribe.ts takes over the submit and
-   writes the outcome into the status line. Spec:
-   docs/superpowers/specs/2026-08-16-mailing-list-wiring-design.md
-
-   Copy is overridable (step 9.5): title, blurb, and fine print are named
-   slots whose fallbacks are the blog's register; placeholder and button
-   label are props. Another register (BEADZ) overrides without forking. */
 interface Props {
   variant?: "sidebar" | "post" | "page";
   headingLevel?: 2 | 3 | 4;
   class?: string;
-  /* The provider's form-post endpoint; the blog passes config NEWSLETTER.
-     Required so a caller can never render a form that posts nowhere. */
   action: string;
-  /* Human sign-up page, named in the failure message (data-public-url). */
   publicUrl?: string;
   placeholder?: string;
   buttonLabel?: string;
 }
+
 const {
-  variant = "post", headingLevel = 2, class: className,
-  action, publicUrl,
-  placeholder = "you@somewhere.tld", buttonLabel = "Subscribe",
+  variant = "post",
+  headingLevel = 2,
+  class: className,
+  action,
+  publicUrl,
+  placeholder = "you@somewhere.tld",
+  buttonLabel = "Subscribe",
 } = Astro.props;
-/* Annotated, not cast: an `as` cast in the frontmatter can make the Astro
-   compiler drop the Props type (see PostCard.astro). */
+
 const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
 ---
+
 <section class:list={["subscribe", `subscribe-${variant}`, className]}>
-  <Heading class="subscribe-title"><slot name="title">{variant === "post" ? "Plenty more where this came from" : "Join the Mailing List"}</slot></Heading>
+  <Heading class="subscribe-title"
+    ><slot name="title"
+      >{variant === "post"
+        ? "Plenty more where this came from"
+        : "Join the Mailing List"}</slot
+    ></Heading
+  >
   {variant === "sidebar" ? (
-    <p class="subscribe-blurb"><slot name="blurb">An email when something new goes up.</slot></p>
+    <p class="subscribe-blurb">
+      <slot name="blurb">An email when something new goes up.</slot>
+    </p>
   ) : (
-    <p class="subscribe-blurb"><slot name="blurb">If you want to hear when a new post or project goes up, leave an email
-      and I'll send a note. No schedule, no spam.</slot></p>
+    <p class="subscribe-blurb">
+      <slot name="blurb"
+        >If you want to hear when a new post or project goes up, leave an email
+        and I'll send a note. No schedule, no spam.</slot
+      >
+    </p>
   )}
-  <form class="subscribe-form field-join" method="post" action={action} data-public-url={publicUrl} novalidate>
+  <form
+    class="subscribe-form field-join"
+    method="post"
+    action={action}
+    data-public-url={publicUrl}
+    novalidate
+  >
     <input type="hidden" name="embed" value="1" />
-    <input class="subscribe-email field-join-input" type="email" name="email" placeholder={placeholder} aria-label="Email address" required />
-    <button class="subscribe-submit field-join-button press-box press-box-shaded" type="submit">{buttonLabel}</button>
+    <input
+      class="subscribe-email field-join-input"
+      type="email"
+      name="email"
+      placeholder={placeholder}
+      aria-label="Email address"
+      required
+    />
+    <button
+      class="subscribe-submit field-join-button press-box press-box-shaded"
+      type="submit"
+    >
+      {buttonLabel}
+    </button>
   </form>
-  <p class="subscribe-fine"><slot name="fine-print">Double opt-in. Every email has an <a href="/policies/mailing-list/">unsubscribe link</a>.</slot></p>
+  <p class="subscribe-fine">
+    <slot name="fine-print"
+      >Double opt-in. Every email has an
+      <a href="/policies/mailing-list/">unsubscribe link</a>.</slot
+    >
+  </p>
   <p class="subscribe-status" role="status"></p>
 </section>
 
@@ -78,15 +96,18 @@ const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
   .subscribe-post { padding: 30px; margin-top: 30px; }
   .subscribe-sidebar { padding: 24px 22px; margin-bottom: 40px; }
   .subscribe-page { padding: 30px; }
+
   .subscribe-title {
     margin: 0 0 8px;
     font-family: var(--font-body);
     line-height: 1.2;
   }
+
   .subscribe-post .subscribe-title,
   .subscribe-page .subscribe-title { font-size: var(--font-size-md); }
   .subscribe-sidebar .subscribe-title { font-size: var(--font-size-base); }
   .subscribe-blurb { margin: 0 0 16px; font-size: var(--font-size-sm); }
+
   /* Form anatomy, focus rings, and press feedback all come from the
      .field-join pattern (patterns.css, house rule 2026-07-30, settled
      after trying inset and side-by-side variants); this island only sets
@@ -95,16 +116,20 @@ const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
   .subscribe-form {
     --field-ink: var(--panel-rule);
     --field-text: var(--panel-ink);
+
     /* The email box's click highlight is the panel's own (ink on the
        amber by day, amber by night); the keyboard ring stays the site's
        everywhere in the panel (owner rule 2026-08-26). */
     --field-ring: var(--panel-ring);
+
     /* The well is the page surface, so it sits a step below the panel in
        both themes (white on amber by day, black on the dark panel by night). */
     --field-well: var(--surface);
   }
+
   .subscribe-post .subscribe-form,
   .subscribe-page .subscribe-form { max-width: 520px; }
+
   /* Fine print sits between form and status so an error line never
      shoves it around; the link inherits the block's ink. Owner wanted it
      smaller than the status line (2026-08-16); xs is the scale's floor,