npm - create-website-build-kit - Versions diffs - 0.1.0 - Mend

create-website-build-kit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/README.md +54 -0
package/index.mjs +149 -0
package/package.json +42 -0
package/template/.dev.vars.example +3 -0
package/template/.github/workflows/gates.yml +58 -0
package/template/.node-version +1 -0
package/template/.pa11yci.json +24 -0
package/template/BUILD-STATE.md +47 -0
package/template/CLAUDE.md +153 -0
package/template/astro.config.mjs +150 -0
package/template/docs/analytics.md +86 -0
package/template/docs/content.md +138 -0
package/template/docs/handover.md +182 -0
package/template/docs/handover.pdf +0 -0
package/template/docs/runbook.md +661 -0
package/template/docs/traps.md +903 -0
package/template/gitignore +31 -0
package/template/package-lock.json +8159 -0
package/template/package.json +53 -0
package/template/public/_headers +61 -0
package/template/public/_redirects +39 -0
package/template/public/site.webmanifest +13 -0
package/template/scripts/a11y-evidence.mjs +258 -0
package/template/scripts/check-console.mjs +125 -0
package/template/scripts/check-env.mjs +99 -0
package/template/scripts/check-reflow.mjs +148 -0
package/template/scripts/check-sitemap.mjs +113 -0
package/template/scripts/dns-snapshot.mjs +267 -0
package/template/scripts/extract.mjs +317 -0
package/template/scripts/indexnow.mjs +154 -0
package/template/scripts/lastmod.mjs +147 -0
package/template/scripts/lib/inventory.mjs +104 -0
package/template/scripts/lib/preserved.mjs +42 -0
package/template/scripts/lib/routes.mjs +92 -0
package/template/scripts/md-to-pdf.mjs +335 -0
package/template/scripts/og-cards.config.mjs +114 -0
package/template/scripts/og-cards.mjs +487 -0
package/template/scripts/optimize-media.mjs +380 -0
package/template/scripts/recon.mjs +480 -0
package/template/scripts/redirects.mjs +298 -0
package/template/scripts/shots.mjs +447 -0
package/template/scripts/staging-headers.mjs +102 -0
package/template/scripts/tells.mjs +268 -0
package/template/scripts/verify.mjs +1069 -0
package/template/src/components/ContactForm.astro +405 -0
package/template/src/components/CtaBand.astro +82 -0
package/template/src/components/EnvBadge.astro +146 -0
package/template/src/components/Footer.astro +210 -0
package/template/src/components/Header.astro +530 -0
package/template/src/components/Icon.astro +56 -0
package/template/src/components/Img.astro +129 -0
package/template/src/components/PageHero.astro +88 -0
package/template/src/components/Seo.astro +119 -0
package/template/src/components/StructuredData.astro +173 -0
package/template/src/content/blog/.gitkeep +5 -0
package/template/src/content/legal/.gitkeep +0 -0
package/template/src/content.config.ts +81 -0
package/template/src/data/areas.ts +31 -0
package/template/src/data/business.ts +121 -0
package/template/src/data/categories.ts +37 -0
package/template/src/data/fonts.ts +25 -0
package/template/src/data/image-manifest.json +1 -0
package/template/src/data/lastmod.json +1 -0
package/template/src/data/nav.ts +49 -0
package/template/src/data/services.ts +39 -0
package/template/src/data/site.ts +136 -0
package/template/src/env.d.ts +28 -0
package/template/src/layouts/Base.astro +223 -0
package/template/src/lib/brevo.ts +96 -0
package/template/src/lib/hast-media.mjs +55 -0
package/template/src/lib/lastmod.mjs +47 -0
package/template/src/lib/lead.ts +92 -0
package/template/src/lib/legal-routes.mjs +31 -0
package/template/src/lib/legal.ts +75 -0
package/template/src/lib/posts.ts +64 -0
package/template/src/lib/runtime.ts +33 -0
package/template/src/pages/404.astro +51 -0
package/template/src/pages/[slug].astro +111 -0
package/template/src/pages/accessibility.astro +128 -0
package/template/src/pages/api/contact.ts +191 -0
package/template/src/pages/api/leads.csv.ts +82 -0
package/template/src/pages/contact.astro +112 -0
package/template/src/pages/index.astro +84 -0
package/template/src/pages/robots.txt.ts +38 -0
package/template/src/pages/rss.xml.ts +27 -0
package/template/src/styles/global.css +463 -0
package/template/src/styles/project.css +14 -0
package/template/src/styles/prose.css +182 -0
package/template/src/styles/tokens.css +218 -0
package/template/tsconfig.json +5 -0
package/template/wrangler.jsonc +63 -0

