@sumaq/site-kit 0.2.0

package/src/blocks/EmergencyHelplines.astro

@@ -0,0 +1,109 @@
+---
+import { cmsKey, hasAny, hasText, list } from "../lib/content";
+
+const {
+	sectionTitle,
+	items = [],
+	disclaimer,
+	/**
+	 * Lead-in emphasised at the start of the disclaimer. The German default is
+	 * the pre-0.2 behaviour kept so the live site keeps its emphasis; move it to
+	 * content and drop the fallback.
+	 */
+	disclaimerLabel = "Wichtiger Hinweis:",
+	backLabel,
+	backHref,
+	section = "emergencyHelplines",
+} = Astro.props;
+
+const cms = section;
+const entries = list<any>(items).filter((item) => hasText(item.title) || hasText(item.actionLabel));
+
+/** The label may already open the stored text; do not print it twice. */
+const disclaimerBody = hasText(disclaimer)
+	? String(disclaimer).replace(new RegExp(`^${disclaimerLabel}\\s*`, "i"), "")
+	: "";
+const showBack = hasText(backHref) && hasText(backLabel);
+---
+
+{
+	hasText(sectionTitle) && (
+		<h2
+			class="sq-section__title sq-center sq-section__title--compact sq-section__title--spaced"
+			data-cms={cmsKey(cms, "sectionTitle")}
+		>
+			{sectionTitle}
+		</h2>
+	)
+}
+
+{
+	entries.length > 0 && (
+		<ul class="sq-contact__list--narrow" data-cms={cms}>
+			{entries.map((item: any, i: number) => (
+				<li>
+					{hasAny(item.title, item.desc) && (
+						<div class="sq-contact__item-info">
+							{hasText(item.title) && (
+								<span class="sq-contact__item-title" data-cms={cmsKey(cms, "items", i, "title")}>
+									{item.title}
+								</span>
+							)}
+							{hasText(item.desc) && (
+								<span class="sq-contact__item-desc" data-cms={cmsKey(cms, "items", i, "desc")}>
+									{item.desc}
+								</span>
+							)}
+						</div>
+					)}
+					{hasText(item.actionLabel) &&
+						hasText(item.actionHref) &&
+						(item.isExternal ? (
+							<span class="sq-contact__item-value">
+								<a
+									href={item.actionHref}
+									target="_blank"
+									rel="noopener"
+									data-cms={cmsKey(cms, "items", i, "actionLabel")}
+								>
+									{item.actionLabel}
+								</a>
+							</span>
+						) : (
+							<a
+								href={item.actionHref}
+								class="sq-contact__item-action"
+								data-cms={cmsKey(cms, "items", i, "actionLabel")}
+							>
+								{item.actionLabel}
+							</a>
+						))}
+				</li>
+			))}
+		</ul>
+	)
+}
+
+{
+	(hasText(disclaimer) || showBack) && (
+		<div class="sq-center sq-stack-end">
+			{hasText(disclaimer) && (
+				<p
+					class="sq-section__lede sq-section__lede--sm sq-center"
+					data-cms={cmsKey(cms, "disclaimer")}
+				>
+					{hasText(disclaimerLabel) && <em>{disclaimerLabel}</em>} {disclaimerBody}
+				</p>
+			)}
+			{showBack && (
+				<a
+					class="sq-btn sq-btn--ghost sq-btn--spaced"
+					href={backHref}
+					data-cms={cmsKey(cms, "backLabel")}
+				>
+					{backLabel}
+				</a>
+			)}
+		</div>
+	)
+}

package/src/blocks/EmergencyPrimary.astro

@@ -0,0 +1,51 @@
+---
+import { cmsKey, hasAny, hasText } from "../lib/content";
+
+const {
+	sectionTitle,
+	sectionSubtitle,
+	phoneLabel,
+	phone,
+	phoneHref,
+	hours,
+	section = "emergencyPrimary",
+} = Astro.props;
+const cms = section;
+const hasPhone = hasText(phone) && hasText(phoneHref);
+---
+
+{
+	hasAny(sectionTitle, sectionSubtitle, phone, hours) && (
+		<div class="sq-emergency__card" data-cms={cms}>
+			{hasText(sectionTitle) && (
+				<h2 class="sq-emergency__title" data-cms={cmsKey(cms, "sectionTitle")}>
+					{sectionTitle}
+				</h2>
+			)}
+			{hasText(sectionSubtitle) && (
+				<p class="sq-section__lede sq-center" data-cms={cmsKey(cms, "sectionSubtitle")}>
+					{sectionSubtitle}
+				</p>
+			)}
+			{(hasPhone || hasText(phoneLabel)) && (
+				<div class="sq-emergency__phone">
+					{hasText(phoneLabel) && (
+						<span class="sq-emergency__phone-label" data-cms={cmsKey(cms, "phoneLabel")}>
+							{phoneLabel}
+						</span>
+					)}
+					{hasPhone && (
+						<a href={phoneHref} class="sq-emergency__phone-number" data-cms={cmsKey(cms, "phone")}>
+							{phone}
+						</a>
+					)}
+				</div>
+			)}
+			{hasText(hours) && (
+				<p class="sq-emergency__hours" data-cms={cmsKey(cms, "hours")}>
+					{hours}
+				</p>
+			)}
+		</div>
+	)
+}

