@sarimarcus/content-sites-ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.11.0 (2026-10-01)
+
+- New `EntityCard` in `./composed`: the card frame (link, image or fallback, corner overlay, body, footer meta and CTA slots) shared by the tourism Hotel and Activity cards (SLA-2739).
+
 ## 0.10.0 (2026-09-30)
 
 - New `./composed`: `TableOfContents` (+ `miniLinkClass`, opt-in `hideMiniPastLastSection`), `CardCarousel` (active dot from `--carousel-dot`), `QuickFacts` (link colours as roles, `labelSizeClass`), `FAQ` and `InlineImage` (rendered HTML in, via `TrustedHtml`; markdown stays in the site), `Pagination` (`href(page)` builder). Controllers are bundled modules, initialised once per instance. `./types`: `TrustedHtml`, `trustedHtml()`, `textAsHtml()` (SLA-2732).

package/package.json

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

package/src/composed/EntityCard.astro

@@ -0,0 +1,110 @@
+---
+/**
+ * EntityCard — the shared frame of an entity teaser card: a whole-card link with a focus ring, an image block
+ * (optimized Picture, or a fallback img), a content area and a footer row. Everything that varies between card types
+ * comes in through slots, so the frame owns no copy and no data shape.
+ *
+ * Variants:
+ *   media  — fixed-height image, the name heading sits in the body (hotel, lodge).
+ *   poster — 3:2 image, the name heading is overlaid on the image through the `overlay` slot (activity, tour).
+ *
+ * Slots:
+ *   overlay     — inside the image block, after the image: corner badges, gradient scrims, an overlaid heading.
+ *   (default)   — the body above the footer.
+ *   footer-meta — start of the footer row (location, closing time…).
+ *   footer-cta  — end of the footer row.
+ */
+import { Picture } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+type ImageFormat = 'avif' | 'webp' | 'png' | 'jpeg' | 'jpg' | 'svg';
+
+interface Props {
+  href: string;
+  variant?: 'media' | 'poster';
+  image?: ImageMetadata;
+  /** Shown when `image` is absent. */
+  fallbackSrc: string;
+  imageAlt: string;
+  formats?: ImageFormat[];
+  /** Position in the list: the first three load eagerly, the first one at high priority. */
+  index?: number;
+  class?: string;
+}
+
+const {
+  href,
+  variant = 'media',
+  image,
+  fallbackSrc,
+  imageAlt,
+  formats = ['avif', 'webp'],
+  index = 999,
+  class: className,
+} = Astro.props;
+
+const poster = variant === 'poster';
+const linkClass = poster
+  ? 'flex flex-col h-full focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl'
+  : 'flex flex-col flex-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl';
+const mediaClass = poster
+  ? 'relative aspect-[3/2] overflow-hidden img-placeholder shrink-0'
+  : 'relative h-44 sm:h-52 overflow-hidden img-placeholder shrink-0';
+const fallbackWidth = poster ? '400' : '320';
+const fallbackHeight = poster ? '224' : '192';
+const contentClass = poster ? 'p-4 sm:p-5 flex flex-col flex-1' : 'flex-1 p-4 sm:p-5 flex flex-col';
+const footerClass = poster
+  ? 'flex items-center justify-between pt-3 border-t border-border mt-auto'
+  : 'flex items-center justify-between pt-3 border-t border-border';
+---
+
+<article class:list={['group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full', className]}>
+  <a href={href} class={linkClass}>
+    <div class={mediaClass}>
+      {image ? (
+        <Picture
+          src={image}
+          alt={imageAlt}
+          widths={[240, 320, 400, 480, 640]}
+          sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
+          formats={formats}
+          fallbackFormat="webp"
+          pictureAttributes={{ class: 'block w-full h-full' }}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={index < 3 ? "eager" : "lazy"}
+          fetchpriority={index === 0 ? "high" : undefined}
+          decoding="async"
+        />
+      ) : (
+        <img
+          src={fallbackSrc}
+          alt={imageAlt}
+          width={fallbackWidth}
+          height={fallbackHeight}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={index < 3 ? "eager" : "lazy"}
+          fetchpriority={index === 0 ? "high" : undefined}
+          decoding="async"
+        />
+      )}
+
+      <slot name="overlay" />
+    </div>
+
+    <div class={contentClass}>
+      {poster ? (
+        <slot />
+      ) : (
+        <div class="flex-1">
+          <slot />
+        </div>
+      )}
+
+      <div class={footerClass}>
+        <slot name="footer-meta" />
+
+        <slot name="footer-cta" />
+      </div>
+    </div>
+  </a>
+</article>

package/src/composed/index.ts

@@ -5,3 +5,4 @@ export { default as QuickFacts } from './QuickFacts.astro';
 export { default as FAQ } from './FAQ.astro';
 export { default as InlineImage } from './InlineImage.astro';
 export { default as Pagination } from './Pagination.astro';
+export { default as EntityCard } from './EntityCard.astro';