@sarimarcus/content-sites-ui 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.27.0 (2026-10-05)
+
+- `./editorial`: `ArticleTopicPage`, the body of an article topic hub (`/articles/topic/<category>`) and its paginated pages, promoted from the tourism sites' identical route copies. Strings, the overview and the author cards are props; the blocks a site renders through its own adapters (start-here, grid, pagination, go-deeper, places, faq) are slots. A page above 1 renders only the topic nav, grid and pagination. Also `rankByCount` and type `TopicAuthorCard`. Proven on both tourism sites: their topic routes rewritten onto it render every page byte-identical (SLA-2975).
+
 ## 0.26.0 (2026-10-05)
 
 - `./affiliate`: `AffiliateCardSection` and `AmazonProductSection` render through one band shell and grid table; `AffiliateCard` and `AmazonProductCard` share their link, body, CTA and badge classes; `TravelpayoutsWidget` renders one widget body for both variants and takes `WidgetKind`. Output is unchanged (SLA-2921).

package/README.md

@@ -99,6 +99,11 @@ prose stay in the route so the site's link and outbound-domain scanners still se
   `cta` box. Carries no Pagefind body.
 - `NotFoundPage`: the 404 body; the route passes `noindex` to Layout and imports `@sarimarcus/content-sites-ui/not-found.css`.
 - `ArticlesListingPage` / `ArticleFeatureCard`: article index, topic hubs and their paginated pages.
+- `ArticleTopicPage`: the body of `/articles/topic/<category>` and its paginated pages, around the topic nav. Blocks
+  the site renders through its own adapters arrive as slots: `start-here`, `grid`, `pagination`, `go-deeper`,
+  `places`, `faq` (wrapped in a measure column only when filled), plus `breadcrumb`, `header-extra` and
+  `overview-byline`. The overview and the author cards are props. A page above 1 renders only the nav, grid and
+  pagination. `rankByCount` ranks a topic's authors or collections by article count.
 - `ListingShell`: listing hubs (breadcrumb, `hero`, `before-main`, Container'd `<main>`, `after-main`), one outer
   `data-pagefind-ignore`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.26.0",
+  "version": "0.27.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.26.0"
+    "@sarimarcus/content-sites-core": "0.27.0"
   }
 }

package/src/composed/index.ts

@@ -9,5 +9,4 @@ export { default as EntityCard } from './EntityCard.astro';
 export { default as ArrowLinkGrid } from './ArrowLinkGrid.astro';
 // RelatedContent sits here, not in ./editorial: it renders CardCarousel, whose <style> ships to every importer of the barrel.
 export { default as RelatedContent } from './RelatedContent.astro';
-export { default as RelatedContentCard } from './RelatedContentCard.astro';
-export type { RelatedItem, RelatedTone } from './related';
+export { default as RelatedContentCard } from './RelatedContentCard.astro';export type { RelatedItem, RelatedTone } from './related';

