@tideworthy/tidysites-platform 0.10.15 → 0.11.1

package/src/sections/defaults/hero.astro

@@ -0,0 +1,66 @@
+---
+/** Hero: headline, subhead, buttons, and a photo, a booking card, a form, or a picker of services. */
+import { bool, entries, getBusiness, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "headline and photo");
+const photo = pic(n.image);
+const button = { label: str(n.button_label) || b.ctaLabel, href: str(n.button_url) || b.bookingUrl || "/contact" };
+const button2 = str(n.button2_label) ? { label: str(n.button2_label), href: str(n.button2_url) || "#" } : b.phone ? { label: b.phone, href: b.phoneHref } : null;
+const services = variant === "headline and picker" ? await entries("services", { limit: 8 }) : [];
+const rating = b.rating ? b.rating.toFixed(1) : null;
+const showRating = bool(n.show_rating, true) && rating;
+const over = variant === "photo with headline over";
+---
+<section class={`ts ts-hero ${over ? "ts-ink" : ""}`} style={over && photo.url ? `background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)),url(${photo.url});background-size:cover;background-position:center` : undefined}>
+	<div class={`ts-wrap ${over || variant === "headline and picker" ? "" : "ts-split"}`}>
+		<div>
+			{str(n.pill) && <p class="ts-chip" style="display:inline-flex;margin-bottom:16px">{str(n.pill)}</p>}
+			{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}
+			<h1>{str(n.headline) || b.tagline || b.title}</h1>
+			{str(n.subhead) && <p class="ts-lede">{str(n.subhead)}</p>}
+			<div class="ts-actions">
+				<a class="ts-btn ts-btn-accent ts-btn-lg" href={button.href}>{button.label}</a>
+				{button2 && <a class="ts-btn ts-btn-outline ts-btn-lg" href={button2.href}>{button2.label}</a>}
+			</div>
+			{(showRating || bool(n.show_hours) || bool(n.show_phone)) && (
+				<p class="ts-muted" style="margin-top:18px;font-size:14px">
+					{showRating && <span><span class="ts-stars">★★★★★</span> {rating}{b.reviewCount ? ` from ${b.reviewCount} ${b.ratingSource} reviews` : ""}</span>}
+					{bool(n.show_hours) && b.hours && <span> · {b.hours}</span>}
+					{bool(n.show_phone) && b.phone && <span> · <a href={b.phoneHref}>{b.phone}</a></span>}
+				</p>
+			)}
+		</div>
+		{variant === "headline and photo" && <Photo image={photo.image} url={photo.url} alt={str(n.headline) || b.title} ratio="wide" />}
+		{variant === "headline and booking card" && (
+			<div class="ts-card" style="gap:0">
+				<Photo image={photo.image} url={photo.url} alt={b.title} ratio="wide" class="ts-hero-card-photo" />
+				<dl class="ts-kv" style="margin-top:16px">
+					{b.hours && <><dt>Hours</dt><dd>{b.hours}</dd></>}
+					{b.phone && <><dt>Call or text</dt><dd><a href={b.phoneHref}>{b.phone}</a></dd></>}
+					{b.insuranceLine && <><dt>Insurance</dt><dd>{b.insuranceLine}</dd></>}
+					{b.newPatientsLine && <><dt></dt><dd>{b.newPatientsLine}</dd></>}
+				</dl>
+				<div class="ts-actions" style="margin-top:16px"><a class="ts-btn ts-btn-accent" href={button.href}>{button.label}</a>{b.phone && <a class="ts-btn ts-btn-outline" href={b.phoneHref}>Call us</a>}</div>
+			</div>
+		)}
+		{variant === "headline and form" && (
+			<form class="ts-card ts-form" action="/api/lead" method="post">
+				<label class="ts-full">Name<input name="name" autocomplete="name" required /></label>
+				<label>Phone<input name="phone" type="tel" autocomplete="tel" /></label>
+				<label>Email<input name="email" type="email" autocomplete="email" /></label>
+				<label class="ts-full">How can we help?<textarea name="message"></textarea></label>
+				<input class="ts-hp" type="text" name="website_hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
+				<div class="ts-full"><button class="ts-btn ts-btn-accent" type="submit">{button.label}</button></div>
+			</form>
+		)}
+		{variant === "headline and picker" && services.length > 0 && (
+			<div class="ts-card" style="margin-top:28px">
+				<h3>{str(n.picker_title, "What do you need?")}</h3>
+				<div class="ts-chips" style="margin-top:10px">{services.map((s) => <a class="ts-chip" href={`/services/${s.slug ?? s.id}`}>{str(s.data.title)}</a>)}</div>
+				{str(n.picker_note) && <p class="ts-muted" style="margin-top:10px;font-size:14px">{str(n.picker_note)}</p>}
+			</div>
+		)}
+	</div>
+</section>

