@yatoday/astro-ui 0.10.2 → 0.11.0

package/components/Breadcrumbs/Breadcrumbs.astro

@@ -3,7 +3,7 @@ import type { BreadcrumbsProps as Props } from './types';
 
 import { Icon } from 'astro-icon/components';
 
-const { class: classNames = 'text-gray-600 dark:text-gray-400', ariaLabel = 'Breadcrumbs', items = [] } = Astro.props;
+const { class: classNames = '', ariaLabel = 'Breadcrumbs', items = [] } = Astro.props;
 ---
 
 <nav class:list={['breadcrumbs', classNames]} aria-label={ariaLabel}>

package/components/Card0/Card0.astro

@@ -1,12 +1,23 @@
 ---
-import type { Card0Props as Props } from './types';
-import { twMerge } from 'tailwind-merge';
+import type {Card0Props as Props} from './types';
+import {twMerge} from 'tailwind-merge';
 
-const { badge, as = 'article', classes = {} } = Astro.props;
+const {
+  badge,
+  badgeTopRight,
+  badgeBottomRight,
+  badgeBottomLeft,
+  as = 'article',
+  classes = {}
+} = Astro.props;
 
 const WrapperTag = as;
 
-const { container: containerClass = '', badge: badgeClass = 'top-2 left-2' } = classes;
+const {
+  container: containerClass = '',
+  badge: badgeClass = '',
+  badgeTopRight: badgeTopRightClass = '',
+} = classes;
 ---
 
 <WrapperTag
@@ -15,13 +26,25 @@ const { container: containerClass = '', badge: badgeClass = 'top-2 left-2' } = c
     containerClass
   )}
 >
-  <div class={twMerge('absolute z-10', badgeClass)}>
-    <slot name="badge">
-      {badge && <span set:html={badge} />}
-    </slot>
-  </div>
+  <!-- Default badge -->
+  {(Astro.slots.has('badge') || badge) && (
+    <div class={twMerge('absolute z-10 top-2 left-2', badgeClass)}>
+      <slot name="badge">
+        {badge && <span set:html={badge}/>}
+      </slot>
+    </div>
+  )}
+
+  {(Astro.slots.has('badgeTopRight') || badgeTopRight) && (
+    <div class={twMerge('absolute z-10 top-2 right-2', badgeTopRightClass)}>
+      <slot name="badgeTopRight">
+        {badgeTopRight && <span set:html={badgeTopRight}/>}
+      </slot>
+    </div>
+  )}
+  
 
-  <slot name="image" />
+  <slot name="image"/>
 
-  <slot />
+  <slot/>
 </WrapperTag>

package/components/Card0/types.ts

@@ -9,5 +9,8 @@ export type Card0Props = {
   content?: string;
   ['as']?: HTMLTag;
   badge?: string;
+  badgeTopRight?: string;
+  badgeBottomRight?: string;
+  badgeBottomLeft?: string;
   classes?: Record<string, string>;
 };

package/components/Card1/Card1.astro

@@ -19,6 +19,9 @@ const {
   as = 'article',
   asHeader = 'h3',
   badge = await Astro.slots.render('badge'),
+  badgeTopRight = await Astro.slots.render('badgeTopRight'),
+  badgeBottomRight = await Astro.slots.render('badgeBottomRight'),
+  badgeBottomLeft = await Astro.slots.render('badgeBottomLeft'),
 } = Astro.props;
 
 const WrapperHeaderTag = asHeader;
@@ -27,10 +30,14 @@ const {
   title: titleClass = '',
   description: descriptionClass = 'text-muted-foreground',
   image: imageClass = '',
+  imageLayout: imageLayout = 'cover',
   icon: iconClass = '',
   quickLink: quickLinkClass = 'font-semibold underline text-primary hover:text-primary/80',
   action: actionClass = '',
-} = classes;
+} = classes as {
+  // Ensure imageLayout is typed as the Layout union, not just string
+  imageLayout?: 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+} & Record<string, string>;
 
 const urlForImage = Array.isArray(callToAction)
   ? typeof callToAction[0] === 'string'
@@ -44,14 +51,36 @@ const urlForImage = Array.isArray(callToAction)
 <Card0
   as={as}
   badge={badge}