package/src/editorial/ArticleTopicPage.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * ArticleTopicPage — an article topic hub (/articles/topic/<category>) or one of its paginated pages, inside
+ * ArticlesListingPage. The route keeps paths, data, SEO, schema and the site Layout; every string arrives as a prop.
+ * Blocks the site renders through its own adapters (cards, related content, FAQ, pagination) arrive as slots, so its
+ * markdown, colour and URL rules still apply. A page above 1 renders only the topic nav, the grid and pagination.
+ * Slots:
+ *   breadcrumb      — the site Breadcrumb.
+ *   header-extra    — a line under the lede (e.g. the article count). Page 1 only.
+ *   start-here      — the site's related-content block above the overview. Page 1 only.
+ *   overview-byline — the overview byline, under its heading.
+ *   grid            — the site's article card grid for this page.
+ *   pagination      — the site's pagination.
+ *   go-deeper, places — related-content blocks after the list. Page 1 only.
+ *   faq             — the site's FAQ, in a measure column. Page 1 only.
+ */
+import Container from '../layout/Container.astro';
+import Callout from '../primitives/Callout.astro';
+import type { TrustedHtml } from '../types';
+import ArticlesListingPage from './ArticlesListingPage.astro';
+import ArticleCategoryNav from './ArticleCategoryNav.astro';
+import type { ArticleCategoryMeta, TopicAuthorCard } from './types';
+
+interface Props {
+  eyebrow: string;
+  heading: string;
+  lede: string;
+  /** Every article, for the topic nav's counts. */
+  articles: readonly { data: { category?: string | null } }[];
+  categories: Readonly<Record<string, ArticleCategoryMeta>>;
+  category: string;
+  /** Page 1 is the hub; a later page carries only the nav, grid and pagination. */
+  currentPage: number;
+  /** Heading over the page-1 list. */
+  listHeading?: string;
+  overview?: { heading: string; html: TrustedHtml; guide?: { title: string; lead: string; href: string; linkLabel: string } };
+  authors?: { heading: string; items: TopicAuthorCard[] };
+}
+
+const { eyebrow, heading, lede, articles, categories, category, currentPage, listHeading, overview, authors } = 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() : '';
+---
+
+{hub ? (
+  <ArticlesListingPage eyebrow={eyebrow} heading={heading} lede={lede} pagefindBody>
+    <slot name="breadcrumb" slot="breadcrumb" />
+    <slot name="header-extra" slot="header-extra" />
+    <Container>
+      <ArticleCategoryNav articles={articles} categories={categories} current={category} class="mb-12" />
+      <slot name="start-here" /></Container>
+
+    {overview && (
+      <section id="overview" class="mb-14">
+        <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} />
+          {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>
+            </Callout>
+          )}
+        </Container>
+      </section>
+    )}
+
+    <Container>
+      <section id="all-articles">
+        {listHeading && <h2 class="text-2xl sm:text-3xl font-normal font-display text-foreground mb-6">{listHeading}</h2>}
+        <slot name="grid" />
+        <slot name="pagination" />
+      </section>
+      <slot name="go-deeper" /><slot name="places" /></Container>
+
+    {faqHtml && (
+      <Container size="measure" class="mt-16">
+        <Fragment set:html={faqHtml} />
+      </Container>
+    )}
+
+    {authors && authors.items.length > 0 && (
+      <Container class="mt-16">
+        <section id="authors" aria-labelledby="topic-authors-heading">
+          <h2 id="topic-authors-heading" class="text-xl font-semibold font-display text-foreground mb-5">{authors.heading}</h2>
+          <div class="grid gap-4 sm:grid-cols-3">
+            {authors.items.map((a) => (
+              <a href={a.href} class="block rounded-xl border border-border bg-card p-5 hover:border-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50">
+                <span class="block font-semibold text-foreground">{a.name}</span>
+                <span class="mt-1 block text-xs text-muted-foreground">{a.countLabel}</span>
+                {a.credentials && <span class="mt-2 block text-sm text-muted-foreground line-clamp-3">{a.credentials}</span>}
+              </a>
+            ))}
+          </div>
+        </section>
+      </Container>
+    )}
+  </ArticlesListingPage>
+) : (
+  <ArticlesListingPage eyebrow={eyebrow} heading={heading} lede={lede}>
+    <slot name="breadcrumb" slot="breadcrumb" />
+    <Container>
+      <ArticleCategoryNav articles={articles} categories={categories} current={category} class="mb-10" />
+      <slot name="grid" />
+      <slot name="pagination" />
+    </Container>
+  </ArticlesListingPage>
+)}

package/src/editorial/index.ts

@@ -13,7 +13,9 @@ export { default as AuthorCard } from './AuthorCard.astro';
 export { default as ArticleCard } from './ArticleCard.astro';
 export { default as ArticleGrid } from './ArticleGrid.astro';
 export { default as ArticleCategoryNav } from './ArticleCategoryNav.astro';
-export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta } from './types';
+export { default as ArticleTopicPage } from './ArticleTopicPage.astro';
+export { rankByCount } from './topic';
+export type { AuthorSummary, ArticleSummary, KeyFact, SourceItem, ArticleCategoryLink, ArticleCategoryMeta, TopicAuthorCard } 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/topic.ts

@@ -0,0 +1,9 @@
+/**
+ * The keys that occur most often, with their counts, most frequent first. Ties keep first-seen order, so a topic hub
+ * ranks its authors or themed collections the same way on every build.
+ */
+export function rankByCount(keys: Iterable<string>, limit: number): [string, number][] {
+  const counts = new Map<string, number>();
+  for (const key of keys) counts.set(key, (counts.get(key) ?? 0) + 1);
+  return [...counts].sort((a, b) => b[1] - a[1]).slice(0, limit);
+}

package/src/editorial/types.ts

@@ -42,6 +42,14 @@ export interface ArticleCategoryMeta {
   icon?: string;
 }
 
+/** One author card at the foot of an article topic hub. */
+export interface TopicAuthorCard {
+  href: string;
+  name: string;
+  countLabel: string;
+  credentials?: string;
+}
+
 /** One category chip in an article topic nav. */
 export interface ArticleCategoryLink {
   href: string;