@sumaq/site-kit 0.2.0

package/src/components/Actions.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * A row of CTAs. Renders nothing when the list is empty or every entry lacks
+ * a label — an empty actions wrapper still takes vertical space in most CSS,
+ * so it must not be emitted.
+ *
+ * Honours the `external` flag the page schemas already declare
+ * (`target="_blank"` + `rel="noopener"`).
+ */
+import { cmsKey, hasText, list } from "../lib/content";
+
+interface Cta {
+	label?: string;
+	href?: string;
+	variant?: string;
+	external?: boolean;
+}
+
+interface Props {
+	ctas?: Cta[];
+	/** Wrapper classes, e.g. `sq-hero__actions` or `sq-section__actions`. */
+	class?: string;
+	/** `data-cms` base key of the list, e.g. `hero.ctas`. */
+	cms?: string;
+	/** Class used when a CTA is not `primary`. */
+	secondaryClass?: string;
+	/** Treat the first CTA as primary regardless of its `variant` (CtaBand). */
+	primaryFirst?: boolean;
+	/** Extra classes on every button, e.g. `sq-btn--block`. */
+	buttonClass?: string;
+}
+
+const {
+	ctas,
+	class: className = "sq-section__actions",
+	cms,
+	secondaryClass = "sq-btn--ghost",
+	primaryFirst = false,
+	buttonClass,
+} = Astro.props;
+
+const items = list<Cta>(ctas).filter((cta) => hasText(cta.label) && hasText(cta.href));
+---
+
+{
+	items.length > 0 && (
+		<div class={className}>
+			{items.map((cta, i) => (
+				<a
+					class:list={[
+						"sq-btn",
+						(primaryFirst && i === 0) || cta.variant === "primary"
+							? "sq-btn--primary"
+							: secondaryClass,
+						buttonClass,
+					]}
+					href={cta.href}
+					target={cta.external ? "_blank" : undefined}
+					rel={cta.external ? "noopener" : undefined}
+					data-cms={cmsKey(cms, i, "label")}
+				>
+					{cta.label}
+				</a>
+			))}
+		</div>
+	)
+}

package/src/components/Card.astro

@@ -0,0 +1,104 @@
+---
+/**
+ * The card primitive shared by the grid blocks — the shape that appears as
+ * `ItemCard` in www-utehofer-at and www-bettinageidl-at and as `FeatureCard`
+ * in www-juliaschaffer-at.
+ *
+ * Every part is optional: no icon → no icon slot, no bullets → no `<ul>`,
+ * no link → the card is a plain `<article>` instead of an anchor.
+ */
+import Media from "./Media.astro";
+import { cmsKey, hasImage, hasText, list } from "../lib/content";
+
+interface Bullet {
+	text?: string;
+}
+
+interface Props {
+	title?: string;
+	body?: string;
+	icon?: string;
+	image?: any;
+	imageAlt?: string;
+	href?: string;
+	external?: boolean;
+	badge?: string;
+	bullets?: Bullet[] | string[];
+	/** `data-cms` base key of this card, e.g. `services.items[0]`. */
+	cms?: string;
+	class?: string;
+	/** Heading tag inside the card. */
+	as?: "h2" | "h3" | "h4";
+}
+
+const {
+	title,
+	body,
+	icon,
+	image,
+	imageAlt,
+	href,
+	external = false,
+	badge,
+	bullets,
+	cms,
+	class: className,
+	as: Heading = "h3",
+} = Astro.props;
+
+const items = list<Bullet | string>(bullets)
+	.map((item) => (typeof item === "string" ? item : item.text))
+	.filter(hasText);
+const isLink = hasText(href);
+const Root = isLink ? "a" : "article";
+---
+
+<Root
+	class:list={["sq-card", className]}
+	href={isLink ? href : undefined}
+	target={isLink && external ? "_blank" : undefined}
+	rel={isLink && external ? "noopener" : undefined}
+	data-cms={cms}
+>
+	{
+		hasImage(image) && (
+			<div class="sq-card__media">
+				<Media
+					src={image}
+					alt={imageAlt}
+					width={800}
+					height={500}
+					cms={cmsKey(cms, "image", "src")}
+				/>
+			</div>
+		)
+	}
+	{
+		hasImage(icon) && (
+			<div class="sq-card__icon" aria-hidden="true">
+				<Media src={icon} alt="" cms={cmsKey(cms, "icon")} />
+			</div>
+		)
+	}
+	<div class="sq-card__body">
+		{hasText(badge) && <p class="sq-card__badge" data-cms={cmsKey(cms, "badge")}>{badge}</p>}
+		{
+			hasText(title) && (
+				<Heading class="sq-card__title" data-cms={cmsKey(cms, "title")}>
+					{title}
+				</Heading>
+			)
+		}
+		{hasText(body) && <p class="sq-card__text" data-cms={cmsKey(cms, "body")}>{body}</p>}
+		{
+			items.length > 0 && (
+				<ul class="sq-card__list">
+					{items.map((item, i) => (
+						<li data-cms={cmsKey(cms, "bullets", i, "text")}>{item}</li>
+					))}
+				</ul>
+			)
+		}
+		<slot />
+	</div>
+</Root>

