@contentrain/astro-kit 0.46.2 → 0.46.3

package/catalog.json

@@ -105,6 +105,7 @@
         "KitImage.astro",
         "Lines.astro",
         "Section.astro",
+        "card-image.ts",
         "image-widths.ts",
         "instance-id.ts",
         "measured.ts",
@@ -790,6 +791,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "card-image.ts",
         "image-widths.ts",
         "image.ts",
         "instance-id.ts",
@@ -5015,6 +5017,7 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "card-image.ts",
         "image-widths.ts",
         "safe-url.ts",
         "types.ts"
@@ -7824,6 +7827,7 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "card-image.ts",
         "image-widths.ts",
         "image.ts",
         "instance-id.ts",

package/components/_shared/card-image.ts

@@ -0,0 +1,13 @@
+import type { ImageInput } from './types'
+
+const spoken = (text: string): string => text.replace(/\s+/g, ' ').trim().replace(/[.:;!]+$/, '').toLowerCase()
+
+/**
+ * A card's image beside its title link: when the title's link covers the card (a stretched link) and the image's text
+ * only repeats the title, the image is drawn with an empty text, so a screen reader says the title once. The content
+ * keeps its text (Studio, image search); an image outside such a card, or with words of its own, is drawn as written.
+ */
+export function cardImage(image: ImageInput | undefined, title: string | undefined, linked: boolean): ImageInput | undefined {
+  if (!image || !linked || !image.alt || !title || spoken(image.alt) !== spoken(title)) return image
+  return { ...image, alt: '' }
+}

package/components/band/Band.astro

@@ -12,6 +12,7 @@ import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
 import { instanceId } from '../_shared/instance-id'
 import { muted } from '../_shared/muted'
+import { cardImage } from '../_shared/card-image'
 
 const band = tv({
   slots: {
@@ -134,7 +135,7 @@ const hasCopy = Boolean(heading || eyebrow || lead || actions.length)
       <ul class={s.list({ class: measuredGrid(measured) })}>
         {items.map(item => (
           <li class={s.item()}>
-            {item.media && <div class={s.itemMedia()}><KitImage image={{ src: item.media, alt: item.mediaAlt ?? '' }} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+            {item.media && <div class={s.itemMedia()}><KitImage image={cardImage({ src: item.media, alt: item.mediaAlt ?? '' }, item.title, !!item.href && !item.linkLabel)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
             {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
             {item.value && <p class={s.itemValue()}>{item.value}</p>}
             {item.title && (

package/components/band/meta.json

@@ -9,6 +9,7 @@
     "KitImage.astro",
     "Lines.astro",
     "Section.astro",
+    "card-image.ts",
     "image-widths.ts",
     "instance-id.ts",
     "measured.ts",

package/components/card-grid/CardGrid.astro

@@ -7,6 +7,7 @@ import Section, { type Tone } from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { cardImage } from '../_shared/card-image'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { safeHref } from '../_shared/safe-url'
 import { muted, mutedReset } from '../_shared/muted'
@@ -130,7 +131,7 @@ const number = (i: number) => String(i + 1).padStart(2, '0')
           {item.text ? <p class={r.text()} data-kit-text>{item.text}</p> : <span aria-hidden="true" />}
           {(imageOf(item.image, item.imageAlt) || (item.href && item.linkLabel)) && (
             <div class={r.end({ class: imageOf(item.image, item.imageAlt) ? 'md:self-start' : undefined })}>
-              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 768px) 12rem, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={cardImage(imageOf(item.image, item.imageAlt), item.title, !!item.href && !item.linkLabel)!} sizes="(min-width: 768px) 12rem, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
               {item.href && item.linkLabel && <a href={safeHref(item.href)} class={r.link()}>{item.linkLabel}</a>}
             </div>
           )}
@@ -141,7 +142,7 @@ const number = (i: number) => String(i + 1).padStart(2, '0')
     <ul class={list({ class: measuredGrid(measured) })}>
       {items.map(item => (
         <li class={card()}>
-          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={cardImage(imageOf(item.image, item.imageAlt), item.title, !!item.href && !item.linkLabel)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
           {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
           {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
           <CardHeading class={cardTitle()}>

package/components/card-grid/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "card-image.ts",
     "image-widths.ts",
     "image.ts",
     "instance-id.ts",

package/components/post-card/PostCard.astro

@@ -8,6 +8,7 @@ import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { cardImage } from '../_shared/card-image'
 
 const card = tv({
   slots: {
@@ -82,7 +83,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 <article class={slots.root()}>
   {image && layout !== 'minimal' && (
     <div class={slots.media()}>
-      <KitImage image={image} sizes={sizes ?? (layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw')} class:list={['w-full object-cover transition duration-300 group-hover:scale-[1.02]', !imageStyle && 'aspect-[16/9]']} style={imageStyle} />
+      <KitImage image={cardImage(image, title, !!href)!} sizes={sizes ?? (layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw')} class:list={['w-full object-cover transition duration-300 group-hover:scale-[1.02]', !imageStyle && 'aspect-[16/9]']} style={imageStyle} />
     </div>
   )}
   <div class={slots.body()}>

package/components/post-card/meta.json

@@ -4,7 +4,7 @@
   "description": "One post in a list (index, archive, related posts): image, category, date, title, excerpt, author. The whole card links to the post.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "image-widths.ts", "safe-url.ts", "types.ts"],
+  "shared": ["KitImage.astro", "card-image.ts", "image-widths.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["vertical", "horizontal", "minimal"], "default": "vertical", "description": "Image on top, image beside the text, or text only with a divider." },
     "surface": { "options": ["plain", "card"], "default": "plain", "description": "plain: no surface. card: its own background (--color-card), radius and shadow (--shadow-card), the text padded (--spacing-card) and the image flush at the edge, as theme cards are drawn on a tinted page." },

package/components/team/Team.astro

@@ -7,6 +7,7 @@ import Section from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { cardImage } from '../_shared/card-image'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { profile } from './team'
 import { safeHref } from '../_shared/safe-url'
@@ -109,7 +110,7 @@ const NameHeading = heading ? 'h3' : 'h2'
       {items.map(member => (
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
-          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={cardImage(imageOf(member.image, member.imageAlt ?? member.name), member.name, !!member.href)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
               ? <a href={safeHref(member.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>

package/components/team/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "card-image.ts",
     "image-widths.ts",
     "image.ts",
     "instance-id.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.46.2",
+  "version": "0.46.3",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",