package/src/sections/defaults/insurance.astro

@@ -0,0 +1,22 @@
+---
+/** Insurers accepted, as logos, names or one line, with network status and government programs. */
+import { bool, entries, getBusiness, nodeOf, pic, str, mediaUrl } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "logos");
+const items = variant === "one line" ? [] : await entries("insurers", { limit: 60 });
+const inNet = items.filter((i) => !/out/i.test(str(i.data.network))), outNet = items.filter((i) => /out/i.test(str(i.data.network)));
+const groups = bool(n.show_network) && outNet.length ? [{ title: "In network", list: inNet }, { title: "Out of network", list: outNet }] : [{ title: "", list: items }];
+---
+{(items.length > 0 || b.insuranceLine) && (
+<section class="ts" id="insurance"><div class="ts-wrap">
+	<Head n={n} action={str(n.button_label) ? { href: str(n.button_url, "/contact"), label: str(n.button_label) } : null} />
+	{variant === "one line" || !items.length ? <p class="ts-lede" style="margin:0">{b.insuranceLine}</p> : groups.map((g) => (
+		<div>{g.title && <p class="ts-group">{g.title}</p>}
+			{variant === "logos" ? <div class="ts-logos">{g.list.map((i) => { const p = pic(i.data.logo); return <div class="ts-logo" data-tidy-record="insurers" data-tidy-record-id={i.id} data-tidy-record-label="Insurer">{mediaUrl(p) && <img src={mediaUrl(p) ?? ""} alt="" />}<span>{str(i.data.title)}</span></div>; })}</div> : <div class="ts-chips">{g.list.map((i) => <span class="ts-chip" data-tidy-record="insurers" data-tidy-record-id={i.id} data-tidy-record-label="Insurer">{str(i.data.title)}</span>)}</div>}
+		</div>
+	))}
+	{bool(n.show_programs, true) && b.governmentPrograms && <p class="ts-muted" style="margin-top:14px;font-size:14px">{b.governmentPrograms}</p>}
+</div></section>
+)}

package/src/sections/defaults/intro.astro