package/src/blocks/Faq.astro

@@ -0,0 +1,56 @@
+---
+/**
+ * Questions and answers as native disclosure widgets.
+ *
+ * Not extracted from an existing site — none of the five had one — but a
+ * standard slot, and `<details>` keeps it keyboard-accessible with no JS.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Prose from "../components/Prose.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	/** Only one answer open at a time (native `<details name>` grouping). */
+	exclusive = false,
+	section = "faq",
+	variant = "light",
+	id = "faq",
+} = Astro.props;
+
+const cms = section;
+const entries = list<any>(items).filter((item) => hasText(item.question) && hasText(item.answer));
+---
+
+<Section name="faq" variant={variant} id={id} container="narrow" cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		entries.length > 0 && (
+			<div class="sq-faq__body">
+				{entries.map((item: any, i: number) => (
+					<details class="sq-faq__item" name={exclusive ? `${cms}-item` : undefined}>
+						<summary class="sq-faq__question" data-cms={cmsKey(cms, "items", i, "question")}>
+							{item.question}
+						</summary>
+						<Prose
+							body={item.answer}
+							class="sq-faq__answer"
+							cms={cmsKey(cms, "items", i, "answer")}
+						/>
+					</details>
+				))}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/FeatureList.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * A checklist of short statements — the shape that appears as `ItemList`
+ * (www-utehofer-at), the `scenarios` list (www-bettinageidl-at), `focus-list`
+ * (www-juliaschaffer-at) and `sq-feature-list` (www-therapieraum-graz-at).
+ *
+ * Entries may be plain strings or `{ title, text, icon }` objects.
+ */
+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,
+	items = [],
+	/** `centered` adds `sq-feature-list--centered`. */
+	align = "start",
+	columns,
+	section = "featureList",
+	variant = "light",
+	id,
+} = Astro.props;
+
+const cms = section;
+const entries = list<any>(items)
+	.map((item) => (typeof item === "string" ? { text: item } : item))
+	.filter((item) => hasText(item.text) || hasText(item.title));
+---
+
+<Section name="features" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		entries.length > 0 && (
+			<ul
+				class:list={[
+					"sq-feature-list",
+					align === "center" && "sq-feature-list--centered",
+					columns && `sq-feature-list--${columns}`,
+				]}
+			>
+				{entries.map((item: any, i: number) => (
+					<li>
+						{hasImage(item.icon) && (
+							<span class="sq-feature-list__icon" aria-hidden="true">
+								<Media src={item.icon} alt="" cms={cmsKey(cms, "items", i, "icon")} />
+							</span>
+						)}
+						{hasText(item.title) && (
+							<span class="sq-feature-list__title" data-cms={cmsKey(cms, "items", i, "title")}>
+								{item.title}
+							</span>
+						)}
+						{hasText(item.text) && (
+							<span class="sq-feature-list__text" data-cms={cmsKey(cms, "items", i, "text")}>
+								{item.text}
+							</span>
+						)}
+					</li>
+				))}
+			</ul>
+		)
+	}
+</Section>

