@sarimarcus/content-sites-ui 0.33.0 → 0.34.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.34.0 (2026-10-12)
+
+- `ContentHero` joins `@sarimarcus/content-sites-ui/layout` (SLA-3041): full-bleed image hero with a themed gradient, title, description and the `badges`, `subtitle`, `info`, `actions` and `decoration` slots. A slot's wrapper is emitted only when the slot rendered content, so an adapter can forward every slot unconditionally. `themeGradients` overlays per-site gradients on the built-in map, `imageTitle` sets the image's title attribute, and colours use the `overlay` / `overlay-foreground` roles. Additive: no existing export changes.
+
 ## 0.33.0 (2026-10-12)
 
 - `./composed` exports the `TableOfContentsItem` type; no markup change (SLA-3043). 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.33.0",
+  "version": "0.34.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.33.0"
+    "@sarimarcus/content-sites-core": "0.34.0"
   }
 }

package/src/layout/ContentHero.astro

@@ -0,0 +1,161 @@
+---
+/**
+ * ContentHero — full-bleed image hero with a themed gradient, title, description and four optional slots
+ * (badges, subtitle, info, actions) plus an absolutely positioned `decoration` layer.
+ *
+ * A slot's wrapper is emitted only when the slot rendered something, so an adapter can always forward
+ * `<Fragment slot="x"><slot name="x" /></Fragment>` without checking whether its own caller filled it
+ * (Astro.slots.has() is true for a slot whose expression evaluated to false).
+ */
+import { ResponsivePicture } from '../primitives/index.ts';
+
+interface Props {
+  title: string;
+  description?: string;
+  image?: ImageMetadata;
+  imageFallback?: string;
+  imagePlaceholder?: string;
+  imageAlt?: string;
+  /** HTML title attribute of the hero image (tooltip / image SEO). */
+  imageTitle?: string;
+  /** Unknown names fall back to `dark` (`stone` and `nature` are such names on Granada). */
+  theme?: string;
+  /** Per-theme gradient classes layered over the built-in map, for a site whose theme looks differ. */
+  themeGradients?: Record<string, string>;
+  overlay?: 'themed' | 'editorial';
+  minHeight?: 'short' | 'medium' | 'tall';
+  class?: string;
+}
+
+const {
+  title,
+  description,
+  image,
+  imageFallback,
+  imagePlaceholder,
+  imageAlt = title,
+  imageTitle,
+  theme = 'dark',
+  themeGradients: themeOverrides,
+  overlay = 'themed',
+  minHeight = 'medium',
+  class: className,
+} = Astro.props;
+
+const baseGradients: Record<string, string> = {
+  dark: 'bg-gradient-to-t from-overlay via-overlay/60 to-transparent',
+  warm: 'bg-gradient-to-t from-overlay/90 via-primary/70 to-transparent',
+  azulejo: 'bg-gradient-to-b from-overlay/95 via-secondary/85 to-secondary-strong/90',
+  nebula: 'bg-gradient-to-b from-overlay/95 via-secondary/85 to-secondary-strong/90',
+  aurora: 'bg-gradient-to-b from-accent/90 via-primary/85 to-primary/95',
+  terracotta: 'bg-gradient-to-t from-primary-strong/90 via-primary/40 to-transparent',
+  gold: 'bg-gradient-to-t from-overlay/90 via-accent/60 to-transparent',
+  summer: 'bg-gradient-to-b from-orange-600/85 via-red-600/75 to-red-700/80',
+  autumn: 'bg-gradient-to-b from-amber-700/85 via-orange-700/80 to-orange-800/90',
+  winter: 'bg-gradient-to-b from-slate-700/85 via-blue-800/80 to-blue-900/90',
+  spring: 'bg-gradient-to-b from-green-600/85 via-emerald-600/80 to-emerald-700/90',
+};
+const themeGradients = { ...baseGradients, ...themeOverrides };
+
+const heightClasses: Record<string, string> = {
+  short: 'min-h-[350px] sm:min-h-[400px] lg:min-h-[450px]',
+  medium: 'min-h-[450px] sm:min-h-[500px] lg:min-h-[550px]',
+  tall: 'min-h-[550px] sm:min-h-[600px] lg:min-h-[650px]',
+};
+
+const gradientClass = themeGradients[theme] || themeGradients.dark;
+const heightClass = heightClasses[minHeight] || heightClasses.medium;
+
+const slotHtml = async (name: string) => (Astro.slots.has(name) ? (await Astro.slots.render(name)).trim() : '');
+const [badges, subtitle, info, actions, decoration] = await Promise.all(
+  ['badges', 'subtitle', 'info', 'actions', 'decoration'].map(slotHtml),
+);
+---
+
+<section class:list={['relative flex items-end overflow-hidden', heightClass, className]}>
+  <div class="absolute inset-0 overflow-hidden">
+    {image ? (
+      <ResponsivePicture
+        src={image}
+        alt={imageAlt}
+        title={imageTitle}
+        sizes="100vw"
+        quality={70}
+        class="w-full h-full object-cover object-center"
+        pictureAttributes={{
+          class: 'absolute inset-0'
+        }}
+        loading="eager"
+        fetchpriority="high"
+      />
+    ) : imageFallback ? (
+      <img
+        src={imageFallback}
+        alt={imageAlt}
+        width={1920}
+        height={1080}
+        class="absolute inset-0 w-full h-full object-cover object-center"
+        loading="eager"
+        fetchpriority="high"
+        onerror={imagePlaceholder ? `this.src='${imagePlaceholder}'` : undefined}
+      />
+    ) : imagePlaceholder ? (
+      <img
+        src={imagePlaceholder}
+        alt={imageAlt}
+        width={1920}
+        height={1080}
+        class="absolute inset-0 w-full h-full object-cover object-center"
+        loading="eager"
+        fetchpriority="high"
+      />
+    ) : null}
+    {overlay === 'editorial' ? (
+      <>
+        <div class="absolute inset-0 bg-overlay/10"></div>
+        <div class="absolute inset-0 bg-gradient-to-r from-overlay/80 via-overlay/30 to-transparent"></div>
+        <div class="absolute inset-0 bg-gradient-to-t from-overlay/55 via-transparent to-transparent"></div>
+      </>
+    ) : (
+      <div class:list={['absolute inset-0', gradientClass]}></div>
+    )}
+  </div>
+
+  {decoration && <Fragment set:html={decoration} />}
+
+  <div class="relative z-10 w-full pt-8 lg:pt-12 pb-8 lg:pb-16">
+    <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8">
+      <div class="max-w-measure mx-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.75)]">
+        {badges && <div class="flex flex-wrap gap-2 mb-4" set:html={badges} />}
+
+        <h1
+          class:list={[
+            'font-medium text-overlay-foreground leading-[1.08] mb-4 font-display',
+            overlay === 'editorial'
+              ? 'max-w-[22ch] text-[1.75rem] sm:max-w-[20ch] sm:text-4xl lg:max-w-[19ch] lg:text-5xl xl:text-6xl'
+              : 'max-w-[18ch] text-3xl sm:text-4xl lg:text-5xl xl:text-6xl',
+          ]}
+        >
+          {title}
+        </h1>
+
+        {subtitle && <div class="mb-4" set:html={subtitle} />}
+
+        {description && (
+          <p class:list={[
+            'text-overlay-foreground/85 leading-relaxed max-w-deck',
+            overlay === 'editorial'
+              ? 'text-sm sm:text-lg lg:text-xl line-clamp-2 sm:line-clamp-none'
+              : 'text-lg sm:text-xl mb-8',
+          ]}>
+            {description}
+          </p>
+        )}
+
+        {info && <div class="flex flex-wrap gap-3" set:html={info} />}
+
+        {actions && <div class="mt-5 flex flex-wrap gap-3" set:html={actions} />}
+      </div>
+    </div>
+  </div>
+</section>

package/src/layout/index.ts

@@ -1,5 +1,6 @@
 // Public surface of @sarimarcus/content-sites-ui/layout.
 export { default as Container } from './Container.astro';
+export { default as ContentHero } from './ContentHero.astro';
 export { default as BreadcrumbBand } from './BreadcrumbBand.astro';
 export { default as ListingShell } from './ListingShell.astro';
 export { default as EntityDetailShell } from './EntityDetailShell.astro';