### Install Dependencies and Run Development Server

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Installs project dependencies using npm and starts the development server for the Astrowind project. This command is typically run after initial setup.

```bash
npm install
npm run dev
```

--------------------------------

### Run Astrowind Client Setup Scripts

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Executes the setup scripts for the Astrowind client. It provides commands for both Linux/Mac (bash) and Windows (powershell) environments.

```bash
# On Linux/Mac
bash .github/scripts/setup-client.sh
```

```powershell
# On Windows
powershell .github/scripts/setup-client.ps1
```

--------------------------------

### Install and Run AstroWind Project

Source: https://github.com/nightsquawk/astrowind/blob/main/README.md

This snippet guides users through cloning the repository, installing dependencies, setting up environment variables, and starting the development server. It requires Node.js 18.0.0+ and npm 9.0.0+.

```bash
git clone https://github.com/NightSquawk/astrowind.git
cd astrowind
npm install
cp .env.example .env
# Edit .env with your configuration
npm run dev
```

--------------------------------

### Astro Component Usage Example

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Demonstrates how to import and use UI components like 'Button' and 'Features' within an Astro file. This shows basic component integration.

```astro
---
import Button from '~/components/ui/Button.astro';
import Features from '~/components/widgets/Features.astro';
---

<Button variant="primary" href="/signup">Get Started</Button>

<Features 
  title="Why Choose Us"
  items={[...]} 
/>
```

--------------------------------

### Install and Run AstroWind Development Server

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Installs project dependencies and starts the development server for AstroWind. It's the primary command for local development and testing.

```bash
npm install
npm run dev
npm run start
```

--------------------------------

### Client Setup Script (Shell)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Executes a setup script to customize the project for a new client. This script is located in the `.github/scripts/` directory and is available for both Linux/macOS (shell) and Windows (.ps1).

```shell
# Run on Linux/macOS
.github/scripts/setup-client.sh
```

```powershell
# Run on Windows
.github/scripts/setup-client.ps1
```

--------------------------------

### Clone Astrowind Template Repository

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Clones the Astrowind template repository to a specified client directory and navigates into it. This is the first step to start a new project.

```bash
git clone <template-repo-url> client-name
cd client-name
```

--------------------------------

### Astro Component Import Example

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Demonstrates how Astro components are imported and how the client override system automatically resolves imports to client versions if they exist. No code changes are required to utilize overrides.

```astro
import Button from '~/components/ui/Button.astro';

```

--------------------------------

### Environment Variable Configuration Example

Source: https://github.com/nightsquawk/astrowind/blob/main/README.md

This bash script shows an example `.env` file for configuring various aspects of the Astrowind project, including site URL, analytics IDs (Google Analytics, Tag Manager, Clarity, Datadog), Google Maps API key, GoHighLevel integration, and Mux credentials. Mux tokens are sensitive and should be kept secret.

```bash
# Site Configuration
PUBLIC_SITE_URL=https://yoursite.com

# Analytics
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXX
PUBLIC_MICROSOFT_CLARITY_PROJECT_ID=xxxxx
PUBLIC_DATADOG_APPLICATION_ID=
PUBLIC_DATADOG_CLIENT_TOKEN=

# Maps
PUBLIC_GOOGLE_MAPS_API_KEY=

# Optional: GoHighLevel
PUBLIC_GO_HIGH_LEVEL_TRACKING_ID=
PUBLIC_GO_HIGH_LEVEL_SCRIPT_URL=

# Mux (keep secret!)
MUX_TOKEN_ID=your-token-id
MUX_TOKEN_SECRET=your-token-secret
```

--------------------------------

### Client Setup Script for AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/README.md

This script facilitates the setup process for new clients by updating configurations and replacing project assets. It supports Linux/Mac and Windows environments.

```bash
# Linux/Mac
bash .github/scripts/setup-client.sh
# or
# Windows
.github/scripts/setup-client.ps1

# Update configuration
# Edit src/config.yaml with client details
# Replace src/components/Logo.astro with client logo
# Add content to src/content/
```

--------------------------------

### Configure Astrowind Site Settings

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Edits the `src/config.yaml` file to configure site-specific settings such as the site name, URL, and theme colors. This is part of the initial project setup.

```yaml
site:
  name: "Your Client Name"
  site: "https://yourclient.com"

theme:
  colors:
    primary: 'rgb(YOUR_PRIMARY_COLOR)'
    secondary: 'rgb(YOUR_SECONDARY_COLOR)'
    accent: 'rgb(YOUR_ACCENT_COLOR)'
```