+  badgeTopRight={badgeTopRight}
+  badgeBottomRight={badgeBottomRight}
+  badgeBottomLeft={badgeBottomLeft}
   classes={{
     content: 'space-y-6',
+    badge: classes?.badge,
+    badgeTopRight: classes?.badgeTopRight,
   }}
 >
   <Fragment slot="image">
     {
       image && (
-        <div class={twMerge('w-full overflow-hidden -mt-6 h-60 bg-gray-400 dark:bg-zinc-700', imageClass)}>
+        <div class={twMerge('relative w-full overflow-hidden -mt-6 h-60 bg-gray-400 dark:bg-zinc-700', imageClass)}>
+
+          {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
+            <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
+              <slot name="badgeBottomRight">
+                {badgeBottomRight && <span set:html={badgeBottomRight}/>}
+              </slot>
+            </div>
+          )}
+
+          {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
+            <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
+              <slot name="badgeBottomLeft">
+                {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
+              </slot>
+            </div>
+          )}
+          
           {urlForImage ? (
             <a href={urlForImage} class="group">
               {typeof image === 'string' ? (
@@ -63,7 +92,7 @@ const urlForImage = Array.isArray(callToAction)
                   width={400}
                   height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  layout="cover"
+                  layout={imageLayout}
                   loading="lazy"
                   decoding="async"
                   {...image}
@@ -81,7 +110,7 @@ const urlForImage = Array.isArray(callToAction)
                   width={400}
                   height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  layout="cover"
+                  layout={imageLayout}
                   loading="lazy"
                   decoding="async"
                   {...image}

package/components/Card2/Card2.astro

@@ -17,6 +17,9 @@ const {
   as = 'article',
   asHeader = 'h3',
   badge = await Astro.slots.render('badge'),
+  badgeTopRight = await Astro.slots.render('badgeTopRight'),
+  badgeBottomRight = await Astro.slots.render('badgeBottomRight'),
+  badgeBottomLeft = await Astro.slots.render('badgeBottomLeft'),
 } = Astro.props;
 
 const WrapperHeaderTag = asHeader;
@@ -27,23 +30,48 @@ const {
   content: contentClass = 'text-muted-foreground',
   icon: iconClass = '',
   image: imageClass = '',
+  imageLayout: imageLayout = 'cover',
   badge: badgeClass = 'top-2 left-2',
-} = classes;
+} = classes as {
+  // Ensure imageLayout is typed as the Layout union, not just string
+  imageLayout?: 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+} & Record<string, string>;
 ---
 
 <Card0
   as={as}
   badge={badge}
+  badgeTopRight={badgeTopRight}
+  badgeBottomRight={badgeBottomRight}
+  badgeBottomLeft={badgeBottomLeft}
   classes={{
     container: cn('group', containerClass),
     badge: badgeClass,
+    badgeTopRight: classes?.badgeTopRight,
   }}
 >
   <!-- Image -->
   <Fragment slot="image">
     {
       image && (
-        <div class={twMerge('w-full overflow-hidden -mt-6 h-40 bg-gray-400 dark:bg-zinc-700', imageClass)}>
+        <div class={twMerge('relative w-full overflow-hidden -mt-6 h-40 bg-gray-400 dark:bg-zinc-700', imageClass)}>
+          
+          {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
+            <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
+              <slot name="badgeBottomRight">
+                {badgeBottomRight && <span set:html={badgeBottomRight}/>}
+              </slot>
+            </div>
+          )}
+
+          {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
+            <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
+              <slot name="badgeBottomLeft">
+                {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
+              </slot>
+            </div>
+          )}
+          
           {typeof image === 'string' ? (
             <Fragment set:html={image} />
           ) : (
@@ -57,7 +85,7 @@ const {
               width={400}
               height={400}
               sizes="(max-width: 900px) 400px, 900px"
-              layout="cover"
+              layout={imageLayout}
               loading="lazy"
               decoding="async"
               {...image}

package/components/Card3/Card3.astro

@@ -15,6 +15,9 @@ const {
   as = 'article',
   asHeader = 'h3',
   badge = await Astro.slots.render('badge'),
+  badgeTopRight = await Astro.slots.render('badgeTopRight'),
+  badgeBottomRight = await Astro.slots.render('badgeBottomRight'),
+  badgeBottomLeft = await Astro.slots.render('badgeBottomLeft'),
 } = Astro.props;
 
 const WrapperHeaderTag = asHeader;
@@ -24,9 +27,13 @@ const {
   title: titleClass = '',
   description: descriptionClass = 'text-muted-foreground',
   image: imageClass = '',
+  imageLayout: imageLayout = 'cover',
   action: actionClass = '',
   badge: badgeClass = 'top-2 left-2',
-} = classes;
+} = classes as {
+  // Ensure imageLayout is typed as the Layout union, not just string
+  imageLayout?: 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+} & Record<string, string>;
 
 const urlForImage = Array.isArray(callToAction)
   ? typeof callToAction[0] === 'string'
@@ -40,17 +47,39 @@ const urlForImage = Array.isArray(callToAction)
 <Card0
   as={as}
   badge={badge}
+  badgeTopRight={badgeTopRight}
+  badgeBottomRight={badgeBottomRight}
+  badgeBottomLeft={badgeBottomLeft}
   classes={{
     container: twMerge(containerClass, 'justify-start py-0'),
     badge: badgeClass,
+    badgeTopRight: classes?.badgeTopRight,
   }}
 >
   <Fragment slot="image">
     {
       image && (
         <div
-          class={twMerge('w-full aspect-square overflow-hidden rounded-lg bg-gray-400 dark:bg-zinc-700', imageClass)}
+          class={twMerge('relative w-full aspect-square overflow-hidden rounded-lg bg-gray-400 dark:bg-zinc-700', imageClass)}
         >
+
+          {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
+            <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
+              <slot name="badgeBottomRight">
+                {badgeBottomRight && <span set:html={badgeBottomRight}/>}
+              </slot>
+            </div>
+          )}
+
+          {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
+            <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
+              <slot name="badgeBottomLeft">
+                {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
+              </slot>
+            </div>
+          )}
+
+          
           {urlForImage ? (
             <a href={urlForImage} class="group">
               {typeof image === 'string' ? (
@@ -62,7 +91,7 @@ const urlForImage = Array.isArray(callToAction)
                   width={400}
                   height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  layout="cover"
+                  layout={imageLayout}
                   loading="lazy"
                   decoding="async"
                   {...image}
@@ -80,7 +109,7 @@ const urlForImage = Array.isArray(callToAction)
                   width={400}
                   height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  layout="cover"
+                  layout={imageLayout}
                   loading="lazy"
                   decoding="async"
                   {...image}

package/components/Card6/Card6.astro

@@ -15,6 +15,9 @@ const {
   as = 'article',
   asHeader = 'h3',
   badge = await Astro.slots.render('badge'),
+  badgeTopRight = await Astro.slots.render('badgeTopRight'),
+  badgeBottomRight = await Astro.slots.render('badgeBottomRight'),
+  badgeBottomLeft = await Astro.slots.render('badgeBottomLeft'),
   widths = [800, 1600],
   size = 800,
   sizes = '(max-width: 1600px) 800px, 1600px'
@@ -28,9 +31,13 @@ const {
   title: titleClass = '',
   description: descriptionClass = '',
   image: imageClass = '',
+  imageLayout: imageLayout = 'cover',
   badge: badgeClass = 'top-2 left-2',
   aspect: aspectClass = 'pb-[100%]',
-} = classes;
+} = classes as {
+  // Ensure imageLayout is typed as the Layout union, not just string
+  imageLayout?: 'fixed' | 'constrained' | 'fullWidth' | 'cover' | 'responsive' | 'contained';
+} & Record<string, string>;
 
 const urlForImage = Array.isArray(callToAction)
   ? typeof callToAction[0] === 'string'
@@ -45,9 +52,13 @@ const LinkWrapperTag = urlForImage ? 'a' : 'div';
 
 <Card0
   as={as}
+  badgeTopRight={badgeTopRight}
+  badgeBottomRight={badgeBottomRight}
+  badgeBottomLeft={badgeBottomLeft}
   classes={{
     container: cn('relative h-full bg-gray-200 dark:bg-zinc-700 border-transparent text-inherit justify-start py-0 @container', containerClass),
     badge: badgeClass,
+    badgeTopRight: classes?.badgeTopRight,
   }}
 >
   <!-- Content & link -->
@@ -55,6 +66,22 @@ const LinkWrapperTag = urlForImage ? 'a' : 'div';
     <div class={cn("p-6 @2xl:p-10 pt-8 @2xl:pt-12", contentClass, !image && 'bg-transparent')}>
       {badge && (
         <div class="" set:html={badge}></div>)}
+      
+      {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
+        <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
+          <slot name="badgeBottomRight">
+            {badgeBottomRight && <span set:html={badgeBottomRight}/>}
+          </slot>
+        </div>
+      )}
+
+      {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
+        <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
+          <slot name="badgeBottomLeft">
+            {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
+          </slot>
+        </div>
+      )}
 
       <WrapperHeaderTag
         class={cn('font-bold text-lg @lg:text-xl @2xl:text-2xl ', urlForImage && 'group-hover:underline', titleClass)}>
@@ -102,7 +129,7 @@ const LinkWrapperTag = urlForImage ? 'a' : 'div';
               width={size}
               height={size}
               sizes={sizes}
-              layout="cover"
+              layout={imageLayout}
               loading="lazy"
               decoding="async"
               {...image}

package/components/Card7/Card7.astro

@@ -33,14 +33,16 @@ const {
 >
   <div class="flex items-center relative">
     <div class={cn("flex flex-col gap-3 justify-between h-full p-4 ", callToAction && 'border-r dark:border-white/10 border-black/10')}>
-      {callToAction ? (
+
+      {title && (callToAction ? (
         <a href={callToAction.href} class="flex items-center">
           <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>
           <span class="absolute inset-0" aria-hidden="true"></span>
         </a>
       ) : (
         <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>
-      )}
+      ))}
+      
       {description && (
         <p class={cn('text-muted-foreground text-sm/5 md:text-base', descriptionClass)} set:html={description}/>
       )}

package/components/WidgetContent/WidgetContent.astro

@@ -91,7 +91,6 @@ const {
                   height={500}
                   widths={[400, 768]}
                   sizes="(max-width: 768px) 100vw, 432px"
-                  layout="responsive"
                   {...image}
                 />
               )}

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -24,7 +24,7 @@ const {
   ...rest
 } = Astro.props;
 
-const images = await fetchLocalImages();
+const images = await fetchLocalImages() as Record<string, () => any>;
 const imagePaths = Object.keys(images).filter((imagePath) => {
   return imagePath.startsWith(`/src/assets/images/${imagesFolder}/`);
 });
@@ -61,16 +61,15 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
                 data-pswp-width={optimizedImage.attributes.width}
                 data-pswp-height={optimizedImage.attributes.height}
                 target="_blank"
-                class="group overflow-hidden rounded-md border-primary cursor-zoom-in block"
+                class="group overflow-hidden rounded-md border-primary cursor-zoom-in block aspect-square"
               >
                 <AstroImage
                   src={image}
                   alt={'altText'}
                   widths={[400, 900]}
                   width={400}
-                  height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  class="aspect-square w-full md:h-full group-hover:scale-105 transition duration-300"
+                  class="object-cover object-top w-full md:h-full group-hover:scale-105 transition duration-300"
                 />
               </a>
             </swiper-slide>

package/index.d.ts

@@ -1,4 +1,7 @@
 // Utility Types
+import type {HTMLAttributes} from "astro/types";
+import type {ImageMetadata} from "astro";
+
 export type ClassValue = ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;
 export type ClassDictionary = Record<string, any>;
 export type ClassArray = ClassValue[];
@@ -47,6 +50,23 @@ export type Image = {
   alt?: string;
   aspectRatio?: string;
   class?: string;
+} & Omit<HTMLAttributes<'img'>, 'src'> & {
+  src?: string | ImageMetadata | null;
+  width?: string | number | null;
+  height?: string | number | null;
+  alt?: string | null;
+  loading?: 'eager' | 'lazy' | null;
+  decoding?: 'sync' | 'async' | 'auto' | null;
+  class?: string;
+  style?: string;
+  srcset?: string | null;
+  sizes?: string | null;
+  fetchpriority?: 'high' | 'low' | 'auto' | null;
+  layout?: Layout;
+  widths?: number[] | null;
+  aspectRatio?: string | number | null;
+  objectPosition?: string;
+  format?: string;
 };
 
 export type Testimonial = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",

package/styles/styles.css

@@ -7,10 +7,13 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
+    --color-red-700: oklch(0.505 0.213 27.518);
     --color-orange-300: oklch(0.837 0.128 66.29);
+    --color-amber-500: oklch(0.769 0.188 70.08);
     --color-green-600: oklch(0.627 0.194 149.214);
     --color-green-700: oklch(0.527 0.154 150.069);
     --color-emerald-200: oklch(0.905 0.093 164.15);
+    --color-blue-700: oklch(0.488 0.243 264.376);
     --color-violet-500: oklch(0.606 0.25 292.717);
     --color-purple-500: oklch(0.627 0.265 303.9);
     --color-purple-800: oklch(0.438 0.218 303.724);
@@ -312,12 +315,18 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
   .-left-5 {
     left: calc(var(--spacing) * -5);
   }
@@ -580,9 +589,15 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -1386,6 +1401,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-amber-500 {
+    color: var(--color-amber-500);
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -1395,6 +1413,9 @@
   .text-black\/70 {
     color: color-mix(in oklab, var(--color-black) 70%, transparent);
   }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
   .text-gray-50 {
     color: var(--color-gray-50);
   }
@@ -1404,9 +1425,6 @@
   .text-gray-500 {
     color: var(--color-gray-500);
   }
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
@@ -1419,6 +1437,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-slate-800 {
     color: var(--color-slate-800);
   }

package/vendor-config/.env.example

@@ -0,0 +1,53 @@
+# Example Environment Variables for vendor-config Integration
+# Copy this to your project root as .env.development, .env.production, etc.
+
+# Site Configuration
+SITE_NAME="My Website"
+SITE_URL="https://example.com"
+SITE_TITLE="My Awesome Site"
+SITE_DESCRIPTION="A comprehensive website built with Astro"
+BASE_PATH="/"
+
+# SEO & Verification
+GOOGLE_SITE_VERIFICATION=""
+ROBOTS_INDEX=true
+ROBOTS_FOLLOW=true
+
+# Social Media
+TWITTER_HANDLE="@myhandle"
+TWITTER_SITE="@myhandle"
+OG_SITE_NAME="My Website"
+
+# Internationalization
+LANG="en"
+TEXT_DIRECTION="ltr"
+
+# Blog Configuration
+BLOG_ENABLED=true
+POSTS_PER_PAGE=6
+BLOG_POST_INDEX=true
+RELATED_POSTS_ENABLED=true
+RELATED_POSTS_COUNT=4
+
+# Analytics
+GA_ID=""  # e.g., "G-XXXXXXXXXX"
+
+# UI Settings
+UI_THEME="system"  # Options: system | light | dark | light:only | dark:only
+
+# Example: Development Environment
+# SITE_URL="http://localhost:4321"
+# SITE_NAME="My Website (Dev)"
+# GA_ID=""  # Disable analytics in development
+# ROBOTS_INDEX=false  # Don't index development site
+
+# Example: Staging Environment
+# SITE_URL="https://staging.example.com"
+# SITE_NAME="My Website (Staging)"
+# ROBOTS_INDEX=false  # Don't index staging site
+
+# Example: Production Environment
+# SITE_URL="https://example.com"
+# SITE_NAME="My Website"
+# GA_ID="G-XXXXXXXXXX"
+# ROBOTS_INDEX=true

package/vendor-config/README.md

@@ -0,0 +1,301 @@
+# Vendor Config Integration
+
+A custom Astro integration that loads YAML configuration files and provides them as a virtual module with native environment variable support.
+
+## Features
+
+- **YAML Configuration Loading**: Load configuration from `.yaml` or `.yml` files
+- **Environment Variable Interpolation**: Native support for environment variables with default values
+- **Virtual Module**: Access configuration via `vendor:config` import
+- **Auto-generated TypeScript Definitions**: Type-safe configuration access
+- **Hot Reload**: Automatic reload on configuration file changes during development
+- **robots.txt Integration**: Automatically updates robots.txt with sitemap reference
+
+## Installation
+
+This integration is built-in to `@yatoday/astro-ui`. To use it in your Astro project:
+
+```javascript
+// astro.config.mjs
+import vendorConfig from '@yatoday/astro-ui/vendor-config';
+
+export default defineConfig({
+  integrations: [
+    vendorConfig({
+      config: 'src/config.yaml' // Path to your config file
+    })
+  ]
+});
+```
+
+## Environment Variable Support
+
+The integration natively supports environment variable interpolation in YAML configuration files using the `${VAR:default}` syntax.
+
+### Syntax
+
+- **With default value**: `${VAR_NAME:default_value}`
+- **Without default**: `${VAR_NAME}`
+
+### Behavior
+
+1. If the environment variable is set, its value is used
+2. If the environment variable is not set and a default is provided, the default is used
+3. If the environment variable is not set and no default is provided, the placeholder remains unchanged
+
+### Examples
+
+#### Example 1: Basic Usage
+
+**config.yaml**:
+```yaml
+site:
+  name: 'My Site'
+  url: '${SITE_URL:https://example.com}'
+  api_key: '${API_KEY}'
+```
+
+**With environment variables set**:
+```bash
+SITE_URL=https://prod.example.com
+API_KEY=secret123
+```
+
+**Result**:
+```javascript
+{
+  site: {
+    name: 'My Site',
+    url: 'https://prod.example.com',
+    api_key: 'secret123'
+  }
+}
+```
+
+**Without environment variables**:
+```javascript
+{
+  site: {
+    name: 'My Site',
+    url: 'https://example.com',  // Uses default
+    api_key: '${API_KEY}'         // Placeholder preserved
+  }
+}
+```
+
+#### Example 2: Multi-Environment Setup
+
+**config.yaml**:
+```yaml
+site:
+  site: '${SITE_URL:https://localhost:3000}'
+  base: '${BASE_PATH:/}'
+
+metadata:
+  title:
+    default: '${SITE_NAME:My App}'
+
+analytics:
+  vendors:
+    googleAnalytics:
+      id: '${GA_ID:}'
+```
+
+**Development (.env.development)**:
+```bash
+SITE_URL=http://localhost:4321
+BASE_PATH=/
+SITE_NAME=My App (Dev)
+# GA_ID not set - uses empty default
+```
+
+**Production (environment variables)**:
+```bash
+SITE_URL=https://production.example.com
+BASE_PATH=/app
+SITE_NAME=My Production App
+GA_ID=G-XXXXXXXXXX
+```
+
+#### Example 3: Numeric and Boolean Values
+
+**config.yaml**:
+```yaml
+config:
+  # Unquoted values will be parsed as their YAML type
+  timeout: ${TIMEOUT:5000}           # Number
+  max_retries: ${MAX_RETRIES:3}      # Number
+  debug: ${DEBUG:false}              # Boolean
+  enabled: ${ENABLED:true}           # Boolean
+
+  # Quoted values remain as strings
+  port: '${PORT:3000}'               # String
+```
+
+#### Example 4: Complex URLs with Colons
+
+**config.yaml**:
+```yaml
+api:
+  # Colons in default values are handled correctly
+  endpoint: '${API_ENDPOINT:https://api.example.com:8080/v1}'
+  websocket: '${WS_URL:wss://ws.example.com:9000/socket}'
+```
+
+#### Example 5: Composed Values
+
+**config.yaml**:
+```yaml
+site:
+  protocol: '${PROTOCOL:https}'
+  host: '${HOST:example.com}'
+  port: '${PORT:443}'
+
+  # Combine multiple environment variables
+  full_url: '${PROTOCOL}://${HOST}:${PORT}'
+```
+
+### Variable Naming Rules
+
+Environment variable names must:
+- Start with an uppercase letter or underscore (`A-Z`, `_`)
+- Contain only uppercase letters, numbers, or underscores (`A-Z`, `0-9`, `_`)
+
+**Valid**: `SITE_URL`, `API_KEY`, `_INTERNAL_VAR`, `CONFIG_V2`
+
+**Invalid**: `siteUrl`, `api-key`, `123VAR`
+
+## Usage in Your Code
+
+Once the integration is configured, import the configuration in your Astro components or pages:
+
+```astro
+---
+import { SITE, METADATA, ANALYTICS } from 'vendor:config';
+---
+
+<head>
+  <title>{METADATA.title.default}</title>
+  <meta name="description" content={METADATA.description} />
+  <link rel="canonical" href={SITE.site} />
+</head>
+```
+
+## Configuration Structure
+
+The integration expects a YAML file with the following optional sections:
+
+```yaml
+site:
+  site: string          # Main site URL
+  base: string          # Base path for deployment
+  trailingSlash: boolean
+
+metadata:
+  title:
+    default: string
+    template: string
+  description: string
+  robots:
+    index: boolean
+    follow: boolean
+  openGraph: { ... }
+  twitter: { ... }
+
+i18n:
+  language: string
+  textDirection: string
+
+apps:
+  blog:
+    isEnabled: boolean
+    postsPerPage: number
+    # ... blog configuration
+
+analytics:
+  vendors:
+    googleAnalytics:
+      id: string | null
+
+ui:
+  theme: string         # 'system' | 'light' | 'dark' | 'light:only' | 'dark:only'
+```
+
+## Advanced: Passing Configuration Directly
+
+You can also pass configuration as a JavaScript object instead of a file path:
+
+```javascript
+// astro.config.mjs
+export default defineConfig({
+  integrations: [
+    vendorConfig({
+      config: {
+        site: {
+          name: 'My Site',
+          site: 'https://example.com'
+        }
+      }
+    })
+  ]
+});
+```
+
+Note: Environment variable interpolation only works with YAML files, not with direct object configuration.
+
+## Benefits Over Manual Preprocessing
+
+This native implementation offers several advantages:
+
+1. **No Build Scripts Required**: Environment variables are processed automatically during the Astro build
+2. **Hot Reload Support**: Configuration changes (including env var updates) are reflected immediately during development
+3. **Type Safety**: Auto-generated TypeScript definitions provide intellisense and type checking
+4. **Standard Syntax**: Uses familiar `${VAR:default}` syntax common in many configuration systems
+5. **Clean Integration**: Works seamlessly with Astro's build pipeline
+
+## Migration from Prebuild Scripts
+
+If you're currently using a prebuild script for environment variable substitution:
+
+1. **Remove** your prebuild script from `package.json`
+2. **Update** your `config.yaml` to use the `${VAR:default}` syntax
+3. **Rebuild** your project - environment variables will be processed automatically
+
+**Before** (with prebuild script):
+```json
+{
+  "scripts": {
+    "prebuild": "node scripts/process-env-vars.js",
+    "build": "astro build"
+  }
+}
+```
+
+**After** (native support):
+```json
+{
+  "scripts": {
+    "build": "astro build"
+  }
+}
+```
+
+## Troubleshooting
+
+### Environment variable not being replaced
+
+1. **Check variable name format**: Must be uppercase with underscores (e.g., `SITE_URL`, not `siteUrl`)
+2. **Verify quotes**: YAML strings should be quoted: `'${VAR:default}'`
+3. **Check environment**: Ensure the variable is set in your environment or deployment platform
+
+### Type mismatch errors
+
+- YAML parses unquoted values according to type
+- Use quotes for string values: `'${PORT:3000}'` → string `'3000'`
+- Omit quotes for numbers/booleans: `${PORT:3000}` → number `3000`
+
+### Default value with colons not working
+
+- The integration correctly handles colons in default values
+- Example: `${URL:https://example.com:8080}` works correctly
+- Always quote URLs to prevent YAML parsing issues: `'${URL:https://example.com:8080}'`

package/vendor-config/config.example.yaml

@@ -0,0 +1,105 @@
+# Example configuration file demonstrating environment variable support
+# Copy this to your project and rename to config.yaml
+
+# Site Configuration
+# Use environment variables for deployment-specific values
+site:
+  name: '${SITE_NAME:My Website}'
+  site: '${SITE_URL:https://example.com}'
+  base: '${BASE_PATH:/}'
+  trailingSlash: false
+
+  # Google Site Verification (optional)
+  googleSiteVerificationId: '${GOOGLE_SITE_VERIFICATION:}'
+
+# SEO Metadata
+# Environment variables useful for different environments (dev/staging/prod)
+metadata:
+  title:
+    default: '${SITE_TITLE:Example Website}'
+    template: '%s — ${SITE_TITLE:Example Website}'
+  description: '${SITE_DESCRIPTION:This is the default meta description}'
+
+  robots:
+    # Disable indexing in non-production environments
+    index: ${ROBOTS_INDEX:true}
+    follow: ${ROBOTS_FOLLOW:true}
+
+  openGraph:
+    site_name: '${OG_SITE_NAME:Example}'
+    images:
+      - url: '~/assets/images/default.png'
+        width: 1200
+        height: 628
+    type: website
+
+  twitter:
+    handle: '${TWITTER_HANDLE:@twitter_user}'
+    site: '${TWITTER_SITE:@twitter_user}'
+    cardType: summary_large_image
+
+# Internationalization
+i18n:
+  language: '${LANG:en}'
+  textDirection: '${TEXT_DIRECTION:ltr}'
+
+# Application Features
+apps:
+  blog:
+    isEnabled: ${BLOG_ENABLED:true}
+    postsPerPage: ${POSTS_PER_PAGE:6}
+
+    post:
+      isEnabled: true
+      permalink: '/blog/%slug%'
+      robots:
+        index: ${BLOG_POST_INDEX:true}
+
+    list:
+      isEnabled: true
+      pathname: 'blog'
+      robots:
+        index: true
+
+    category:
+      isEnabled: true
+      pathname: 'category'
+      robots:
+        index: true
+
+    tag:
+      isEnabled: true
+      pathname: 'tag'
+      robots:
+        index: false
+
+    isRelatedPostsEnabled: ${RELATED_POSTS_ENABLED:true}
+    relatedPostsCount: ${RELATED_POSTS_COUNT:4}
+
+# Analytics Configuration
+# Use environment variables for API keys and tracking IDs
+analytics:
+  vendors:
+    googleAnalytics:
+      # Use empty string as default to disable when not set
+      id: '${GA_ID:}'
+
+# UI Configuration
+ui:
+  # Options: 'system' | 'light' | 'dark' | 'light:only' | 'dark:only'
+  theme: '${UI_THEME:system}'
+
+# Example: Custom API Configuration
+# (Add this section if your application needs external APIs)
+# api:
+#   baseUrl: '${API_BASE_URL:https://api.example.com}'
+#   timeout: ${API_TIMEOUT:5000}
+#   retries: ${API_RETRIES:3}
+#   apiKey: '${API_KEY:}'
+
+# Example: Feature Flags
+# (Add this section for feature toggles)
+# features:
+#   beta: ${FEATURE_BETA:false}
+#   experimental: ${FEATURE_EXPERIMENTAL:false}
+#   maintenance: ${MAINTENANCE_MODE:false}

package/vendor-config/utils/__tests__/loadConfig.test.ts

@@ -0,0 +1,209 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import loadConfig from '../loadConfig';
+
+describe('loadConfig - Environment Variable Interpolation', () => {
+  let tmpDir: string;
+  let configPath: string;
+
+  beforeEach(() => {
+    // Create a temporary directory for test files
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'vendor-config-test-'));
+    configPath = path.join(tmpDir, 'test-config.yaml');
+  });
+
+  afterEach(() => {
+    // Clean up temporary files
+    if (fs.existsSync(tmpDir)) {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it('should replace environment variables with their values', async () => {
+    process.env.TEST_SITE_URL = 'https://prod.example.com';
+    process.env.TEST_API_KEY = 'secret123';
+
+    const yamlContent = `
+site:
+  url: '\${TEST_SITE_URL}'
+  api_key: '\${TEST_API_KEY}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        url: 'https://prod.example.com',
+        api_key: 'secret123',
+      },
+    });
+
+    delete process.env.TEST_SITE_URL;
+    delete process.env.TEST_API_KEY;
+  });
+
+  it('should use default values when environment variables are not set', async () => {
+    const yamlContent = `
+site:
+  url: '\${UNDEFINED_VAR:https://default.example.com}'
+  port: '\${UNDEFINED_PORT:3000}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        url: 'https://default.example.com',
+        port: '3000',
+      },
+    });
+  });
+
+  it('should prefer environment variable over default value', async () => {
+    process.env.TEST_WITH_DEFAULT = 'from-env';
+
+    const yamlContent = `
+site:
+  value: '\${TEST_WITH_DEFAULT:default-value}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        value: 'from-env',
+      },
+    });
+
+    delete process.env.TEST_WITH_DEFAULT;
+  });
+
+  it('should keep placeholder when env var is not set and no default provided', async () => {
+    const yamlContent = `
+site:
+  value: '\${UNDEFINED_NO_DEFAULT}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        value: '${UNDEFINED_NO_DEFAULT}',
+      },
+    });
+  });
+
+  it('should handle multiple environment variables in the same file', async () => {
+    process.env.TEST_HOST = 'example.com';
+    process.env.TEST_PROTOCOL = 'https';
+    process.env.TEST_PORT = '8080';
+
+    const yamlContent = `
+site:
+  protocol: '\${TEST_PROTOCOL:http}'
+  host: '\${TEST_HOST:localhost}'
+  port: '\${TEST_PORT:3000}'
+  base_url: '\${TEST_PROTOCOL}://\${TEST_HOST}:\${TEST_PORT}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        protocol: 'https',
+        host: 'example.com',
+        port: '8080',
+        base_url: 'https://example.com:8080',
+      },
+    });
+
+    delete process.env.TEST_HOST;
+    delete process.env.TEST_PROTOCOL;
+    delete process.env.TEST_PORT;
+  });
+
+  it('should handle numeric values from environment variables', async () => {
+    process.env.TEST_TIMEOUT = '5000';
+    process.env.TEST_MAX_RETRIES = '3';
+
+    const yamlContent = `
+config:
+  timeout: \${TEST_TIMEOUT:3000}
+  max_retries: \${TEST_MAX_RETRIES:5}
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    // YAML will parse unquoted numbers as numbers
+    expect(config).toEqual({
+      config: {
+        timeout: 5000,
+        max_retries: 3,
+      },
+    });
+
+    delete process.env.TEST_TIMEOUT;
+    delete process.env.TEST_MAX_RETRIES;
+  });
+
+  it('should handle boolean-like values from environment variables', async () => {
+    process.env.TEST_ENABLED = 'true';
+    process.env.TEST_DEBUG = 'false';
+
+    const yamlContent = `
+config:
+  enabled: \${TEST_ENABLED:false}
+  debug: \${TEST_DEBUG:true}
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    // YAML will parse unquoted booleans as booleans
+    expect(config).toEqual({
+      config: {
+        enabled: true,
+        debug: false,
+      },
+    });
+
+    delete process.env.TEST_ENABLED;
+    delete process.env.TEST_DEBUG;
+  });
+
+  it('should work with object config passed directly', async () => {
+    const configObj = {
+      site: {
+        url: 'https://example.com',
+      },
+    };
+
+    const config = await loadConfig(configObj);
+
+    expect(config).toEqual(configObj);
+  });
+
+  it('should handle colons in default values correctly', async () => {
+    const yamlContent = `
+site:
+  url: '\${UNDEFINED_URL:https://example.com:8080/path}'
+`;
+
+    fs.writeFileSync(configPath, yamlContent, 'utf8');
+    const config = await loadConfig(configPath);
+
+    expect(config).toEqual({
+      site: {
+        url: 'https://example.com:8080/path',
+      },
+    });
+  });
+});

package/vendor-config/utils/loadConfig.ts

@@ -1,12 +1,54 @@
 import yaml from 'js-yaml';
 import fs from 'node:fs';
 
+/**
+ * Interpolates environment variables in a string.
+ * Supports patterns: ${VAR} and ${VAR:default}
+ *
+ * @param content - String content to process
+ * @returns String with environment variables replaced
+ *
+ * @example
+ * // With env var set: SITE_URL=https://prod.example.com
+ * interpolateEnvVars('${SITE_URL:https://example.com}')
+ * // Returns: 'https://prod.example.com'
+ *
+ * // Without env var set:
+ * interpolateEnvVars('${SITE_URL:https://example.com}')
+ * // Returns: 'https://example.com'
+ */
+const interpolateEnvVars = (content: string): string => {
+  return content.replace(
+    /\$\{([A-Z_][A-Z0-9_]*):?([^}]*)\}/g,
+    (match, varName, defaultValue) => {
+      const envValue = process.env[varName];
+
+      // If env var exists, use it
+      if (envValue !== undefined) {
+        return envValue;
+      }
+
+      // If default value provided, use it
+      if (defaultValue !== '') {
+        return defaultValue;
+      }
+
+      // Otherwise, keep the original placeholder
+      return match;
+    }
+  );
+};
+
 const loadConfig = async (configPathOrData: string | object) => {
   if (typeof configPathOrData === 'string') {
-    const content = fs.readFileSync(configPathOrData, 'utf8');
+    let content = fs.readFileSync(configPathOrData, 'utf8');
+
     if (configPathOrData.endsWith('.yaml') || configPathOrData.endsWith('.yml')) {
+      // Interpolate environment variables before parsing YAML
+      content = interpolateEnvVars(content);
       return yaml.load(content);
     }
+
     return content;
   }