@contentrain/astro-kit 0.34.3 → 0.36.0

package/catalog.json

@@ -626,6 +626,11 @@
                 "label": "Image description",
                 "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
               },
+              "icon": {
+                "type": "image",
+                "label": "Icon",
+                "description": "A small image above the title (decoration)."
+              },
               "eyebrow": {
                 "type": "string",
                 "label": "Eyebrow",
@@ -791,6 +796,7 @@
         "items[].linkLabel": "items[].link_label",
         "items[].image": "items[].image",
         "items[].imageAlt": "items[].image_alt",
+        "items[].icon": "items[].icon",
         "items[].eyebrow": "items[].eyebrow"
       }
     },
@@ -4566,6 +4572,10 @@
           "type": "string",
           "description": "Locale the date is written in (site.language)."
         },
+        "timeZone": {
+          "type": "string",
+          "description": "Time zone the date is read in (the site's: an IANA name or a ±hh:mm offset); absent, UTC."
+        },
         "image": {
           "type": "object",
           "fields": {
@@ -4804,6 +4814,11 @@
           "content": false,
           "description": "BCP 47 locale the dates are written in (site.language)."
         },
+        "timeZone": {
+          "type": "string",
+          "content": false,
+          "description": "Time zone the dates are read in (the site's: an IANA name or a ±hh:mm offset); absent, UTC."
+        },
         "surface": {
           "type": "string",
           "content": false,

package/components/card-grid/CardGrid.astro

@@ -42,6 +42,8 @@ interface Item {
   /** The image's address (or, until 0.7, an `ImageInput`). */
   image?: ImageSource | undefined
   imageAlt?: string | undefined
+  /** A small image (an icon) above the title: decoration, so it has no alt (an icon box's svg, a feature's mark). */
+  icon?: string | undefined
   eyebrow?: string | undefined
 }
 
@@ -79,6 +81,7 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
     {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>}
+        {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()}>
           {item.href && !item.linkLabel

package/components/card-grid/fixtures.json

@@ -4,5 +4,6 @@
   { "name": "four-elevated-inverse", "props": { "columns": "4", "style": "elevated", "tone": "inverse", "headingLevel": 3, "title": "Team", "items": [{ "title": "Mira Kovač", "text": "Editor", "image": { "src": "/kit-fixtures/avatar-1.svg", "alt": "Mira Kovač", "width": 96, "height": 96 } }, { "title": "Jon Ade", "text": "Engineer", "image": { "src": "/kit-fixtures/avatar-2.svg", "alt": "Jon Ade", "width": 96, "height": 96 } }, { "title": "Lea Park", "text": "Designer", "image": { "src": "/kit-fixtures/avatar-3.svg", "alt": "Lea Park", "width": 96, "height": 96 } }, { "title": "Sam Ortiz", "text": "Producer" }] } },
   { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } },
   {"name": "measured-columns", "props": {"title": "Services", "measured": {"containerPx": 1140, "padY": 80, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 30, "radius": 4, "bg": {"color": "#f4f1ea"}}, "items": [{"title": "Audits", "text": "Where a site loses readers."}, {"title": "Builds", "text": "Static and fast."}, {"title": "Hosting", "text": "Managed for you."}, {"title": "Care", "text": "Kept up to date."}]}},
+  {"name": "icon-boxes", "props": {"columns": "3", "align": "center", "items": [{"title": "Design", "text": "Layouts built around your products.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Build", "text": "Fast pages that stay fast.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Grow", "text": "Monthly reports you can read in five minutes.", "icon": "/kit-fixtures/icon-1.svg"}]}},
   {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}}
 ]

package/components/card-grid/meta.json

@@ -99,6 +99,11 @@
             "label": "Image description",
             "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
           },