--------------------------------

### Astro Card Components Example

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Demonstrates the usage of various Astro Card components, including CardHeader, CardTitle, CardDescription, CardContent, and CardFooter, along with integrated Button and Badge components. This example showcases a modern card layout for displaying plan details and actions.

```astro
---
// Usage example - Modern card layout
import Card from '~/components/ui/shadcn/Card.astro';
import CardHeader from '~/components/ui/shadcn/CardHeader.astro';
import CardTitle from '~/components/ui/shadcn/CardTitle.astro';
import CardDescription from '~/components/ui/shadcn/CardDescription.astro';
import CardContent from '~/components/ui/shadcn/CardContent.astro';
import CardFooter from '~/components/ui/shadcn/CardFooter.astro';
import Button from '~/components/ui/shadcn/Button.astro';
import Badge from '~/components/ui/shadcn/Badge.astro';
---

<div class="grid md:grid-cols-3 gap-6">
  <Card>
    <CardHeader>
      <CardTitle>
        Basic Plan
        <Badge variant="secondary">Popular</Badge>
      </CardTitle>
      <CardDescription>Perfect for individuals and small teams</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="text-4xl font-bold mb-4">$29<span class="text-sm font-normal">/month</span></div>
      <ul class="space-y-2">
        <li>✓ 10 projects</li>
        <li>✓ 5GB storage</li>
        <li>✓ Email support</li>
      </ul>
    </CardContent>
    <CardFooter>
      <Button variant="outline" class="w-full">Get Started</Button>
    </CardFooter>
  </Card>

  <Card>
    <CardHeader>
      <CardTitle>
        Pro Plan
        <Badge variant="success">Best Value</Badge>
      </CardTitle>
      <CardDescription>For growing businesses and teams</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="text-4xl font-bold mb-4">$99<span class="text-sm font-normal">/month</span></div>
      <ul class="space-y-2">
        <li>✓ Unlimited projects</li>
        <li>✓ 50GB storage</li>
        <li>✓ Priority support</li>
        <li>✓ Advanced analytics</li>
      </ul>
    </CardContent>
    <CardFooter>
      <Button variant="default" class="w-full">Upgrade Now</Button>
    </CardFooter>
  </Card>
</div>

<!-- Available components:
  - Button: variants (default, destructive, outline, secondary, ghost, link)
  - Badge: variants (default, secondary, destructive, outline, success, warning)
  - Card: Flexible container with Header, Title, Description, Content, Footer
  - Input: Form input with consistent styling
  - Label: Form label component
  - Textarea: Multi-line text input

  Demo: Visit /shadcn-demo in development mode
-->
```

--------------------------------

### Blog Post Frontmatter with Video (Markdown)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Example frontmatter for a blog post that includes Mux video playback details. The video will be automatically displayed when the post is rendered.

```markdown
---
title: 'My Post'
video:
  playbackId: 'abc123'
  type: 'video'
  aspectRatio: '16:9'
---

```

--------------------------------

### Check Mux Package Installation (Bash)

Source: https://github.com/nightsquawk/astrowind/blob/main/src/plugins/mux/README.md

Verifies that the required Mux player and Node.js packages are installed in the project. Useful for troubleshooting player loading issues.

```bash
npm list @mux/mux-player @mux/mux-audio @mux/mux-node
```

--------------------------------

### Setup Mux API Credentials (Bash)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Configures Mux API credentials using environment variables. For production, it suggests using Cloudflare secrets for secure storage.

```bash
MUX_TOKEN_ID=your-token-id
MUX_TOKEN_SECRET=your-token-secret
```

```bash
wrangler secret put MUX_TOKEN_ID
wrangler secret put MUX_TOKEN_SECRET
```

--------------------------------

### Install Mux Dependencies

Source: https://github.com/nightsquawk/astrowind/blob/main/src/plugins/mux/README.md

Installs the necessary Mux Node.js and player packages for video and audio streaming integration. These are typically pre-installed in the AstroWind template.

```bash
npm install @mux/mux-node @mux/mux-player @mux/mux-audio
```

--------------------------------

### Podcast Episode Frontmatter with Audio (Markdown)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Example frontmatter for a podcast episode that includes Mux audio playback details. The audio player will be automatically displayed when the episode is rendered.