package/src/components/Logo.astro

@@ -0,0 +1,57 @@
+---
+/**
+ * Brand link used by `SiteHeader` and `SiteFooter`.
+ *
+ * Falls back to the brand name when no image is supplied, and renders nothing
+ * at all when neither exists — a site without a logo gets no empty `<a>`.
+ */
+import type { ImageMetadata } from "astro";
+import Media from "./Media.astro";
+import { hasImage, hasText } from "../lib/content";
+
+interface Props {
+	image?: ImageMetadata | string | null;
+	name?: string;
+	href?: string;
+	label?: string;
+	/** `footer` adds `sq-logo--footer`. */
+	variant?: "header" | "footer";
+	eager?: boolean;
+	width?: number;
+	cms?: string;
+}
+
+const {
+	image,
+	name,
+	href = "/",
+	label,
+	variant = "header",
+	eager = false,
+	width = 600,
+	cms,
+} = Astro.props;
+
+const showImage = hasImage(image);
+const showName = !showImage && hasText(name);
+---
+
+{
+	(showImage || showName) && (
+		<a
+			class:list={["sq-logo", variant === "footer" && "sq-logo--footer"]}
+			href={href}
+			aria-label={label || name || undefined}
+		>
+			<Media
+				src={image}
+				alt=""
+				class="sq-logo__image"
+				width={width}
+				loading={eager ? "eager" : "lazy"}
+				cms={cms}
+			/>
+			{showName && <span class="sq-logo__name">{name}</span>}
+		</a>
+	)
+}

package/src/components/Media.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * Image primitive. Renders nothing when there is no `src`.
+ *
+ * Accepts both shapes the sites use:
+ *  - a string path coming from `content/*.json` → plain `<img>`
+ *  - an `ImageMetadata` import (logos, local assets) → `astro:assets` `<Image>`
+ */
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import { hasImage, hasText } from "../lib/content";
+
+interface Props {
+	src?: string | ImageMetadata | { src?: string; alt?: string } | null;
+	alt?: string;
+	id?: string;
+	class?: string;
+	width?: number;
+	height?: number;
+	sizes?: string;
+	widths?: number[];
+	loading?: "lazy" | "eager";
+	decoding?: "async" | "sync" | "auto";
+	fetchpriority?: "high" | "low" | "auto";
+	/** `data-cms-src` path so the live preview can swap the file. */
+	cms?: string;
+}
+
+const {
+	src,
+	alt,
+	id,
+	class: className,
+	width,
+	height,
+	sizes,
+	widths,
+	loading = "lazy",
+	decoding = "async",
+	fetchpriority,
+	cms,
+} = Astro.props;
+
+/** `{ src, alt }` objects from the CMS unwrap to their own src/alt. */
+const isPlainImageField =
+	src !== null && typeof src === "object" && !("width" in src) && "src" in src;
+const resolved = isPlainImageField ? (src as { src?: string }).src : src;
+const resolvedAlt = alt ?? (isPlainImageField ? ((src as { alt?: string }).alt ?? "") : "");
+const isAsset = typeof resolved === "object" && resolved !== null;
+---
+
+{
+	hasImage(resolved) &&
+		(isAsset ? (
+			<Image
+				src={resolved as ImageMetadata}
+				alt={resolvedAlt}
+				id={id}
+				class={className}
+				width={width}
+				height={height}
+				widths={widths}
+				sizes={sizes}
+				loading={loading}
+				decoding={decoding}
+				data-cms-src={cms}
+			/>
+		) : (
+			<img
+				src={resolved as string}
+				alt={resolvedAlt}
+				id={id}
+				class={className}
+				width={width}
+				height={height}
+				sizes={hasText(sizes) ? sizes : undefined}
+				loading={loading}
+				decoding={decoding}
+				fetchpriority={fetchpriority}
+				data-cms-src={cms}
+			/>
+		))
+}

