@half-built/astro 0.5.0 → 0.6.0

package/src/components/PostCard.astro

@@ -1,27 +1,36 @@
 ---
-/* Archive/grid post card matching the live markup exactly:
-   article > .post-item.post-grid > .post-item-image (thumbnail link + reading
-   chip) + .post-item-content (categories, underlined title, meta, excerpt).
-   Comments are permanently dropped, so the chip carries read time only.
-   Fed by postCardModel() in src/lib/view-models.ts. */
 import SmartImage from "./SmartImage.astro";
 import CornerBadges from "./CornerBadges.astro";
+import Icon from "./Icon.astro";
 import type { PostCardModel } from "./models";
 
-interface Props extends PostCardModel { headingLevel?: 2 | 3 | 4; class?: string; minReadLabel?: string }
+interface Props extends PostCardModel {
+  headingLevel?: 2 | 3 | 4;
+  class?: string;
+  minReadLabel?: string;
+}
+
 const {
-  href, title, excerpt, author, dateStr, minutes, hero, heroPosition,
-  draft = false, genai, demo, categories, headingLevel = 2, class: className,
+  href,
+  title,
+  excerpt,
+  author,
+  dateStr,
+  minutes,
+  hero,
+  heroPosition,
+  draft = false,
+  badges,
+  categories,
+  headingLevel = 2,
+  class: className,
   minReadLabel = "min read",
 } = Astro.props;
-/* Annotated, not cast: an `as` cast in the frontmatter makes the Astro
-   compiler drop the Props type (found 2026-08-25, bisected with
-   convertToTSX). */
+
 const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
-/* Optional per-post crop focus for the cover-fit thumbnail; see the
-   heroPosition comment in content.config.ts. */
 const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
 ---
+
 {/* The mapper guarantees an image (Henry placeholder when no featured
     image), so every card takes the thumbnail treatment. */}
 <article class:list={["has-post-thumbnail", className]}>
@@ -29,15 +38,21 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     <div class="post-item-image">
       {/* alt divergence kept from pre-step-5: empty on the svg placeholder, title on a real hero; the anchor is aria-hidden either way. */}
       <a class="post-thumbnail" href={href} aria-hidden="true" tabindex="-1">
-        <SmartImage src={hero} alt={hero.format === "svg" ? "" : title} widths={[470, 940]} sizes="(max-width: 700px) 100vw, 470px" style={heroStyle} />
+        <SmartImage
+          src={hero}
+          alt={hero.format === "svg" ? "" : title}
+          widths={[470, 940]}
+          sizes="(max-width: 700px) 100vw, 470px"
+          style={heroStyle}
+        />
       </a>
       {draft && <span class="draft-stamp">DRAFT</span>}
       <div class="read-time-comment">
         <span class="reading-time chip">
-          <svg viewBox="0 0 512 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
+          <Icon name="clock" size={12} />
           {`${minutes} ${minReadLabel}`}</span>
       </div>
-      <CornerBadges genai={genai} demo={demo} />
+      <CornerBadges badges={badges} />
     </div>
     <div class="post-item-content">
       <div class="entry-cat">
@@ -45,19 +60,23 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
             category list onto extra rows; ours comma-joins on one line and
             lets the browser ellipsize overflow. Do not restore the flex ul. */}
         <span class="post-categories">
-          {categories.map((c, idx) => (
-            <Fragment>{idx > 0 && ", "}<a href={c.href} rel="category tag">{c.name}</a></Fragment>
-          ))}
+          {categories.map((c, idx) => <Fragment
+            >{idx > 0 && ", "}<a href={c.href} rel="category tag"
+              >{c.name}</a
+            ></Fragment
+          >)}
         </span>
       </div>
-      <Heading class="entry-title"><a href={href} rel="bookmark">{title}</a></Heading>
+      <Heading class="entry-title"
+        ><a href={href} rel="bookmark">{title}</a></Heading
+      >
       <ul class="entry-meta">
         <li class="post-author">
-          <svg viewBox="0 0 448 512" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
+          <Icon name="user" size={11} />
           {author}
         </li>
         <li class="post-date">
-          <svg viewBox="0 0 448 512" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48z"/></svg>
+          <Icon name="calendar" size={11} />
           {dateStr}
         </li>
       </ul>
@@ -70,12 +89,15 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
 
 <style>
   .post-item { transition: all 0.5s ease-in-out; }