```markdown
---
title: 'Episode 1'
audio:
  playbackId: 'xyz789'
  type: 'audio'
  title: 'Episode 1: Introduction'
---

```

--------------------------------

### Astro Component Override Example

Source: https://github.com/nightsquawk/astrowind/blob/main/src/components/README.md

This example shows how to override a base Astro component (e.g., Button) by creating a corresponding file in the `src/client/components/` directory. This feature, powered by a Vite plugin, allows for seamless customization of components without altering their original import paths. The overridden component can introduce new props or modify existing behavior.

```astro
---
// src/client/components/ui/Button.astro
// This file automatically overrides the base Button component

interface Props {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'; // Added ghost
  // ... other props
}
---
<!-- Your custom implementation -->
```

```astro
---
// No changes needed! Import works the same way
import Button from '~/components/ui/Button.astro'; // Uses client version automatically
---

<Button variant="ghost">Click Me</Button>
```

--------------------------------

### Environment Variables Example (.env)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Lists common environment variables used by the project, including public-facing variables (prefixed with PUBLIC_) and private secrets. `.env` file should be used for local development.

```env
PUBLIC_SITE_URL=https://example.com
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXXX
PUBLIC_GOOGLE_MAPS_API_KEY=YOUR_MAPS_API_KEY
MUX_TOKEN_ID=your-mux-token-id
MUX_TOKEN_SECRET=your-mux-token-secret
```

--------------------------------

### Create Custom Page Layout in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Illustrates creating a custom page, `custom-page.astro`, in `src/client/pages/` or `src/pages/`. This example uses base layouts and widgets to build a unique page structure, adhering to Level 3 customization.

```astro
<!-- src/client/pages/custom-page.astro -->
---
import Layout from '~/layouts/Layout.astro';
import Features from '~/components/widgets/Features.astro';
---

<Layout>
  <Features 
    title="Custom Page"
    items={[...]} 
  />
</Layout>
```

--------------------------------

### Using Theme Variables in CSS

Source: https://github.com/nightsquawk/astrowind/blob/main/src/client/components/README.md

Demonstrates how to use predefined CSS variables from `src/components/CustomStyles.astro` for consistent theming of custom components. It shows examples for primary color, page background, and heading font.

```css
.my-component {
  color: var(--aw-color-primary);           /* Primary brand color */
  background: var(--aw-color-bg-page);      /* Page background */
  font-family: var(--aw-font-heading);      /* Heading font */
}
```

--------------------------------

### Mux Environment Variable Setup

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Provides instructions for setting up environment variables for Mux API credentials and Cloudflare Workers secrets. It specifies the MUX_TOKEN_ID and MUX_TOKEN_SECRET for API authentication and how to set them as secrets in Cloudflare Workers.

```bash
# .env - Mux API credentials (keep secret!)
MUX_TOKEN_ID=your-mux-token-id
MUX_TOKEN_SECRET=your-mux-token-secret

# Cloudflare Workers production secrets
wrangler secret put MUX_TOKEN_ID
wrangler secret put MUX_TOKEN_SECRET
```

--------------------------------

### YAML Configuration for Theme Colors

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Illustrates how to change brand colors by modifying the `theme.colors` section in the `src/config.yaml` file. This allows for easy customization of primary and secondary colors.

```yaml
theme:
  colors:
    primary: 'rgb(YOUR_COLOR)'
    secondary: 'rgb(YOUR_COLOR)'

```

--------------------------------

### Client-Specific Component Override Example

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Illustrates how client-specific components can override base components in AstroWind by placing them in `src/client/components/` and using the `~` path alias. This allows for easy customization without modifying the core template.

```astro
--- 
// Example: Overriding a header component
// Assumes a base component at src/components/Header.astro
// This client-specific version is at src/client/components/Header.astro
import BaseHeader from '~/components/Header.astro'; // '~' resolves to '/src'
--- 
<BaseHeader>
  <slot name="client-specific-nav">
    <li><a href="/client-page">Client Nav Item</a></li>
  </slot>
</BaseHeader>
```

--------------------------------

### Configure Markdown Plugins in Astro

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Configures remark and rehype plugins for Astro's markdown processing. Includes plugins for reading time, responsive tables, and lazy loading images. This setup in `astro.config.mts` determines how markdown content is transformed during the build.

