@sarimarcus/content-sites-tourism 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.18.0 (2026-10-02)
+
+- `./templates`: `CategoryFacetPage` (one category of a content type: facet hero by tone, chip nav, intro, back link, `before-grid`, cards, `empty` and `footer` slots). The chip nav is shared with `TierFacetPage` through an internal `FacetChipNav`; `FacetNav` gains `accent` and an optional `all` (SLA-2744).
+
 ## 0.17.0 (2026-10-01)
 
 - No changes; released in lockstep (SLA-2741).

package/README.md

@@ -6,7 +6,10 @@ pieces, tourism page templates and their utilities. Used by the Córdoba and Gra
 Named entry points: `cards`, `sections`, `templates`, `schema` and `types` (`src/internal` is never exported).
 `schema` holds the city-entity JSON-LD builders (monument, museum, restaurant, bar, dish, neighborhood, guide item
 list) on core `schema`, and the `TourismCity` address policy they share.
-Page templates are rendered by thin route files in each site.
+Page templates are rendered by thin route files in each site: `NeighborhoodFacetPage`, `ProximityFacetPage`,
+`TierFacetPage` and `CategoryFacetPage`. The route keeps the filtering, URLs, the `MIN_INDEXABLE_ITEMS` noindex
+threshold, Layout and schema; the template gets props (copy, `FacetNav` chips, tone) and slots (breadcrumb, cards,
+`empty`, `footer`).
 `sections` also holds `TourismNavigation`, the tourism header (Explore, Articles, Eat & Drink, Plan with a month
 strip, Itineraries, Events and the mobile accordion) on the ui navigation shells. The site's `Navigation.astro`
 passes every link, label and count as props (`TourismNavigationProps`) and its logo through the `logo` slot, so the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-tourism",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "City-tourism vertical: city-entity components, pages templates and utilities for the tourism sites.",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.17.0",
-    "@sarimarcus/content-sites-ui": "0.17.0"
+    "@sarimarcus/content-sites-core": "0.18.0",
+    "@sarimarcus/content-sites-ui": "0.18.0"
   }
 }

