@sumaq/site-kit 0.2.0

package/src/blocks/Quote.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * A single pull quote band. Present in every therapist site — the `quote`
+ * field of `Psychotherapy.astro` (www-utehofer-at), the two blockquotes of
+ * `Method.astro` / `Process.astro` (www-bettinageidl-at), the `quote` section
+ * of `AboutSection.astro` (www-juliaschaffer-at).
+ *
+ * The quotation marks belong to the design, not to the content: style them
+ * with `.sq-quote__text::before` instead of typing them into the CMS.
+ */
+import Section from "../components/Section.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasImage, hasText } from "../lib/content";
+
+const {
+	text,
+	author,
+	authorRole,
+	image,
+	section = "quote",
+	variant = "muted",
+	id,
+} = Astro.props;
+
+const cms = section;
+---
+
+{
+	hasText(text) && (
+		<Section name="quote" variant={variant} id={id} container="narrow" cms={cms}>
+			{hasImage(image) && (
+				<div class="sq-quote__media" aria-hidden="true">
+					<Media src={image} alt="" cms={cmsKey(cms, "image", "src")} />
+				</div>
+			)}
+			<blockquote class="sq-quote__body">
+				<p class="sq-quote__text" data-cms={cmsKey(cms, "text")}>
+					{text}
+				</p>
+				{hasText(author) && (
+					<footer class="sq-quote__author">
+						<cite data-cms={cmsKey(cms, "author")}>{author}</cite>
+						{hasText(authorRole) && (
+							<span class="sq-quote__author-role" data-cms={cmsKey(cms, "authorRole")}>
+								{authorRole}
+							</span>
+						)}
+					</footer>
+				)}
+			</blockquote>
+		</Section>
+	)
+}

package/src/blocks/Services.astro

@@ -0,0 +1,46 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	section = "services",
+	variant = "muted",
+	id = "services",
+} = Astro.props;
+
+const cms = section;
+const cards = list<any>(items).filter((item) => hasText(item.title) || hasText(item.body));
+---
+
+<Section name="services" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		cards.length > 0 && (
+			<div class="sq-services__grid">
+				{cards.map((item: any, i: number) => (
+					<article class="sq-services__card">
+						{hasText(item.icon) && (
+							<div class={`sq-services__icon sq-services__icon--${item.icon}`} aria-hidden="true">
+								✦
+							</div>
+						)}
+						{hasText(item.title) && <h3 data-cms={cmsKey(cms, "items", i, "title")}>{item.title}</h3>}
+						{hasText(item.body) && <p data-cms={cmsKey(cms, "items", i, "body")}>{item.body}</p>}
+					</article>
+				))}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Skills.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * Labelled groups of tags. Extracted from `Skills.astro` (www-elingan-dev);
+ * the same shape covers the `focusAreas` / `methods` / `activityAreas` tag
+ * groups that www-therapieraum-graz-at inlines in its profile pages.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	groups = [],
+	section = "skills",
+	variant = "muted",
+	id = "skills",
+} = Astro.props;
+
+const cms = section;
+const blocks = list<any>(groups)
+	.map((group) => ({
+		...group,
+		entries: list<any>(group.items)
+			.map((item) => (typeof item === "string" ? item : item.name))
+			.filter(hasText),
+	}))
+	.filter((group) => group.entries.length > 0 || hasText(group.label));
+---
+
+<Section name="skills" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		blocks.length > 0 && (
+			<div class="sq-skills__body">
+				{blocks.map((group: any, i: number) => (
+					<article class="sq-skills__group">
+						{hasText(group.label) && (
+							<h3 class="sq-skills__label" data-cms={cmsKey(cms, "groups", i, "label")}>
+								{group.label}
+							</h3>
+						)}
+						{group.entries.length > 0 && (
+							<ul class="sq-skills__tags" role="list">
+								{group.entries.map((entry: string, ei: number) => (
+									<li class="sq-tag" data-cms={cmsKey(cms, "groups", i, "items", ei, "name")}>
+										{entry}
+									</li>
+								))}
+							</ul>
+						)}
+					</article>
+				))}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Stats.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * A row of figures — the `stats` list that `Hero` renders inline and the
+ * `meta` list of `Hero.astro` in www-elingan-dev, as a standalone band so a
+ * page can place it anywhere.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	section = "stats",
+	variant = "muted",
+	id,
+} = Astro.props;
+
+const cms = section;
+const figures = list<any>(items).filter((item) => hasText(item.value) || hasText(item.label));
+---
+
+<Section name="stats" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		figures.length > 0 && (
+			<dl class="sq-stats__body">
+				{figures.map((item: any, i: number) => (
+					<div class="sq-stats__item">
+						{hasText(item.value) && (
+							<dt class="sq-stats__value" data-cms={cmsKey(cms, "items", i, "value")}>
+								{item.value}
+							</dt>
+						)}
+						{hasText(item.label) && (
+							<dd class="sq-stats__label" data-cms={cmsKey(cms, "items", i, "label")}>
+								{item.label}
+							</dd>
+						)}
+					</div>
+				))}
+			</dl>
+		)
+	}
+</Section>