```typescript
// astro.config.mts - Markdown plugins configuration
import {
  readingTimeRemarkPlugin,
  responsiveTablesRehypePlugin,
  lazyImagesRehypePlugin
} from './src/utils/frontmatter.js';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      readingTimeRemarkPlugin, // Calculates reading time, adds to frontmatter
    ],
    rehypePlugins: [
      responsiveTablesRehypePlugin, // Wraps tables in scrollable divs
      lazyImagesRehypePlugin, // Adds loading="lazy" to images
    ],
  },
});
```

--------------------------------

### Create Custom Client Component in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Demonstrates creating a custom client-side component, `ClientHero.astro`, within the `src/client/components/` directory. This allows for custom UI elements not present in the base library, a part of Level 2 customization.

```astro
<!-- src/client/components/ClientHero.astro -->
---
import Button from '~/components/ui/Button.astro';
---

<section class="client-hero">
  <h1>Welcome to Client Name</h1>
  <Button variant="primary" href="/contact">Contact Us</Button>
</section>
```

--------------------------------

### Add Custom Font with @fontsource

Source: https://github.com/nightsquawk/astrowind/blob/main/QUICK_START.md

Installs a custom font using the @fontsource npm package, imports it into a custom Astro component, and updates the theme configuration. This allows for custom typography.

```bash
npm install @fontsource-variable/your-font

# Import in src/components/CustomStyles.astro
# Update theme.fonts in config.yaml
```

--------------------------------

### YAML Configuration for Custom Fonts

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Shows how to configure custom fonts by updating the `theme.fonts` section in `src/config.yaml`. This assumes the font package has been installed and imported in `src/components/CustomStyles.astro`.

```yaml
theme:
  fonts:
    sans: 'Your Font Variable'

```

--------------------------------

### Extend Tailwind CSS Configuration in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Provides an example of extending the `tailwind.config.js` file to introduce custom CSS utilities for theme extensions, a part of Level 4 customization. This allows for defining project-specific styling rules.

```css
/* src/client/styles/custom.css */
.client-specific-class {
  /* Custom styles */
}
```

--------------------------------

### Google Tag Manager Integration Setup (Astro)

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Details the integration of Google Tag Manager using the GoogleTagManager.astro component and associated helper functions in `gtm-events.ts`. This setup allows for custom dataLayer events and runs in parallel with Google Analytics 4. The `PUBLIC_GOOGLE_TAG_MANAGER_ID` environment variable is required.

```astro
<!-- src/components/tracking/GoogleTagManager.astro -->

<!-- src/scripts/gtm-events.ts -->
export function trackCustomEvent(eventName: string, eventData: Record<string, any>) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: eventName,
    ...eventData
  });
}
```

--------------------------------

### Configure Mux Environment Variables

Source: https://github.com/nightsquawk/astrowind/blob/main/src/plugins/mux/README.md

Sets up Mux API credentials using environment variables for both local development (.env) and production environments (Cloudflare Secrets). Requires MUX_TOKEN_ID and MUX_TOKEN_SECRET.

```bash
# Local Development (.env):
MUX_TOKEN_ID=your-token-id
MUX_TOKEN_SECRET=your-token-secret

# Production (Cloudflare Secrets):
wrangler secret put MUX_TOKEN_ID
wrangler secret put MUX_TOKEN_SECRET
```

--------------------------------

### Build and Preview AstroWind Production Site

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Builds the AstroWind project for production and previews it locally. This is used to test the final output before deployment.

```bash
npm run build
npm run preview
```

--------------------------------

### Markdown Content with Mux Audio Asset

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Demonstrates embedding Mux audio assets within Markdown content files for Astro. The frontmatter includes configuration for the audio playbackId, type, title, and duration, enabling the display of podcast episodes with associated metadata directly in the content.

```markdown
---
# src/content/podcast-episodes/episode-001.md
title: 'Episode 1: Getting Started'
episodeNumber: 1
pubDate: 2024-01-15
audio:
  playbackId: 'abc123xyz'
  type: 'audio'
  title: 'Episode 1: Getting Started'
  duration: 3600
---

In this inaugural episode, we discuss...

```

--------------------------------

### Deployment Command for Cloudflare Workers

Source: https://github.com/nightsquawk/astrowind/blob/main/README.md

These bash commands demonstrate how to build and deploy an Astrowind project to Cloudflare Workers. The `npm run deploy` command automates the build and deployment process. Alternatively, manual deployment involves running `npm run build` followed by `wrangler deploy`.

```bash
# Build and deploy
npm run deploy

# Or manually
npm run build
wrangler deploy
```

--------------------------------

