create-website-build-kit 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-website-build-kit",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Scaffold a production marketing site \u2014 Astro on Cloudflare Workers, with the gates, the migration playbook and the accessibility work already wired.",
   "keywords": [
     "astro",

package/template/src/components/Header.astro

@@ -29,7 +29,22 @@ const isCurrent = (href: string) => (href === '/' ? path === '/' : path.startsWi
       {/* Text until there is a logo. A brand mark referenced before the file
           exists renders as a broken image on every page, which is worse than
           plain type — swap this for <img> once the artwork is in place, and
-          look at it on both a light and a dark background before shipping. */}
+          look at it on both a light and a dark background before shipping.
+
+          ⚠ SIZE IT BY HEIGHT, NOT WIDTH, AND KEEP IT UNDER --header-h.
+            `inline-size: 12rem; block-size: auto` on a wide mark computes to
+            whatever its aspect ratio says — on a real build a 520×227 logo came
+            out 87px tall in an 88px bar, so the LOGO was setting the header's
+            height instead of the token.
+
+            That is not cosmetic. FOUR offsets are computed from --header-h:
+            this header's min-block-size, `.under-header`'s reserve, and
+            scroll-padding-top / scroll-margin-top, which are what stop an
+            anchor target landing underneath the fixed nav. A header taller than
+            its token leaves all four short by the same amount, and none of them
+            errors.
+
+            `block-size: clamp(2.25rem, 3.4vw, 2.75rem); inline-size: auto` */}
       {business.name}
     </a>
 

package/template/src/components/PageHero.astro

@@ -29,7 +29,7 @@ const { title, lede, breadcrumbs, class: className = '' } = Astro.props;
 const crumbs = breadcrumbs ?? [];
 ---
 
-<section class:list={['hero', 'under-header', 'section--tight', className]}>
+<section class:list={['hero', 'under-header', className]}>
   <div class="container">
     {
       crumbs.length > 0 && (
@@ -59,6 +59,31 @@ const crumbs = breadcrumbs ?? [];
 </section>
 
 <style>
+  /*
+   * ⚠ THE RHYTHM BELONGS TO THE NEXT SECTION, NOT TO THIS ONE.
+   *
+   * This carried `.section--tight`, which is a SHORTHAND — it sets padding-block
+   * at both ends. Every page opens its following section with a rhythm class of
+   * its own, so two stacked: a measured 160px hole on the template's own
+   * /contact/, 176px on all four PageHero pages of a real build, and up to 232px
+   * where the next section is `.section` rather than `.section--tight`.
+   *
+   * Nothing could see it. Build green, types green, axe green, tells green — a
+   * hole is only visible by looking at the page.
+   *
+   * ⚠ AND THE SHORTHAND CLOBBERED THE HEADER OFFSET. `.under-header` reserves
+   *   the fixed header's height on padding-block-START, and global.css warns in
+   *   as many words that "a scoped component style would out-specify" it. A
+   *   shorthand from this component is exactly such a style: on a real build it
+   *   discarded the reserve and put the hero behind the nav.
+   *
+   * padding-block-END only, therefore. The offset stays with `.under-header`,
+   * the rhythm stays with whatever section comes next.
+   */
+  .hero {
+    padding-block-end: 0;
+  }
+
   .hero__crumbs ol {
     display: flex;
     flex-wrap: wrap;

package/template/src/styles/global.css

@@ -241,6 +241,16 @@ b {
  * height or the heading sits behind the nav. Applied by each opening section
  * rather than a blanket `main > :first-child` rule, which a scoped component
  * style would out-specify.
+ *
+ * ⚠ AND ONE DID. A component wrote `padding-block: <a> <b>` on the same element
+ *   — a SHORTHAND, so it set padding-block-start too, out-specified this, and
+ *   the hero sat behind the nav on a real build. On the element that carries
+ *   `.under-header`, set `padding-block-end` and never the shorthand.
+ *
+ * ⚠ NOT MOVED TO `main`, WHICH WOULD BE UN-OVERRIDABLE. The header's background
+ *   is opaque `var(--bg)`, so padding on `main` would leave a strip of body
+ *   colour behind it wherever a first section has a background of its own. The
+ *   per-section reserve is deliberate; the shorthand is the bug.
  */
 .under-header {
   padding-block-start: calc(var(--header-h) + var(--space-2xl));

package/template/src/styles/tokens.css

@@ -197,6 +197,11 @@
      appeared should spring. */
 
   /* ── Chrome ────────────────────────────────────────────────────────────── */
+  /* ⚠ FOUR THINGS READ THIS: the header's min-block-size, `.under-header`'s
+     reserve, and scroll-padding-top / scroll-margin-top, which keep an anchor
+     target clear of the fixed nav. If the rendered header is taller than this
+     — a logo sized by width is the usual cause — all four are short by the same
+     amount and nothing reports it. Measure the bar, do not assume it. */
   --header-h: 4.5rem;
   --z-header: 100;
   --z-menu: 110;

package/template/wrangler.jsonc

@@ -7,6 +7,21 @@
   // the Astro adapter resolves its environment at build time and silently
   // ignores `deploy --env`, which is how a staging deploy lands on production.
   //
+  // ⚠ AND IT IGNORES `--config` THE SAME WAY, which is the next flag anyone
+  //   reaches for. @astrojs/cloudflare generates dist/server/wrangler.json —
+  //   the config actually deployed, the one carrying `main` and the real asset
+  //   directory — and builds it from the DEFAULT config path only. So
+  //   `wrangler deploy --config wrangler.production.jsonc` either fails with
+  //   "Cannot use assets with a binding in an assets-only Worker" (the
+  //   hand-written file has no `main`), or, if you work around that by
+  //   deploying the generated file instead, ships with whatever name and routes
+  //   THIS file held, whatever was built.
+  //
+  //   One config is the reason that cannot happen here. A project that grows a
+  //   second one has to rewrite dist/server/wrangler.json between build and
+  //   deploy, because there is no adapter option for it. Found on a shipped
+  //   build that needed two.
+  //
   //   npm run deploy:staging      → builds staging, deploys this worker
   //   npm run deploy:production   → builds production, deploys this worker
   //