npm - @sumaq/site-kit - Versions diffs - 0.2.0 - Mend

@sumaq/site-kit 0.2.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 (60) hide show

package/README.md +93 -0
package/package.json +57 -0
package/src/astro-modules.d.ts +11 -0
package/src/blocks/About.astro +94 -0
package/src/blocks/Audience.astro +66 -0
package/src/blocks/BlockRenderer.astro +105 -0
package/src/blocks/Contact.astro +58 -0
package/src/blocks/ContactDetails.astro +91 -0
package/src/blocks/CtaBand.astro +53 -0
package/src/blocks/EmergencyGrid.astro +47 -0
package/src/blocks/EmergencyHelplines.astro +109 -0
package/src/blocks/EmergencyPrimary.astro +51 -0
package/src/blocks/Faq.astro +56 -0
package/src/blocks/FeatureList.astro +73 -0
package/src/blocks/Gallery.astro +95 -0
package/src/blocks/Generic.astro +30 -0
package/src/blocks/Hero.astro +82 -0
package/src/blocks/IntroCta.astro +41 -0
package/src/blocks/LegalDocument.astro +83 -0
package/src/blocks/LocationsOverview.astro +161 -0
package/src/blocks/NotFound.astro +33 -0
package/src/blocks/Notice.astro +49 -0
package/src/blocks/PageBanner.astro +57 -0
package/src/blocks/Pricing.astro +97 -0
package/src/blocks/ProfileDetail.astro +202 -0
package/src/blocks/Projects.astro +91 -0
package/src/blocks/Quote.astro +53 -0
package/src/blocks/Services.astro +46 -0
package/src/blocks/Skills.astro +65 -0
package/src/blocks/Stats.astro +54 -0
package/src/blocks/Steps.astro +76 -0
package/src/blocks/TeamDirectory.astro +164 -0
package/src/blocks/TeamTeaser.astro +84 -0
package/src/blocks/Testimonials.astro +75 -0
package/src/blocks/Timeline.astro +65 -0
package/src/components/Actions.astro +67 -0
package/src/components/Card.astro +104 -0
package/src/components/Logo.astro +57 -0
package/src/components/Media.astro +83 -0
package/src/components/Prose.astro +29 -0
package/src/components/ScrollToTop.astro +49 -0
package/src/components/Section.astro +75 -0
package/src/components/SectionHeader.astro +58 -0
package/src/components/SectionHeading.astro +76 -0
package/src/components/Seo.astro +55 -0
package/src/components/SiteFooter.astro +90 -0
package/src/components/SiteHeader.astro +97 -0
package/src/config.ts +59 -0
package/src/index.ts +75 -0
package/src/layouts/Base.astro +57 -0
package/src/lib/collections.ts +101 -0
package/src/lib/content.ts +51 -0
package/src/lib/format.ts +17 -0
package/src/lib/markdown.ts +5 -0
package/src/profiles/clinic.yaml +35 -0
package/src/profiles/portfolio.yaml +27 -0
package/src/profiles/therapist.yaml +31 -0
package/src/scripts/enhancements.js +459 -0
package/src/tokens/class-inventory.json +284 -0
package/src/tokens/index.css +83 -0

package/README.md ADDED Viewed

