@sarimarcus/content-sites-tourism 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.16.0 (2026-10-01)
+
+- `./sections`: `TourismNavigation`, the tourism header (Explore, Articles, Eat & Drink, Plan with a month strip, Itineraries, Events, mobile accordion) on the ui navigation shells, with every link, label and count passed by the site (`TourismNavigationProps`); `navMonths` and `upcomingEventLinks` helpers (SLA-2735).
+
 ## 0.15.1 (2026-10-01)
 
 - No changes; lockstep release with ui (SLA-2736).

package/README.md

@@ -7,6 +7,10 @@ Named entry points: `cards`, `sections`, `templates`, `schema` and `types` (`src
 `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.
+`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
+hrefs stay in the site where the link gate reads them.
 
 Depends on `@sarimarcus/content-sites-core` and `@sarimarcus/content-sites-ui` (exact lockstep peers).
 Nothing may depend on it. Sites import `@sarimarcus/content-sites-tourism/tailwind.css` the same way as ui's.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-tourism",
-  "version": "0.15.1",
+  "version": "0.16.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.15.1",
-    "@sarimarcus/content-sites-ui": "0.15.1"
+    "@sarimarcus/content-sites-core": "0.16.0",
+    "@sarimarcus/content-sites-ui": "0.16.0"
   }
 }

package/src/sections/TourismNavigation.astro

@@ -0,0 +1,245 @@
+---
+/**
+ * The tourism sites' header: six dropdowns (Explore, Articles, Eat & Drink, Plan with a month strip, Itineraries,
+ * Events) and the matching mobile accordion, on the ui navigation shells. The site passes every link and label
+ * (see tourismNavigation.ts) and its logo through the `logo` slot. A link is current when it is the page or a page
+ * below it; hub links ("all …") are current only on their own page.
+ */
+import { normalizePagePath } from '@sarimarcus/content-sites-core/url';
+import { Chip, Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { SiteHeader, NavDropdown, MobileNavSection, NavMenuLink, MobileNavLink, isActivePath, type NavLink } from '@sarimarcus/content-sites-ui/navigation';
+import type { TourismNavigationProps } from './tourismNavigation.ts';
+
+type Props = TourismNavigationProps;
+
+const { explore, articles, eatDrink, plan, itineraries, events, search } = Astro.props;
+
+const currentPath = normalizePagePath(Astro.url.pathname);
+const on = (href: string) => isActivePath(currentPath, href);
+const here = (href: string) => normalizePagePath(href) === currentPath;
+const anyOn = (links: NavLink[]) => links.some((l) => on(l.href));
+
+const exploreActive = anyOn(explore.links) || on(explore.allGuides.href) || on(explore.bestOf.href);
+const articlesActive = on(articles.all.href);
+const eatDrinkActive = anyOn(eatDrink.links);
+const planActive = anyOn(plan.links) || on(plan.hub.href);
+const itinerariesActive = itineraries.durations.some((d) => on(d.href)) || anyOn(itineraries.connections) || on(itineraries.all.href);
+const eventsActive = anyOn(events.upcoming) || anyOn(events.guides) || on(events.all.href);
+
+const panel = 'bg-card rounded-xl border border-border shadow-xl shadow-foreground/10 overflow-hidden';
+const heading = 'text-xs font-semibold text-muted-foreground uppercase tracking-wide';
+const monthTone = (m: { current?: boolean; peak?: boolean }, hover: boolean) =>
+  m.current
+    ? 'bg-secondary text-secondary-foreground'
+    : m.peak
+    ? `bg-secondary/15 text-secondary border border-secondary/30${hover ? ' hover:bg-secondary/25' : ''}`
+    : `bg-muted text-muted-foreground${hover ? ' hover:bg-muted/80 hover:text-foreground' : ''}`;
+---
+
+<SiteHeader searchPath={search.path}>
+  <slot name="logo" slot="logo" />
+
+  <Fragment slot="desktop">
+    <NavDropdown id="nav-explore-menu" label={explore.label} icon={explore.icon} tone="primary" active={exploreActive} align="left">
+      <div class={`w-56 ${panel}`}>
+        <div class="p-2">
+          {explore.links.map((link) => <NavMenuLink link={link} active={on(link.href)} />)}
+        </div>
+        <div class="border-t border-border p-2">
+          <NavMenuLink link={explore.allGuides} align="center" emphasis active={here(explore.allGuides.href)} />
+          <NavMenuLink link={explore.bestOf} align="center" active={here(explore.bestOf.href)} />
+        </div>
+      </div>
+    </NavDropdown>
+
+    <NavDropdown id="nav-articles-menu" label={articles.label} icon={articles.icon} tone="primary" active={articlesActive} align="left">
+      <div class={`w-[34rem] ${panel}`}>
+        <div class="grid grid-cols-2">
+          <div class="p-2 border-r border-border">
+            <div class={`px-3 pt-2 pb-1 ${heading}`}>{articles.topicsHeading}</div>
+            {articles.topics.map((link) => <NavMenuLink link={link} size="sm" active={on(link.href)} />)}
+          </div>
+          <div class="p-2 flex flex-col">
+            <div class={`px-3 pt-2 pb-1 ${heading}`}>{articles.latestHeading}</div>
+            {articles.latest.map((link) => <NavMenuLink link={link} active={on(link.href)} />)}
+            <div class="mt-auto border-t border-border pt-2">
+              <NavMenuLink link={articles.all} align="center" emphasis active={here(articles.all.href)} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </NavDropdown>
+
+    <NavDropdown id="nav-eat-drink-menu" label={eatDrink.label} icon={eatDrink.icon} tone="primary" active={eatDrinkActive} align="left">
+      <div class={`w-56 ${panel}`}>
+        <div class="p-2">
+          {eatDrink.links.map((link) => <NavMenuLink link={link} active={on(link.href)} />)}
+        </div>
+      </div>
+    </NavDropdown>
+
+    <NavDropdown id="nav-plan-menu" label={plan.label} icon={plan.icon} tone="secondary" active={planActive} align="center">
+      <div class={`w-72 ${panel}`}>
+        <div class="p-2">
+          {plan.links.map((link) => <NavMenuLink link={link} tone="secondary" size="sm" active={on(link.href)} />)}
+        </div>
+        <div class="border-t border-border p-2">
+          <NavMenuLink link={plan.hub} tone="secondary" align="center" emphasis active={here(plan.hub.href)} />
+        </div>
+        <div class="border-t border-border px-3 py-2.5">
+          <div class={`${heading} mb-2`}>{plan.monthsHeading}</div>
+          <div class="flex flex-wrap gap-1.5">
+            {plan.months.map((m) => (
+              <Chip href={m.href} size="xs" tone="custom" accent="secondary" toneClass={monthTone(m, true)}>{m.label}</Chip>
+            ))}
+          </div>
+        </div>
+      </div>
+    </NavDropdown>
+
+    <NavDropdown id="nav-itineraries-menu" label={itineraries.label} icon={itineraries.icon} tone="secondary" active={itinerariesActive} align="center">
+      <div class={`w-[32rem] ${panel}`}>
+        <div class="grid grid-cols-2">
+          <div class="p-3 border-r border-border">
+            <div class={`px-1 pt-1 pb-2 ${heading}`}>{itineraries.durationsHeading}</div>
+            <div class="flex flex-col gap-1.5">
+              {itineraries.durations.map((d) => (
+                <a
+                  href={d.href}
+                  aria-current={on(d.href) ? 'page' : undefined}
+                  class:list={['flex items-center gap-3 p-2.5 rounded-lg border hover:bg-secondary/5 hover:border-secondary/25 transition-colors group focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2', on(d.href) ? 'bg-secondary/8 border-secondary/30' : 'border-border bg-card']}
+                >
+                  <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-secondary/10 group-hover:bg-secondary/20 transition-colors shrink-0">
+                    <span class="text-sm font-bold text-secondary">{d.days}</span>
+                  </div>
+                  <div>
+                    <span class="font-medium text-foreground group-hover:text-secondary transition-colors block text-sm">{d.label}</span>
+                    <span class="text-xs text-muted-foreground">{d.description}</span>
+                  </div>
+                </a>
+              ))}
+            </div>
+            <a href={itineraries.all.href} class="flex items-center gap-1.5 px-1 pt-3 text-xs font-medium text-secondary hover:text-secondary-strong transition-colors focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2">
+              {itineraries.all.label}
+              <Icon name="arrow-right" class="w-3 h-3" />
+            </a>
+          </div>
+          <div class="p-3">
+            <div class={`px-1 pb-1 ${heading}`}>{itineraries.featuredHeading}</div>
+            <a
+              href={itineraries.featured.href}
+              aria-current={on(itineraries.featured.href) ? 'page' : undefined}
+              class:list={['flex items-start gap-3 p-2.5 rounded-lg bg-secondary/5 border border-secondary/15 hover:bg-secondary/10 transition-colors group focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2 mb-3', on(itineraries.featured.href) ? 'border-secondary/30' : '']}
+            >
+              <div class="w-5 h-5 flex items-center justify-center shrink-0 mt-0.5">
+                <Icon name={itineraries.featured.icon ?? 'map'} class="w-3.5 h-3.5 text-secondary" />
+              </div>
+              <div>
+                <span class="font-medium text-secondary group-hover:text-secondary-strong transition-colors block text-sm">{itineraries.featured.label}</span>
+                {itineraries.featured.description && <span class="text-xs text-muted-foreground">{itineraries.featured.description}</span>}
+              </div>
+            </a>
+            <div class={`px-1 pb-1 ${heading}`}>{itineraries.connectionsHeading}</div>
+            {itineraries.connections.map((link) => <NavMenuLink link={link} tone="secondary" size="sm" active={on(link.href)} />)}
+          </div>
+        </div>
+      </div>
+    </NavDropdown>
+
+    <NavDropdown id="nav-events-menu" label={events.label} icon={events.icon} tone="accent" active={eventsActive} align="right">
+      <div class={`w-56 ${panel}`}>
+        {events.upcoming.length > 0 && (
+          <div class="p-2">
+            <div class={`px-3 pt-1 pb-1 ${heading}`}>{events.upcomingHeading}</div>
+            {events.upcoming.map((link) => <NavMenuLink link={link} tone="accent" active={on(link.href)} />)}
+          </div>
+        )}
+        <div class="border-t border-border p-2">
+          <div class={`px-3 pt-1 pb-1 ${heading}`}>{events.guidesHeading}</div>
+          {events.guides.map((link) => <NavMenuLink link={link} tone="accent" size="sm" active={on(link.href)} />)}
+        </div>
+        <div class="border-t border-border p-2">
+          <NavMenuLink link={events.all} tone="accent" align="center" active={on(events.all.href)} />
+        </div>
+      </div>
+    </NavDropdown>
+
+    <a
+      href={search.href}
+      class="search-icon-desktop flex items-center gap-1.5 ml-2 h-9 px-2.5 xl:px-3 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted border border-border hover:border-primary/40 transition-all cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 no-underline"
+      data-search-trigger
+      aria-label={search.label}
+      aria-keyshortcuts="Control+K Meta+K"
+    >
+      <Icon name="search" class="w-4 h-4 shrink-0" />
+      <span class="sr-only xl:not-sr-only xl:text-sm xl:font-medium">{search.text}</span>
+    </a>
+  </Fragment>
+
+  <a
+    slot="mobile-actions"
+    href={search.href}
+    id="mobile-search-btn"
+    class="p-2 min-h-[44px] min-w-[44px] flex items-center justify-center rounded-lg transition-colors text-foreground hover:bg-muted cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 no-underline"
+    aria-label={search.mobileLabel}
+    data-search-trigger
+  >
+    <Icon name="search" class="w-5 h-5" />
+  </a>
+
+  <Fragment slot="mobile">
+    <MobileNavSection label={explore.label} icon={explore.icon}>
+      {explore.links.map((link) => <MobileNavLink link={link} active={on(link.href)} />)}
+      <MobileNavLink link={explore.allGuides} emphasis="semibold" active={here(explore.allGuides.href)} />
+      <MobileNavLink link={explore.bestOf} iconStrong active={here(explore.bestOf.href)} />
+    </MobileNavSection>
+
+    <MobileNavSection label={articles.label} icon={articles.icon} class="border-t border-border">
+      <MobileNavLink link={{ ...articles.all, label: articles.all.mobileLabel ?? articles.all.label }} emphasis="semibold" active={here(articles.all.href)} />
+      <div class={`px-4 pt-2 pb-1 ${heading}`}>{articles.topicsHeading}</div>
+      {articles.topics.map((link) => <MobileNavLink link={link} active={on(link.href)} />)}
+    </MobileNavSection>
+
+    <MobileNavSection label={eatDrink.label} icon={eatDrink.icon} class="border-t border-border">
+      {eatDrink.links.map((link) => <MobileNavLink link={link} active={on(link.href)} />)}
+    </MobileNavSection>
+
+    <MobileNavSection label={plan.label} icon={plan.icon} iconClass="w-4 h-4 text-secondary" class="border-t border-border">
+      <MobileNavLink link={plan.hub} tone="secondary" emphasis="semibold" active={here(plan.hub.href)} />
+      {plan.links.map((link) => <MobileNavLink link={link} tone="secondary" active={on(link.href)} />)}
+      <div class={`px-4 pt-2 pb-1 ${heading}`}>{plan.monthsHeading}</div>
+      <div class="flex gap-2 px-4 pb-3 overflow-x-auto [&::-webkit-scrollbar]:hidden">
+        {plan.months.map((m) => (
+          <Chip href={m.href} size="sm" tone="custom" accent="secondary" class="whitespace-nowrap shrink-0" toneClass={monthTone(m, false)}>{m.label}</Chip>
+        ))}
+      </div>
+    </MobileNavSection>
+
+    <MobileNavSection label={itineraries.label} icon={itineraries.icon} iconClass="w-4 h-4 text-secondary" class="border-t border-border">
+      <div class={`px-4 pt-2 pb-1 ${heading}`}>{itineraries.durationsHeading}</div>
+      {itineraries.durations.map((d) => (
+        <MobileNavLink link={{ label: d.label, href: d.href }} tone="secondary" active={on(d.href)}>
+          <span slot="leading" class="w-5 h-5 flex items-center justify-center rounded bg-secondary/10 text-secondary text-xs font-bold shrink-0">{d.days}</span>
+        </MobileNavLink>
+      ))}
+      <MobileNavLink link={{ ...itineraries.featured, icon: itineraries.featured.icon ?? 'map', label: itineraries.featured.mobileLabel ?? itineraries.featured.label }} tone="secondary" emphasis="medium" active={here(itineraries.featured.href)} />
+      <div class={`px-4 pt-2 pb-1 ${heading}`}>{itineraries.connectionsHeading}</div>
+      {itineraries.connections.map((link) => <MobileNavLink link={link} tone="secondary" active={on(link.href)} />)}
+      <MobileNavLink link={{ ...itineraries.all, icon: itineraries.all.icon ?? 'route' }} tone="secondary" emphasis="medium" active={here(itineraries.all.href)} />
+    </MobileNavSection>
+
+    <MobileNavSection label={events.label} icon={events.icon} iconClass="w-4 h-4 text-accent" class="border-t border-border">
+      {events.upcoming.length > 0 && (
+        <>
+          <div class={`px-4 pt-2 pb-1 ${heading}`}>{events.upcomingHeading}</div>
+          {events.upcoming.map((link) => <MobileNavLink link={link} tone="accent" active={on(link.href)} />)}
+        </>
+      )}
+      <div class={`px-4 pt-2 pb-1 ${heading}`}>{events.guidesHeading}</div>
+      {events.guides.map((link) => <MobileNavLink link={link} tone="accent" active={on(link.href)} />)}
+      <MobileNavLink link={events.all} tone="accent" iconStrong active={on(events.all.href)} />
+    </MobileNavSection>
+
+    <div class="pointer-events-none sticky bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-background via-background/50 to-transparent mobile-scroll-fade"></div>
+  </Fragment>
+</SiteHeader>

package/src/sections/index.ts

@@ -7,9 +7,12 @@ export { default as SituationalNav } from './SituationalNav.astro';
 export { default as NeighborhoodHubHero } from './NeighborhoodHubHero.astro';
 export { default as ItineraryTeaser } from './ItineraryTeaser.astro';
 export { default as HomeMonuments } from './HomeMonuments.astro';
+export { default as TourismNavigation } from './TourismNavigation.astro';
 export type { WalkStop } from './WalkStops.astro';
 export type { WhoItsForLink } from './WhoItsFor.astro';
 export type { NeighborhoodCategoryType } from './NeighborhoodCategory.astro';
 export type { SituationalScenario } from './SituationalNav.astro';
 export type { HubCategoryPill } from './NeighborhoodHubHero.astro';
 export type { ItineraryTeaserStop } from './ItineraryTeaser.astro';
+export { navMonths, upcomingEventLinks } from './tourismNavigation.ts';
+export type { TourismNavigationProps, TourismNavHubLink, TourismNavMonth, TourismNavDuration } from './tourismNavigation.ts';

package/src/sections/tourismNavigation.ts

@@ -0,0 +1,84 @@
+import type { NavLink } from '@sarimarcus/content-sites-ui/navigation';
+
+/** A link the panel shows with a different label in the mobile menu. */
+export interface TourismNavHubLink extends NavLink {
+  mobileLabel?: string;
+}
+
+export interface TourismNavMonth {
+  label: string;
+  href: string;
+  current?: boolean;
+  peak?: boolean;
+}
+
+export interface TourismNavDuration {
+  /** Short badge text: a day count or a symbol. */
+  days: string;
+  label: string;
+  href: string;
+  description: string;
+}
+
+interface Group {
+  label: string;
+  icon: string;
+}
+
+/**
+ * Everything the tourism header renders. The site owns every value: hrefs (so the link gate still reads them in the
+ * site's adapter), labels, headings and counts.
+ */
+export interface TourismNavigationProps {
+  explore: Group & { links: NavLink[]; allGuides: NavLink; bestOf: NavLink };
+  articles: Group & { topicsHeading: string; topics: NavLink[]; latestHeading: string; latest: NavLink[]; all: TourismNavHubLink };
+  eatDrink: Group & { links: NavLink[] };
+  plan: Group & { links: NavLink[]; hub: NavLink; monthsHeading: string; months: TourismNavMonth[] };
+  itineraries: Group & {
+    durationsHeading: string;
+    durations: TourismNavDuration[];
+    all: NavLink;
+    featuredHeading: string;
+    featured: TourismNavHubLink;
+    connectionsHeading: string;
+    connections: NavLink[];
+  };
+  events: Group & { upcomingHeading: string; upcoming: NavLink[]; guidesHeading: string; guides: NavLink[]; all: NavLink };
+  search: { href: string; label: string; text: string; mobileLabel: string; path: string };
+}
+
+/** The month strip, with this month marked current. `hrefFor` keeps the URL scheme in the site. */
+export function navMonths(
+  months: { label: string; slug: string; peak?: boolean }[],
+  hrefFor: (slug: string) => string,
+  now: Date = new Date(),
+): TourismNavMonth[] {
+  const current = months[now.getMonth()]?.slug;
+  return months.map((m) => ({ label: m.label, href: hrefFor(m.slug), current: m.slug === current, peak: m.peak }));
+}
+
+interface NavEvent {
+  data: { name: string; slug: string; period?: string; type?: string; startDate?: string; endDate?: string };
+}
+
+/** The next `limit` events that have not ended yet, soonest first, as panel links. */
+export function upcomingEventLinks(
+  events: NavEvent[],
+  { hrefFor, icons, limit = 3, today = new Date().toISOString().slice(0, 10) }: {
+    hrefFor: (slug: string) => string;
+    icons: Record<string, string>;
+    limit?: number;
+    today?: string;
+  },
+): NavLink[] {
+  return events
+    .filter((e) => (e.data.endDate ?? e.data.startDate ?? '') >= today)
+    .sort((a, b) => (a.data.startDate ?? '').localeCompare(b.data.startDate ?? ''))
+    .slice(0, limit)
+    .map((e) => ({
+      label: e.data.name,
+      href: hrefFor(e.data.slug),
+      description: e.data.period,
+      icon: (e.data.type && icons[e.data.type]) || 'calendar',
+    }));
+}