package/src/blocks/Gallery.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * Image gallery. Extracted from `Mosaic.astro` / `MosaicGallery.astro`
+ * (www-utehofer-at) and `GallerySection.astro` / `MosaicGrid.astro`
+ * (www-juliaschaffer-at), which between them carry ~650 lines of layout CSS
+ * inside the component. Here the markup is a flat list; the mosaic is a CSS
+ * decision the site makes on `sq-gallery__body` and `:nth-child()`.
+ *
+ * `lightbox` opts into the viewer wired in `scripts/enhancements.js`.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	lightbox = false,
+	closeLabel = "Close",
+	prevLabel = "Previous",
+	nextLabel = "Next",
+	section = "gallery",
+	variant = "light",
+	id = "gallery",
+} = Astro.props;
+
+const cms = section;
+const images = list<any>(items)
+	.map((item) => (typeof item === "string" ? { src: item } : item))
+	.filter((item) => hasText(item.src));
+---
+
+<Section name="gallery" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		images.length > 0 && (
+			<ul class="sq-gallery__body" role="list" data-gallery={lightbox ? "" : undefined}>
+				{images.map((image: any, i: number) => (
+					<li class="sq-gallery__item">
+						{lightbox ? (
+							<button
+								type="button"
+								class="sq-gallery__trigger"
+								data-gallery-index={i}
+								data-src={image.src}
+								data-alt={image.alt || ""}
+								aria-label={image.alt || undefined}
+							>
+								<Media
+									src={image.src}
+									alt={image.alt}
+									cms={cmsKey(cms, "items", i, "src")}
+								/>
+							</button>
+						) : (
+							<Media src={image.src} alt={image.alt} cms={cmsKey(cms, "items", i, "src")} />
+						)}
+						{hasText(image.caption) && (
+							<p class="sq-gallery__caption" data-cms={cmsKey(cms, "items", i, "caption")}>
+								{image.caption}
+							</p>
+						)}
+					</li>
+				))}
+			</ul>
+		)
+	}
+</Section>
+
+{
+	lightbox && images.length > 0 && (
+		<div class="sq-lightbox" data-lightbox role="dialog" aria-modal="true" hidden>
+			<button type="button" class="sq-lightbox__close" data-lightbox-close aria-label={closeLabel}>
+				<span aria-hidden="true">×</span>
+			</button>
+			<button type="button" class="sq-lightbox__prev" data-lightbox-prev aria-label={prevLabel}>
+				<span aria-hidden="true">‹</span>
+			</button>
+			<img class="sq-lightbox__image" data-lightbox-image alt="" />
+			<button type="button" class="sq-lightbox__next" data-lightbox-next aria-label={nextLabel}>
+				<span aria-hidden="true">›</span>
+			</button>
+		</div>
+	)
+}

package/src/blocks/Generic.astro

@@ -0,0 +1,30 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeading from "../components/SectionHeading.astro";
+import Prose from "../components/Prose.astro";
+import { cmsKey } from "../lib/content";
+
+const {
+	sectionTitle,
+	sectionTitleAccent,
+	sectionLabel,
+	sectionSubtitle,
+	body,
+	type,
+	section,
+	variant = "light",
+	id,
+} = Astro.props;
+const cms = section ?? type ?? "generic";
+---
+
+<Section name="generic" variant={variant} id={id} container="narrow" cms={cms}>
+	<SectionHeading
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	<Prose body={body} cms={cmsKey(cms, "body")} />
+</Section>

package/src/blocks/Hero.astro

@@ -0,0 +1,82 @@
+---
+import Media from "../components/Media.astro";
+import Actions from "../components/Actions.astro";
+import { cmsKey, hasImage, hasText, list } from "../lib/content";
+
+const {
+	eyebrow,
+	title,
+	titleAccent,
+	image,
+	sectionSubtitle,
+	ctas = [],
+	stats = [],
+	section = "hero",
+} = Astro.props;
+
+const cms = section;
+const statItems = list<any>(stats).filter((stat) => hasText(stat.label) || hasText(stat.value));
+const hasTitle = hasText(title) || hasText(titleAccent);
+---
+
+<section
+	class="sq-hero"
+	aria-labelledby={hasTitle ? "hero-title" : undefined}
+	data-cms={cms}
+>
+	{
+		hasImage(image) && (
+			<div class="sq-hero__media" aria-hidden="true">
+				<Media
+					src={image}
+					alt=""
+					width={960}
+					height={960}
+					loading="eager"
+					fetchpriority="high"
+					cms={cmsKey(cms, "image", "src")}
+				/>
+				<div class="sq-hero__overlay" />
+			</div>
+		)
+	}
+	<div class="sq-container sq-hero__content">
+		{hasText(eyebrow) && <p class="sq-eyebrow" data-cms={cmsKey(cms, "eyebrow")}>{eyebrow}</p>}
+		{
+			hasTitle && (
+				<h1 id="hero-title" class="sq-hero__title" data-cms={cmsKey(cms, "title")}>
+					{title}
+					{hasText(titleAccent) && (
+						<span class="sq-accent" data-cms={cmsKey(cms, "titleAccent")}>
+							{titleAccent}
+						</span>
+					)}
+				</h1>
+			)
+		}
+		{
+			hasText(sectionSubtitle) && (
+				<p class="sq-hero__lede" data-cms={cmsKey(cms, "sectionSubtitle")}>
+					{sectionSubtitle}
+				</p>
+			)
+		}
+		<Actions ctas={ctas} class="sq-hero__actions" cms={cmsKey(cms, "ctas")} />
+		{
+			statItems.length > 0 && (
+				<dl class="sq-hero__stats">
+					{statItems.map((stat: any, i: number) => (
+						<div>
+							{hasText(stat.label) && (
+								<dt data-cms={cmsKey(cms, "stats", i, "label")}>{stat.label}</dt>
+							)}
+							{hasText(stat.value) && (
+								<dd data-cms={cmsKey(cms, "stats", i, "value")}>{stat.value}</dd>
+							)}
+						</div>
+					))}
+				</dl>
+			)
+		}
+	</div>
+</section>