@@ -0,0 +1,93 @@
+# `@sumaq/site-kit`
+Layouts, blocks, helpers and Astro config factory for Sumaq client sites.
+```bash
+pnpm add @sumaq/site-kit@0.2.0
+```
+Public on [npmjs.com](https://www.npmjs.com/package/@sumaq/site-kit). Pin an exact version in each `www-*` site — never a range.
+The kit owns the **markup**. Colours, sizes and typography stay in the client's `src/styles/site.css`; content stays in `content/*.json`. See [`block-contract.md`](../../amauta/packages/block-contract.md) for the class contract and [`inventario-componentes.md`](../../amauta/packages/inventario-componentes.md) for where each component came from.
+## The rendering rule
+**If a field has content the element renders; if it does not, nothing is emitted.** No empty `<p>`, no empty `<ul>`, no section header with three blank lines — and no empty `<section>` either: `Section` renders its children first and skips the whole band when the result is blank. Because of that, kit blocks are server-only — do not put a `client:*` component inside a `Section`.
+The checks live in `lib/content.ts` (`hasText`, `list`, `hasItems`, `hasImage`, `hasAny`, `cmsKey`) so every block decides the same way.
+## Catalogue
+### Layout
+`Base` — `<html>` shell with SEO, header, footer, skip link, optional floating back-to-top, and a `head` slot for per-site fonts.
+### Chrome and primitives — `@sumaq/site-kit/components/*`
+| Component | What it is |
+|---|---|
+| `Seo` | title, description, canonical, Open Graph, Twitter, optional JSON-LD |
+| `SiteHeader` / `SiteFooter` | brand, navigation, footer columns, copyright |
+| `Section` | the `<section class="sq-section sq-{name}">` + `sq-container` skeleton |
+| `SectionHeader` / `SectionHeading` | label, title (+ accent), lede, note — with and without the `<header>` wrapper |
+| `Actions` | a row of CTAs; honours `external` |
+| `Card` | media, icon, badge, title, text, bullets; becomes an `<a>` when given `href` |
+| `Logo` | brand link, falls back to the brand name when there is no image |
+| `Media` | `<img>` for CMS strings, `astro:assets` `<Image>` for imported assets |
+| `Prose` | markdown or HTML into `sq-prose` |
+| `ScrollToTop` | floating back-to-top control |
+### Blocks — `@sumaq/site-kit/blocks/*`
+| Group | Blocks |
+|---|---|
+| Openers | `Hero`, `PageBanner` |
+| Content | `About`, `Audience`, `Faq`, `FeatureList`, `Gallery`, `Generic`, `Notice`, `Pricing`, `Projects`, `Quote`, `Services`, `Skills`, `Stats`, `Steps`, `Testimonials`, `Timeline` |
+| Conversion | `Contact` (people), `ContactDetails` (the practice), `CtaBand`, `IntroCta` |
+| Collections | `LocationsOverview`, `ProfileDetail`, `TeamDirectory`, `TeamTeaser` |
+| Standalone pages | `LegalDocument`, `NotFound` |
+| Therapist profile | `EmergencyPrimary`, `EmergencyGrid`, `EmergencyHelplines` |
+| Dispatcher | `BlockRenderer` — maps `block.type` to a component, `Generic` as fallback |
+Every block accepts `section` (the `data-cms` base key), `variant` (`light` / `muted` / …) and `id`, so the same component can appear twice on a page under different CMS keys.
+## Site-local components
+The kit is where a site **starts**, not where it is confined — a client paying for something of their own gets it in their own repo. Two seams make that work without forking:
+```astro
+---
+import { Base, BlockRenderer } from "@sumaq/site-kit";
+import Rooms from "../components/Rooms.astro";   // only this client
+---
+<BlockRenderer blocks={blocks} components={{ rooms: Rooms }} />
+```
+`components` merges into the catalogue **and wins over it**, so a site can add a block the kit does not have or replace one it does. An unmatched `type` still falls back to `Generic`, and warns in dev so a custom block never fails silently. Data-side there is nothing to register: `@sumaq/cms-schema` validates each block against the site's own `cms/*.yaml`, never against a central list.
+**The namespace rule:** `sq-*` belongs to the kit and is inventoried in `class-inventory.json`. Site-local components use their own prefix. That is what keeps the shared markup verifiable without taxing what makes a client's site theirs.
+Promotion: if a local block shows up in three clients, it earns a place in the catalogue — see the checklist below.
+## Profiles
+`profiles/{therapist,clinic,portfolio}.yaml` — a curated block subset, the required/optional pages, and a default composition per niche. Adding a niche is a profile plus whatever blocks it is missing, not a site from scratch.
+## Working on the kit
+```bash
+pnpm typecheck          # tsc over the TS surface
+pnpm check:catalogue    # every block is exported, reachable and in the profiles
+pnpm classes            # regenerate src/tokens/class-inventory.json
+pnpm test               # typecheck + catalogue
+```
+`class-inventory.json` is derived from the source — never hand-edit it; run `pnpm classes` after touching markup. To check the data contract too:
+```bash
+node scripts/check-catalogue.mjs --registry ../../../sumaq-cli/skills/sumaq-site-builder/blocks-registry.yaml
+```
+## Adding a block
+Follow the checklist in [`block-contract.md` §8](../../amauta/packages/block-contract.md): the regular skeleton, `data-cms` on every editable node, no `<style>`, no colours, no measurements, and no hardcoded copy — a label the client can read is content, not markup.

package/package.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "name": "@sumaq/site-kit",
+  "version": "0.2.0",
+  "description": "Layouts, blocks, helpers and Astro config factory for Sumaq client sites.",
+  "license": "UNLICENSED",
+  "author": "elingan",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elingan/sumaq-packages.git",
+    "directory": "packages/site-kit"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config.ts",
+    "./blocks/*": "./src/blocks/*.astro",
+    "./components/*": "./src/components/*.astro",
+    "./layouts/*": "./src/layouts/*.astro",
+    "./collections": "./src/lib/collections.ts",
+    "./content": "./src/lib/content.ts",
+    "./format": "./src/lib/format.ts",
+    "./markdown": "./src/lib/markdown.ts",
+    "./tokens.css": "./src/tokens/index.css",
+    "./class-inventory.json": "./src/tokens/class-inventory.json",
+    "./profiles/*": "./src/profiles/*.yaml",
+    "./scripts/*": "./src/scripts/*"
+  },
+  "peerDependencies": {
+    "astro": "^7.1.0",
+    "sharp": "^0.35.0"
+  },
+  "dependencies": {
+    "@astrojs/sitemap": "3.7.3",
+    "marked": "15.0.7",
+    "@sumaq/cms-schema": "0.1.0"
+  },
+  "devDependencies": {
+    "astro": "7.1.4",
+    "typescript": "5.8.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "classes": "node scripts/build-class-inventory.mjs",
+    "check:catalogue": "node scripts/check-catalogue.mjs",
+    "test": "pnpm run typecheck && pnpm run check:catalogue"
+  }
+}