package/src/components/Prose.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * Long-form rich text (the output of a markdown field). Renders nothing when
+ * the source is empty, so a page with no body does not ship an empty
+ * `sq-prose` box.
+ */
+import { md } from "../lib/markdown";
+import { hasText } from "../lib/content";
+
+interface Props {
+	body?: string;
+	/** Set when the value is already HTML and must not go through markdown. */
+	html?: boolean;
+	class?: string;
+	id?: string;
+	cms?: string;
+	/** Root tag — `article` for legal documents, `div` inside blocks. */
+	as?: "div" | "article" | "section";
+}
+
+const { body, html = false, class: className, id, cms, as: Tag = "div" } = Astro.props;
+const content = hasText(body) ? (html ? body! : md(body)) : "";
+---
+
+{
+	hasText(content) && (
+		<Tag id={id} class:list={["sq-prose", className]} set:html={content} data-cms={cms} />
+	)
+}

package/src/components/ScrollToTop.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Floating "back to top" control — the `ScrollToTop.astro` that
+ * www-utehofer-at, www-bettinageidl-at and www-juliaschaffer-at each keep
+ * their own copy of.
+ *
+ * Behaviour (show past a scroll threshold, smooth scroll, focus restore) lives
+ * in `scripts/enhancements.js`; the markup carries no styles, so each site
+ * decides how `sq-scroll-top` and `is-visible` look.
+ */
+import { hasText } from "../lib/content";
+
+interface Props {
+	label?: string;
+	/** Pixels of scroll before the control appears. */
+	threshold?: number;
+	/** Skip-target the control returns focus to. */
+	target?: string;
+}
+
+const { label = "Back to top", threshold = 300, target = "top" } = Astro.props;
+---
+
+<button
+	type="button"
+	class="sq-scroll-top"
+	data-scroll-top
+	data-scroll-threshold={String(threshold)}
+	data-scroll-target={target}
+	aria-label={label}
+	hidden
+>
+	<span class="sq-scroll-top__icon" aria-hidden="true">
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M12 19V5"></path>
+			<path d="m5 12 7-7 7 7"></path>
+		</svg>
+	</span>
+	{hasText(label) && <span class="sq-scroll-top__label">{label}</span>}
+</button>