@@ -0,0 +1,11 @@
+---
+import { nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+const n = nodeOf(Astro.props);
+const photo = pic(n.image);
+const has = Boolean(photo.image || photo.url);
+---
+<section class="ts"><div class={`ts-wrap ${has ? "ts-split" : ""}`}>
+	<div>{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}{str(n.headline) && <h2>{str(n.headline)}</h2>}{str(n.body) && <div class="ts-prose" style="margin-top:14px;white-space:pre-line">{str(n.body)}</div>}{str(n.button_label) && <div class="ts-actions"><a class="ts-btn" href={str(n.button_url, "#")}>{str(n.button_label)}</a></div>}</div>
+	{has && <Photo image={photo.image} url={photo.url} alt={str(n.headline)} />}
+</div></section>

package/src/sections/defaults/location.astro

@@ -0,0 +1,32 @@
+---
+/** Address, hours (per day or grouped), parking and a map, for the main location or a named one. */
+import { addressLine, bool, entries, getBusiness, hoursGrouped, hoursRows, nodeOf, str, todayKey, DAYS } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const locs = await entries("locations", { limit: 20 });
+const want = str(n.location);
+const loc = (want ? locs.find((l) => (l.slug ?? l.id) === want) : locs.find((l) => bool(l.data.is_primary))) ?? locs[0] ?? null;
+const d = loc?.data ?? {};
+const addr = loc ? addressLine({ address: str(d.address), city: str(d.city), region: str(d.region), postal: str(d.postal), hideAddress: b.hideAddress }) : addressLine(b);
+const phone = str(d.phone) || b.phone;
+const grouped = str(n.hours_style, "per day") === "grouped";
+const rows = loc ? hoursRows(d) : [];
+const today = DAYS.find(([k]) => k === todayKey())?.[1];
+const mapUrl = str(d.map_url);
+const q = encodeURIComponent([b.title, addr].filter(Boolean).join(" "));
+---
+<section class="ts ts-band" id="find"><div class="ts-wrap">
+	<Head n={n} />
+	<div class={bool(n.show_map, true) ? "ts-split" : ""} style="align-items:start">
+		{bool(n.show_map, true) && (b.hideAddress ? <div class="ts-map">{b.serviceAreaLine || "We come to you."}</div> : <div class="ts-map"><iframe title="Map" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src={`https://www.google.com/maps?q=${q}&output=embed`}></iframe></div>)}
+		<div class="ts-card">
+			{addr && <><p class="ts-group" style="margin-top:0">{b.isServiceArea ? "Based in" : "Address"}</p><p>{addr}</p>{(mapUrl || !b.hideAddress) && <a href={mapUrl || `https://www.google.com/maps/search/?api=1&query=${q}`} style="font-weight:700;color:var(--ts-primary);font-size:14px">Get directions</a>}</>}
+			{(phone || b.email) && <><p class="ts-group">Reach us</p>{phone && <p><a href={b.phoneHref}>{phone}</a></p>}{b.email && <p><a href={`mailto:${b.email}`}>{b.email}</a></p>}</>}
+			<p class="ts-group">Hours</p>
+			{rows.length ? (grouped ? <table class="ts-table">{hoursGrouped(d).map((g) => <tr><td>{g.days}</td><td>{g.value}</td></tr>)}</table> : <table class="ts-table">{rows.map((r) => <tr class={r.day === today ? "ts-today" : ""}><td>{r.day}</td><td>{r.value}</td></tr>)}</table>) : <p>{b.hours || "By appointment"}</p>}
+			{(str(d.hours_note) || b.hoursNote) && <p class="ts-muted" style="font-size:13px;margin-top:6px">{str(d.hours_note) || b.hoursNote}</p>}
+			{bool(n.show_parking, true) && (str(d.parking_line) || b.parkingLine || str(d.directions_line) || b.directionsLine) && <><p class="ts-group">Getting here</p><p style="font-size:14px">{[str(d.parking_line) || b.parkingLine, str(d.directions_line) || b.directionsLine, str(d.transit_line)].filter(Boolean).join(" ")}</p></>}
+		</div>
+	</div>
+</div></section>

package/src/sections/defaults/locations.astro

@@ -0,0 +1,14 @@
+---
+import { addressLine, bool, entries, getBusiness, hoursGrouped, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const items = await entries("locations", { limit: 20 });
+---
+{items.length > 0 && (
+<section class="ts" id="locations"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>{items.map((l) => { const p = pic(l.data.photo); const d = l.data; return <div class="ts-card" data-tidy-record="locations" data-tidy-record-id={l.id} data-tidy-record-label="Location">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(d.title)} ratio="wide" />}<h3>{str(d.title)}</h3><p>{addressLine({ address: str(d.address), city: str(d.city), region: str(d.region), postal: str(d.postal) })}</p>{str(d.phone) && <p><a href={`tel:${str(d.phone).replace(/[^\d+]/g, "")}`}>{str(d.phone)}</a></p>}{bool(n.show_hours, true) && hoursGrouped(d).length > 0 && <table class="ts-table" style="font-size:13px">{hoursGrouped(d).map((g) => <tr><td>{g.days}</td><td>{g.value}</td></tr>)}</table>}{bool(n.show_booking, true) && (str(d.booking_url) || b.bookingUrl) && <div class="ts-actions" style="margin-top:8px"><a class="ts-btn ts-btn-accent" href={str(d.booking_url) || b.bookingUrl}>{b.bookingLabel}</a></div>}</div>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/offer.astro

@@ -0,0 +1,18 @@
+---
+import { bool, entries, nodeOf, str } from "../lib";
+const n = nodeOf(Astro.props);
+const offers = await entries("offers", { limit: 20 });
+const want = str(n.offer);
+const o = (want ? offers.find((x) => (x.slug ?? x.id) === want) : offers.find((x) => bool(x.data.active, true))) ?? null;
+const ends = o ? str(o.data.ends) : "";
+const live = !o || !ends || new Date(ends).getTime() > Date.now();
+const title = str(n.headline) || (o ? str(o.data.title) : "");
+---
+{title && live && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<div class="ts-offer" {...(o ? { "data-tidy-record": "offers", "data-tidy-record-id": o.id, "data-tidy-record-label": "Offer" } : {})}>
+		<div>{ends && <p class="ts-eyebrow">Until {new Date(ends).toLocaleDateString("en-CA", { month: "long", day: "numeric" })}</p>}<h3 style="font-size:24px">{title}{o && str(o.data.value) ? ` · ${str(o.data.value)}` : ""}</h3>{(str(n.body) || (o && str(o.data.summary))) && <p style="margin-top:6px;color:var(--ts-ink-2)">{str(n.body) || str(o!.data.summary)}</p>}{o && str(o.data.how_to_claim) && <p class="ts-muted" style="font-size:13px;margin-top:6px">{str(o.data.how_to_claim)}</p>}</div>
+		<a class="ts-btn ts-btn-accent ts-btn-lg" href={str(n.button_url) || (o && str(o.data.cta_url)) || "/contact"}>{str(n.button_label) || (o && str(o.data.cta_label)) || "Claim this offer"}</a>
+	</div>
+</div></section>
+)}

package/src/sections/defaults/options.astro

@@ -0,0 +1,12 @@
+---
+import { bool, facts, list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.items).filter((i) => str(i.title));
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>{items.map((o) => <div class="ts-card" style={bool(o.featured) ? "border-color:var(--ts-primary)" : ""}>{str(o.tag) && <p class="ts-eyebrow" style="margin:0">{str(o.tag)}</p>}<h3>{str(o.title)}</h3>{str(o.price) && <p class="ts-price" style="font-size:30px">{str(o.price)}{str(o.price_note) && <small>{str(o.price_note)}</small>}</p>}{str(o.summary) && <p>{str(o.summary)}</p>}{facts(o.facts).length > 0 && <dl class="ts-kv" style="font-size:14px">{facts(o.facts).map(([k, v]) => <><dt>{k}</dt><dd>{v}</dd></>)}</dl>}{str(o.button_label) && <div class="ts-actions" style="margin-top:8px"><a class="ts-btn" href={str(o.button_url, "/contact")}>{str(o.button_label)}</a></div>}</div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/plans.astro

@@ -0,0 +1,16 @@
+---
+import { bool, entries, int, lines, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("plans", { limit: int(n.limit, 6) });
+if (str(n.kind)) items = items.filter((p) => str(p.data.kind) === str(n.kind));
+if (bool(n.featured_first, true)) items = [...items].sort((a, b) => Number(bool(b.data.featured)) - Number(bool(a.data.featured)));
+---
+{items.length > 0 && (
+<section class="ts" id="plans"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>
+		{items.map((p) => <div class="ts-card" data-tidy-record="plans" data-tidy-record-id={p.id} data-tidy-record-label="Plan" style={bool(p.data.featured) ? "border-color:var(--ts-primary)" : ""}>{str(p.data.tag) && <p class="ts-eyebrow" style="margin:0">{str(p.data.tag)}</p>}<h3>{str(p.data.title)}</h3>{str(p.data.price) && <p class="ts-price">{str(p.data.price)}{str(p.data.cadence) && <small>/ {str(p.data.cadence)}</small>}</p>}{str(p.data.summary) && <p>{str(p.data.summary)}</p>}{lines(p.data.includes).length > 0 && <ul class="ts-list">{lines(p.data.includes).map((l) => <li>{l}</li>)}</ul>}{str(p.data.eligibility) && <p class="ts-muted" style="font-size:13px">{str(p.data.eligibility)}</p>}{str(p.data.cta_label) && <div class="ts-actions" style="margin-top:12px"><a class="ts-btn ts-btn-accent" href={str(p.data.cta_url, "/contact")}>{str(p.data.cta_label)}</a></div>}{str(p.data.note) && <p class="ts-muted" style="font-size:12px">{str(p.data.note)}</p>}</div>)}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/policies.astro

@@ -0,0 +1,13 @@
+---
+import { entries, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("policies", { limit: 20 });
+if (str(n.group)) items = items.filter((p) => str(p.data.group) === str(n.group));
+---
+{items.length > 0 && (
+<section class="ts ts-band" id="policies"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((p) => <div class="ts-card" data-tidy-record="policies" data-tidy-record-id={p.id} data-tidy-record-label="Policy"><h3>{str(p.data.title)}</h3><p style="white-space:pre-line">{str(p.data.body)}</p></div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/posts.astro

@@ -0,0 +1,14 @@
+---
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("posts", { limit: int(n.limit, 3), orderBy: { createdAt: "desc" } as never });
+if (str(n.category)) items = items.filter((p) => str(p.data.category) === str(n.category));
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_all, true) ? { href: "/blog", label: "All posts" } : null} />
+	<div class="ts-grid" style="--cols:3">{items.map((p) => { const ph = pic(p.data.featured_image); return <a class="ts-card" href={`/blog/${p.slug ?? p.id}`}><Photo image={ph.image} url={ph.url} alt={str(p.data.title)} ratio="wide" />{str(p.data.category) && <p class="ts-eyebrow" style="margin:0">{str(p.data.category)}</p>}<h3>{str(p.data.title)}</h3>{str(p.data.summary) && <p>{str(p.data.summary)}</p>}</a>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/products.astro

@@ -0,0 +1,17 @@
+---
+import { bool, entries, getBusiness, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+let items = await entries("products", { limit: int(n.limit, 8) });
+if (str(n.category)) items = items.filter((p) => str(p.data.category) === str(n.category));
+if (str(n.variant) === "featured") items = items.filter((p) => bool(p.data.featured));
+const prices = bool(n.show_prices, true);
+---
+{items.length > 0 && (
+<section class="ts" id="products"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_store_button, true) && b.storeUrl ? { href: b.storeUrl, label: b.storeLabel } : null} />
+	<div class="ts-grid" style={`--cols:${str(n.variant) === "list" ? 1 : 4}`}>{items.map((p) => { const ph = pic(p.data.image); return <a class="ts-card" href={str(p.data.buy_url) || `/products/${p.slug ?? p.id}`} data-tidy-record="products" data-tidy-record-id={p.id} data-tidy-record-label="Product"><Photo image={ph.image} url={ph.url} alt={str(p.data.title)} ratio="square" /><h3 style="font-size:17px">{str(p.data.title)}</h3>{str(p.data.summary) && <p>{str(p.data.summary)}</p>}{prices && str(p.data.price) && <p style="font-weight:700">{str(p.data.price)}{str(p.data.unit) && <span class="ts-muted" style="font-weight:400"> / {str(p.data.unit)}</span>}{str(p.data.compare_price) && <s class="ts-muted" style="margin-left:8px;font-weight:400">{str(p.data.compare_price)}</s>}</p>}{str(p.data.availability_line) && <p class="ts-muted" style="font-size:12.5px">{str(p.data.availability_line)}</p>}</a>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/related.astro

@@ -0,0 +1,17 @@
+---
+/** Other services in the same category as the service on the page. */
+import { entries, int, nodeOf, str } from "../lib";
+const props = Astro.props as Record<string, unknown>;
+const n = nodeOf(props);
+const ctx = (props.context as Record<string, unknown> | null) ?? null;
+const cat = ctx ? String(ctx.category ?? "") : "";
+const selfId = ctx ? String(ctx.id ?? "") : "";
+let items = await entries("services", { limit: 40 });
+items = items.filter((s) => s.id !== selfId && (!cat || String(s.data.category ?? "") === cat)).slice(0, int(n.limit, 4));
+---
+{items.length > 0 && (
+<section class="ts ts-tight ts-band"><div class="ts-wrap">
+	<h3 style="margin-bottom:14px">{str(n.headline) || "Related services"}</h3>
+	<div class="ts-grid" style="--cols:4">{items.map((s) => <a class="ts-card" href={`/services/${s.slug ?? s.id}`}><h4>{str(s.data.title)}</h4></a>)}</div>
+</div></section>
+)}

package/src/sections/defaults/reviews.astro

@@ -0,0 +1,44 @@
+---
+/** Reviews from the records, with the business's rating and count beside them. */
+import { bool, entries, getBusiness, int, nodeOf, pic, str, mediaUrl } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "aggregate with quotes");
+const where: Record<string, string> = {};
+if (bool(n.featured_only)) where.featured = "1";
+let items = await entries("reviews", { limit: int(n.limit, 3), where });
+const svc = str(n.service), area = str(n.service_area);
+if (svc) items = items.filter((r) => String(r.data.service ?? "") === svc || true);
+if (variant === "video testimonials") items = items.filter((r) => str(r.data.video_url));
+const rating = b.rating ? b.rating.toFixed(1) : null;
+const stars = (v: unknown) => { const r = typeof v === "number" ? Math.max(1, Math.min(5, Math.round(v))) : 5; return "★".repeat(r); };
+const embed = (u: string) => u.replace("watch?v=", "embed/").replace("youtu.be/", "www.youtube.com/embed/");
+const who = (r: { data: Record<string, unknown> }) => str(r.data.display_name) || str(r.data.title);
+const when = (r: { data: Record<string, unknown> }) => { const d = str(r.data.date); return d ? new Date(d).toLocaleDateString("en-CA", { month: "long", year: "numeric" }) : ""; };
+---
+{(items.length > 0 || (bool(n.show_aggregate, true) && rating)) && (
+<section class="ts" id="reviews"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_review_links) && b.reviewsUrl ? { href: b.reviewsUrl, label: "Read them all" } : null} />
+	{variant === "single quote band" && items[0] ? (
+		<div style="max-width:64ch"><p class="ts-stars">{stars(items[0].data.rating)}</p><p style="font-family:var(--ts-display);font-size:clamp(22px,2.4vw,30px);line-height:1.3;margin-top:12px">“{str(items[0].data.quote)}”</p><p class="ts-muted" style="margin-top:12px">{who(items[0])}{bool(n.show_source, true) && str(items[0].data.source) ? ` · ${str(items[0].data.source)}` : ""}</p></div>
+	) : variant === "video testimonials" ? (
+		<div class="ts-grid" style="--cols:3">{items.map((r) => <div><div class="ts-video"><iframe src={embed(str(r.data.video_url))} title={who(r)} loading="lazy" allowfullscreen></iframe></div><p style="margin-top:8px;font-weight:600">{who(r)}</p></div>)}</div>
+	) : (
+	<div class={variant === "aggregate with quotes" && rating ? "ts-split ts-rev" : ""} style={variant === "aggregate with quotes" && rating ? "align-items:start" : ""}>
+		{variant === "aggregate with quotes" && rating && (
+			<aside class="ts-card"><span style="font-family:var(--ts-display);font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1">{rating}</span><span class="ts-stars">★★★★★</span>{b.reviewCount && <p class="ts-muted">{b.reviewCount} {b.ratingSource} reviews</p>}{b.reviewsUrl && <div class="ts-chips" style="margin-top:12px"><a class="ts-chip" href={b.reviewsUrl}>Read them all</a><a class="ts-chip" href={b.reviewsUrl}>Leave a review</a></div>}</aside>
+		)}
+		<div class="ts-grid" style={`--cols:${variant === "aggregate with quotes" ? 1 : 3}`}>
+			{items.map((r) => { const ph = pic(r.data.photo); return (
+				<article class="ts-card ts-review" data-tidy-record="reviews" data-tidy-record-id={r.id} data-tidy-record-label="Review">
+					<span class="ts-stars" aria-label={`${stars(r.data.rating).length} stars`}>{stars(r.data.rating)}</span>
+					<blockquote>{str(r.data.quote)}</blockquote>
+					<div class="ts-who">{(ph.image || ph.url) && <span class="ts-avatar"><img src={mediaUrl(ph) ?? ""} alt="" /></span>}<div><b>{who(r)}</b><span>{[bool(n.show_source, true) ? str(r.data.source) : "", when(r)].filter(Boolean).join(" · ")}</span></div></div>
+				</article>
+			); })}
+		</div>
+	</div>
+	)}
+</div></section>
+)}

package/src/sections/defaults/services.astro

@@ -0,0 +1,49 @@
+---
+/** Services or categories from the records, in one of five layouts. */
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const variant = str(n.variant, "cards with summary");
+const source = str(n.source, "services");
+const limit = int(n.limit, 12);
+let items: Array<{ id: string; slug?: string | null; data: Record<string, unknown>; href: string }> = [];
+let groups: Array<{ title: string; items: typeof items }> = [];
+const svc = (e: { id: string; slug?: string | null; data: Record<string, unknown> }) => ({ ...e, href: `/services/${e.slug ?? e.id}` });
+if (source === "categories") items = (await entries("service_categories", { limit })).map((e) => ({ ...e, href: `/services/category/${e.slug ?? e.id}` }));
+else if (source === "featured services") items = (await entries("services", { limit, where: { featured: "1" } })).map(svc);
+else if (source === "services in one category" && str(n.category)) {
+	const cats = await entries("service_categories");
+	const cat = cats.find((c) => (c.slug ?? c.id) === str(n.category));
+	items = (cat ? await entries("services", { limit, where: { category: String(cat.id) } }) : []).map(svc);
+} else items = (await entries("services", { limit })).map(svc);
+if (variant === "grouped by category") {
+	const cats = await entries("service_categories");
+	const all = (await entries("services", { limit: 100 })).map(svc);
+	groups = cats.map((c) => ({ title: str(c.data.title), items: all.filter((s) => String(s.data.category ?? "") === String(c.id)) })).filter((g) => g.items.length);
+	if (!groups.length) groups = [{ title: "", items: all }];
+}
+const showAll = bool(n.show_all, true);
+---
+{(items.length > 0 || groups.length > 0) && (
+<section class="ts ts-band" id="services"><div class="ts-wrap">
+	<Head n={n} action={showAll ? { href: "/services", label: "All services" } : null} />
+	{variant === "checklist" ? (
+		<ul class="ts-list" style="columns:2;gap:28px">{items.map((s) => <li><a href={s.href}>{str(s.data.title)}</a></li>)}</ul>
+	) : variant === "grouped by category" ? (
+		groups.map((g) => <div>{g.title && <p class="ts-group">{g.title}</p>}<div class="ts-chips">{g.items.map((s) => <a class="ts-chip" href={s.href} data-tidy-record="services" data-tidy-record-id={s.id} data-tidy-record-label="Service details">{str(s.data.title)}</a>)}</div></div>)
+	) : (
+		<div class="ts-grid" style={`--cols:${variant === "image tiles" ? 3 : 3}`}>
+			{items.map((s) => (
+				<a class="ts-card" href={s.href} data-tidy-record={source === "categories" ? "service_categories" : "services"} data-tidy-record-id={s.id} data-tidy-record-label={source === "categories" ? "Category details" : "Service details"}>
+					{variant === "image tiles" && (() => { const p = pic(s.data.featured_image); return <Photo image={p.image} url={p.url} alt={str(s.data.title)} ratio="wide" />; })()}
+					{variant === "icon cards" && str(s.data.icon) && <span class="ts-eyebrow" style="margin:0">{str(s.data.icon)}</span>}
+					<h3>{str(s.data.title)}</h3>
+					{variant !== "image tiles" && str(s.data.summary) && <p>{str(s.data.summary)}</p>}
+					{str(s.data.price_from) && <p class="ts-muted" style="font-size:13px">From {str(s.data.price_from)}</p>}
+				</a>
+			))}
+		</div>
+	)}
+</div></section>
+)}

package/src/sections/defaults/signs.astro

@@ -0,0 +1,12 @@
+---
+import { list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.items).filter((i) => str(i.title));
+---
+{items.length > 0 && (
+<section class="ts ts-band"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((i) => <div class="ts-card">{str(i.icon) && <span class="ts-eyebrow" style="margin:0">{str(i.icon)}</span>}<h3>{str(i.title)}</h3>{str(i.text) && <p>{str(i.text)}</p>}</div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/stats.astro

@@ -0,0 +1,13 @@
+---
+/** Value and label tiles. A tile with no value is left out, never shown as a zero. */
+import { list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const tiles = list<Record<string, unknown>>(n.tiles).filter((t) => str(t.value) && str(t.value) !== "0");
+---
+{tiles.length > 0 && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(4, tiles.length)}`}>{tiles.map((t) => <div class="ts-card ts-stat"><b>{str(t.value)}</b><span>{str(t.label)}{str(t.source) ? ` · ${str(t.source)}` : ""}</span></div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/steps.astro

@@ -0,0 +1,32 @@
+---
+/** A real sequence: a first visit, a treatment, aftercare. */
+import { bool, entries, lines, list, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.steps).filter((s) => str(s.title));
+const prep = lines(n.prep);
+const forms = bool(n.show_forms) ? await entries("downloads", { limit: 6 }) : [];
+const aside = bool(n.show_prep) && (prep.length > 0 || forms.length > 0);
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class={aside ? "ts-split" : ""}>
+		<div class="ts-steps">
+			{items.map((s, i) => (
+				<div class="ts-step">
+					<span class="ts-n">{str(s.duration) || String(i + 1).padStart(2, "0")}</span>
+					<div><h3>{str(s.title)}</h3>{str(s.body) && <p>{str(s.body)}</p>}{(() => { const p = pic(s.image); return p.image || p.url ? <Photo image={p.image} url={p.url} alt={str(s.title)} ratio="wide" class="ts-step-photo" /> : null; })()}</div>
+				</div>
+			))}
+		</div>
+		{aside && (
+			<aside class="ts-card">
+				{prep.length > 0 && <><h3>Bring with you</h3><ul class="ts-list" style="margin-top:10px">{prep.map((p) => <li>{p}</li>)}</ul></>}
+				{forms.length > 0 && <div class="ts-chips" style="margin-top:14px">{forms.map((f) => <a class="ts-chip" href={str(f.data.file_url, "#")}>{str(f.data.title)}</a>)}</div>}
+			</aside>
+		)}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/team.astro

@@ -0,0 +1,42 @@
+---
+/** People from the records: cards, grouped by department, a photo grid, or one person featured. */
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const variant = str(n.variant, "cards");
+const limit = int(n.limit, 24);
+const group = str(n.group);
+let people = await entries("people", { limit: 100 });
+if (group) people = people.filter((p) => str(p.data.group) === group);
+if (bool(n.featured_only)) people = people.filter((p) => bool(p.data.is_owner) || str(p.data.credentials));
+people = people.slice(0, limit);
+const showCred = bool(n.show_credentials, true), showBio = bool(n.show_bio, true);
+const name = (p: { data: Record<string, unknown> }) => str(p.data.display_name) || str(p.data.title);
+const groups = variant === "grouped by department" ? [...new Set(people.map((p) => str(p.data.group)))].map((g) => ({ title: g, items: people.filter((p) => str(p.data.group) === g) })) : [];
+const href = (p: { slug?: string | null; id: string; data: Record<string, unknown> }) => (bool(p.data.has_profile) ? `/team/${p.slug ?? p.id}` : null);
+---
+{people.length > 0 && (
+<section class="ts ts-band" id="team"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_all, true) ? { href: "/team", label: "Meet the team" } : null} />
+	{variant === "one person featured" ? (() => { const p = people[0]!; const ph = pic(p.data.photo); return (
+		<div class="ts-split"><Photo image={ph.image} url={ph.url} alt={name(p)} ratio="tall" /><div data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member"><p class="ts-role">{str(p.data.role)}{showCred && str(p.data.credentials) ? ` · ${str(p.data.credentials)}` : ""}</p><h3 style="font-size:28px;margin-top:6px">{name(p)}</h3>{str(p.data.bio) && <p class="ts-prose" style="margin-top:12px">{str(p.data.bio)}</p>}{href(p) && <div class="ts-actions"><a class="ts-btn ts-btn-outline" href={href(p)!}>Full bio</a></div>}</div></div>
+	); })() : variant === "photo grid" ? (
+		<div class="ts-gallery">{people.map((p) => { const ph = pic(p.data.photo); return <div data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member"><Photo image={ph.image} url={ph.url} alt={name(p)} ratio="square" /><p style="margin-top:6px;font-weight:600;font-size:14px">{name(p)}</p></div>; })}</div>
+	) : (groups.length ? groups : [{ title: "", items: people }]).map((g) => (
+		<div>{g.title && <p class="ts-group">{g.title}</p>}
+		<div class="ts-grid" style="--cols:3">
+			{g.items.map((p) => { const ph = pic(p.data.photo); const h = href(p); return (
+				<div class="ts-card" data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member">
+					{(ph.image || ph.url) && <Photo image={ph.image} url={ph.url} alt={name(p)} ratio="tall" />}
+					<div><span class="ts-person-name">{name(p)}</span>{showCred && str(p.data.credentials) && <span class="ts-muted" style="font-size:13px"> · {str(p.data.credentials)}</span>}</div>
+					{str(p.data.role) && <p class="ts-role">{str(p.data.role)}</p>}
+					{showBio && str(p.data.bio) && <p>{str(p.data.bio)}</p>}
+					{str(p.data.languages) && <p class="ts-muted" style="font-size:13px">{str(p.data.languages)}</p>}
+					{h && <a href={h} style="font-weight:700;font-size:14px;color:var(--ts-primary)">Full bio</a>}
+				</div>
+			); })}
+		</div></div>
+	))}
+</div></section>
+)}

package/src/sections/defaults/technologies.astro

@@ -0,0 +1,13 @@
+---
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = await entries("technologies", { limit: int(n.limit, 6) });
+---
+{items.length > 0 && (
+<section class="ts ts-band"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((t) => { const p = pic(t.data.image); return <div class="ts-card" data-tidy-record="technologies" data-tidy-record-id={t.id} data-tidy-record-label="Technology">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(t.data.title)} ratio="wide" />}<h3>{str(t.data.title)}{str(t.data.brand) && <span class="ts-muted" style="font-weight:400;font-size:14px"> · {str(t.data.brand)}</span>}</h3>{str(t.data.summary) && <p>{str(t.data.summary)}</p>}{bool(t.data.has_page) && <a href={`/technology/${t.slug ?? t.id}`} style="font-weight:700;color:var(--ts-primary);font-size:14px">Learn more</a>}</div>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/video.astro

@@ -0,0 +1,15 @@
+---
+import { nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const url = str(n.video_url);
+const embed = url.replace("watch?v=", "embed/").replace("youtu.be/", "www.youtube.com/embed/").replace("vimeo.com/", "player.vimeo.com/video/");
+const isFile = /\.(mp4|webm|mov)(\?|$)/i.test(url);
+---
+{url && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-video">{isFile ? <video src={url} controls playsinline></video> : <iframe src={embed} title={str(n.headline) || "Video"} loading="lazy" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>}</div>
+	{str(n.caption) && <p class="ts-muted" style="margin-top:10px;font-size:14px">{str(n.caption)}</p>}
+</div></section>
+)}