+          "icon": {
+            "type": "image",
+            "label": "Icon",
+            "description": "A small image above the title (decoration)."
+          },
           "eyebrow": {
             "type": "string",
             "label": "Eyebrow",

package/components/post-card/PostCard.astro

@@ -44,6 +44,8 @@ interface Props {
   date?: Date | string | undefined
   /** BCP 47 locale the date is written in (site.language). */
   locale?: string | undefined
+  /** The time zone the date is read in (the site's, an IANA name or a `±hh:mm` offset); absent, UTC. */
+  timeZone?: string | undefined
   image?: ImageInput | undefined
   category?: LinkInput | undefined
   author?: string | undefined
@@ -63,11 +65,11 @@ interface Props {
   imageAspect?: string | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, excerptLines, sizes, imageHeight, imageAspect } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', timeZone = 'UTC', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, excerptLines, sizes, imageHeight, imageAspect } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
 const slots = card({ layout, surface, byline })
 const below = byline === 'below'
-const shown = date?.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })
+const shown = date?.toLocaleDateString(locale, { dateStyle: 'long', timeZone })
 const imageStyle = imageHeight ? `height:${imageHeight}` : imageAspect ? `aspect-ratio:${imageAspect}` : undefined
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---

package/components/post-card/meta.json

@@ -16,6 +16,7 @@
     "excerpt": { "type": "text", "description": "Summary (posts.excerpt)." },
     "date": { "type": "datetime", "description": "Publication date (posts.published_at)." },
     "locale": { "type": "string", "description": "Locale the date is written in (site.language)." },
+    "timeZone": { "type": "string", "description": "Time zone the date is read in (the site's: an IANA name or a ±hh:mm offset); absent, UTC." },
     "image": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Cover (posts.cover → media)." },
     "category": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } }, "description": "Primary category and its archive." },
     "author": { "type": "string", "description": "Author name (posts.author → authors.name)." },

package/components/post-list/PostList.astro

@@ -61,6 +61,8 @@ interface Props {
   excerptLines?: 2 | 3 | 4 | undefined
   /** BCP 47 locale the dates are written in. */
   locale?: string | undefined
+  /** The time zone the dates are read in (the site's: an IANA name or a `±hh:mm` offset); absent, UTC. */
+  timeZone?: string | undefined
   /** Card surface: none, or each post its own card. */
   surface?: 'plain' | 'card' | undefined
   /** Where the full archive lives; with `moreLabel` a link follows the list. */
@@ -72,7 +74,7 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, intro, posts, layout = 'grid', columns, showImage = true, showExcerpt = true, showAuthor = true, showCategory = true, excerptLines, locale, surface, moreHref, moreLabel, tone, measured, id = 'posts' } = Astro.props
+const { heading, intro, posts, layout = 'grid', columns, showImage = true, showExcerpt = true, showAuthor = true, showCategory = true, excerptLines, locale, timeZone, surface, moreHref, moreLabel, tone, measured, id = 'posts' } = Astro.props
 const s = list({ layout, columns })
 const headingId = heading ? `${id}-title` : undefined
 // Cards sit one heading level under the section's; with no section heading they are the page's h2s.
@@ -98,6 +100,7 @@ const cardLayout = (i: number) => layout === 'compact' ? 'minimal' : layout ===
             excerpt={showExcerpt && layout !== 'compact' ? post.excerpt : undefined}
             date={post.date}
             locale={locale}
+            timeZone={timeZone}
             image={showImage && layout !== 'compact' ? post.image : undefined}
             category={showCategory && layout !== 'compact' ? post.category : undefined}
             author={showAuthor && layout !== 'compact' ? post.author : undefined}

package/components/post-list/meta.json

@@ -141,6 +141,11 @@
       "content": false,
       "description": "BCP 47 locale the dates are written in (site.language)."
     },
+    "timeZone": {
+      "type": "string",
+      "content": false,
+      "description": "Time zone the dates are read in (the site's: an IANA name or a ±hh:mm offset); absent, UTC."
+    },
     "surface": {
       "type": "string",
       "content": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.34.3",
+  "version": "0.36.0",
   "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",