package/src/components/Section.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * The regular section skeleton every block shares (block-contract §2).
+ *
+ * Root is always a `<section>` carrying `sq-section` plus the block's own
+ * `sq-{name}`; the container always exists so the width stays a CSS decision.
+ *
+ * The section renders **only when its children render something**. `sq-section`
+ * carries vertical rhythm in every site's CSS, so an empty shell would leave a
+ * blank band on the page. Children are rendered once, up front, and the result
+ * is inlined — which is why kit blocks must stay server-only (no `client:*`).
+ */
+import { hasText } from "../lib/content";
+
+interface Props {
+	/** Block name → `sq-{name}` on the root, kebab-cased. */
+	name?: string;
+	/** `sq-section--{variant}`; `light` and `muted` are the two in use today. */
+	variant?: "light" | "muted" | "tight" | "loose" | string;
+	id?: string;
+	/** id of the heading that labels the section. */
+	labelledby?: string;
+	/** `data-cms` base key of the block. */
+	cms?: string;
+	container?: "default" | "narrow" | "none";
+	class?: string;
+	containerClass?: string;
+}
+
+/** Block names arrive camelCase from the schema; BEM classes are kebab-case. */
+const kebab = (value: string) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+const {
+	name,
+	variant,
+	id,
+	labelledby,
+	cms,
+	container = "default",
+	class: className,
+	containerClass,
+} = Astro.props;
+
+const body = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const hasBody = body.trim() !== "";
+---
+
+{
+	hasBody && (
+		<section
+			class:list={[
+				"sq-section",
+				hasText(name) && `sq-${kebab(name!)}`,
+				hasText(variant) && `sq-section--${variant}`,
+				className,
+			]}
+			id={id}
+			aria-labelledby={labelledby}
+			data-cms={cms}
+		>
+			{container === "none" ? (
+				<Fragment set:html={body} />
+			) : (
+				<div
+					class:list={[
+						"sq-container",
+						container === "narrow" && "sq-container--narrow",
+						containerClass,
+					]}
+					set:html={body}
+				/>
+			)}
+		</section>
+	)
+}

package/src/components/SectionHeader.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * `SectionHeading` wrapped in `<header class="sq-section__head">`.
+ * Emits nothing — not even the wrapper — when no field carries content.
+ */
+import SectionHeading from "./SectionHeading.astro";
+import { hasAny } from "../lib/content";
+
+interface Props {
+	label?: string;
+	title?: string;
+	titleAccent?: string;
+	lede?: string;
+	note?: string;
+	cms?: string;
+	as?: "h1" | "h2" | "h3";
+	titleId?: string;
+	titleClass?: string;
+	ledeClass?: string;
+	/** `sq-center` on the wrapper. */
+	align?: "center" | "start";
+	class?: string;
+}
+
+const {
+	label,
+	title,
+	titleAccent,
+	lede,
+	note,
+	cms,
+	as,
+	titleId,
+	titleClass,
+	ledeClass,
+	align = "center",
+	class: className,
+} = Astro.props;
+---
+
+{
+	hasAny(label, title, titleAccent, lede, note) && (
+		<header class:list={["sq-section__head", align === "center" && "sq-center", className]}>
+			<SectionHeading
+				label={label}
+				title={title}
+				titleAccent={titleAccent}
+				lede={lede}
+				note={note}
+				cms={cms}
+				as={as}
+				titleId={titleId}
+				titleClass={titleClass}
+				ledeClass={ledeClass}
+			/>
+		</header>
+	)
+}

package/src/components/SectionHeading.astro

