@contentrain/astro-kit 0.34.2 → 0.35.0

package/catalog.json

@@ -4566,6 +4566,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 +4808,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/_shared/KitImage.astro

@@ -42,8 +42,14 @@ const image: ImageInput = { ...(measured ? { ...given, ...measured } : given), s
 const loading = priority ? 'eager' : 'lazy'
 const fetchpriority = priority ? 'high' : 'auto'
 const path = image.src.startsWith('/') && !image.src.startsWith('//') ? image.src.split(/[?#]/)[0]! : undefined
+// Under Astro's `base` (a site served from `/blog/`) public/ is served in that directory: a root address is the file's
+// path in public/, printed in the directory. An address already in it is not put there twice.
+const base = (import.meta.env.BASE_URL ?? '/').replace(/\/+$/, '')
+const inBase = (at: string) => base !== '' && (at === base || at.startsWith(`${base}/`))
+const filePath = path !== undefined && inBase(path) ? path.slice(base.length) : path
+const shown = path !== undefined && base !== '' && !inBase(path) ? `${base}${image.src}` : url
 // A malformed escape (`%E0%A4%A`) is no file in public/: the image stays a plain <img> rather than failing the build.
-const decoded = (() => { try { return path === undefined ? undefined : decodeURI(path) } catch { return undefined } })()
+const decoded = (() => { try { return filePath === undefined ? undefined : decodeURI(filePath) } catch { return undefined } })()
 const load = decoded === undefined ? undefined : LOCAL[`/public${decoded}`]
 const local = load ? await load() : undefined
 // The stored size (WordPress's chosen size of the file), else the file's own.
@@ -57,5 +63,5 @@ const widthsUpTo = (max: number) => [...STEPS.filter(step => step < max), max]
   ? <Image src={local} alt={image.alt ?? ''} {...size} widths={widthsUpTo(image.width ?? local.width)} sizes={sizes} class={className} style={style} loading={loading} fetchpriority={fetchpriority} />
   : image.width && image.height && path === undefined
     ? <Image src={url} alt={image.alt ?? ''} width={image.width} height={image.height} widths={widthsUpTo(image.width)} sizes={sizes} class={className} style={style} loading={loading} fetchpriority={fetchpriority} />
-    : <img src={url} alt={image.alt ?? ''} width={image.width} height={image.height} class={className} style={style} loading={loading} fetchpriority={fetchpriority} decoding="async" />
+    : <img src={safeSrc(shown)} alt={image.alt ?? ''} width={image.width} height={image.height} class={className} style={style} loading={loading} fetchpriority={fetchpriority} decoding="async" />
 )}

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/components/slider/SliderTrack.astro

@@ -14,7 +14,8 @@ import { type ActionInput, type ImageInput, type MeasuredStyle } from '../_share
 
 const slider = tv({
   slots: {
-    viewport: 'flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth group-data-[ready]:snap-none group-data-[ready]:overflow-hidden [scrollbar-width:none] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    // A block viewport around the flex row, as Embla's own markup has it: the row is the container Embla moves.
+    viewport: 'snap-x snap-mandatory overflow-x-auto scroll-smooth group-data-[ready]:snap-none group-data-[ready]:overflow-hidden [scrollbar-width:none] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
     slide: 'relative min-w-0 shrink-0 snap-start overflow-hidden',
     image: 'w-full object-cover',
     caption: 'flex flex-col items-start gap-2',
@@ -140,6 +141,7 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
     const prev = root.querySelector<HTMLButtonElement>('[data-prev]')
     const next = root.querySelector<HTMLButtonElement>('[data-next]')
     const dots = root.querySelector<HTMLElement>('[data-dots]')
+    const track = root.querySelector<HTMLElement>('[data-container]')
     prev?.addEventListener('click', () => embla.scrollPrev())
     next?.addEventListener('click', () => embla.scrollNext())
     // The row takes focus (the buttons are hidden on phones): the arrow keys page it, and a slide change is announced.
@@ -150,10 +152,13 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
       else embla.scrollPrev()
     })
     // No autoplay: the carousel only moves when asked, so a polite announcement of the slide is right.
-    root.querySelector('[data-container]')?.setAttribute('aria-live', 'polite')
+    track?.setAttribute('aria-live', 'polite')
 
     const label = root.dataset.slideLabel ?? 'Slide'
-    const buttons = embla.scrollSnapList().map((_, index) => {
+    // One dot per snap, drawn again whenever Embla measures again: the snaps of a carousel set up before its page was
+    // laid out (a background tab, a frame sized later) are not the ones it ends up with.
+    let buttons: HTMLButtonElement[] = []
+    const drawDots = () => { buttons = embla.scrollSnapList().map((_, index) => {
       const dot = document.createElement('button')
       dot.type = 'button'
       // A 24px target around a 10px dot (WCAG 2.5.8): on phones the dots are the only controls.
@@ -163,16 +168,27 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
       dot.append(mark)
       dot.setAttribute('aria-label', `${label} ${index + 1}`)
       dot.addEventListener('click', () => embla.scrollTo(index))
-      dots?.append(dot)
       return dot
     })
+    dots?.replaceChildren(...buttons) }
+    drawDots()
     const sync = () => {
       const selected = embla.selectedScrollSnap()
       buttons.forEach((dot, index) => dot.setAttribute('aria-current', String(index === selected)))
       if (prev) prev.disabled = !embla.canScrollPrev()
       if (next) next.disabled = !embla.canScrollNext()
     }
-    embla.on('select', sync).on('reInit', sync)
+    embla.on('select', sync).on('reInit', () => { drawDots(); sync() })
     sync()
+    // Set up before the layout was final, Embla measures once more when it is: the page loaded, its fonts in, the tab in
+    // view. A background tab lays nothing out (ctrl/cmd-click), so its carousel had one snap and a dead "next" until then;
+    // Embla's own resize watch does not fire there, since nothing changed size while the tab was hidden. Only a carousel
+    // whose row overflows while Embla can page neither way is measured again: one that already pages is left where it is.
+    const measure = () => {
+      if (track && track.scrollWidth > viewport.clientWidth + 1 && !embla.canScrollNext() && !embla.canScrollPrev()) embla.reInit()
+    }
+    if (document.readyState !== 'complete') addEventListener('load', measure, { once: true })
+    void document.fonts?.ready.then(measure)
+    document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') measure() })
   }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.34.2",
+  "version": "0.35.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",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.63.0"
+    "@contentrain/types": "1.63.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",