### Using Icon Libraries in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/README.md

Demonstrates how to integrate and use various icon libraries (Tabler, MDI, Lucide) within Astro components using the `astro-icon` package. Icons are styled using Tailwind CSS classes.

```astro
import { Icon } from 'astro-icon/components';

<Icon name="lucide:heart" class="w-6 h-6" />
<Icon name="mdi:email" class="w-5 h-5" />
<Icon name="tabler:user" class="w-4 h-4" />
```

--------------------------------

### Define Content Collections in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/CLAUDE.md

Illustrates the definition of content collections in `src/content/config.ts` using Astro's content layer. It includes examples for blog posts, podcast episodes, campaigns, and coupons with their respective schemas.

```typescript
import { defineCollection, z } from 'astro:content';

const postCollection = defineCollection({
  type: 'content',
  schema: ({ image }) => z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    author: z.string().optional(),
    image: image().refEl('src/assets/blog/default.webp').optional(),
    draft: z.boolean().optional(),
  }),
});

// ... other collections like podcast-episodes, campaigns, coupons
```

--------------------------------

### Render Astro Blog Post Page with Mux Video

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Renders an individual blog post page using Astro's content collections. It dynamically fetches posts, supports Mux video playback if available in the post data, and uses a `PageLayout` component. The `getStaticPaths` function generates static routes for each post.

```astro
---
// src/pages/blog/[...slug].astro - Blog post page with Mux video
import { getCollection } from 'astro:content';
import Layout from '~/layouts/PageLayout.astro';
import MuxVideoPlayer from '~/plugins/mux/components/MuxVideoPlayer.astro';

export async function getStaticPaths() {
  const posts = await getCollection('post');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout metadata={{ title: post.data.title }}>
  <article>
    <h1>{post.data.title}</h1>

    {post.data.video && (
      <MuxVideoPlayer
        playbackId={post.data.video.playbackId}
        metadata={{ video_title: post.data.video.title }}
        aspectRatio={post.data.video.aspectRatio || '16:9'}
      />
    )}

    <Content />
  </article>
</Layout>

```

--------------------------------

### Configure Client Information in AstroWind

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

This snippet shows how to update the `src/config.yaml` file to configure client-specific information, including site details, theme colors, fonts, and analytics IDs. This is the primary method for Level 1 customization.

```yaml
# src/config.yaml
site:
  name: "Client Name"
  site: "https://client.com"

theme:
  colors:
    primary: 'rgb(255 0 0)'  # Client brand color
    secondary: 'rgb(200 0 0)'
    accent: 'rgb(150 0 0)'
```

--------------------------------

### Implement Markdown Plugins for Astro

Source: https://context7.com/nightsquawk/astrowind/llms.txt

Provides the implementations for custom remark and rehype markdown plugins. This includes calculating reading time using the 'reading-time' package, wrapping HTML tables in scrollable divs, and adding 'loading="lazy"' attributes to images using AST traversal utilities.

```typescript
// src/utils/frontmatter.ts - Plugin implementations
import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';
import { visit } from 'unist-util-visit';

// Reading time plugin - automatically calculates and adds readingTime field
export const readingTimeRemarkPlugin = () => {
  return function (tree, file) {
    const textOnPage = toString(tree);
    const readingTime = Math.ceil(getReadingTime(textOnPage).minutes);

    if (file?.data?.astro?.frontmatter) {
      file.data.astro.frontmatter.readingTime = readingTime;
    }
  };
};

// Responsive tables - wraps tables in scrollable containers
export const responsiveTablesRehypePlugin = () => {
  return function (tree) {
    for (let i = 0; i < tree.children.length; i++) {
      const child = tree.children[i];
      if (child.type === 'element' && child.tagName === 'table') {
        tree.children[i] = {
          type: 'element',
          tagName: 'div',
          properties: { style: 'overflow:auto' },
          children: [child],
        };
        i++;
      }
    }
  };
};

// Lazy images - adds loading="lazy" to all images
export const lazyImagesRehypePlugin = () => {
  return function (tree) {
    visit(tree, 'element', function (node) {
      if (node.tagName === 'img') {
        node.properties.loading = 'lazy';
      }
    });
  };
};

// Usage in content - reading time is automatically available
// {post.data.readingTime} minutes read

```

--------------------------------

### Use Custom Client Component in AstroWind Page

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Shows how to import and use a custom client component, `ClientHero.astro`, within an Astro page, typically `src/pages/index.astro`. This integrates custom UI elements into the client's website structure.