@@ -0,0 +1,76 @@
+---
+/**
+ * Label / title / lede / note — the four fields every block header repeats,
+ * without the `<header>` wrapper. Blocks that need the wrapper use
+ * `SectionHeader`; blocks that place these fields straight into the container
+ * (`Generic`, `IntroCta`, `TeamTeaser`) use this one.
+ *
+ * Each field renders only when it carries content, and the whole group
+ * disappears when none of them do.
+ */
+import { cmsKey, hasAny, hasText } from "../lib/content";
+
+interface Props {
+	label?: string;
+	title?: string;
+	titleAccent?: string;
+	lede?: string;
+	note?: string;
+	/** `data-cms` base key; fields resolve to `{cms}.sectionTitle` etc. */
+	cms?: string;
+	/** Heading tag — `h1` on banners, `h2` everywhere else. */
+	as?: "h1" | "h2" | "h3";
+	titleId?: string;
+	titleClass?: string;
+	ledeClass?: string;
+}
+
+const {
+	label,
+	title,
+	titleAccent,
+	lede,
+	note,
+	cms,
+	as: Heading = "h2",
+	titleId,
+	titleClass,
+	ledeClass,
+} = Astro.props;
+---
+
+{
+	hasAny(label, title, titleAccent, lede, note) && (
+		<>
+			{hasText(label) && (
+				<p class="sq-section__label" data-cms={cmsKey(cms, "sectionLabel")}>
+					{label}
+				</p>
+			)}
+			{(hasText(title) || hasText(titleAccent)) && (
+				<Heading
+					id={titleId}
+					class:list={["sq-section__title", titleClass]}
+					data-cms={cmsKey(cms, "sectionTitle")}
+				>
+					{title}
+					{hasText(titleAccent) && (
+						<span class="sq-accent" data-cms={cmsKey(cms, "sectionTitleAccent")}>
+							{titleAccent}
+						</span>
+					)}
+				</Heading>
+			)}
+			{hasText(lede) && (
+				<p class:list={["sq-section__lede", ledeClass]} data-cms={cmsKey(cms, "sectionSubtitle")}>
+					{lede}
+				</p>
+			)}
+			{hasText(note) && (
+				<p class="sq-section__note" data-cms={cmsKey(cms, "sectionNote")}>
+					{note}
+				</p>
+			)}
+		</>
+	)
+}

package/src/components/Seo.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * `<head>` metadata.
+ *
+ * Covers what the five sites were each solving on their own: the canonical
+ * link and JSON-LD that www-juliaschaffer-at kept in `integrations/seo/`, and
+ * the keywords/author/robots trio that www-utehofer-at and www-bettinageidl-at
+ * inlined in their layouts. Every tag is conditional — a field the client did
+ * not fill emits no tag at all.
+ */
+import { hasText } from "../lib/content";
+
+interface Props {
+	seo?: Record<string, any>;
+}
+
+const { seo = {} } = Astro.props;
+
+const base = Astro.site ?? Astro.url;
+const absolute = (value?: string) => (hasText(value) ? new URL(value!, base).href : undefined);
+
+const image = absolute(seo.ogImage);
+const canonical = hasText(seo.canonical)
+	? absolute(seo.canonical)
+	: new URL(Astro.url.pathname, base).href;
+const ogTitle = seo.ogTitle || seo.title;
+const ogDescription = seo.ogDescription || seo.description;
+const schema = seo.schema && typeof seo.schema === "object" ? seo.schema : undefined;
+---
+
+{hasText(seo.title) && <title>{seo.title}</title>}
+{hasText(seo.description) && <meta name="description" content={seo.description} />}
+{hasText(seo.keywords) && <meta name="keywords" content={seo.keywords} />}
+{hasText(seo.author) && <meta name="author" content={seo.author} />}
+{hasText(seo.robots) && <meta name="robots" content={seo.robots} />}
+<meta name="theme-color" content={seo.themeColor || "#131313"} />
+<link rel="canonical" href={canonical} />
+
+<meta property="og:type" content={seo.ogType || "website"} />
+<meta property="og:site_name" content={seo.siteName || seo.title || ""} />
+<meta property="og:locale" content={seo.ogLocale || "de_AT"} />
+<meta property="og:url" content={canonical} />
+<meta property="og:title" content={ogTitle || ""} />
+<meta property="og:description" content={ogDescription || ""} />
+{image && <meta property="og:image" content={image} />}
+{hasText(seo.ogImageAlt) && <meta property="og:image:alt" content={seo.ogImageAlt} />}
+
+<meta name="twitter:card" content={seo.twitterCard || "summary_large_image"} />
+<meta name="twitter:title" content={ogTitle || ""} />
+<meta name="twitter:description" content={ogDescription || ""} />
+{image && <meta name="twitter:image" content={image} />}
+{hasText(seo.twitterSite) && <meta name="twitter:site" content={seo.twitterSite} />}
+{hasText(seo.twitterCreator) && <meta name="twitter:creator" content={seo.twitterCreator} />}
+
+{schema && <script type="application/ld+json" is:inline set:html={JSON.stringify(schema)} />}