@contentrain/astro-kit 0.3.0 → 0.4.0

package/README.md

@@ -69,6 +69,9 @@ theme applies them to the kit's markers, and only when the site sets them:
 - `--spacing-section`: the distance between two consecutive sections; each
   `[data-kit-section]` gets half of it as vertical padding, except
   where `data-kit-spacing="none"`.
+- `data-kit-brand` (the site title in Header and Footer) and `data-kit-tagline`
+  (Footer) take the theme's own sizes: the title from where it sits (body in
+  the header, a heading in the footer), the tagline from its preset.
 
 The full list is in `catalog.json` under `tokens`.
 

package/catalog.json

@@ -739,7 +739,7 @@
         },
         "copyright": {
           "type": "string",
-          "description": "Copyright line; defaults to © <year> <siteName>."
+          "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
         },
         "navLabel": {
           "type": "string",
@@ -937,6 +937,19 @@
           "required": true,
           "description": "Site title (site.title)."
         },
+        "tagline": {
+          "type": "string",
+          "description": "A line under the site name, as themes that print the tagline in the header do (site.tagline)."
+        },
+        "brandSize": {
+          "type": "string",
+          "description": "The site name's size where the source theme sets its own (a CSS length)."
+        },
+        "linkNav": {
+          "type": "boolean",
+          "default": false,
+          "description": "The navigation in the site's link colour, as themes that colour every link do."
+        },
         "logo": {
           "type": "object",
           "fields": {
@@ -1575,6 +1588,11 @@
           "max": 3,
           "default": 2,
           "description": "Title heading level in the page outline."
+        },
+        "linkTitle": {
+          "type": "boolean",
+          "default": false,
+          "description": "The title in the site's link colour (--color-link), as themes that colour every link do."
         }
       },
       "slots": {},

package/components/footer/Footer.astro

@@ -33,7 +33,7 @@ interface Props {
   /** A single row of links (the footer menu). */
   links?: LinkInput[] | undefined
   social?: LinkInput[] | undefined
-  /** The copyright line, e.g. "© 2026 Northwind Studio". */
+  /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year. */
   copyright?: string | undefined
   /** Accessible name of the footer navigation ("Footer"). */
   navLabel?: string | undefined
@@ -43,13 +43,14 @@ interface Props {
 
 const { siteName, tagline, columns = [], links = [], social = [], copyright, navLabel = 'Footer', layout = 'simple', tone } = Astro.props
 const { root, inner, muted, link } = footer({ layout, tone })
-const line = copyright ?? `© ${new Date().getFullYear()} ${siteName}`
+const year = String(new Date().getFullYear())
+const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 ---
 <footer class={root()}>
   <div class={inner()} style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
     <div class="flex flex-col gap-3">
-      <p class="text-base font-semibold">{siteName}</p>
-      {tagline && <p class={muted()}>{tagline}</p>}
+      <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
+      {tagline && <p class={muted()} data-kit-tagline>{tagline}</p>}
       {layout === 'columns' && <p class:list={[muted(), 'mt-auto pt-6']}>{line}</p>}
     </div>
     {layout === 'columns'

package/components/footer/meta.json

@@ -93,7 +93,7 @@
     },
     "copyright": {
       "type": "string",
-      "description": "Copyright line; defaults to © <year> <siteName>."
+      "description": "Copyright line; {year} is the current year. Defaults to © <year> <siteName>."
     },
     "navLabel": {
       "type": "string",

package/components/header/Header.astro

@@ -31,6 +31,12 @@ const header = tv({
 
 interface Props {
   siteName: string
+  /** A line under the site name, as themes that print the site's tagline in the header do. */
+  tagline?: string | undefined
+  /** The site name's size, where the source theme sets its own (a CSS length). */
+  brandSize?: string | undefined
+  /** The navigation in the site's link colour, as themes that colour every link do (Hello Elementor). */
+  linkNav?: boolean | undefined
   logo?: ImageInput | undefined
   /** Show the site name next to the logo. */
   showName?: boolean | undefined
@@ -45,16 +51,28 @@ interface Props {
   position?: 'static' | 'sticky' | undefined
 }
 
-const { siteName, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
+const { siteName, tagline, brandSize, linkNav, logo, showName = true, homeHref = '/', items, action, navLabel, menuLabel, closeLabel, layout, tone, position } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position })
 ---
 <header class={root()}>
   <div class={inner()}>
-    <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName}>
-      {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-      {showName && <span>{siteName}</span>}
-    </a>
-    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
+    {tagline
+      ? (
+        <div class="flex flex-col gap-1">
+          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+            {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+            {showName && <span>{siteName}</span>}
+          </a>
+          <p class="opacity-75" data-kit-tagline>{tagline}</p>
+        </div>
+      )
+      : (
+        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+          {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+          {showName && <span>{siteName}</span>}
+        </a>
+      )}
+    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto', linkNav && 'text-[color:var(--color-link,var(--color-accent))]']}>
       <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>

package/components/header/meta.json

@@ -12,6 +12,9 @@
   },
   "props": {
     "siteName": { "type": "string", "required": true, "description": "Site title (site.title)." },
+    "tagline": { "type": "string", "description": "A line under the site name, as themes that print the tagline in the header do (site.tagline)." },
+    "brandSize": { "type": "string", "description": "The site name's size where the source theme sets its own (a CSS length)." },
+    "linkNav": { "type": "boolean", "default": false, "description": "The navigation in the site's link colour, as themes that colour every link do." },
     "logo": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Logo image (site.logo)." },
     "showName": { "type": "boolean", "default": true, "description": "Show the site name next to the logo." },
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },

package/components/post-card/PostCard.astro

@@ -37,9 +37,11 @@ interface Props {
   author?: string | undefined
   headingLevel?: 2 | 3 | undefined
   layout?: 'vertical' | 'horizontal' | 'minimal' | undefined
+  /** The title in the site's link colour, as themes that colour every link do (Hello Elementor). */
+  linkTitle?: boolean | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, linkTitle } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
 const slots = card({ layout })
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
@@ -58,7 +60,7 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
         {date && <time datetime={date.toISOString()}>{date.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })}</time>}
       </p>
     )}
-    <Heading class={slots.title()}>
+    <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">{title}</a>
     </Heading>
     {excerpt && <p class={slots.excerpt()}>{excerpt}</p>}

package/components/post-card/meta.json

@@ -17,7 +17,8 @@
     "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)." },
-    "headingLevel": { "type": "integer", "min": 2, "max": 3, "default": 2, "description": "Title heading level in the page outline." }
+    "headingLevel": { "type": "integer", "min": 2, "max": 3, "default": 2, "description": "Title heading level in the page outline." },
+    "linkTitle": { "type": "boolean", "default": false, "description": "The title in the site's link colour (--color-link), as themes that colour every link do." }
   },
   "slots": {},
   "js": "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.3.0",
+  "version": "0.4.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.26.0"
+    "@contentrain/types": "1.28.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",