package/src/blocks/IntroCta.astro

@@ -0,0 +1,41 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeading from "../components/SectionHeading.astro";
+import Actions from "../components/Actions.astro";
+import { cmsKey } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	ctas = [],
+	section = "introCta",
+	variant = "muted",
+	id,
+} = Astro.props;
+
+const cms = section;
+---
+
+<Section
+	name="introCta"
+	variant={variant}
+	id={id}
+	container="narrow"
+	containerClass="sq-center"
+	cms={cms}
+>
+	<SectionHeading
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	<Actions
+		ctas={ctas}
+		class="sq-hero__actions sq-hero__actions--center"
+		cms={cmsKey(cms, "ctas")}
+	/>
+</Section>

package/src/blocks/LegalDocument.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * Body of a legal page — Impressum, Datenschutz, AGB, privacy, terms.
+ *
+ * Every site solves this differently today: `MDLayout.astro` +
+ * `prose` (www-utehofer-at, www-bettinageidl-at), a hand-built
+ * `section.map(paragraphs)` (www-juliaschaffer-at), and `set:html={md(...)}`
+ * inlined in each page (www-therapieraum-graz-at). Accepts either a markdown
+ * `body` or a list of `{ heading, paragraphs }` sections.
+ */
+import Section from "../components/Section.astro";
+import Prose from "../components/Prose.astro";
+import { cmsKey, hasItems, hasText, list } from "../lib/content";
+
+const {
+	title,
+	lead,
+	body,
+	sections: parts = [],
+	updatedLabel,
+	updatedAt,
+	section = "legal",
+	variant = "light",
+	id = "legal-doc",
+} = Astro.props;
+
+const cms = section;
+const chapters = list<any>(parts).filter(
+	(part) => hasText(part.heading) || hasItems(part.paragraphs),
+);
+---
+
+<Section
+	name="legal"
+	variant={variant}
+	container="narrow"
+	labelledby={hasText(title) ? `${id}-title` : undefined}
+	cms={cms}
+>
+	{
+		(hasText(title) || hasText(lead) || hasText(updatedAt)) && (
+			<header class="sq-legal__head">
+				{hasText(title) && (
+					<h1 id={`${id}-title`} class="sq-section__title" data-cms={cmsKey(cms, "title")}>
+						{title}
+					</h1>
+				)}
+				{hasText(lead) && (
+					<p class="sq-section__lede" data-cms={cmsKey(cms, "lead")}>
+						{lead}
+					</p>
+				)}
+				{hasText(updatedAt) && (
+					<p class="sq-legal__meta" data-cms={cmsKey(cms, "updatedAt")}>
+						{hasText(updatedLabel) ? `${updatedLabel} ` : ""}
+						{updatedAt}
+					</p>
+				)}
+			</header>
+		)
+	}
+
+	<Prose as="article" body={body} id={id} class="sq-legal" cms={cmsKey(cms, "body")} />
+
+	{
+		chapters.length > 0 && (
+			<article class="sq-legal">
+				{chapters.map((part: any, i: number) => (
+					<section>
+						{hasText(part.heading) && (
+							<h2 data-cms={cmsKey(cms, "sections", i, "heading")}>{part.heading}</h2>
+						)}
+						{list<string>(part.paragraphs)
+							.filter(hasText)
+							.map((paragraph, pi) => (
+								<p data-cms={cmsKey(cms, "sections", i, "paragraphs", pi)}>{paragraph}</p>
+							))}
+					</section>
+				))}
+			</article>
+		)
+	}
+</Section>