package/src/astro-modules.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Lets plain `tsc` resolve the `.astro` re-exports in `index.ts`.
+ *
+ * It does not typecheck the components themselves — that needs `@astrojs/check`,
+ * which the package does not depend on yet. When it does, this shim goes away
+ * and the real prop types take over.
+ */
+declare module "*.astro" {
+	const component: (props: Record<string, any>) => any;
+	export default component;
+}

package/src/blocks/About.astro ADDED Viewed

@@ -0,0 +1,94 @@
+---
+/**
+ * Practitioner / company introduction with a portrait.
+ *
+ * Extracted from `AboutMe.astro` (www-utehofer-at), `About.astro`
+ * (www-bettinageidl-at) and `AboutSection.astro` (www-juliaschaffer-at): the
+ * three are the same split — copy on one side, portrait on the other, plus an
+ * identity line (name + qualifications).
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Media from "../components/Media.astro";
+import Prose from "../components/Prose.astro";
+import Actions from "../components/Actions.astro";
+import { cmsKey, hasAny, hasImage, hasText, list } from "../lib/content";
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	body,
+	image,
+	name,
+	role,
+	qualifications = [],
+	ctas = [],
+	/** Portrait first instead of copy first. */
+	reverse = false,
+	section = "about",
+	variant = "light",
+	id = "about",
+} = Astro.props;
+const cms = section;
+const badges = list<any>(qualifications)
+	.map((item) => (typeof item === "string" ? item : item.text))
+	.filter(hasText);
+const hasCopy = hasAny(body, name, role, badges, ctas);
+---
+<Section name="about" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		(hasCopy || hasImage(image)) && (
+			<div class:list={["sq-about__body", reverse && "sq-about__body--reverse"]}>
+				{hasCopy && (
+					<div class="sq-about__copy">
+						{hasAny(name, role, badges) && (
+							<div class="sq-about__identity">
+								{hasText(name) && (
+									<p class="sq-about__name" data-cms={cmsKey(cms, "name")}>
+										{name}
+									</p>
+								)}
+								{hasText(role) && (
+									<p class="sq-about__role" data-cms={cmsKey(cms, "role")}>
+										{role}
+									</p>
+								)}
+								{badges.length > 0 && (
+									<ul class="sq-about__qualifications">
+										{badges.map((badge, i) => (
+											<li data-cms={cmsKey(cms, "qualifications", i, "text")}>{badge}</li>
+										))}
+									</ul>
+								)}
+							</div>
+						)}
+						<Prose body={body} cms={cmsKey(cms, "body")} />
+						<Actions ctas={ctas} cms={cmsKey(cms, "ctas")} />
+					</div>
+				)}
+				{hasImage(image) && (
+					<figure class="sq-about__media">
+						<Media
+							src={image}
+							alt={image?.alt || name}
+							width={720}
+							height={900}
+							cms={cmsKey(cms, "image", "src")}
+						/>
+					</figure>
+				)}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Audience.astro ADDED Viewed

@@ -0,0 +1,66 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasImage, hasText, list } from "../lib/content";
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	sectionNote,
+	items = [],
+	section = "audience",
+	variant = "light",
+	id = "audience",
+} = Astro.props;
+const cms = section;
+const cards = list<any>(items).filter(
+	(item) => hasText(item.title) || hasImage(item.image) || list(item.bullets).length > 0,
+);
+---
+<Section name="audience" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		note={sectionNote}
+		cms={cms}
+	/>
+	{
+		cards.length > 0 && (
+			<div class="sq-audience__grid">
+				{cards.map((item: any, i: number) => {
+					const bullets = list<any>(item.bullets).filter((bullet) => hasText(bullet.text));
+					return (
+						<article class="sq-audience__card">
+							<Media
+								src={item.image}
+								alt={item.image?.alt}
+								cms={cmsKey(cms, "items", i, "image", "src")}
+							/>
+							<div class="sq-audience__body">
+								{hasText(item.title) && (
+									<h3 data-cms={cmsKey(cms, "items", i, "title")}>{item.title}</h3>
+								)}
+								{bullets.length > 0 && (
+									<ul>
+										{bullets.map((bullet: any, bi: number) => (
+											<li data-cms={cmsKey(cms, "items", i, "bullets", bi, "text")}>
+												{bullet.text}
+											</li>
+										))}
+									</ul>
+								)}
+							</div>
+						</article>
+					);
+				})}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/BlockRenderer.astro ADDED Viewed

@@ -0,0 +1,105 @@
+---
+import About from "./About.astro";
+import Audience from "./Audience.astro";
+import Contact from "./Contact.astro";
+import ContactDetails from "./ContactDetails.astro";
+import CtaBand from "./CtaBand.astro";
+import EmergencyGrid from "./EmergencyGrid.astro";
+import EmergencyHelplines from "./EmergencyHelplines.astro";
+import EmergencyPrimary from "./EmergencyPrimary.astro";
+import Faq from "./Faq.astro";
+import FeatureList from "./FeatureList.astro";
+import Gallery from "./Gallery.astro";
+import Generic from "./Generic.astro";
+import Hero from "./Hero.astro";
+import IntroCta from "./IntroCta.astro";
+import LegalDocument from "./LegalDocument.astro";
+import LocationsOverview from "./LocationsOverview.astro";
+import NotFound from "./NotFound.astro";
+import Notice from "./Notice.astro";
+import PageBanner from "./PageBanner.astro";
+import Pricing from "./Pricing.astro";
+import ProfileDetail from "./ProfileDetail.astro";
+import Projects from "./Projects.astro";
+import Quote from "./Quote.astro";
+import Services from "./Services.astro";
+import Skills from "./Skills.astro";
+import Stats from "./Stats.astro";
+import Steps from "./Steps.astro";
+import TeamDirectory from "./TeamDirectory.astro";
+import TeamTeaser from "./TeamTeaser.astro";
+import Testimonials from "./Testimonials.astro";
+import Timeline from "./Timeline.astro";
+import { list } from "../lib/content";
+const BLOCK_COMPONENTS: Record<string, any> = {
+	about: About,
+	audience: Audience,
+	contact: Contact,
+	contactDetails: ContactDetails,
+	cta: CtaBand,
+	emergencyGrid: EmergencyGrid,
+	emergencyHelplines: EmergencyHelplines,
+	emergencyPrimary: EmergencyPrimary,
+	faq: Faq,
+	featureList: FeatureList,
+	gallery: Gallery,
+	generic: Generic,
+	hero: Hero,
+	introCta: IntroCta,
+	legal: LegalDocument,
+	locationsOverview: LocationsOverview,
+	notFound: NotFound,
+	notice: Notice,
+	pageBanner: PageBanner,
+	pricing: Pricing,
+	profileDetail: ProfileDetail,
+	projects: Projects,
+	quote: Quote,
+	services: Services,
+	skills: Skills,
+	stats: Stats,
+	steps: Steps,
+	teamDirectory: TeamDirectory,
+	teamTeaser: TeamTeaser,
+	testimonials: Testimonials,
+	timeline: Timeline,
+};
+/**
+ * Renders CMS blocks. Collection-backed blocks must already carry their items
+ * (members / locations) — resolve them in the page with @sumaq/site-kit/collections.
+ *
+ * `components` merges the site's own blocks into the map and wins over the
+ * catalogue, so a client repo can add a block the kit does not have — or
+ * replace one it does — without forking (block-contract §7):
+ *
+ *     import Rooms from "../components/Rooms.astro";
+ *     <BlockRenderer blocks={blocks} components={{ rooms: Rooms }} />
+ *
+ * A `type` that matches nothing falls back to `Generic` so a schema that runs
+ * ahead of the kit still builds; in dev it also warns, because silently
+ * rendering the wrong markup is how a custom block goes unnoticed.
+ */
+const { blocks = [], components = {} } = Astro.props;
+const registry: Record<string, any> = { ...BLOCK_COMPONENTS, ...components };
+const entries = list<any>(blocks).filter((block) => block && typeof block === "object");
+if (import.meta.env.DEV) {
+	for (const block of entries) {
+		if (block.type && !registry[block.type]) {
+			console.warn(
+				`[site-kit] Unknown block type "${block.type}" — falling back to Generic. ` +
+					`Pass it in <BlockRenderer components={{ ${block.type}: … }} /> if it is a site-local block.`,
+			);
+		}
+	}
+}
+---
+{
+	entries.map((block: any) => {
+		const Comp = registry[block.type] ?? Generic;
+		return <Comp {...block} />;
+	})
+}

package/src/blocks/Contact.astro ADDED Viewed

@@ -0,0 +1,58 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { telHref } from "../lib/format";
+import { cmsKey, hasText, list } from "../lib/content";
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	cards = [],
+	section = "contact",
+	variant = "muted",
+	id = "contact",
+} = Astro.props;
+const cms = section;
+const people = list<any>(cards).filter(
+	(card) => hasText(card.name) || hasText(card.email) || hasText(card.phone),
+);
+---
+<Section name="contact" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		people.length > 0 && (
+			<div class:list={["sq-contact__grid", people.length === 1 && "sq-contact__grid--single"]}>
+				{people.map((card: any, i: number) => (
+					<article class="sq-contact__card">
+						{hasText(card.name) && <h3 data-cms={cmsKey(cms, "cards", i, "name")}>{card.name}</h3>}
+						{hasText(card.role) && (
+							<p class="sq-contact__role" data-cms={cmsKey(cms, "cards", i, "role")}>
+								{card.role}
+							</p>
+						)}
+						{hasText(card.email) && (
+							<a href={`mailto:${card.email}`} data-cms={cmsKey(cms, "cards", i, "email")}>
+								{card.email}
+							</a>
+						)}
+						{hasText(card.phone) && (
+							<a href={telHref(card.phone)} data-cms={cmsKey(cms, "cards", i, "phone")}>
+								{card.phone}
+							</a>
+						)}
+					</article>
+				))}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/ContactDetails.astro ADDED Viewed

@@ -0,0 +1,91 @@
+---
+/**
+ * Address / phone / email / hours as a definition list.
+ *
+ * The kit's `Contact` block lists *people* (name + role + reachability); this
+ * one lists the *practice*, which is what `ContactSection.astro`
+ * (www-juliaschaffer-at), `Contact.astro` (www-utehofer-at) and
+ * `Contact.astro` (www-bettinageidl-at) each solved separately.
+ *
+ * `type` derives the href, so the CMS stores a value, never a `mailto:`.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Actions from "../components/Actions.astro";
+import Media from "../components/Media.astro";
+import { telHref } from "../lib/format";
+import { cmsKey, hasImage, hasText, list } from "../lib/content";
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	ctas = [],
+	section = "contactDetails",
+	variant = "muted",
+	id = "contact",
+} = Astro.props;
+const cms = section;
+const hrefFor = (item: any): string | undefined => {
+	if (hasText(item.href)) return item.href;
+	if (!hasText(item.value)) return undefined;
+	if (item.type === "email") return `mailto:${item.value}`;
+	if (item.type === "phone") return telHref(item.value);
+	return undefined;
+};
+const rows = list<any>(items)
+	.filter((item) => hasText(item.value) || hasText(item.label))
+	.map((item) => ({ ...item, resolvedHref: hrefFor(item) }));
+---
+<Section name="contactDetails" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		rows.length > 0 && (
+			<dl class="sq-contact-details__body">
+				{rows.map((item: any, i: number) => (
+					<div class="sq-contact-details__row">
+						{hasImage(item.icon) && (
+							<span class="sq-contact-details__icon" aria-hidden="true">
+								<Media src={item.icon} alt="" cms={cmsKey(cms, "items", i, "icon")} />
+							</span>
+						)}
+						{hasText(item.label) && (
+							<dt class="sq-contact-details__label" data-cms={cmsKey(cms, "items", i, "label")}>
+								{item.label}
+							</dt>
+						)}
+						{hasText(item.value) && (
+							<dd class="sq-contact-details__value">
+								{item.resolvedHref ? (
+									<a
+										href={item.resolvedHref}
+										target={item.external ? "_blank" : undefined}
+										rel={item.external ? "noopener" : undefined}
+										data-cms={cmsKey(cms, "items", i, "value")}
+									>
+										{item.value}
+									</a>
+								) : (
+									<span data-cms={cmsKey(cms, "items", i, "value")}>{item.value}</span>
+								)}
+							</dd>
+						)}
+					</div>
+				))}
+			</dl>
+		)
+	}
+	<Actions ctas={ctas} cms={cmsKey(cms, "ctas")} />
+</Section>

package/src/blocks/CtaBand.astro ADDED Viewed

@@ -0,0 +1,53 @@
+---
+import Actions from "../components/Actions.astro";
+import { cmsKey, hasAny, hasText } from "../lib/content";
+const {
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	ctas = [],
+	section = "cta",
+} = Astro.props;
+const cms = section;
+const hasTitle = hasText(sectionTitle) || hasText(sectionTitleAccent);
+const hasCopy = hasAny(sectionTitle, sectionTitleAccent, sectionSubtitle);
+---
+{
+	hasAny(sectionTitle, sectionTitleAccent, sectionSubtitle, ctas) && (
+		<section
+			class="sq-cta"
+			aria-labelledby={hasTitle ? "cta-title" : undefined}
+			data-cms={cms}
+		>
+			<div class="sq-container sq-cta__inner">
+				{hasCopy && (
+					<div>
+						{hasTitle && (
+							<h2 id="cta-title" class="sq-cta__title" data-cms={cmsKey(cms, "sectionTitle")}>
+								{sectionTitle}
+								{hasText(sectionTitleAccent) && (
+									<span class="sq-accent" data-cms={cmsKey(cms, "sectionTitleAccent")}>
+										{sectionTitleAccent}
+									</span>
+								)}
+							</h2>
+						)}
+						{hasText(sectionSubtitle) && (
+							<p data-cms={cmsKey(cms, "sectionSubtitle")}>{sectionSubtitle}</p>
+						)}
+					</div>
+				)}
+				<Actions
+					ctas={ctas}
+					class="sq-cta__actions"
+					cms={cmsKey(cms, "ctas")}
+					secondaryClass="sq-btn--outline-light"
+					primaryFirst
+				/>
+			</div>
+		</section>
+	)
+}

package/src/blocks/EmergencyGrid.astro ADDED Viewed

@@ -0,0 +1,47 @@
+---
+import { cmsKey, hasText, list } from "../lib/content";
+const { sectionTitle, items = [], section = "emergencyGrid", callLabel } = Astro.props;
+const cms = section;
+const entries = list<any>(items).filter((item) => hasText(item.name) || hasText(item.number));
+---
+{
+	hasText(sectionTitle) && (
+		<h2
+			class="sq-section__title sq-center sq-section__title--compact"
+			data-cms={cmsKey(cms, "sectionTitle")}
+		>
+			{sectionTitle}
+		</h2>
+	)
+}
+{
+	entries.length > 0 && (
+		<div class="sq-emergency__grid" data-cms={cms}>
+			{entries.map((item: any, i: number) => (
+				<a
+					class="sq-emergency__item"
+					href={item.href}
+					aria-label={hasText(callLabel) ? `${item.name} — ${callLabel}` : item.name}
+				>
+					{hasText(item.name) && (
+						<span class="sq-emergency__item-name" data-cms={cmsKey(cms, "items", i, "name")}>
+							{item.name}
+						</span>
+					)}
+					{hasText(item.desc) && (
+						<span class="sq-emergency__item-desc" data-cms={cmsKey(cms, "items", i, "desc")}>
+							{item.desc}
+						</span>
+					)}
+					{hasText(item.number) && (
+						<span class="sq-emergency__item-number" data-cms={cmsKey(cms, "items", i, "number")}>
+							{item.number}
+						</span>
+					)}
+				</a>
+			))}
+		</div>
+	)
+}