@sarimarcus/content-sites-ui 0.28.1 → 0.29.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.29.1 (2026-10-06)
+
+- `./editorial`: `ArticleTopicPage` takes `proseClass`, the overview's prose theme modifier added to `prose` (default `prose-lg`, as before), so a dark site can render the overview in its own prose colours (SLA-2994).
+
+## 0.29.0 (2026-10-06)
+
+- `./navigation`: `ArticlesNavMenu`, the header's Articles menu (desktop dropdown via `variant="desktop"`, mobile accordion section via `variant="mobile"`): a topics column, and with `latest` a second column where the newest article is a feature card (16:9 image, topic, date), the next ones are dated rows, then the archive link. Without `latest` it renders the single-column menu. Types `ArticleNavItem`, `ArticlesNavProps`, `NavHubLink` (SLA-2993).
+- `./editorial`: `ArticleTopicPager`, a text-only "Next in <topic>" pager for the end of an article (newer and older article of the same topic, dated, then the topic hub link); renders nothing without a neighbour. Type `TopicPagerLink` (SLA-2995).
+
 ## 0.28.1 (2026-10-06)
 
 - No changes; lockstep release with core and tourism (SLA-2983).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.28.1",
+  "version": "0.29.1",
   "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.28.1"
+    "@sarimarcus/content-sites-core": "0.29.1"
   }
 }

package/src/editorial/ArticleTopicPage.astro

@@ -35,9 +35,11 @@ interface Props {
   listHeading?: string;
   overview?: { heading: string; html: TrustedHtml; guide?: { title: string; lead: string; href: string; linkLabel: string } };
   authors?: { heading: string; items: TopicAuthorCard[] };
+  /** The site's prose theme modifier for the overview, added to `prose` (a dark site needs its own body colour). */
+  proseClass?: string;
 }
 
-const { eyebrow, heading, lede, articles, categories, category, currentPage, listHeading, overview, authors } = Astro.props;
+const { eyebrow, heading, lede, articles, categories, category, currentPage, listHeading, overview, authors, proseClass = 'prose-lg' } = Astro.props;
 const hub = currentPage === 1;
 // Astro.slots.has() is true for a slotted expression that evaluated to false, so test what it rendered.
 const faqHtml = hub && Astro.slots.has('faq') ? (await Astro.slots.render('faq')).trim() : '';
