@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/nav/fixtures.json

@@ -77,5 +77,170 @@
         }
       ]
     }
+  },
+  {
+    "name": "ps-flyout",
+    "props": {
+      "id": "fx-nav-ps",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "ps-mega",
+    "props": {
+      "id": "fx-nav-ps-mega",
+      "menu": "mega",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ]
+    }
   }
 ]

package/components/nav/meta.json

@@ -1,10 +1,11 @@
 {
   "id": "nav",
   "name": "Navigation",
-  "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. No JavaScript.",
+  "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. Submenus nest to any depth; the mega variant draws them as a column panel. Works without JavaScript; a small script (only when a menu has submenus) keeps aria-expanded true and lets Escape close a panel.",
   "category": "chrome",
   "uses": [],
   "shared": [
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {
@@ -16,6 +17,14 @@
       "default": "popover",
       "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle."
     },
+    "menu": {
+      "options": [
+        "flyout",
+        "mega"
+      ],
+      "default": "flyout",
+      "description": "How a submenu opens on wide screens: a list under the item (flyout) or a wide panel with one column per child and the grandchildren listed under it (mega)."
+    },
     "align": {
       "options": [
         "start",
@@ -107,5 +116,5 @@
       "classic/nav-menu"
     ]
   },
-  "a11y": "A <nav> landmark with a label; the current page carries aria-current. Submenus open on :focus-within as well as hover. The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
+  "a11y": "A <nav> landmark with a label; the current page carries aria-current. Each parent has a button (aria-controls its panel, labelled by the item) that opens the panel on hover and :focus-within; with the small script aria-expanded follows what is open and Escape closes the panel and returns focus to the button, as in the WAI-ARIA disclosure navigation pattern. Tab leaves a panel and closes it; nothing is hidden from crawlers (the panels are in the HTML). The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
 }

package/components/newsletter/Newsletter.astro

@@ -12,6 +12,7 @@ import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
 import type { MeasuredStyle } from '../_shared/types'
 import { newsletterForm } from './newsletter'
+import { safeUrl } from '../_shared/safe-url'
 
 const newsletter = tv({
   slots: {
@@ -91,7 +92,7 @@ const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' }
         </div>
       )}
       <div class="flex flex-col gap-2">
-        <form method="post" action={form.action} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
+        <form method="post" action={safeUrl(form.action)} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
           {askName && form.name && (
             <div class={s.field()}>
               <label for={`${id}-name`} class={s.label()}>{nameLabel}</label>

package/components/newsletter/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/pagination/Pagination.astro

@@ -3,6 +3,7 @@
 // itself for page 1, `<base>page/<n>/` after — so a migrated archive keeps
 // its page URLs.
 import { tv } from 'tailwind-variants'
+import { safeHref } from '../_shared/safe-url'
 
 const pagination = tv({
   slots: {
@@ -52,7 +53,7 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
 {total > 1 && (
   <nav aria-label={label} data-cr-part="pagination" class={slots.root()}>
     {current > 1
-      ? <a href={href(current - 1)} rel="prev" class:list={[slots.item(), slots.link()]}><span aria-hidden="true" class="inline-block rtl:-scale-x-100">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
+      ? <a href={safeHref(href(current - 1))} rel="prev" class:list={[slots.item(), slots.link()]}><span aria-hidden="true" class="inline-block rtl:-scale-x-100">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
       : style === 'simple' && <span />}
     {style === 'numbered' && shown.map((page, index) => (
       <>
@@ -60,10 +61,10 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
         {/* Two away from the current page: dropped on phones so the row fits one line. */}
         {page === current
           ? <span aria-current="page" class:list={[slots.item(), slots.current()]}><span class="sr-only">{pageLabel} </span>{page}</span>
-          : <a href={href(page)} class:list={[slots.item(), slots.link(), Math.abs(page - current) === 2 && page !== 1 && page !== total && 'max-md:hidden']}><span class="sr-only">{pageLabel} </span>{page}</a>}
+          : <a href={safeHref(href(page))} class:list={[slots.item(), slots.link(), Math.abs(page - current) === 2 && page !== 1 && page !== total && 'max-md:hidden']}><span class="sr-only">{pageLabel} </span>{page}</a>}
       </>
     ))}
     {style === 'simple' && <span class="text-sm text-ink-muted">{pageLabel} {current} / {total}</span>}
-    {current < total && <a href={href(current + 1)} rel="next" class:list={[slots.item(), slots.link()]}><span class="max-sm:sr-only">{nextLabel}</span> <span aria-hidden="true" class="inline-block rtl:-scale-x-100">→</span></a>}
+    {current < total && <a href={safeHref(href(current + 1))} rel="next" class:list={[slots.item(), slots.link()]}><span class="max-sm:sr-only">{nextLabel}</span> <span aria-hidden="true" class="inline-block rtl:-scale-x-100">→</span></a>}
   </nav>
 )}

package/components/pagination/meta.json

@@ -4,7 +4,7 @@
   "description": "Links between the pages of a post list, at WordPress addresses (<base>page/<n>/).",
   "category": "content",
   "uses": [],
-  "shared": [],
+  "shared": ["safe-url.ts"],
   "variants": {
     "style": { "options": ["numbered", "simple"], "default": "numbered", "description": "Numbered pages with ellipses, or previous/next with 'Page n / m'." },
     "align": { "options": ["start", "center", "end"], "default": "center", "description": "Alignment of the numbered style." }

package/components/post-card/PostCard.astro

@@ -7,6 +7,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'
 
 const card = tv({
   slots: {
@@ -50,6 +51,8 @@ interface Props {
   layout?: 'vertical' | 'horizontal' | 'minimal' | undefined
   surface?: 'plain' | 'card' | undefined
   byline?: 'inline' | 'below' | undefined
+  /** Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise). */
+  excerptLines?: 2 | 3 | 4 | undefined
   /** The title in the site's link colour, as themes that colour every link do (Hello Elementor). */
   linkTitle?: boolean | undefined
   /** The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give. */
@@ -60,7 +63,7 @@ interface Props {
   imageAspect?: string | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, sizes, imageHeight, imageAspect } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', 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'
@@ -77,18 +80,18 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
   <div class={slots.body()}>
     {below && category && (
       <p class={slots.meta()}>
-        <a href={category.href} class="relative z-10 no-underline hover:underline">{category.label}</a>
+        <a href={safeHref(category.href)} class="relative z-10 no-underline hover:underline">{category.label}</a>
       </p>
     )}
     {!below && (category || date) && (
       <p class={slots.meta()}>
-        {category && <a href={category.href} class="relative z-10 font-medium text-accent-text no-underline hover:underline">{category.label}</a>}
+        {category && <a href={safeHref(category.href)} class="relative z-10 font-medium text-accent-text no-underline hover:underline">{category.label}</a>}
         {category && date && <span aria-hidden="true">·</span>}
         {date && <time datetime={date.toISOString()}>{shown}</time>}
       </p>
     )}
     <Heading class={slots.title({ class: linkTitle ? 'text-[color:var(--color-link,var(--color-accent))]' : undefined })}>
-      <a href={href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{title}</a>
+      <a href={safeHref(href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{title}</a>
     </Heading>
     {below && (author || date) && (
       <p class={slots.meta()}>
@@ -97,7 +100,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
         {date && <time datetime={date.toISOString()}>{shown}</time>}
       </p>
     )}
-    {excerpt && <p class={slots.excerpt()}>{excerpt}</p>}
+    {excerpt && <p class={slots.excerpt({ class: excerptLines ? { 2: 'line-clamp-2', 3: 'line-clamp-3', 4: 'line-clamp-4' }[excerptLines] : undefined })}>{excerpt}</p>}
     {!below && author && <p class="text-sm text-ink-muted">{author}</p>}
   </div>
 </article>

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", "types.ts"],
+  "shared": ["KitImage.astro", "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." },
@@ -23,7 +23,8 @@
     "linkTitle": { "type": "boolean", "default": false, "description": "The title in the site's link colour (--color-link), as themes that colour every link do." },
     "sizes": { "type": "string", "description": "The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give." },
     "imageHeight": { "type": "string", "description": "The image block's height as the source sets it (a CSS length or clamp()), cropped to fit; wins over imageAspect." },
-    "imageAspect": { "type": "string", "description": "The image block's aspect ratio (16 / 9) where the source sets an aspect ratio; absent, 16 / 9." }
+    "imageAspect": { "type": "string", "description": "The image block's aspect ratio (16 / 9) where the source sets an aspect ratio; absent, 16 / 9." },
+    "excerptLines": { "type": "integer", "min": 2, "max": 4, "content": false, "description": "Clamp the excerpt to this many lines; absent, the layout's own (3 vertical, 2 otherwise)." }
   },
   "slots": {},
   "js": "none",

package/components/post-list/PostList.astro

@@ -0,0 +1,115 @@
+---
+// A list of posts as cards: a grid, stacked rows, a featured first post over a
+// grid, or a compact title-and-date list. The posts are the site's own — fed
+// by the Contentrain query SDK, never copied from a page — and the `show*`
+// switches decide which parts of each card the design displays.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
+import PostCard from '../post-card/PostCard.astro'
+import type { ImageInput, LinkInput } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
+
+export interface PostItem {
+  title: string
+  href: string
+  excerpt?: string | undefined
+  date?: Date | string | undefined
+  image?: ImageInput | undefined
+  category?: LinkInput | undefined
+  author?: string | undefined
+}
+
+const list = tv({
+  slots: {
+    header: 'mb-10 flex max-w-2xl flex-col gap-3',
+    heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
+    intro: 'text-lg opacity-80',
+    items: 'grid gap-8',
+    more: 'mt-10',
+  },
+  variants: {
+    layout: {
+      grid: { items: 'sm:grid-cols-2' },
+      list: { items: 'gap-6' },
+      // The first post spans the whole row, image beside text; the others fill the grid under it.
+      featured: { items: 'sm:grid-cols-2 [&>li:first-child]:sm:col-span-2' },
+      compact: { items: 'gap-4' },
+    },
+    columns: { '2': {}, '3': {}, '4': {} },
+  },
+  compoundVariants: [
+    { layout: ['grid', 'featured'], columns: '3', class: { items: 'lg:grid-cols-3 [&>li:first-child]:lg:col-span-3' } },
+    { layout: ['grid', 'featured'], columns: '4', class: { items: 'md:grid-cols-2 lg:grid-cols-4 [&>li:first-child]:lg:col-span-4' } },
+  ],
+  defaultVariants: { layout: 'grid', columns: '3' },
+})
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  posts: PostItem[]
+  layout?: 'grid' | 'list' | 'featured' | 'compact' | undefined
+  /** Cards per row on wide screens (grid and featured). */
+  columns?: '2' | '3' | '4' | undefined
+  /** Which parts of a card the design shows. */
+  showImage?: boolean | undefined
+  showExcerpt?: boolean | undefined
+  showAuthor?: boolean | undefined
+  showCategory?: boolean | undefined
+  excerptLines?: 2 | 3 | 4 | undefined
+  /** BCP 47 locale the dates are written in. */
+  locale?: 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. */
+  moreHref?: string | undefined
+  moreLabel?: string | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
+  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 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.
+const headingLevel = heading ? 3 : 2
+const sizes = layout === 'list' || layout === 'compact' ? '256px' : columns === '4' ? '(min-width: 1024px) 25vw, 50vw' : columns === '2' ? '(min-width: 640px) 50vw, 100vw' : '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw'
+// A featured first post is read as a horizontal card; the rest take the grid's vertical one.
+const cardLayout = (i: number) => layout === 'compact' ? 'minimal' : layout === 'list' || (layout === 'featured' && i === 0) ? 'horizontal' : 'vertical'
+---
+{posts.length > 0 && (
+  <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
+    {(heading || intro) && (
+      <header class={s.header()}>
+        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
+      </header>
+    )}
+    <ul class={s.items({ class: layout === 'grid' || layout === 'featured' ? measuredGrid(measured) : undefined })}>
+      {posts.map((post, i) => (
+        <li>
+          <PostCard
+            title={post.title}
+            href={safeHref(post.href)}
+            excerpt={showExcerpt && layout !== 'compact' ? post.excerpt : undefined}
+            date={post.date}
+            locale={locale}
+            image={showImage && layout !== 'compact' ? post.image : undefined}
+            category={showCategory && layout !== 'compact' ? post.category : undefined}
+            author={showAuthor && layout !== 'compact' ? post.author : undefined}
+            headingLevel={headingLevel}
+            layout={cardLayout(i)}
+            surface={surface}
+            excerptLines={excerptLines}
+            sizes={sizes}
+          />
+        </li>
+      ))}
+    </ul>
+    {moreHref && moreLabel && <p class={s.more()}><a href={safeHref(moreHref)} class="font-medium text-accent-text underline underline-offset-4">{moreLabel}</a></p>}
+  </Section>
+)}