@sumaq/site-kit 0.2.0

package/src/blocks/LocationsOverview.astro

@@ -0,0 +1,161 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasAny, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	locations = [],
+	/**
+	 * Label of the "see the rooms" link. The German default is the pre-0.2
+	 * behaviour kept so the live site does not lose the link; move it to
+	 * content and drop the fallback.
+	 */
+	roomsCtaLabel = "Räume ansehen",
+	section = "locationsOverview",
+	variant = "light",
+	id = "locations",
+} = Astro.props;
+
+const cms = section;
+const cards = list<any>(locations).filter((location) => hasAny(location.name, location.images));
+const hasTitle = hasText(sectionTitle) || hasText(sectionTitleAccent);
+---
+
+<Section
+	name="locationsOverview"
+	variant={variant}
+	id={id}
+	labelledby={hasTitle ? "locations-title" : undefined}
+	cms={cms}
+>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		titleId="locations-title"
+		cms={cms}
+	/>
+	{
+		cards.length > 0 && (
+			<div class="sq-location__stack">
+				{cards.map((location: any, index: number) => {
+					const images = list<any>(location.images).filter((image) => hasText(image.src));
+					const features = list<any>(location.features).filter((feature) => hasText(feature.text));
+					const hasPrice = hasAny(location.priceLabel, location.priceValue);
+					const hasCta = hasText(location.href) && hasText(roomsCtaLabel);
+					return (
+						<article
+							class:list={["sq-location__card", location.reverse && "sq-location__card--reverse"]}
+							id={location.id}
+						>
+							{images.length > 0 && (
+								<div class="sq-location__gallery">
+									<div class="sq-location__main">
+										<Media
+											id={`${location.id}-main-img`}
+											src={images[0].src}
+											alt={images[0].alt}
+											cms={cmsKey(cms, "locations", index, "images", 0, "src")}
+										/>
+									</div>
+									{images.length > 1 && (
+										<div class="sq-location__thumbs" role="list">
+											{images.map((image: any, imageIndex: number) => (
+												<button
+													type="button"
+													class:list={["sq-location__thumb", imageIndex === 0 && "is-active"]}
+													data-target={`${location.id}-main-img`}
+													data-src={image.src}
+													data-alt={image.alt}
+													aria-label={`${image.alt || location.name} ${imageIndex + 1}`}
+												>
+													<Media
+														src={image.src}
+														alt=""
+														cms={cmsKey(cms, "locations", index, "images", imageIndex, "src")}
+													/>
+												</button>
+											))}
+										</div>
+									)}
+									<span class="sq-location__index" aria-hidden="true">
+										{String(index + 1).padStart(2, "0")}
+									</span>
+								</div>
+							)}
+							<div class="sq-location__body">
+								{hasText(location.name) && (
+									<h3
+										class="sq-location__name"
+										data-location-name={location.id}
+										data-cms={cmsKey(cms, "locations", index, "name")}
+									>
+										{location.name}
+									</h3>
+								)}
+								{hasText(location.address) && (
+									<p
+										class="sq-location__address"
+										data-cms={cmsKey(cms, "locations", index, "address")}
+									>
+										{location.address}
+									</p>
+								)}
+								{hasText(location.description) && (
+									<p
+										class="sq-location__desc"
+										data-cms={cmsKey(cms, "locations", index, "description")}
+									>
+										{location.description}
+									</p>
+								)}
+								{features.length > 0 && (
+									<ul class="sq-feature-list">
+										{features.map((feature: any, fi: number) => (
+											<li data-cms={cmsKey(cms, "locations", index, "features", fi, "text")}>
+												{feature.text}
+											</li>
+										))}
+									</ul>
+								)}
+								{(hasPrice || hasCta) && (
+									<div class="sq-location__foot">
+										{hasPrice && (
+											<p
+												class="sq-pricing__tag"
+												data-cms={cmsKey(cms, "locations", index, "priceLabel")}
+											>
+												{location.priceLabel}{" "}
+												{hasText(location.priceValue) && (
+													<strong data-cms={cmsKey(cms, "locations", index, "priceValue")}>
+														{location.priceValue}
+													</strong>
+												)}
+												{hasText(location.priceSuffix) ? ` ${location.priceSuffix}` : ""}
+											</p>
+										)}
+										{hasCta && (
+											<a
+												class="sq-btn sq-btn--ghost sq-btn--sm"
+												href={location.href}
+												data-rooms-cta={location.id}
+											>
+												{roomsCtaLabel}
+											</a>
+										)}
+									</div>
+								)}
+							</div>
+						</article>
+					);
+				})}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/NotFound.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * 404 body. Extracted from `pages/404.astro` (www-juliaschaffer-at) — the
+ * only site of the five that ships one, though every site needs it.
+ */
+import Section from "../components/Section.astro";
+import Actions from "../components/Actions.astro";
+import { cmsKey, hasText } from "../lib/content";
+
+const {
+	code = "404",
+	title,
+	body,
+	ctas = [],
+	section = "notFound",
+	variant = "light",
+} = Astro.props;
+
+const cms = section;
+---
+
+<Section name="not-found" variant={variant} container="narrow" containerClass="sq-center" cms={cms}>
+	{hasText(code) && <p class="sq-not-found__code" data-cms={cmsKey(cms, "code")}>{code}</p>}
+	{
+		hasText(title) && (
+			<h1 class="sq-section__title" data-cms={cmsKey(cms, "title")}>
+				{title}
+			</h1>
+		)
+	}
+	{hasText(body) && <p class="sq-section__lede" data-cms={cmsKey(cms, "body")}>{body}</p>}
+	<Actions ctas={ctas} cms={cmsKey(cms, "ctas")} />
+</Section>

package/src/blocks/Notice.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Callout / advisory box. Extracted from the `alert alert-warning` in
+ * `Contact.astro` (www-utehofer-at) and the highlighted `info.box` in
+ * `Services.astro` (www-bettinageidl-at).
+ *
+ * `tone` is a declared variant, not a colour: the site decides what
+ * `sq-notice--warning` looks like.
+ */
+import Prose from "../components/Prose.astro";
+import { cmsKey, hasAny, hasText } from "../lib/content";
+
+const {
+	title,
+	body,
+	tone = "info",
+	/** Wrap in its own `<section>`; off when placed inside another block. */
+	standalone = false,
+	section = "notice",
+	id,
+} = Astro.props;
+
+const cms = section;
+const role = tone === "warning" || tone === "danger" ? "alert" : "note";
+---
+
+{
+	hasAny(title, body) && (
+		<aside
+			class:list={[
+				"sq-notice",
+				`sq-notice--${tone}`,
+				standalone && "sq-section",
+			]}
+			id={id}
+			role={role}
+			data-cms={cms}
+		>
+			<div class:list={[standalone && "sq-container sq-container--narrow"]}>
+				{hasText(title) && (
+					<p class="sq-notice__title" data-cms={cmsKey(cms, "title")}>
+						{title}
+					</p>
+				)}
+				<Prose body={body} class="sq-notice__body" cms={cmsKey(cms, "body")} />
+			</div>
+		</aside>
+	)
+}

package/src/blocks/PageBanner.astro

@@ -0,0 +1,57 @@
+---
+import { cmsKey, hasAny, hasText } from "../lib/content";
+
+const {
+	eyebrow,
+	title,
+	titleAccent,
+	sectionSubtitle,
+	bannerLead,
+	emergency = false,
+	transitionName,
+	section,
+} = Astro.props;
+const lead = hasText(bannerLead) ? bannerLead : sectionSubtitle;
+const cms = section ?? "pageBanner";
+const hasTitle = hasText(title) || hasText(titleAccent);
+---
+
+{
+	hasAny(eyebrow, title, titleAccent, lead) && (
+		<header class="sq-banner" data-cms={cms}>
+			<div class="sq-banner__overlay" aria-hidden="true" />
+			<div class="sq-container sq-banner__content">
+				{hasText(eyebrow) && (
+					<p
+						class:list={["sq-eyebrow", emergency && "sq-eyebrow--emergency"]}
+						data-cms={cmsKey(cms, "eyebrow")}
+					>
+						{eyebrow}
+					</p>
+				)}
+				{hasTitle && (
+					<h1
+						class:list={["sq-banner__title", emergency && "sq-emergency__headline"]}
+						transition:name={transitionName}
+						data-cms={cmsKey(cms, "title")}
+					>
+						{title}
+						{hasText(titleAccent) && (
+							<span class="sq-accent" data-cms={cmsKey(cms, "titleAccent")}>
+								{titleAccent}
+							</span>
+						)}
+					</h1>
+				)}
+				{hasText(lead) && (
+					<p
+						class="sq-banner__lede"
+						data-cms={cmsKey(cms, hasText(bannerLead) ? "bannerLead" : "sectionSubtitle")}
+					>
+						{lead}
+					</p>
+				)}
+			</div>
+		</header>
+	)
+}

package/src/blocks/Pricing.astro

@@ -0,0 +1,97 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	plans = [],
+	section = "pricing",
+	variant = "muted",
+	id = "pricing",
+} = Astro.props;
+
+const cms = section;
+const cards = list<any>(plans).filter((plan) => hasText(plan.name) || list(plan.items).length > 0);
+const hasTitle = hasText(sectionTitle) || hasText(sectionTitleAccent);
+---
+
+<Section
+	name="pricing"
+	variant={variant}
+	id={id}
+	labelledby={hasTitle ? "pricing-title" : undefined}
+	cms={cms}
+>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		titleId="pricing-title"
+		cms={cms}
+	/>
+	{
+		cards.length > 0 && (
+			<div class="sq-pricing__grid">
+				{cards.map((plan: any, i: number) => {
+					const rows = list<any>(plan.items).filter(
+						(item) => hasText(item.label) || hasText(item.price),
+					);
+					return (
+						<article class:list={["sq-pricing__card", plan.featured && "sq-pricing__card--featured"]}>
+							{hasText(plan.badge) && (
+								<p class="sq-pricing__badge" data-cms={cmsKey(cms, "plans", i, "badge")}>
+									{plan.badge}
+								</p>
+							)}
+							{hasText(plan.name) && (
+								<h3 data-cms={cmsKey(cms, "plans", i, "name")}>{plan.name}</h3>
+							)}
+							{hasText(plan.description) && (
+								<p class="sq-pricing__desc" data-cms={cmsKey(cms, "plans", i, "description")}>
+									{plan.description}
+								</p>
+							)}
+							{rows.length > 0 && (
+								<ul class="sq-pricing__list">
+									{rows.map((item: any, ii: number) => (
+										<li>
+											{hasText(item.label) && (
+												<span data-cms={cmsKey(cms, "plans", i, "items", ii, "label")}>
+													{item.label}
+												</span>
+											)}
+											{hasText(item.price) && (
+												<strong data-cms={cmsKey(cms, "plans", i, "items", ii, "price")}>
+													{item.price}
+												</strong>
+											)}
+										</li>
+									))}
+								</ul>
+							)}
+							{hasText(plan.note) && (
+								<p class="sq-section__note" data-cms={cmsKey(cms, "plans", i, "note")}>
+									{plan.note}
+								</p>
+							)}
+							{hasText(plan.ctaHref) && hasText(plan.ctaLabel) && (
+								<a
+									class="sq-btn sq-btn--primary sq-btn--block"
+									href={plan.ctaHref}
+									data-cms={cmsKey(cms, "plans", i, "ctaLabel")}
+								>
+									{plan.ctaLabel}
+								</a>
+							)}
+						</article>
+					);
+				})}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/ProfileDetail.astro

@@ -0,0 +1,202 @@
+---
+/**
+ * Detail page for one collection entry (a team member).
+ *
+ * Lifted out of `pages/team/[slug].astro` in www-therapieraum-graz-at, where
+ * it was 130 lines of markup living in a page. The page now only resolves the
+ * entry and hands it over, which is what the site-kit spec asks of pages.
+ */
+import Section from "../components/Section.astro";
+import Media from "../components/Media.astro";
+import Prose from "../components/Prose.astro";
+import { telHref } from "../lib/format";
+import { cmsKey, hasAny, hasImage, hasText, list } from "../lib/content";
+
+const {
+	name,
+	role,
+	photo,
+	quote,
+	quoteCite,
+	body,
+	/** `[{ label, value, href?, type? }]` — email, phone, website, free rows. */
+	info = [],
+	/** `[{ title, items: [{ text }], modifier? }]` — rendered as tag clouds. */
+	tagSections = [],
+	/** `[{ title, items: [{ period?, text }] }]` — rendered as timelines. */
+	timelineSections = [],
+	backLabel,
+	backHref,
+	transitionName,
+	section = "profile",
+	variant = "light",
+} = Astro.props;
+
+const cms = section;
+
+const hrefFor = (row: any): string | undefined => {
+	if (hasText(row.href)) return row.href;
+	if (!hasText(row.value)) return undefined;
+	if (row.type === "email") return `mailto:${row.value}`;
+	if (row.type === "phone") return telHref(row.value);
+	return undefined;
+};
+
+const rows = list<any>(info)
+	.filter((row) => hasText(row.value))
+	.map((row) => ({ ...row, resolvedHref: hrefFor(row) }));
+
+const tags = list<any>(tagSections)
+	.map((part) => ({
+		...part,
+		entries: list<any>(part.items)
+			.map((item) => (typeof item === "string" ? item : item.text))
+			.filter(hasText),
+	}))
+	.filter((part) => part.entries.length > 0);
+
+const timelines = list<any>(timelineSections)
+	.map((part) => ({
+		...part,
+		entries: list<any>(part.items).filter((item) => hasText(item.text)),
+	}))
+	.filter((part) => part.entries.length > 0);
+
+const hasSidebar = hasImage(photo) || hasAny(name, role) || rows.length > 0;
+const hasMain = hasAny(quote, body) || tags.length > 0 || timelines.length > 0;
+const showBack = hasText(backHref) && hasText(backLabel);
+---
+
+<Section name="profile" variant={variant} containerClass="sq-profile__grid" cms={cms}>
+	{
+		hasSidebar && (
+			<aside class="sq-profile__sidebar">
+				{hasImage(photo) && (
+					<div class="sq-profile__photo">
+						<Media
+							src={photo}
+							alt={photo?.alt || name}
+							width={640}
+							height={640}
+							transition:name={transitionName}
+							cms={cmsKey(cms, "photo", "src")}
+						/>
+					</div>
+				)}
+				{hasText(name) && (
+					<h2 class="sq-profile__sidebar-name" data-cms={cmsKey(cms, "name")}>
+						{name}
+					</h2>
+				)}
+				{hasText(role) && (
+					<p class="sq-profile__sidebar-title" data-cms={cmsKey(cms, "role")}>
+						{role}
+					</p>
+				)}
+				{rows.length > 0 && (
+					<ul class="sq-profile__info-list">
+						{rows.map((row: any, i: number) => (
+							<li>
+								{hasText(row.label) && (
+									<span class="sq-profile__info-label" data-cms={cmsKey(cms, "info", i, "label")}>
+										{row.label}
+									</span>
+								)}
+								<span class="sq-profile__info-value">
+									{row.resolvedHref ? (
+										<a
+											href={row.resolvedHref}
+											target={row.external ? "_blank" : undefined}
+											rel={row.external ? "noopener" : undefined}
+											data-cms={cmsKey(cms, "info", i, "value")}
+										>
+											{row.linkLabel || row.value}
+										</a>
+									) : (
+										<span data-cms={cmsKey(cms, "info", i, "value")}>{row.value}</span>
+									)}
+								</span>
+							</li>
+						))}
+					</ul>
+				)}
+			</aside>
+		)
+	}
+
+	{
+		(hasMain || showBack) && (
+			<div class="sq-profile__main">
+				{hasText(quote) && (
+					<blockquote class="sq-profile__quote" data-cms={cmsKey(cms, "quote")}>
+						{quote}
+						{hasText(quoteCite) && <cite data-cms={cmsKey(cms, "quoteCite")}>{quoteCite}</cite>}
+					</blockquote>
+				)}
+
+				{tags.map((part: any, i: number) => (
+					<div class="sq-profile__section">
+						{hasText(part.title) && (
+							<h2 class="sq-profile__section-title" data-cms={cmsKey(cms, "tagSections", i, "title")}>
+								{part.title}
+							</h2>
+						)}
+						<div class="sq-profile__tags">
+							{part.entries.map((entry: string, ei: number) => (
+								<span
+									class:list={["sq-tag", part.modifier]}
+									data-cms={cmsKey(cms, "tagSections", i, "items", ei, "text")}
+								>
+									{entry}
+								</span>
+							))}
+						</div>
+					</div>
+				))}
+
+				{hasText(body) && (
+					<div class="sq-profile__section">
+						<Prose body={body} cms={cmsKey(cms, "body")} />
+					</div>
+				)}
+
+				{timelines.map((part: any, i: number) => (
+					<div class="sq-profile__section">
+						{hasText(part.title) && (
+							<h2
+								class="sq-profile__section-title"
+								data-cms={cmsKey(cms, "timelineSections", i, "title")}
+							>
+								{part.title}
+							</h2>
+						)}
+						<div class="sq-profile__timeline">
+							{part.entries.map((item: any, ei: number) => (
+								<div
+									class="sq-profile__timeline-item"
+									data-cms={cmsKey(cms, "timelineSections", i, "items", ei, "text")}
+								>
+									{hasText(item.period) ? (
+										<>
+											<strong>{item.period}:</strong> {item.text}
+										</>
+									) : (
+										item.text
+									)}
+								</div>
+							))}
+						</div>
+					</div>
+				))}
+
+				{showBack && (
+					<div class="sq-profile__return">
+						<a class="sq-btn sq-btn--ghost" href={backHref}>
+							{backLabel}
+						</a>
+					</div>
+				)}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Projects.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * Portfolio grid. Extracted from `Projects.astro` (www-elingan-dev).
+ */
+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 = [],
+	section = "projects",
+	variant = "light",
+	id = "projects",
+} = Astro.props;
+
+const cms = section;
+const projects = list<any>(items).filter((item) => hasText(item.name));
+const isExternal = (url?: string) => hasText(url) && /^https?:\/\//.test(url!);
+---
+
+<Section name="projects" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		projects.length > 0 && (
+			<ul class="sq-projects__body" role="list">
+				{projects.map((project: any, i: number) => {
+					const tags = list<any>(project.tags)
+						.map((tag) => (typeof tag === "string" ? tag : tag.name))
+						.filter(hasText);
+					const linked = hasText(project.url);
+					const Wrapper = linked ? "a" : "div";
+					return (
+						<li class="sq-projects__item">
+							<Wrapper
+								class="sq-projects__link"
+								href={linked ? project.url : undefined}
+								target={isExternal(project.url) ? "_blank" : undefined}
+								rel={isExternal(project.url) ? "noopener" : undefined}
+							>
+								{hasImage(project.image) && (
+									<div class="sq-projects__media">
+										<Media
+											src={project.image}
+											alt={project.image?.alt || ""}
+											width={800}
+											height={500}
+											cms={cmsKey(cms, "items", i, "image", "src")}
+										/>
+									</div>
+								)}
+								<div class="sq-projects__details">
+									<h3 class="sq-projects__name" data-cms={cmsKey(cms, "items", i, "name")}>
+										{project.name}
+									</h3>
+									{hasText(project.description) && (
+										<p
+											class="sq-projects__desc"
+											data-cms={cmsKey(cms, "items", i, "description")}
+										>
+											{project.description}
+										</p>
+									)}
+									{tags.length > 0 && (
+										<ul class="sq-projects__tags" role="list">
+											{tags.map((tag, ti) => (
+												<li class="sq-tag" data-cms={cmsKey(cms, "items", i, "tags", ti, "name")}>
+													{tag}
+												</li>
+											))}
+										</ul>
+									)}
+								</div>
+							</Wrapper>
+						</li>
+					);
+				})}
+			</ul>
+		)
+	}
+</Section>