package/src/templates/CategoryFacetPage.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * CategoryFacetPage — one category of a content type (/activities/category/<slug>, /restaurants/cuisine/<slug>,
+ * /monuments/type/<slug>, …). The route keeps the categories, filtering, SEO, schema, URLs and the noindex threshold,
+ * and renders the site Layout around this template. It passes the site Breadcrumb in `breadcrumb`, an inline svg in
+ * `icon` when the badge icon is not an Icon name, a widget above the grid in `before-grid`, the cards as default-slot
+ * children, what an empty category shows in
+ * `empty`, and closing blocks (FAQ, related links) in `footer`.
+ */
+import { Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+import type { TrustedHtml } from '@sarimarcus/content-sites-ui/types';
+import FacetHero from './FacetHero.astro';
+import FacetChipNav from './FacetChipNav.astro';
+import type { FacetLink, FacetNav } from './facet';
+
+export type CategoryFacetTone = 'primary' | 'secondary' | 'accent' | 'secondary-overlay';
+
+interface Props {
+  tone: CategoryFacetTone;
+  /** Icon name for the hero badge; omit it to use the `icon` slot. */
+  icon?: string;
+  badgeLabel: string;
+  heading: string;
+  lede: string;
+  nav: FacetNav;
+  introHtml?: TrustedHtml;
+  backLink: FacetLink;
+  /** Cards in the default slot; 0 shows the `empty` slot under the grid. */
+  itemCount: number;
+  columns?: 2 | 3;
+}
+
+const { tone, icon, badgeLabel, heading, lede, nav, introHtml, backLink, itemCount, columns = 2 } = Astro.props;
+
+const heroTones: Record<CategoryFacetTone, string> = {
+  primary: 'bg-gradient-to-b from-primary to-primary-strong',
+  secondary: 'bg-gradient-to-b from-secondary to-secondary-strong',
+  accent: 'bg-gradient-to-b from-accent to-accent-strong',
+  'secondary-overlay': 'bg-gradient-to-b from-secondary to-overlay',
+};
+const panelTones: Record<CategoryFacetTone, string> = {
+  primary: 'bg-gradient-to-r from-primary/5 via-accent/5 to-primary/5',
+  secondary: 'bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5',
+  accent: 'bg-gradient-to-r from-accent/5 via-primary/5 to-accent/5',
+  'secondary-overlay': 'bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5',
+};
+const backHover = { primary: 'hover:text-primary', secondary: 'hover:text-secondary', accent: 'hover:text-accent' }[nav.accent ?? 'primary'];
+const gridClass = columns === 3 ? 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3' : 'grid gap-6 lg:grid-cols-2';
+---
+
+<FacetHero
+  bgClass={heroTones[tone]}
+  badgeToneClass="bg-overlay-foreground/20 text-overlay-foreground"
+  badgeLabel={badgeLabel}
+  heading={heading}
+  lede={lede}
+  icon={icon}
+>
+  <slot name="breadcrumb" slot="breadcrumb" />
+  <slot name="icon" slot="icon" />
+</FacetHero>
+
+<main class="py-12 lg:py-20">
+  <Container>
+    <FacetChipNav nav={nav} panelBg={panelTones[tone]} />
+
+    {introHtml && (
+      <div class="mb-10 p-6 lg:p-8 bg-muted/30 rounded-2xl">
+        <div class="prose prose-lg max-w-measure-wide">
+          <p class="text-foreground/80 leading-relaxed" set:html={introHtml} />
+        </div>
+      </div>
+    )}
+
+    <a
+      href={backLink.href}
+      class={`inline-flex items-center gap-2 text-sm text-muted-foreground ${backHover} transition-colors mb-8`}
+    >
+      <Icon name="arrow-left" class="w-4 h-4" />
+      {backLink.label}
+    </a>
+
+    <slot name="before-grid" />
+
+    <div class={gridClass}>
+      <slot />
+    </div>
+
+    {itemCount === 0 && <slot name="empty" />}
+    <slot name="footer" />
+  </Container>
+</main>

package/src/templates/FacetChipNav.astro

@@ -0,0 +1,51 @@
+---
+/**
+ * FacetChipNav — internal to the facet templates: the chip row linking a facet's sibling values, with counts. `panel`
+ * boxes it under a heading with large outline chips; `inline` is a bare row of muted chips.
+ */
+import { Badge, Chip } from '@sarimarcus/content-sites-ui/primitives';
+import type { FacetNav, FacetNavItem } from './facet';
+
+interface Props {
+  nav: FacetNav;
+  /** Panel background, e.g. `bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5`. */
+  panelBg?: string;
+}
+
+const { nav, panelBg = 'bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5' } = Astro.props;
+const panel = nav.variant === 'panel';
+const NavWrap = panel ? 'section' : 'div';
+const navWrapClass = panel ? `mb-10 p-6 ${panelBg} rounded-2xl border border-border` : 'mb-10';
+const accent = nav.accent ?? 'primary';
+const chip = panel
+  ? { size: 'lg' as const, tone: 'outline' as const, accent }
+  : { size: 'md' as const, tone: 'muted' as const, accent };
+const allChipProps = nav.all && (panel ? { href: nav.all.href, ...chip, class: 'gap-2' } : { href: nav.all.href, ...chip });
+const itemChipProps = (t: FacetNavItem) => ({
+  href: t.href,
+  ...chip,
+  active: t.active,
+  'aria-current': t.active ? ('page' as const) : undefined,
+  ...(panel ? { class: t.active ? 'gap-2 shadow-md' : 'gap-2' } : {}),
+});
+const countTone = (active: boolean) => (active ? 'bg-overlay-foreground/20' : panel ? 'bg-muted' : 'bg-background');
+const countClass = panel ? '![font-weight:inherit]' : '!px-1.5 ![font-weight:inherit]';
+---
+
+<NavWrap class={navWrapClass}>
+  {panel && <h2 class="text-lg font-normal text-foreground font-display mb-5">{nav.heading}</h2>}
+  <nav class={panel ? 'flex flex-wrap gap-3' : 'flex flex-wrap gap-2'} aria-label={nav.label}>
+    {nav.all && allChipProps && (
+      <Chip {...allChipProps}>
+        {nav.all.label}
+        <Badge tone="custom" toneClass={countTone(false)} size="sm" lines={0} class={countClass}>{nav.all.count}</Badge>
+      </Chip>
+    )}
+    {nav.items.map((t) => (
+      <Chip {...itemChipProps(t)}>
+        {t.label}{t.detail && <span class="text-xs opacity-75">{t.detail}</span>}
+        <Badge tone="custom" toneClass={countTone(t.active)} size="sm" lines={0} class={countClass}>{t.count}</Badge>
+      </Chip>
+    ))}
+  </nav>
+</NavWrap>

package/src/templates/TierFacetPage.astro

@@ -3,35 +3,19 @@
  * TierFacetPage — one price tier of a content type (/activities/price/<tier>, /restaurants/price/<tier>). The route
  * keeps the tiers, filtering, SEO, schema and URLs, and renders the site Layout around this template. It passes the
  * site Breadcrumb in the `breadcrumb` slot, the cards (through its card adapters) as default-slot children and its
- * closing links in `footer`. Every string arrives as a prop.
+ * closing links in `footer`. Every string arrives as a prop. It is CategoryFacetPage with tier chips and FacetEmpty.
  */
-import { Badge, Chip, Icon } from '@sarimarcus/content-sites-ui/primitives';
-import { Container } from '@sarimarcus/content-sites-ui/layout';
 import type { TrustedHtml } from '@sarimarcus/content-sites-ui/types';
-import FacetHero from './FacetHero.astro';
+import CategoryFacetPage from './CategoryFacetPage.astro';
 import FacetEmpty from './FacetEmpty.astro';
-import type { FacetEmptyState, FacetLink } from './facet';
+import type { FacetEmptyState, FacetLink, FacetNav, FacetNavItem } from './facet';
 
 export type TierFacetTone = 'secondary' | 'secondary-overlay';
 
-export interface TierNavItem {
-  href: string;
-  label: string;
-  /** Range shown after the label, punctuation included, e.g. "(Under €25)". */
-  detail: string;
-  count: number;
-  active: boolean;
-}
+export type TierNavItem = FacetNavItem & { detail: string };
 
-export interface TierNav {
-  /** `panel`: boxed, headed, large outline chips. `inline`: bare row of muted chips. */
-  variant: 'panel' | 'inline';
-  /** Panel heading; `panel` only. */
-  heading?: string;
-  /** aria-label of the chip nav. */
-  label: string;
-  /** The unfiltered listing. */
-  all: { href: string; label: string; count: number };
+export interface TierNav extends Omit<FacetNav, 'all' | 'items'> {
+  all: NonNullable<FacetNav['all']>;
   tiers: TierNavItem[];
 }
 
@@ -52,82 +36,22 @@ interface Props {
 }
 
 const { tone, icon, badgeLabel, heading, lede, nav, introHtml, backLink, itemCount, empty, columns = 2 } = Astro.props;
-
-const heroTones: Record<TierFacetTone, string> = {
-  secondary: 'bg-gradient-to-b from-secondary to-secondary-strong',
-  'secondary-overlay': 'bg-gradient-to-b from-secondary to-overlay',
-};
-const panel = nav.variant === 'panel';
-const NavWrap = panel ? 'section' : 'div';
-const navWrapClass = panel
-  ? 'mb-10 p-6 bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5 rounded-2xl border border-border'
-  : 'mb-10';
-const chip = panel
-  ? { size: 'lg' as const, tone: 'outline' as const, accent: 'primary' as const }
-  : { size: 'md' as const, tone: 'muted' as const, accent: 'primary' as const };
-const allChipProps = panel ? { href: nav.all.href, ...chip, class: 'gap-2' } : { href: nav.all.href, ...chip };
-const tierChipProps = (t: TierNavItem) => ({
-  href: t.href,
-  ...chip,
-  active: t.active,
-  'aria-current': t.active ? ('page' as const) : undefined,
-  ...(panel ? { class: t.active ? 'gap-2 shadow-md' : 'gap-2' } : {}),
-});
-const countTone = (active: boolean) => (active ? 'bg-overlay-foreground/20' : panel ? 'bg-muted' : 'bg-background');
-const countClass = panel ? '![font-weight:inherit]' : '!px-1.5 ![font-weight:inherit]';
-const gridClass = columns === 3 ? 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3' : 'grid gap-6 lg:grid-cols-2';
 ---
 
-<FacetHero
-  bgClass={heroTones[tone]}
-  badgeToneClass="bg-overlay-foreground/20 text-overlay-foreground"
+<CategoryFacetPage
+  tone={tone}
+  icon={icon}
   badgeLabel={badgeLabel}
   heading={heading}
   lede={lede}
-  icon={icon}
+  nav={{ ...nav, items: nav.tiers }}
+  introHtml={introHtml}
+  backLink={backLink}
+  itemCount={itemCount}
+  columns={columns}
 >
   <slot name="breadcrumb" slot="breadcrumb" />
-</FacetHero>
-
-<main class="py-12 lg:py-20">
-  <Container>
-    <NavWrap class={navWrapClass}>
-      {panel && <h2 class="text-lg font-normal text-foreground font-display mb-5">{nav.heading}</h2>}
-      <nav class={panel ? 'flex flex-wrap gap-3' : 'flex flex-wrap gap-2'} aria-label={nav.label}>
-        <Chip {...allChipProps}>
-          {nav.all.label}
-          <Badge tone="custom" toneClass={countTone(false)} size="sm" lines={0} class={countClass}>{nav.all.count}</Badge>
-        </Chip>
-        {nav.tiers.map((t) => (
-          <Chip {...tierChipProps(t)}>
-            {t.label}<span class="text-xs opacity-75">{t.detail}</span>
-            <Badge tone="custom" toneClass={countTone(t.active)} size="sm" lines={0} class={countClass}>{t.count}</Badge>
-          </Chip>
-        ))}
-      </nav>
-    </NavWrap>
-
-    {introHtml && (
-      <div class="mb-10 p-6 lg:p-8 bg-muted/30 rounded-2xl">
-        <div class="prose prose-lg max-w-measure-wide">
-          <p class="text-foreground/80 leading-relaxed" set:html={introHtml} />
-        </div>
-      </div>
-    )}
-
-    <a
-      href={backLink.href}
-      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-8"
-    >
-      <Icon name="arrow-left" class="w-4 h-4" />
-      {backLink.label}
-    </a>
-
-    <div class={gridClass}>
-      <slot />
-    </div>
-
-    {itemCount === 0 && <FacetEmpty {...empty} />}
-    <slot name="footer" />
-  </Container>
-</main>
+  <slot />
+  <FacetEmpty slot="empty" {...empty} />
+  <slot name="footer" slot="footer" />
+</CategoryFacetPage>

package/src/templates/facet.ts

@@ -12,3 +12,26 @@ export interface FacetEmptyState {
   message: string;
   link: FacetLink;
 }
+
+export interface FacetNavItem {
+  href: string;
+  label: string;
+  /** Shown after the label, punctuation included, e.g. "(Under €25)". */
+  detail?: string;
+  count: number;
+  active: boolean;
+}
+
+export interface FacetNav {
+  /** `panel`: boxed, headed, large outline chips. `inline`: bare row of muted chips. */
+  variant: 'panel' | 'inline';
+  /** Panel heading; `panel` only. */
+  heading?: string;
+  /** aria-label of the chip nav. */
+  label: string;
+  /** Chip colour; default primary. */
+  accent?: 'primary' | 'secondary' | 'accent';
+  /** The unfiltered listing, first in the row. */
+  all?: { href: string; label: string; count: number };
+  items: FacetNavItem[];
+}

package/src/templates/index.ts

@@ -2,7 +2,9 @@
 export { default as NeighborhoodFacetPage } from './NeighborhoodFacetPage.astro';
 export { default as ProximityFacetPage } from './ProximityFacetPage.astro';
 export { default as TierFacetPage } from './TierFacetPage.astro';
-export type { FacetEmptyState, FacetLink } from './facet';
+export { default as CategoryFacetPage } from './CategoryFacetPage.astro';
+export type { FacetEmptyState, FacetLink, FacetNav, FacetNavItem } from './facet';
 export type { NeighborhoodFacetTone } from './NeighborhoodFacetPage.astro';
 export type { ProximityIntroSection, ProximityEditorialGroup } from './ProximityFacetPage.astro';
 export type { TierFacetTone, TierNav, TierNavItem } from './TierFacetPage.astro';
+export type { CategoryFacetTone } from './CategoryFacetPage.astro';