+
   /* Same outline as MediaText media and gallery plates (owner request);
      on the container so the hover zoom stays clipped inside it. */
   .post-item-image { position: relative; overflow: hidden; border: var(--stroke) solid var(--rule); }
   .post-item-image a { display: block; height: 100%; width: 100%; line-height: 0; }
+
   /* The image box clips overflow, so the site-wide ring sits inside. */
   .post-item-image a:focus-visible { outline-offset: -3px; }
+
   .post-item-image a :global(img) {
     width: 100%;
     height: 100%;
@@ -84,12 +106,14 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     transition: all 0.5s ease-in-out;
   }
   .post-item:hover .post-item-image :global(img) { transform: scale(1.07); }
+
   /* Stamp from the .draft-stamp pattern; the card's size and stacking
      (above the hover-zoomed image) are here. */
   .draft-stamp {
     z-index: 2;
     font-size: var(--font-size-xl);
   }
+
   /* Chip look comes from the .chip pattern; only placement is
      contextual. display: flex, not a plain block: a block wrapper
      gives the inline-flex chip a text line box whose descender gap
@@ -104,11 +128,13 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     display: flex;
   }
   .post-item-content { padding: 15px 0 0; padding-top: 10px; }
+
   .entry-cat .post-categories {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
     /* The links' font box stands taller than this line-height:1 row, and
        overflow clips at the padding box, so without vertical breathing
        room the inset focus/hover ring loses its top and bottom bands.
@@ -123,16 +149,19 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     line-height: 1; /* carried over from the old li a rule; keeps card height */
     letter-spacing: 0.8px;
   }
+
   .entry-cat .post-categories a {
     color: inherit;
     text-decoration: none;
     transition: var(--transition);
   }
+
   .entry-cat .post-categories a:hover {
     outline: 2px solid currentColor;
     outline-offset: -2px; /* Draws outline inside link to avoid clipping by container overflow */
   }
   .entry-cat .post-categories a:focus-visible { outline-offset: -2px; }
+
   /* Owner-approved divergence from live (2026-07-26): the live theme
      word-breaks titles mid-word (word-break: break-all); ours wraps at
      word boundaries on purpose. Do not add break-all for fidelity. */
@@ -142,6 +171,7 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     font-size: var(--font-size-base);
     font-family: var(--font-body);
   }
+
   .entry-title a {
     color: var(--ink);
     display: inline;
@@ -149,6 +179,7 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     transition: var(--transition);
   }
   .entry-title a:hover { outline: 2px solid currentColor; }
+
   .entry-meta {
     margin: 0 0 10px;
     padding: 0;
@@ -159,6 +190,7 @@ const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
     column-gap: 10px;
     align-items: center;
   }