package/src/blocks/Steps.astro

@@ -0,0 +1,76 @@
+---
+/**
+ * Numbered process. Extracted from `Process.astro` + `ItemStep.astro`
+ * (www-utehofer-at) and `Process.astro` (www-bettinageidl-at).
+ *
+ * The number is markup, not content: it comes from the item's position, so
+ * reordering steps in the CMS renumbers them.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasAny, hasImage, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	note,
+	section = "steps",
+	variant = "muted",
+	id = "steps",
+} = Astro.props;
+
+const cms = section;
+const steps = list<any>(items).filter((item) => hasText(item.title) || hasText(item.body));
+---
+
+<Section name="steps" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		steps.length > 0 && (
+			<ol class="sq-steps__body">
+				{steps.map((item: any, i: number) => (
+					<li class="sq-steps__item">
+						<span class="sq-steps__num" aria-hidden="true">
+							{String(i + 1).padStart(2, "0")}
+						</span>
+						{hasImage(item.icon) && (
+							<span class="sq-steps__icon" aria-hidden="true">
+								<Media src={item.icon} alt="" cms={cmsKey(cms, "items", i, "icon")} />
+							</span>
+						)}
+						{hasText(item.title) && (
+							<h3 class="sq-steps__title" data-cms={cmsKey(cms, "items", i, "title")}>
+								{item.title}
+							</h3>
+						)}
+						{hasText(item.body) && (
+							<p class="sq-steps__text" data-cms={cmsKey(cms, "items", i, "body")}>
+								{item.body}
+							</p>
+						)}
+					</li>
+				))}
+			</ol>
+		)
+	}
+	{
+		hasAny(note?.title, note?.body) && (
+			<div class="sq-steps__note">
+				{hasText(note.title) && (
+					<h3 data-cms={cmsKey(cms, "note", "title")}>{note.title}</h3>
+				)}
+				{hasText(note.body) && <p data-cms={cmsKey(cms, "note", "body")}>{note.body}</p>}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/TeamDirectory.astro

@@ -0,0 +1,164 @@
+---
+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,
+	searchPlaceholder,
+	searchLabel = "Team-Mitglieder durchsuchen",
+	filtersLabel = "Fachgebiete filtern",
+	/** `{count}` is replaced at runtime by `scripts/enhancements.js`. */
+	counterAllTemplate = "Zeigt alle {count} Fachpersonen",
+	counterResultsTemplate = "Suchergebnisse: {count} Treffer",
+	filters = [],
+	emptyTitle,
+	emptyText,
+	members = [],
+	basePath = "/team",
+	section = "teamDirectory",
+	variant = "light",
+	id,
+} = Astro.props;
+
+const cms = section;
+const people = list<any>(members).filter((member) => hasText(member.name));
+const chips = list<any>(filters).filter((filter) => hasText(filter.label) && hasText(filter.value));
+const showSearch = hasText(searchPlaceholder) && people.length > 0;
+const [counterBefore, counterAfter = ""] = String(counterAllTemplate).split("{count}");
+---
+
+<Section name="teamDirectory" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+
+	{
+		(showSearch || chips.length > 0) && (
+			<div class="sq-team__search">
+				{showSearch && (
+					<div class="sq-team__search-wrap">
+						<span class="sq-team__search-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"
+							>
+								<circle cx="11" cy="11" r="8" />
+								<line x1="21" y1="21" x2="16.65" y2="16.65" />
+							</svg>
+						</span>
+						<input
+							type="search"
+							id="team-search"
+							class="sq-team__search-input"
+							placeholder={searchPlaceholder}
+							aria-label={searchLabel}
+							data-cms={cmsKey(cms, "searchPlaceholder")}
+						/>
+					</div>
+				)}
+
+				{chips.length > 0 && (
+					<div class="sq-team__filters" role="group" aria-label={filtersLabel}>
+						{chips.map((filter: any, i: number) => (
+							<button
+								type="button"
+								class:list={["sq-team__filter", i === 0 && "is-active"]}
+								data-filter={filter.value}
+								aria-pressed={i === 0 ? "true" : "false"}
+								data-cms={cmsKey(cms, "filters", i, "label")}
+							>
+								{filter.label}
+							</button>
+						))}
+					</div>
+				)}
+
+				{people.length > 0 && (
+					<p
+						class="sq-team__counter"
+						id="search-counter"
+						data-counter-all={counterAllTemplate}
+						data-counter-results={counterResultsTemplate}
+					>
+						{counterBefore}
+						<span id="member-count">{people.length}</span>
+						{counterAfter}
+					</p>
+				)}
+			</div>
+		)
+	}
+
+	{
+		people.length > 0 && (
+			<div class="sq-team__grid" id="team-grid">
+				{people.map((member: any, i: number) => (
+					<a
+						class="sq-team__card"
+						href={member.href || `${basePath}/${member.slug}`}
+						data-search={member.searchKeywords}
+						data-categories={member.categories}
+					>
+						<div class="sq-team__photo">
+							<Media
+								src={member.photo}
+								alt={member.photo?.alt || member.name}
+								width={640}
+								height={640}
+								transition:name={`profile-photo-${member.slug}`}
+								cms={cmsKey(cms, "members", i, "photo", "src")}
+							/>
+						</div>
+						<div class="sq-team__body">
+							{hasText(member.titleSuffix) && (
+								<span class="sq-team__role" data-cms={cmsKey(cms, "members", i, "titleSuffix")}>
+									{member.titleSuffix}
+								</span>
+							)}
+							<h3 class="sq-team__name" data-cms={cmsKey(cms, "members", i, "name")}>
+								{member.name}
+							</h3>
+							{hasText(member.description || member.role) && (
+								<p
+									class="sq-team__desc"
+									data-cms={cmsKey(
+										cms,
+										"members",
+										i,
+										hasText(member.description) ? "description" : "role",
+									)}
+								>
+									{member.description || member.role}
+								</p>
+							)}
+						</div>
+					</a>
+				))}
+			</div>
+		)
+	}
+
+	{
+		people.length > 0 && hasText(emptyTitle || emptyText) && (
+			<div class="sq-team__empty" id="no-results" hidden>
+				{hasText(emptyTitle) && <h3 data-cms={cmsKey(cms, "emptyTitle")}>{emptyTitle}</h3>}
+				{hasText(emptyText) && <p data-cms={cmsKey(cms, "emptyText")}>{emptyText}</p>}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/TeamTeaser.astro

@@ -0,0 +1,84 @@
+---
+import Section from "../components/Section.astro";
+import SectionHeading from "../components/SectionHeading.astro";
+import Media from "../components/Media.astro";
+import { cmsKey, hasAny, hasImage, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	image,
+	badgeNum,
+	badgeLabel,
+	ctas = [],
+	section = "teamTeaser",
+	variant = "light",
+	id = "team",
+} = Astro.props;
+
+const cms = section;
+const hasTitle = hasText(sectionTitle) || hasText(sectionTitleAccent);
+const hasBadge = hasAny(badgeNum, badgeLabel);
+/** The teaser shows a single CTA, straight in the copy column — no actions row. */
+const cta = list<any>(ctas).find((item) => hasText(item.label) && hasText(item.href));
+---
+
+<Section
+	name="teamTeaser"
+	variant={variant}
+	id={id}
+	labelledby={hasTitle ? "team-title" : undefined}
+	containerClass="sq-split"
+	cms={cms}
+>
+	<div class="sq-split__copy">
+		<SectionHeading
+			label={sectionLabel}
+			title={sectionTitle}
+			titleAccent={sectionTitleAccent}
+			lede={sectionSubtitle}
+			titleId="team-title"
+			cms={cms}
+		/>
+		{
+			cta && (
+				<a
+					class="sq-btn sq-btn--primary"
+					href={cta.href}
+					target={cta.external ? "_blank" : undefined}
+					rel={cta.external ? "noopener" : undefined}
+					data-cms={cmsKey(cms, "ctas", 0, "label")}
+				>
+					{cta.label}
+				</a>
+			)
+		}
+	</div>
+	{
+		(hasImage(image) || hasBadge) && (
+			<div class="sq-split__visual">
+				{hasImage(image) && (
+					<figure class="sq-team-teaser__frame">
+						<Media src={image} alt={image?.alt} cms={cmsKey(cms, "image", "src")} />
+					</figure>
+				)}
+				{hasBadge && (
+					<div class="sq-team-teaser__badge" aria-hidden="true">
+						{hasText(badgeNum) && (
+							<span class="sq-team-teaser__badge-num" data-cms={cmsKey(cms, "badgeNum")}>
+								{badgeNum}
+							</span>
+						)}
+						{hasText(badgeLabel) && (
+							<span class="sq-team-teaser__badge-label" data-cms={cmsKey(cms, "badgeLabel")}>
+								{badgeLabel}
+							</span>
+						)}
+					</div>
+				)}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Testimonials.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * Several quotes as cards.
+ *
+ * Not extracted from an existing site — none of the five had one — but a
+ * standard slot every service site eventually needs, so it ships as part of
+ * the catalogue instead of being improvised per client. Same field names as
+ * `Quote`, in a list.
+ */
+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 = "testimonials",
+	variant = "muted",
+	id = "testimonials",
+} = Astro.props;
+
+const cms = section;
+const entries = list<any>(items).filter((item) => hasText(item.text));
+---
+
+<Section name="testimonials" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		entries.length > 0 && (
+			<div class="sq-testimonials__body">
+				{entries.map((item: any, i: number) => (
+					<figure class="sq-testimonials__card">
+						{hasImage(item.image) && (
+							<div class="sq-testimonials__photo">
+								<Media
+									src={item.image}
+									alt={item.image?.alt || item.author || ""}
+									width={128}
+									height={128}
+									cms={cmsKey(cms, "items", i, "image", "src")}
+								/>
+							</div>
+						)}
+						<blockquote class="sq-testimonials__text" data-cms={cmsKey(cms, "items", i, "text")}>
+							{item.text}
+						</blockquote>
+						{hasText(item.author) && (
+							<figcaption class="sq-testimonials__author">
+								<cite data-cms={cmsKey(cms, "items", i, "author")}>{item.author}</cite>
+								{hasText(item.authorRole) && (
+									<span
+										class="sq-testimonials__author-role"
+										data-cms={cmsKey(cms, "items", i, "authorRole")}
+									>
+										{item.authorRole}
+									</span>
+								)}
+							</figcaption>
+						)}
+					</figure>
+				))}
+			</div>
+		)
+	}
+</Section>

package/src/blocks/Timeline.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * Chronological list — training, career, certificates.
+ *
+ * Extracted from the `timeline` list in `AboutSection.astro`
+ * (www-juliaschaffer-at), the `education` lists of www-utehofer-at and
+ * www-bettinageidl-at, and the `sq-profile__timeline` markup that
+ * www-therapieraum-graz-at inlines in `team/[slug].astro`.
+ */
+import Section from "../components/Section.astro";
+import SectionHeader from "../components/SectionHeader.astro";
+import { cmsKey, hasText, list } from "../lib/content";
+
+const {
+	sectionLabel,
+	sectionTitle,
+	sectionTitleAccent,
+	sectionSubtitle,
+	items = [],
+	section = "timeline",
+	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="timeline" variant={variant} id={id} cms={cms}>
+	<SectionHeader
+		label={sectionLabel}
+		title={sectionTitle}
+		titleAccent={sectionTitleAccent}
+		lede={sectionSubtitle}
+		cms={cms}
+	/>
+	{
+		entries.length > 0 && (
+			<ol class="sq-timeline__body">
+				{entries.map((item: any, i: number) => (
+					<li class="sq-timeline__item">
+						<span class="sq-timeline__dot" aria-hidden="true" />
+						{hasText(item.period) && (
+							<p class="sq-timeline__period" data-cms={cmsKey(cms, "items", i, "period")}>
+								{item.period}
+							</p>
+						)}
+						{hasText(item.title) && (
+							<h3 class="sq-timeline__title" data-cms={cmsKey(cms, "items", i, "title")}>
+								{item.title}
+							</h3>
+						)}
+						{hasText(item.text) && (
+							<p class="sq-timeline__text" data-cms={cmsKey(cms, "items", i, "text")}>
+								{item.text}
+							</p>
+						)}
+					</li>
+				))}
+			</ol>
+		)
+	}
+</Section>