```astro
<!-- src/pages/index.astro -->
---
import ClientHero from '~/client/components/ClientHero.astro';
---

<ClientHero />
```

--------------------------------

### Create Custom Client Hero Component (Astro)

Source: https://github.com/nightsquawk/astrowind/blob/main/src/client/components/README.md

An example of creating a completely new, client-specific component named `ClientHero.astro`. This component composes existing base components (`Button` and `Headline`) to provide unique client-side functionality and layout.

```astro
---
// src/client/components/custom/ClientHero.astro
import Button from '~/components/ui/Button.astro';
import Headline from '~/components/ui/Headline.astro';
---

<section class="client-hero">
  <Headline title={title} subtitle={subtitle} />
  <Button variant="primary">Get Started</Button>
</section>
```

--------------------------------

### Import Configuration from Virtual Module in Astro

Source: https://context7.com/nightsquawk/astrowind/llms.txt

This snippet demonstrates how to import configuration settings from the 'astrowind:config' virtual module into Astro components or TypeScript files. It shows accessing site information, theme colors, font settings, and blog-related configurations. No external dependencies are required beyond the AstroWind integration.

```typescript
import { SITE, THEME, METADATA, APP_BLOG, UI, ANALYTICS, I18N } from 'astrowind:config';

// Access site information
const siteName = SITE.name;
const siteUrl = SITE.site;

// Access theme colors for dynamic styling
const primaryColor = THEME.colors.primary;
const heading = THEME.fonts.heading;

// Access blog configuration
const postsPerPage = APP_BLOG.postsPerPage;
const blogPath = APP_BLOG.list.pathname;
```

--------------------------------

### AstroWind Theme Color Configuration

Source: https://github.com/nightsquawk/astrowind/blob/main/TEMPLATE_GUIDE.md

Details the theme color settings within `src/config.yaml`, showing how primary, secondary, accent, text, and background colors (for both light and dark modes) are defined. These settings are applied globally via CSS variables.

```yaml
theme:
  colors:
    primary: 'rgb(1 97 239)'      # Main brand color
    secondary: 'rgb(1 84 207)'    # Secondary brand color
    accent: 'rgb(109 40 217)'     # Accent color
    text:
      heading: 'rgb(0 0 0)'      # Heading text color
      default: 'rgb(16 16 16)'   # Body text color
      muted: 'rgb(16 16 16 / 66%)' # Muted text color
    textDark:                    # Dark mode text colors
      heading: 'rgb(247, 248, 248)'
      default: 'rgb(229 236 246)'
      muted: 'rgb(229 236 246 / 66%)'
    background:
      page: 'rgb(255 255 255)'   # Light mode background
      pageDark: 'rgb(3 6 32)'    # Dark mode background
  fonts:
    sans: 'Inter Variable'       # Body font
    serif: 'Inter Variable'      # Serif font
    heading: 'Inter Variable'    # Heading font
  selection:
    light:
      background: 'lavender'    # Light mode selection
    dark:
      background: 'black'       # Dark mode selection
      color: 'snow'
```

--------------------------------

### Astro Component Import and Auto-Resolution

Source: https://github.com/nightsquawk/astrowind/blob/main/src/client/components/README.md

Demonstrates how to import an Astro component and how the Vite plugin automatically resolves it to a client version if one exists in the specified path. This mechanism allows for overriding base components without altering import statements.

```astro
import Button from '~/components/ui/Button.astro';
```

--------------------------------

### Create Custom Feature Section Component

Source: https://github.com/nightsquawk/astrowind/blob/main/src/client/components/README.md

An Astro component example for `ClientFeatures.astro` that creates a custom feature section. It imports and uses the base `Features.astro` widget and defines its own HTML structure and styling, demonstrating composition and theme variable usage.

```astro
---
// src/client/components/custom/ClientFeatures.astro
import Features from '~/components/widgets/Features.astro';

const features = [
  { title: "Feature 1", icon: "tabler:check" },
  { title: "Feature 2", icon: "tabler:check" },
];
---

<section class="client-features">
  <div class="custom-header">
    <h2>Our Amazing Features</h2>
  </div>
  <Features items={features} columns={3} />
</section>

<style>
  .client-features {
    padding: 4rem 0;
    background: var(--aw-color-bg-page);
  }
  .custom-header {
    text-align: center;
    margin-bottom: 2rem;
  }
</style>
```