@sarimarcus/content-sites-ui 0.30.1 → 0.31.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.31.0 (2026-10-08)
+
+- `./editorial` adds `AlsoExplore` (`AlsoExploreItem`) and `VisitTiming` (`VisitTimingData`; props `title`, `id`, `class` default `mt-12`, `labelClass` default `text-[0.8125rem]`), moved from the sites (SLA-3017).
+
+### Breaking
+
+- The sites' `components/ui/AlsoExplore.astro` and `VisitTiming.astro` now live in ui; sites run `rewrite-imports.mjs --delete-local`, then `scripts/platform/migrations/core-markdown.mjs` and `scripts/platform/migrations/promoted-site-files.mjs` (Dark Skies' two `<VisitTiming>` calls get `labelClass="text-sm"`) (SLA-3017).
+
+
 ## 0.30.1 (2026-10-07)
 
 - `./editorial`: `StaticProsePage` takes `proseClass`, the variant beside `prose` (default `prose-stone`) and `NotFoundPage` takes `searchBoxClass` (default: the current search-link classes), so a dark theme can pass its own prose variant and input tokens; default output is unchanged (SLA-2989).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.30.1"
+    "@sarimarcus/content-sites-core": "0.31.0"
   }
 }

package/src/editorial/AlsoExplore.astro

@@ -0,0 +1,37 @@
+---
+/** "Also explore": up to four sibling links under a hairline, at the foot of a hub or listing page. */
+import Icon from '../primitives/Icon.astro';
+
+export interface AlsoExploreItem {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  eyebrow?: string;
+  items: AlsoExploreItem[];
+  class?: string;
+}
+
+const { eyebrow = 'Also explore', items, class: className } = Astro.props;
+
+if (import.meta.env.DEV && items.length > 4) {
+  console.warn(`AlsoExplore: received ${items.length} items, capping at 4.`);
+}
+
+const displayItems = items.slice(0, 4);
+---
+
+{displayItems.length > 0 && (
+  <nav class:list={['mt-12 pt-8 border-t border-border', className]} aria-label={eyebrow}>
+    <p class="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">{eyebrow}</p>
+    <div class="flex flex-wrap gap-x-6 gap-y-2">
+      {displayItems.map((item) => (
+        <a href={item.href} class="inline-flex items-center gap-1.5 text-sm text-foreground hover:text-primary transition-colors">
+          {item.label}
+          <Icon name="arrow-right" class="w-3 h-3" />
+        </a>
+      ))}
+    </div>
+  </nav>
+)}

package/src/editorial/VisitTiming.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * "When to Visit": best season, quietest hours and visit duration, each shown only when set. `class` replaces the
+ * default top margin (`mt-12`); `labelClass` sets the slot label size.
+ */
+import Icon from '../primitives/Icon.astro';
+
+export interface VisitTimingData {
+  bestSeason?: string;
+  quietestHours?: string;
+  visitDuration?: string;
+}
+
+interface Props {
+  visitTiming?: VisitTimingData;
+  /** Heading text — override to avoid colliding with nearby "When to…" headings. */
+  title?: string;
+  /** Section id — override when a prose section on the page could slugify to the same value. */
+  id?: string;
+  class?: string;
+  labelClass?: string;
+}
+
+const {
+  visitTiming,
+  title = 'When to Visit',
+  id = 'when-to-visit',
+  class: className = 'mt-12',
+  labelClass = 'text-[0.8125rem]',
+} = Astro.props;
+
+const slots = visitTiming
+  ? [
+      visitTiming.bestSeason
+        ? { icon: 'calendar', label: 'Best season', value: visitTiming.bestSeason }
+        : null,
+      visitTiming.quietestHours
+        ? { icon: 'clock', label: 'Quietest hours', value: visitTiming.quietestHours }
+        : null,
+      visitTiming.visitDuration
+        ? { icon: 'hourglass', label: 'Visit duration', value: visitTiming.visitDuration }
+        : null,
+    ].filter((s): s is { icon: string; label: string; value: string } => s !== null)
+  : [];
+---
+
+{slots.length > 0 && (
+  <section
+    id={id}
+    class:list={['scroll-mt-28', className]}
+    data-guide-section
+  >
+    <h2 class="text-2xl font-display font-semibold text-foreground mb-6 leading-tight">{title}</h2>
+    <div
+      class:list={[
+        'bg-primary/5 border border-primary/15 rounded-xl p-6 grid gap-6',
+        slots.length === 1 && 'grid-cols-1',
+        slots.length === 2 && 'grid-cols-1 sm:grid-cols-2',
+        slots.length === 3 && 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+      ]}
+    >
+      {slots.map((slot) => (
+        <div class="min-w-0">
+          <p class:list={['flex items-center gap-1.5', labelClass, 'uppercase tracking-wider text-muted-foreground mb-1.5 leading-none']}>
+            <Icon name={slot.icon} class="w-3.5 h-3.5 text-primary/60 shrink-0" />
+            {slot.label}
+          </p>
+          <p class="text-base font-medium text-foreground leading-snug tabular-nums">{slot.value}</p>
+        </div>
+      ))}
+    </div>
+  </section>
+)}

package/src/editorial/index.ts

@@ -20,6 +20,10 @@ export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategor
 export { default as InsiderTips } from './InsiderTips.astro';
 export type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
 export { default as AuthorStrip } from './AuthorStrip.astro';
+export { default as AlsoExplore } from './AlsoExplore.astro';
+export { default as VisitTiming } from './VisitTiming.astro';
+export type { AlsoExploreItem } from './AlsoExplore.astro';
+export type { VisitTimingData } from './VisitTiming.astro';
 export { default as AnswerBox } from './interludes/AnswerBox.astro';
 export { default as ComparisonTable } from './interludes/ComparisonTable.astro';
 export { default as EvidenceContext } from './interludes/EvidenceContext.astro';