@@ -56,7 +58,7 @@ const faqHtml = hub && Astro.slots.has('faq') ? (await Astro.slots.render('faq')
         <Container size="measure">
           <h2 class="text-2xl sm:text-3xl font-normal font-display text-foreground mb-4">{overview.heading}</h2>
           <slot name="overview-byline" />
-          <div class="prose prose-lg max-w-none mt-6" set:html={overview.html} />
+          <div class:list={['prose', proseClass, 'max-w-none mt-6']} set:html={overview.html} />
           {overview.guide && (
             <Callout type="tip" title={overview.guide.title} class="mt-8">
               {overview.guide.lead}<a href={overview.guide.href} class="font-medium text-primary hover:underline">{overview.guide.linkLabel}</a>

package/src/editorial/ArticleTopicPager.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * ArticleTopicPager — "Next in <topic>" at the end of an article: the newer and the older article of the same topic,
+ * text only (the Related block below it carries the images), then the topic hub link. The site resolves the
+ * neighbours and every href. Renders nothing without a neighbour.
+ */
+import { formatUtcDate } from '@sarimarcus/content-sites-core/dates';
+import { Icon, LinkArrow } from '../primitives/index.ts';
+import type { TopicPagerLink } from './types';
+
+interface Props {
+  topic: { label: string; href: string; count?: number };
+  newer?: TopicPagerLink;
+  older?: TopicPagerLink;
+  heading?: string;
+  newerLabel?: string;
+  olderLabel?: string;
+  class?: string;
+}
+
+const {
+  topic,
+  newer,
+  older,
+  heading = `Next in ${topic.label}`,
+  newerLabel = 'Newer',
+  olderLabel = 'Older',
+  class: className,
+} = Astro.props;
+
+const day = (iso?: string) => formatUtcDate(iso, { day: 'numeric', month: 'short', year: 'numeric' }, 'en-GB');
+const sides = [
+  newer && { link: newer, label: newerLabel, dir: 'newer' as const },
+  older && { link: older, label: olderLabel, dir: 'older' as const },
+].filter(Boolean) as { link: TopicPagerLink; label: string; dir: 'newer' | 'older' }[];
+const allLabel = topic.count ? `All ${topic.count} ${topic.label} articles` : `All ${topic.label} articles`;
+---
+
+{sides.length > 0 && (
+  <nav aria-label={heading} class:list={['mt-14 pt-8 border-t border-border', className]} data-pagefind-ignore>
+    <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{heading}</h2>
+    <div class:list={['mt-4 grid gap-px overflow-hidden rounded-xl border border-border bg-border', sides.length === 2 && 'sm:grid-cols-2']}>
+      {sides.map(({ link, label, dir }) => (
+        <a
+          href={link.href}
+          class:list={[
+            'group flex flex-col gap-1 bg-card p-5 transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',
+            dir === 'older' && sides.length === 2 && 'sm:text-right sm:items-end',
+          ]}
+        >
+          <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-primary">
+            {dir === 'newer' && <Icon name="arrow-left" class="w-3.5 h-3.5" />}
+            {label}
+            {dir === 'older' && <Icon name="arrow-right" class="w-3.5 h-3.5" />}
+          </span>
+          <span class="text-base font-semibold leading-snug text-foreground line-clamp-2 transition-colors group-hover:text-primary">{link.title}</span>
+          {link.date && <span class="text-xs text-muted-foreground">{day(link.date)}</span>}
+        </a>
+      ))}
+    </div>
+    <LinkArrow href={topic.href} class="mt-4 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">{allLabel}</LinkArrow>
+  </nav>
+)}

package/src/editorial/index.ts

@@ -14,8 +14,9 @@ export { default as ArticleCard } from './ArticleCard.astro';
 export { default as ArticleGrid } from './ArticleGrid.astro';
 export { default as ArticleCategoryNav } from './ArticleCategoryNav.astro';
 export { default as ArticleTopicPage } from './ArticleTopicPage.astro';
+export { default as ArticleTopicPager } from './ArticleTopicPager.astro';
 export { rankByCount } from './topic';
-export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard } from './types';
+export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard, TopicPagerLink } from './types';
 export { default as InsiderTips } from './InsiderTips.astro';
 export type { InsiderTip, InsiderTipAuthor, InsiderTipKinds, InsiderTipTone } from './types';
 export { default as AuthorStrip } from './AuthorStrip.astro';

package/src/editorial/types.ts

@@ -80,3 +80,11 @@ export interface InsiderTipAuthor {
   expertise?: string;
   credentials?: string;
 }
+
+/** One side of ArticleTopicPager. */
+export interface TopicPagerLink {
+  title: string;
+  href: string;
+  /** Publication date or datetime (ISO). */
+  date?: string;
+}

package/src/navigation/ArticlesNavMenu.astro

@@ -0,0 +1,117 @@
+---
+/**
+ * The header's Articles menu: a desktop dropdown (`variant="desktop"`) or a mobile accordion section
+ * (`variant="mobile"`); a header renders both, one in each slot. Desktop shows the topic hubs and, when `latest` is
+ * given, a second column: the newest article as a feature card (when it has an image), the next ones as dated rows,
+ * then the archive link. Mobile lists the archive link and the topics. The site passes every link and label.
+ */
+import { normalizePagePath } from '@sarimarcus/content-sites-core/url';
+import { formatUtcDate } from '@sarimarcus/content-sites-core/dates';
+import ResponsiveImage from '../primitives/ResponsiveImage.astro';
+import NavDropdown from './NavDropdown.astro';
+import NavMenuLink from './NavMenuLink.astro';
+import MobileNavSection from './MobileNavSection.astro';
+import MobileNavLink from './MobileNavLink.astro';
+import { isActivePath } from './activePath.ts';
+import { TONES } from './tones.ts';
+import type { ArticlesNavProps } from './types.ts';
+
+type Props = ArticlesNavProps;
+
+const {
+  variant,
+  id = 'nav-articles-menu',
+  label,
+  icon,
+  tone = 'primary',
+  topicsHeading,
+  topics,
+  latestHeading = 'Latest',
+  latest = [],
+  all,
+  iconStyle = 'plain',
+  align = 'left',
+  buttonClass,
+  current,
+  panelClass = 'bg-card rounded-xl border border-border shadow-xl shadow-foreground/10',
+  iconClass,
+  class: className,
+} = Astro.props;
+
+const t = TONES[tone];
+const currentPath = normalizePagePath(Astro.url.pathname);
+const on = (href: string) => isActivePath(currentPath, href);
+const here = (href: string) => normalizePagePath(href) === currentPath;
+const sectionActive = on(all.href);
+
+const heading = 'text-xs font-semibold text-muted-foreground uppercase tracking-wide';
+const ring = `focus-visible:ring-2 ${t.ring} focus-visible:ring-offset-2`;
+const day = (iso?: string) => formatUtcDate(iso, { day: 'numeric', month: 'short' }, 'en-GB');
+
+const [first, ...rest] = latest;
+const feature = first?.image ? first : undefined;
+const rows = feature ? rest : latest;
+---
+
+{variant === 'desktop' ? (
+  <NavDropdown id={id} label={label} icon={icon} tone={tone} active={sectionActive} align={align} buttonClass={buttonClass} current={current}>
+    {latest.length > 0 ? (
+      <div class={`w-[34rem] ${panelClass} overflow-hidden`}>
+        <div class="grid grid-cols-2">
+          <div class="p-2 border-r border-border">
+            <div class={`px-3 pt-2 pb-1 ${heading}`}>{topicsHeading}</div>
+            {topics.map((link) => <NavMenuLink link={link} tone={tone} size="sm" iconStyle={iconStyle} active={on(link.href)} />)}
+          </div>
+          <div class="p-2 flex flex-col">
+            <div class={`px-3 pt-2 pb-1 ${heading}`}>{latestHeading}</div>
+            {feature && (
+              <a href={feature.href} aria-current={here(feature.href) ? 'page' : undefined} class:list={[`group block p-2 rounded-lg hover:bg-muted transition-colors ${ring}`, here(feature.href) && 'bg-muted']}>
+                <div class="aspect-video rounded-md overflow-hidden bg-muted">
+                  <ResponsiveImage src={feature.image!} alt={feature.imageAlt ?? ''} sizes="16rem" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />
+                </div>
+                {(feature.eyebrow || feature.date) && (
+                  <span class="mt-2 block text-xs">
+                    {feature.eyebrow && <span class={`font-semibold uppercase tracking-wide ${t.text}`}>{feature.eyebrow}</span>}
+                    {feature.eyebrow && feature.date && <span class="text-muted-foreground" aria-hidden="true"> · </span>}
+                    {feature.date && <span class="text-muted-foreground whitespace-nowrap">{day(feature.date)}</span>}
+                  </span>
+                )}
+                <span class:list={['mt-0.5 block text-sm font-semibold leading-snug line-clamp-2 transition-colors', here(feature.href) ? t.text : `text-foreground ${t.groupHoverText}`]}>{feature.label}</span>
+              </a>
+            )}
+            {rows.length > 0 && (
+              <div class:list={[feature && 'mt-1 border-t border-border pt-1']}>
+                {rows.map((item) => (
+                  <a href={item.href} aria-current={here(item.href) ? 'page' : undefined} class:list={[`group block px-2 py-1.5 rounded-lg hover:bg-muted transition-colors ${ring}`, here(item.href) && 'bg-muted']}>
+                    {(item.date || item.eyebrow) && (
+                      <span class="block text-xs text-muted-foreground">{[day(item.date), item.eyebrow].filter(Boolean).join(' · ')}</span>
+                    )}
+                    <span class:list={['block text-sm leading-snug line-clamp-2 transition-colors', here(item.href) ? `font-semibold ${t.text}` : `font-medium text-foreground ${t.groupHoverText}`]}>{item.label}</span>
+                  </a>
+                ))}
+              </div>
+            )}
+            <div class="mt-auto border-t border-border pt-2">
+              <NavMenuLink link={all} tone={tone} align="center" emphasis iconStyle={iconStyle} active={here(all.href)} />
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      <div class={`w-56 ${panelClass} overflow-hidden`}>
+        <div class="p-2">
+          {topics.map((link) => <NavMenuLink link={link} tone={tone} iconStyle={iconStyle} active={on(link.href)} />)}
+        </div>
+        <div class="border-t border-border p-2">
+          <NavMenuLink link={all} tone={tone} align="center" emphasis iconStyle={iconStyle} active={here(all.href)} />
+        </div>
+      </div>
+    )}
+  </NavDropdown>
+) : (
+  <MobileNavSection label={label} icon={icon} iconClass={iconClass} class={className} buttonClass={buttonClass} current={current}>
+    <MobileNavLink link={{ ...all, label: all.mobileLabel ?? all.label }} tone={tone} emphasis="semibold" active={here(all.href)} />
+    <div class={`px-4 pt-2 pb-1 ${heading}`}>{topicsHeading}</div>
+    {topics.map((link) => <MobileNavLink link={link} tone={tone} active={on(link.href)} />)}
+  </MobileNavSection>
+)}

package/src/navigation/index.ts

@@ -6,5 +6,6 @@ export { default as MobileNavSection } from './MobileNavSection.astro';
 export { default as SiteFooter } from './SiteFooter.astro';
 export { default as NavMenuLink } from './NavMenuLink.astro';
 export { default as MobileNavLink } from './MobileNavLink.astro';
+export { default as ArticlesNavMenu } from './ArticlesNavMenu.astro';
 export { isActivePath } from './activePath.ts';
-export type { SiteIdentity, NavLink, NavGroup, FooterSection, NavTone } from './types.ts';
+export type { SiteIdentity, NavLink, NavGroup, FooterSection, NavTone, ArticleNavItem, ArticlesNavProps, NavHubLink } from './types.ts';

package/src/navigation/types.ts

@@ -1,4 +1,5 @@
 // Public contracts for site chrome. Sites own every value: labels, hrefs, icons, logos and copy.
+import type { ImageMetadata } from 'astro';
 
 /** Who the site is, as the header, footer and copyright line name it. */
 export interface SiteIdentity {
@@ -31,3 +32,43 @@ export interface FooterSection {
 
 /** The colour role a navigation item is tinted with. */
 export type NavTone = 'primary' | 'secondary' | 'accent';
+
+/** A hub link ("All articles") with an optional shorter or longer label for the mobile menu. */
+export interface NavHubLink extends NavLink {
+  mobileLabel?: string;
+}
+
+/** A Latest entry of the Articles menu. The first entry becomes the feature card when it has an `image`. */
+export interface ArticleNavItem extends NavLink {
+  /** Topic label shown with the date. */
+  eyebrow?: string;
+  /** Publication date or datetime (ISO). */
+  date?: string;
+  image?: ImageMetadata;
+  imageAlt?: string;
+}
+
+export interface ArticlesNavProps {
+  variant: 'desktop' | 'mobile';
+  /** Desktop panel id. */
+  id?: string;
+  label: string;
+  icon?: string;
+  tone?: NavTone;
+  topicsHeading: string;
+  topics: NavLink[];
+  latestHeading?: string;
+  /** Newest articles, newest first; omit for the single-column menu. */
+  latest?: ArticleNavItem[];
+  all: NavHubLink;
+  iconStyle?: 'plain' | 'tile';
+  align?: 'left' | 'center' | 'right';
+  buttonClass?: string;
+  current?: boolean;
+  /** Desktop panel surface (background, border, radius, shadow). */
+  panelClass?: string;
+  /** Mobile section icon classes. */
+  iconClass?: string;
+  /** Mobile section wrapper classes. */
+  class?: string;
+}