+
   .entry-meta li {
     margin-bottom: 0;
     font-size: var(--font-size-xs);

package/src/components/PostNavigation.astro

@@ -1,51 +1,61 @@
 ---
-/* Prev/next post links: nav.navigation.post-navigation with
-   nav-previous/nav-next and Previous:/Next: subtitles, in the theme's
-   3px-bordered box. Previous = older post, Next = newer, as WordPress does.
-   Owner divergence from the live markup (2026-07-30): the newer post sits
-   LEFT and the older post RIGHT, matching the newest-first reading order
-   of the archives. Do not restore the WP left/right order for fidelity. */
 import type { PostRef } from "./models";
+
 interface Props {
   class?: string;
   prev?: PostRef;
   next?: PostRef;
   labels?: { heading?: string; next?: string; prev?: string; nav?: string };
 }
-const { prev, next, class: className, labels: labelsOverride = {} } = Astro.props;
-const labels = { heading: "Post navigation", next: "Next:", prev: "Previous:", nav: "Posts", ...labelsOverride };
+
+const {
+  prev,
+  next,
+  class: className,
+  labels: labelsOverride = {},
+} = Astro.props;
+
+const labels = {
+  heading: "Post navigation",
+  next: "Next:",
+  prev: "Previous:",
+  nav: "Posts",
+  ...labelsOverride,
+};
 ---
-{(prev || next) && (
-  <nav class:list={["navigation", "post-navigation", className]} aria-label={labels.nav}>
-    <h2 class="screen-reader-text">{labels.heading}</h2>
-    <div class="nav-links">
-      {next && (
-        <div class="nav-next">
-          <a href={next.href} rel="next">
-            <span class="nav-subtitle">{labels.next}</span> <span class="nav-title">{next.title}</span>
-          </a>
-        </div>
-      )}
-      {prev && (
-        <div class="nav-previous">
-          <a href={prev.href} rel="prev">
-            <span class="nav-subtitle">{labels.prev}</span> <span class="nav-title">{prev.title}</span>
-          </a>
-        </div>
-      )}
-    </div>
-  </nav>
-)}
+
+{(prev || next) && <nav
+  class:list={["navigation", "post-navigation", className]}
+  aria-label={labels.nav}
+>
+  <h2 class="screen-reader-text">{labels.heading}</h2>
+  <div class="nav-links">
+    {next && <div class="nav-next">
+      <a href={next.href} rel="next">
+        <span class="nav-subtitle">{labels.next}</span>
+        <span class="nav-title">{next.title}</span>
+      </a>
+    </div>}
+    {prev && <div class="nav-previous">
+      <a href={prev.href} rel="prev">
+        <span class="nav-subtitle">{labels.prev}</span>
+        <span class="nav-title">{prev.title}</span>
+      </a>
+    </div>}
+  </div>
+</nav>}
 
 <style>
   .post-navigation {
     margin-top: 30px;
     padding: 20px;
+
     /* 3px is this box's design constant (the live theme's weight),
        deliberately NOT var(--stroke): it does not scale with the theme
        stroke. */
     border: var(--stroke-3) solid var(--rule);
   }
+
   .nav-links {
     display: flex;
     justify-content: space-between;
@@ -55,6 +65,7 @@ const labels = { heading: "Post navigation", next: "Next:", prev: "Previous:", n
   }
   .nav-previous { text-align: right; margin-left: auto; }
   .nav-links a { text-decoration: none; color: var(--ink); }
+
   .nav-links a:hover .nav-title,
   .nav-links a:focus .nav-title { text-decoration: underline; }
   .nav-subtitle { font-weight: bold; }

package/src/components/Shell.astro

@@ -1,14 +1,21 @@
 ---
-/* The document shell (step 8, 2026-08-30): doctype and head skeleton,
-   first-paint theme stamp, skip link, page frame, scroll-to-top
-   floater. Site-specific head content (meta, OG, title) arrives through
-   the head slot, the chrome through the header and footer slots, so a
-   second site reuses the frame without forking it. No scoped CSS on
-   purpose: the shell's layout rules live once in styles/base/shell.css
-   (pinned by test/base.test.ts). */
-interface Props { lang?: string; skipLabel?: string; scrollTopLabel?: string; themeStorageKey: string }
-const { lang = "en", skipLabel = "Skip to content", scrollTopLabel = "Scroll to top", themeStorageKey } = Astro.props;
+import Icon from "./Icon.astro";
+
+interface Props {
+  lang?: string;
+  skipLabel?: string;
+  scrollTopLabel?: string;
+  themeStorageKey: string;
+}
+
+const {
+  lang = "en",
+  skipLabel = "Skip to content",
+  scrollTopLabel = "Scroll to top",
+  themeStorageKey,
+} = Astro.props;
 ---
+
 <!doctype html>
 <html lang={lang}>
   <head>
@@ -34,7 +41,9 @@ const { lang = "en", skipLabel = "Skip to content", scrollTopLabel = "Scroll to
   </head>
   <body>
     <div id="page" class="site">
-      <a class="skip-link screen-reader-text" href="#primary-content">{skipLabel}</a>
+      <a class="skip-link screen-reader-text" href="#primary-content"
+        >{skipLabel}</a
+      >
       <slot name="header" />
       <div id="primary-content" class="primary-site-content">
         <div class="site-content shell">
@@ -42,8 +51,13 @@ const { lang = "en", skipLabel = "Skip to content", scrollTopLabel = "Scroll to
         </div>
       </div>
       <slot name="footer" />
-      <a href="#page" id="scroll-to-top" class="scroll-top" aria-label={scrollTopLabel}>
-        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 15 12 7 20 15" /></svg>
+      <a
+        href="#page"
+        id="scroll-to-top"
+        class="scroll-top"
+        aria-label={scrollTopLabel}
+      >
+        <Icon name="chevron-up" size={14} />
       </a>
     </div>
     {/* Site behavior scripts land here, inside the body, where the pre-step-8 markup carried them. */}