package/template/src/styles/global.css ADDED Viewed

@@ -0,0 +1,463 @@
+@import './tokens.css';
+@import './prose.css';
+/* ───────────────────────────────────────────────────────────────────────────
+   Reset, states and layout primitives.
+   What is here: things that are wrong by default in a browser, things that are
+   easy to forget (focus, reduced motion, skip link, the states an interactive
+   element needs), and the container/section scaffolding every page needs.
+   What is deliberately NOT here: a look. No card style, no button style beyond
+   its states, no eyebrow, no section decoration. Those are project decisions —
+   the moment they live here, every site built from this template opens the
+   same way. Add them per project, in the project's own components.
+   ─────────────────────────────────────────────────────────────────────────── */
+/* ── Fonts ────────────────────────────────────────────────────────────────
+   Self-hosted, variable, subset to the scripts you need. Add the @font-face
+   blocks HERE and the matching entries to src/data/fonts.ts, which drives the
+   preload tags — same-origin means a preload is the whole story.
+   Nothing ships. Two families, display and body; see docs/design.md for the
+   subsetting recipe and the licence check.
+   @font-face {
+     font-family: 'Display Face';
+     src: url('/fonts/display.woff2') format('woff2-variations');
+     font-weight: 400 800;
+     font-style: normal;
+     font-display: swap;
+     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+       U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+       U+2212, U+2215, U+FEFF, U+FFFD;
+   }
+   ───────────────────────────────────────────────────────────────────────── */
+/* ── Reset ───────────────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  /* Anchored headings must clear the sticky header. */
+  scroll-padding-top: calc(var(--header-h) + var(--space-m));
+}
+body {
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  font-weight: var(--weight-normal);
+  color: var(--text);
+  background-color: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-synthesis-weight: none;
+  /*
+   * NOT `overflow-x: hidden`. That makes <body> a scroll container and every
+   * viewport-rooted IntersectionObserver silently stops firing — which is how
+   * scroll-reveal animations die with a clean build and no error. Individual
+   * bleeding sections clip themselves instead.
+   */
+  overflow-x: clip;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+}
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li {
+  overflow-wrap: break-word;
+}
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+:target {
+  scroll-margin-top: calc(var(--header-h) + var(--space-m));
+}
+/* ── Type ────────────────────────────────────────────────────────────────
+   The scale binding only. Sizes come from the tokens; the hierarchy a given
+   page needs is the page's business. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: balance;
+  color: var(--text);
+}
+h1 {
+  font-size: var(--step-5);
+  line-height: var(--leading-tight);
+}
+h2 {
+  font-size: var(--step-4);
+  line-height: 1.12;
+}
+h3 {
+  font-size: var(--step-2);
+}
+h4 {
+  font-size: var(--step-1);
+}
+h5,
+h6 {
+  font-size: var(--step-0);
+}
+p {
+  text-wrap: pretty;
+}
+a {
+  color: inherit;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+strong,
+b {
+  font-weight: var(--weight-semibold);
+}
+/* ── Focus ───────────────────────────────────────────────────────────────
+   Style this to match the design — do not remove it. A focus ring that is the
+   browser default, or absent, is on the tells list for a reason. */
+:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+  border-radius: var(--radius-xs);
+}
+/* Never remove the outline outright — only defer to :focus-visible. */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+.skip-link {
+  position: absolute;
+  top: var(--space-2xs);
+  left: var(--space-2xs);
+  z-index: var(--z-skip);
+  padding: var(--space-2xs) var(--space-s);
+  background: var(--ink-900);
+  color: var(--white);
+  border-radius: var(--radius-s);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  transform: translateY(-200%);
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+/* ── Layout primitives ───────────────────────────────────────────────────── */
+.container {
+  width: 100%;
+  max-width: calc(var(--width-max) + var(--gutter) * 2);
+  margin-inline: auto;
+  padding-inline: var(--gutter);
+}
+.container--wide {
+  max-width: calc(var(--width-wide) + var(--gutter) * 2);
+}
+.container--text {
+  max-width: calc(var(--width-text) + var(--gutter) * 2);
+}
+/* Three rhythms, not one. Alternating them is what gives a page a structure
+   the eye can navigate; every section on --section-y is the tell that nobody
+   decided. */
+.section {
+  padding-block: var(--section-y);
+}
+.section--tight {
+  padding-block: var(--section-y-tight);
+}
+.section--loose {
+  padding-block: var(--section-y-loose);
+}
+/*
+ * The header is fixed, so every page's first section has to reserve its
+ * 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.
+ */
+.under-header {
+  padding-block-start: calc(var(--header-h) + var(--space-2xl));
+}
+.stack > * + * {
+  margin-block-start: var(--flow, var(--space-s));
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+/* ── Interactive states ──────────────────────────────────────────────────
+ * These carry the STATES, not the style.
+ *
+ * Every interactive element needs hover, focus-visible, active, disabled and
+ * busy, and the busy state is the one that gets forgotten until a visitor
+ * double-submits a form. What a button LOOKS like is a project decision —
+ * restyle these freely, override them entirely, but do not ship a control
+ * that is missing a state.
+ *
+ * They live in the global sheet on purpose: Astro stamps its scoping
+ * attribute only on elements written in a component's own template, so a
+ * class passed *into* a child as a prop — or an element created at runtime by
+ * JS — never matches the parent's scoped rule. Anything crossing a component
+ * boundary has to be global or it silently does nothing.
+ */
+.btn {
+  --btn-bg: var(--ink-900);
+  --btn-fg: var(--white);
+  --btn-border: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2xs);
+  /* 44px minimum tap target, from the padding rather than a fixed height, so
+     it still works when the label wraps. */
+  min-block-size: 2.75rem;
+  padding: 0.7em 1.4em;
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  font-weight: var(--weight-semibold);
+  line-height: 1.1;
+  text-decoration: none;
+  color: var(--btn-fg);
+  background: var(--btn-bg);
+  border: 1.5px solid var(--btn-border);
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition:
+    background-color var(--dur-base) var(--ease-out),
+    border-color var(--dur-base) var(--ease-out),
+    color var(--dur-base) var(--ease-out);
+}
+/*
+ * ── Third-party CSS defence. Do not "simplify" this away. ──────────────────
+ *
+ * Vendor widgets — chat, booking, reviews — inject their own stylesheet into
+ * the page, and it lands on YOUR elements. Measured on a live site: enabling a
+ * chat widget took three pages from 0 accessibility errors to failing colour
+ * contrast on `.btn` and `.btn--ghost`. Proven by removing the widget and
+ * re-running — the same three pages returned to 0, nothing else changed.
+ *
+ * `.btn.btn` is the same element matched twice, purely to raise specificity
+ * above anything a vendor drops in at (0,1,0). It costs nothing and it is the
+ * only thing standing between a supplier's release and your contrast ratios.
+ *
+ * It looks exactly like something a tidy-minded person deletes. It is not.
+ */
+.btn.btn {
+  color: var(--btn-fg);
+  background: var(--btn-bg);
+  border-color: var(--btn-border);
+}
+.btn:hover {
+  --btn-bg: var(--ink-700);
+}
+.btn[aria-disabled='true'],
+.btn:disabled,
+.btn[data-busy] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+/* A second variant, because "primary and one other" is the minimum a page
+   needs and getting the borders right on an inverted section is fiddly. */
+.btn--ghost {
+  --btn-bg: transparent;
+  --btn-fg: var(--text);
+  --btn-border: var(--border-strong);
+}
+.btn--ghost:hover {
+  --btn-bg: transparent;
+  --btn-border: var(--text);
+}
+.on-dark .btn {
+  --btn-bg: var(--white);
+  --btn-fg: var(--ink-900);
+}
+.on-dark .btn:hover {
+  --btn-bg: var(--ink-100);
+}
+.on-dark .btn--ghost {
+  --btn-bg: transparent;
+  --btn-fg: var(--white);
+  --btn-border: var(--border-strong);
+}
+/* ── Motion ──────────────────────────────────────────────────────────────
+ * Reveal-on-scroll. The hidden state is applied by the script in Base.astro
+ * at runtime (it sets [data-reveal-ready]), NEVER by this stylesheet alone —
+ * a CSS rule that JS is expected to undo shows a blank page whenever the
+ * script fails to load. Without JS these elements are simply visible.
+ *
+ * Opt in per element with data-reveal. Nothing in the template uses it.
+ */
+[data-reveal-ready] [data-reveal] {
+  opacity: 0;
+  transform: translateY(1.25rem);
+  transition:
+    opacity var(--dur-slow) var(--ease-out),
+    transform var(--dur-slow) var(--ease-out);
+  transition-delay: var(--reveal-delay, 0ms);
+  will-change: opacity, transform;
+}
+[data-reveal-ready] [data-reveal].is-revealed {
+  opacity: 1;
+  transform: none;
+  will-change: auto;
+}
+/* ── Page transitions ────────────────────────────────────────────────────
+ * Cross-fade with a short lift. Deliberately quick — a navigation that takes
+ * 500ms to resolve feels broken, not designed. The header is marked
+ * `transition:persist`, so it stays put while the page beneath it changes.
+ */
+::view-transition-old(root) {
+  animation: page-out 180ms var(--ease-in-out) both;
+}
+::view-transition-new(root) {
+  animation: page-in 320ms var(--ease-out) both;
+}
+@keyframes page-out {
+  to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+/* The persisted header must not be animated by the root transition. */
+::view-transition-group(site-header) {
+  animation-duration: 0ms;
+}
+/* Astro's fallback path for browsers without native view transitions. */
+[data-astro-transition-fallback='old'] main {
+  animation: page-out 180ms var(--ease-in-out) both;
+}
+[data-astro-transition-fallback='new'] main {
+  animation: page-in 320ms var(--ease-out) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  [data-astro-transition-fallback='old'] main,
+  [data-astro-transition-fallback='new'] main {
+    animation: none !important;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  [data-reveal-ready] [data-reveal] {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}

package/template/src/styles/project.css ADDED Viewed

@@ -0,0 +1,14 @@
+/*
+ * ── THIS PROJECT'S LOOK. Everything that is not the kit. ───────────────────
+ *
+ * global.css carries interactive STATES — focus rings, disabled, hover,
+ * reduced-motion. It is not the place for a card, a hero or a section style.
+ *
+ * The seam exists because without it those land in global.css anyway, and the
+ * next site built from this kit inherits the last one's furniture.
+ *
+ * Load order: tokens.css → prose.css → global.css → this file. The first two are
+ * `@import`ed at the top of global.css, so global's own rules land after both.
+ * If a rule here needs !important to win, the rule it is fighting probably
+ * belongs here too.
+ */

package/template/src/styles/prose.css ADDED Viewed

@@ -0,0 +1,182 @@
+/*
+ * Long-form article body.
+ *
+ * Global, not scoped: markdown renders to elements Astro never sees in a
+ * component template, so a scoped rule would never match them.
+ */
+.prose {
+  font-size: var(--step-0);
+  line-height: var(--leading-relaxed);
+  color: var(--ink-700);
+  max-inline-size: var(--width-text);
+}
+.prose > * + * {
+  margin-block-start: var(--space-m);
+}
+.prose h2 {
+  margin-block-start: var(--space-2xl);
+  font-size: var(--step-3);
+  line-height: 1.15;
+  color: var(--ink-900);
+  scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
+}
+.prose h3 {
+  margin-block-start: var(--space-xl);
+  font-size: var(--step-1);
+  color: var(--ink-900);
+  scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
+}
+.prose h4 {
+  margin-block-start: var(--space-l);
+  font-size: var(--step-0);
+  font-family: var(--font-body);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.prose h2 + *,
+.prose h3 + *,
+.prose h4 + * {
+  margin-block-start: var(--space-s);
+}
+.prose p {
+  text-wrap: pretty;
+}
+.prose a {
+  color: var(--brand-700);
+  font-weight: var(--weight-medium);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--brand-500) 45%, transparent);
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 0.18em;
+  transition: text-decoration-color var(--dur-fast) var(--ease-out);
+}
+.prose a:hover {
+  text-decoration-color: var(--brand-500);
+}
+.prose strong {
+  font-weight: var(--weight-semibold);
+  color: var(--ink-900);
+}
+.prose ul,
+.prose ol {
+  padding-inline-start: var(--space-m);
+}
+.prose li + li {
+  margin-block-start: var(--space-2xs);
+}
+.prose li::marker {
+  color: var(--brand-500);
+}
+.prose ol li::marker {
+  font-weight: var(--weight-semibold);
+}
+.prose img {
+  inline-size: 100%;
+  border-radius: var(--radius-l);
+  margin-block: var(--space-xl);
+}
+.prose figure {
+  margin-block: var(--space-xl);
+}
+.prose figcaption {
+  margin-block-start: var(--space-2xs);
+  font-size: var(--step--1);
+  color: var(--text-muted);
+  text-align: center;
+}
+.prose blockquote {
+  margin-block: var(--space-xl);
+  padding: var(--space-m) var(--space-l);
+  border-inline-start: 3px solid var(--brand-500);
+  background: var(--brand-50);
+  border-radius: 0 var(--radius-m) var(--radius-m) 0;
+  font-size: var(--step-1);
+  line-height: var(--leading-normal);
+  color: var(--ink-800);
+}
+.prose blockquote p + p {
+  margin-block-start: var(--space-s);
+}
+.prose hr {
+  margin-block: var(--space-2xl);
+  border: 0;
+  border-block-start: 1px solid var(--border);
+}
+.prose code {
+  padding: 0.15em 0.4em;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+}
+.prose pre {
+  margin-block: var(--space-l);
+  padding: var(--space-m);
+  overflow-x: auto;
+  background: var(--ink-900);
+  border-radius: var(--radius-m);
+  font-size: var(--step--1);
+}
+.prose pre code {
+  padding: 0;
+  background: none;
+  border: 0;
+}
+/* Wide tables scroll inside their own box; the page body never does. */
+.prose .table-scroll {
+  margin-block: var(--space-l);
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-m);
+}
+.prose table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--step--1);
+}
+.prose th,
+.prose td {
+  padding: var(--space-2xs) var(--space-s);
+  text-align: start;
+  border-block-end: 1px solid var(--border);
+}
+.prose th {
+  font-weight: var(--weight-semibold);
+  color: var(--ink-900);
+  background: var(--bg-subtle);
+  white-space: nowrap;
+}
+.prose tr:last-child td {
+  border-block-end: 0;
+}