### Navigate and Start Virex Development Server

Source: https://github.com/erlandv/virex/blob/main/docs/01-getting-started.md

After creating the project, navigate to the project directory and start the development server. The site will then be accessible at http://localhost:4321.

```bash
cd your-project-name
npm run dev
```

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

### Clone Virex Theme and Start Development Server

Source: https://github.com/erlandv/virex/blob/main/docs/01-getting-started.md

This method is for theme development or when the full git history is needed. It involves cloning the repository, installing dependencies, and starting the development server.

```bash
git clone https://github.com/erlandv/virex.git
cd virex
npm install
npm run dev
```

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

### Full Virex Configuration Example

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

A comprehensive example demonstrating a complete Virex configuration, combining project name, framework, build settings, environment variables, deployment regions, and health checks.

```javascript
export default {
  name: 'my-saas-app',
  framework: 'astro',
  
  buildCommand: 'npm run build',
  outputDirectory: 'dist',
  nodeVersion: '20',
  
  env: {
    PUBLIC_SITE_URL: 'https://myapp.com',
  },
  
  environments: {
    staging: {
      env: {
        PUBLIC_SITE_URL: 'https://staging.myapp.com',
      },
    },
  },
  
  regions: ['us-east-1'],
  
  healthCheck: {
    path: '/api/health',
    interval: 30,
  },
};
```

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

### Set Up Environment Variables - Bash

Source: https://github.com/erlandv/virex/blob/main/docs/02-configuration.md

Example `.env` file structure for configuring essential site, authentication, and analytics variables. Requires copying `.env.example` and filling in project-specific values.

```bash
# Required: Site identity
SITE_URL=https://your-domain.com
SITE_NAME=Your Brand
SITE_DESCRIPTION=Your product description here
SITE_AUTHOR=Your Name

# Optional: Authentication (if using dashboard)
SUPABASE_URL=your-project-url
SUPABASE_ANON_KEY=your-anon-key
# Or custom API
AUTH_API_URL=https://api.yoursite.com
AUTH_API_KEY=your-api-key

# Optional: Analytics
PUBLIC_GA_ID=G-XXXXXXXXXX
```

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

### Virex Theme Import Aliases Example

Source: https://github.com/erlandv/virex/blob/main/docs/01-getting-started.md

Demonstrates how to use path aliases within the Virex theme for cleaner imports of site configuration, utility functions, layouts, and components. These aliases simplify referencing files across the project.

```typescript
// Base alias
import { siteConfig } from '@/config';
import { formatDate } from '@/lib/utils';
import MarketingLayout from '@/layouts/MarketingLayout.astro';

// Component aliases
import Header from '@layout/Header.astro';
import Hero from '@sections/marketing/Hero.astro';
import ContactForm from '@forms/ContactForm.astro';
import ThemeToggle from '@ui/ThemeToggle.astro';
```

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

### Deploy with Vercel CLI (Bash)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Installs the Vercel CLI globally and initiates a deployment. This is a quick way to deploy your site to Vercel using the command line.

```bash
npm i -g vercel
vercel
```

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

### Deploy with Netlify CLI (Bash)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Installs the Netlify CLI and deploys the production build to Netlify. The `--prod` flag ensures it's deployed to the production branch, and `--dir=dist` specifies the build output directory.

```bash
npm i -g netlify-cli
netlify deploy --prod --dir=dist
```

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

### Environment Variables for Hosting (Bash)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Example of setting environment variables for a hosting provider. These variables are crucial for configuring the application's behavior, such as site URL, API keys, and analytics IDs.

```bash
# Authentication (example with Supabase)
SUPABASE_URL=your-project-url
SUPABASE_ANON_KEY=your-anon-key

# Or custom API
AUTH_API_URL=https://api.yoursite.com
AUTH_API_KEY=your-api-key
```

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

### Install and Run Virex Astro Project

Source: https://context7.com/erlandv/virex/llms.txt

Commands to create a new Astro project using the Virex template, start the development server, build for production, preview the build, and run linting/formatting checks.

```bash
# Create new project with Virex template
npm create astro@latest -- --template erlandv/virex

# Navigate to project and start development
cd your-project-name
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting and formatting
npm run lint
npm run format
npm run check
```

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

### Create Virex Astro Project with CLI

Source: https://github.com/erlandv/virex/blob/main/docs/01-getting-started.md

This command uses the Astro CLI to create a new project with the Virex template. It prompts the user for project name, package manager, and optional Git initialization and dependency installation.

```bash
npm create astro@latest -- --template erlandv/virex
```

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

### Install Virex CLI

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Installs the Virex Command Line Interface globally using npm. This tool is essential for interacting with the Virex platform. Ensure Node.js 18+ is installed.

```bash
npm install -g @virex/cli
```

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

### Initialize Virex Project Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Initializes Virex in a project directory by creating a `virex.config.js` file. This configuration file specifies project details like name, framework, build command, and output directory. The `framework` option can be set to 'auto' for automatic detection.

```javascript
export default {
  name: 'your-project',
  framework: 'auto', // Virex auto-detects your framework
  buildCommand: 'npm run build',
  outputDirectory: 'dist',
};

```

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

### Build Site for Production (Bash)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Builds the static site for production deployment. This command generates the site files in the `dist/` folder, which are then ready to be uploaded to a hosting provider.

```bash
npm run build
```

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

### Backward-Compatible SQL Migrations

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/rollbacks.md

Demonstrates how to write SQL migrations that are compatible with both old and new code versions. It shows a good example of adding a column with a default value and a bad example of renaming a column, which can break older codebases.

```sql
-- Good: Add column with default
ALTER TABLE users ADD COLUMN preferences JSONB DEFAULT '{}';

-- Bad: Rename column (breaks old code)
ALTER TABLE users RENAME COLUMN name TO full_name;
```

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

### Verify Virex CLI Installation

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Checks if the Virex CLI has been installed correctly by displaying its version. This command is used after the global installation to confirm the CLI is accessible.

```bash
virex --version
```

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

### Session Cookie Configuration (TypeScript)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Provides an example of configuring secure session cookies in TypeScript for production environments. This includes setting HTTP-only, secure, and same-site attributes for enhanced security.

```typescript
// Example session cookie configuration
cookies.set('session', token, {
  httpOnly: true,
  secure: true, // HTTPS only
  sameSite: 'lax',
  maxAge: 60 * 60 * 24 * 7, // 7 days
  path: '/'
});
```

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

### Deploy Project with Virex CLI

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Deploys the current project using the Virex CLI. This command triggers a build process, uploads project artifacts, deploys to a preview URL, and returns the live URL. Ensure your project is initialized and authenticated.

```bash
virex deploy
```

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

### TypeScript Navigation Configuration Example

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Example of correct and incorrect navigation item configuration in TypeScript. It highlights the importance of matching the `href` property exactly with the current pathname, including the leading slash, for active highlighting.

```typescript
// Correct
{ label: 'Projects', href: '/dashboard/projects' }

// Incorrect (missing leading slash)
{ label: 'Projects', href: 'dashboard/projects' }
```

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

### Netlify Build Configuration (TOML)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Defines the build command and publish directory for Netlify deployments in a `netlify.toml` file. It also includes a redirect rule for handling 404 errors.

```toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/404"
  status = 404
```

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

### Replace Sample Data with API Calls (TypeScript)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Demonstrates how to replace placeholder sample data in a TypeScript function with actual data fetched from an API. This is essential for dynamic content in dashboard applications.

```typescript
// Before (sample data)
export function getProjects() {
  return [/* sample data */];
}

// After (real API)
export async function getProjects() {
  const response = await fetch(`${API_URL}/projects`);
  return response.json();
}
```

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

### CORS Headers Configuration (TypeScript)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Shows an example of setting Cross-Origin Resource Sharing (CORS) headers in TypeScript. This is necessary when a separate API server is used, allowing requests from a different origin.

```typescript
// Example CORS headers
headers: {
  'Access-Control-Allow-Origin': 'https://yoursite.com',
  'Access-Control-Allow-Credentials': 'true'
}
```

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

### Basic Virex Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Sets up the minimal configuration for a Virex project, defining the project name. Virex auto-detects most other settings.

```javascript
export default {
  name: 'my-project',
};
```

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

### DemoRequestForm Component Examples (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Shows how to implement the DemoRequestForm for requesting demos, with options for demo mode, Netlify Forms, and custom endpoints.

```astro
<!-- Demo mode -->
<DemoRequestForm />

<!-- Netlify Forms -->
<DemoRequestForm netlify formName="demo-request" />

<!-- Custom endpoint -->
<DemoRequestForm action="https://api.example.com/demo" />
```

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

### Virex Custom Configuration File

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/frameworks.md

Provides an example of a `virex.config.js` file used to override auto-detected settings such as framework, build command, output directory, install command, and Node.js version.

```javascript
export default {
  framework: 'nextjs', // Explicit framework
  buildCommand: 'npm run build:production',
  outputDirectory: 'out',
  installCommand: 'npm ci',
  nodeVersion: '20.x',
};

```

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

### Astro SEO Meta Tags Example

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Example of how to implement SEO meta tags within an Astro component for dashboard pages. This includes setting descriptive titles and meta descriptions.

```astro
<DashboardLayout
  title="Project Settings - Virex Dashboard"
  description="Manage your project settings and configuration"
>

```

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

### NPM Chart.js Installation

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Command to install the Chart.js library using npm. This is a prerequisite for rendering charts within the application.

```bash
npm install chart.js
```

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

### Virex Build Settings Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Configures build-related options for Virex projects, including build and install commands, output directory, and Node.js version. This allows customization of the build process.

```javascript
export default {
  name: 'my-project',
  
  // Build configuration
  buildCommand: 'npm run build',
  installCommand: 'npm ci',
  outputDirectory: 'dist',
  
  // Node.js version
  nodeVersion: '20',
};
```

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

### Environment Variable Template (.env.example)

Source: https://github.com/erlandv/virex/blob/main/src/content/blog/environment-variables-guide.md

Provides an example of a `.env.example` file, which serves as a template to document required environment variables for a project. This helps new developers set up their environment quickly.

```bash
# .env.example
# Copy this file to .env and fill in the values

# Database connection string
DATABASE_URL=

# API key for external service
API_KEY=

# Enable debug mode (true/false)
DEBUG=false
```

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

### Card Component Example (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Provides an example of using the generic Card component to structure content within the dashboard. It can optionally display a title and description, and allows for custom content, such as form elements, to be placed inside.

```astro
<Card title="User Information" description="Update your profile details">
  <form>
    <!-- Form fields -->
  </form>
</Card>
```

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

### Automate Environment Setup with Virex

Source: https://github.com/erlandv/virex/blob/main/src/content/blog/streamline-your-deployment-workflow.md

Set up different deployment environments (e.g., staging, production) using Virex. This includes defining environment-specific URLs and variables to ensure consistency across deployments.

```javascript
environments: {
  staging: {
    url: 'https://staging.yourapp.com',
    variables: {
      NODE_ENV: 'staging',
      API_URL: '${STAGING_API_URL}',
    },
  },
  production: {
    url: 'https://yourapp.com',
    variables: {
      NODE_ENV: 'production',
      API_URL: '${PROD_API_URL}',
    },
  },
}
```

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

### Pagination Component Configuration (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Example of configuring the Pagination component for page navigation in blog listings, specifying current page, total pages, and base path.

```astro
<Pagination
  currentPage={1}
  totalPages={5}
  basePath="/blog"
/>
```

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

### Set Environment Variables (Bash)

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/frameworks.md

Example of setting environment variables required for framework builds. These can be added in the Virex dashboard or a `.env` file in your project's root directory.

```bash
# Required for some frameworks
NEXT_PUBLIC_API_URL=https://api.example.com
```

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

### Deploy to Virex via Generic CI (Bash)

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/customization.md

Deploy your project to Virex from any CI/CD environment using the Virex CLI. This example demonstrates setting the necessary token as an environment variable before running the deploy command.

```bash
VIREX_TOKEN=$TOKEN virex deploy --environment production
```

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

### Add New Astro Page

Source: https://github.com/erlandv/virex/blob/main/docs/06-pages.md

Demonstrates how to create a new Astro page by defining its frontmatter, importing necessary layouts and components, and structuring the page content. This example uses `MarketingLayout` and `PageHeader` components.

```astro
---
// src/pages/new-page.astro
import MarketingLayout from '@/layouts/MarketingLayout.astro';
import PageHeader from '@sections/content/PageHeader.astro';
import { siteConfig } from '@/config';
---

<MarketingLayout
  title={`New Page - ${siteConfig.name}`}
  description="Description for SEO"
>
  <PageHeader
    title="New Page"
    subtitle="Optional subtitle text"
  />

  <section class="py-section">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Your content -->
    </div>
  </section>
</MarketingLayout>
```

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

### DashboardLayout Usage Example

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Demonstrates how to use the `DashboardLayout` component in an Astro file, providing necessary props such as title, description, and breadcrumbs. This sets up the basic structure and navigation for a dashboard page.

```astro
<DashboardLayout
  title="Dashboard Overview"
  description="View your key metrics and recent activity"
  breadcrumbs={[
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Overview' }
  ]}>
  <!-- Your page content -->
</DashboardLayout>
```

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

### Creating a New Dashboard Page in Astro

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

An example of how to create a new dashboard page using the `DashboardLayout` and `Card` components. It showcases setting up breadcrumbs and basic page structure with a title, description, and a call-to-action button.

```astro
---
// src/pages/dashboard/my-page.astro
import DashboardLayout from '@/layouts/DashboardLayout.astro';
import Card from '@dashboard-ui/Card.astro';

const breadcrumbs = [
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'My Page' }
];
---

<DashboardLayout
  title="My Page"
  description="Description for SEO"
  breadcrumbs={breadcrumbs}
>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <h1 class="text-3xl font-bold">My Page</h1>
      <button class="btn btn-primary">Action</button>
    </div>

    <Card title="Content Section">
      <p>Your content here</p>
    </Card>
  </div>
</DashboardLayout>
```

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

### ContactForm Component Examples (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Demonstrates different ways to use the ContactForm component, including demo mode, Netlify Forms integration, and custom endpoint submission.

```astro
<!-- Demo mode -->
<ContactForm />

<!-- Netlify Forms -->
<ContactForm netlify formName="contact" />

<!-- Custom endpoint -->
<ContactForm action="https://api.example.com/contact" />
```

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

### Configure Announcement Bar - TypeScript

Source: https://github.com/erlandv/virex/blob/main/docs/02-configuration.md

Settings for displaying an announcement banner at the top of the page. Includes options for enabling, content, linking, and user dismissal. Dismissal state is saved in localStorage.

```typescript
export const announcement = {
  enabled: true,
  id: 'launch-2025',        // Change ID to reset dismissal
  text: '🚀 Version 2.0 is here!',
  href: '/changelog',       // Optional link
  linkText: "See what's new",
  variant: 'primary',       // 'primary' | 'secondary' | 'gradient'
  dismissible: true,        // Allow users to close
};
```

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

### Basic Environment Variables Example (Bash)

Source: https://github.com/erlandv/virex/blob/main/src/content/blog/environment-variables-guide.md

Demonstrates how to define environment variables directly in a bash shell. These variables are key-value pairs used to configure application behavior and store secrets.

```bash
DATABASE_URL=postgres://localhost:5432/myapp
API_KEY=sk_live_abc123
DEBUG=true
```

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

### Cloudflare Pages Error Handling (_redirects)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Configures basic 404 error handling for Cloudflare Pages by specifying a redirect rule in the `public/_redirects` file. More complex error handling might require Cloudflare Workers.

```text
# 404 handling
/*    /404    404
```

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

### Apache Server Configuration (.htaccess)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Configures Apache server settings for static hosting, including custom error documents, deflate compression, and expires headers for caching static assets. This file should be placed in the `public/` directory.

```apache
ErrorDocument 403 /403
ErrorDocument 404 /404
ErrorDocument 500 /500

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
</IfModule>
```

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

### Correct Icon Prefix Usage (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/01-getting-started.md

Demonstrates the correct usage of icon prefixes in Astro components. It highlights the necessity of using the 'lucide:' prefix for Lucide icons to ensure they are rendered properly. Incorrect usage without the prefix will result in an 'icon not found' error.

```astro
<Icon name="lucide:zap" />  <!-- Correct -->
<Icon name="zap" />         <!-- Wrong -->
```

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

### Deployment to Vercel, Netlify, or Cloudflare (Bash)

Source: https://context7.com/erlandv/virex/llms.txt

Provides commands for deploying the static site to popular hosting platforms like Vercel and Netlify. It also includes instructions for building the project locally and uploading the output to any static host.

```bash
# Vercel deployment
npm i -g vercel
vercel

# Netlify deployment
npm i -g netlify-cli
netlify deploy --prod --dir=dist

# Build locally and upload to any static host
npm run build
# Upload dist/ folder to GitHub Pages, AWS S3, Firebase, etc.
```

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

### Troubleshoot Virex Authentication

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Logs out of the Virex account and then logs back in to resolve potential authentication issues. This is a common troubleshooting step for connectivity problems with the Virex platform.

```bash
virex logout
virex login
```

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

### Authenticate Virex Account

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/installation.md

Logs the user into their Virex account via the CLI. This command initiates a browser-based authentication flow. Successful authentication is required before project initialization and deployment.

```bash
virex login
```

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

### Astro: Customize Homepage Layout and Components

Source: https://github.com/erlandv/virex/blob/main/docs/06-pages.md

This Astro code example shows how to customize the homepage by importing and composing various marketing layout and section components. It demonstrates passing props to components like `Hero`, `FeaturesSection`, and `CTA` to tailor the content and appearance.

```astro
---
import MarketingLayout from '@/layouts/MarketingLayout.astro';
import Hero from '@sections/marketing/Hero.astro';
import FeaturesSection from '@sections/marketing/FeaturesSection.astro';
import CTA from '@sections/marketing/CTA.astro';
---

<MarketingLayout title="Home">
  <Hero
    title="Your Custom Headline"
    subtitle="Your custom subtitle"
    primaryCTA={{ label: "Get Started", href: "/register" }}
  />

  <FeaturesSection
    title="Why Choose Us"
    features={{/* your features */}}
    background="muted"
  />

  <CTA
    title="Ready to start?"
    action={{ label: "Sign Up Free", href: "/register" }}
  />
</MarketingLayout>
```

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

### Image Reference - Markdown

Source: https://github.com/erlandv/virex/blob/main/docs/04-content-guide.md

Demonstrates how to reference images within Markdown content files. Images are stored in the `public/images/` directory and referenced using absolute paths starting with '/'.

```markdown
![Alt text](/images/blog/my-image.jpg)

```

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

### Configure Virex Site Environment Variables

Source: https://context7.com/erlandv/virex/llms.txt

Example `.env` file for configuring core site settings like URL, name, description, and author. Includes optional variables for authentication (Supabase) and analytics (Google Analytics).

```bash
# .env file - Required environment variables
SITE_URL=https://your-domain.com
SITE_NAME=Your Brand
SITE_DESCRIPTION=Your product description here
SITE_AUTHOR=Your Name

# Optional: Authentication (for dashboard)
SUPABASE_URL=your-project-url
SUPABASE_ANON_KEY=your-anon-key

# Optional: Analytics
PUBLIC_GA_ID=G-XXXXXXXXXX
```

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

### Virex CLI: Deploy from Commit

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/rollbacks.md

Demonstrates how to use the Virex CLI to deploy a specific commit. This is useful when an old deployment is missing due to cleanup and a redeployment from a previous state is necessary.

```bash
virex deploy --commit abc123
```

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

### Virex Just-in-Time (JIT) Provisioning Settings

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/sso.md

Default settings for Just-in-Time (JIT) user provisioning in Virex. When enabled, users are automatically created in Virex upon their first successful SSO login. This example shows how to enable JIT, set a default role, and automatically join specified teams.

```javascript
// Default JIT settings
{
  jitProvisioning: true,
  defaultRole: 'developer',
  autoJoinTeams: ['engineering']
}
```

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

### Virex Deploy Command and Output

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/frameworks.md

Demonstrates the 'virex deploy' command and the automatic detection output for framework, build command, output directory, and Node.js version.

```bash
$ virex deploy

Detecting project settings...
  Framework: Next.js 14
  Build Command: next build
  Output Directory: .next
  Node Version: 20.x

Building...

```

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

### Set Site Metadata via Environment Variables

Source: https://github.com/erlandv/virex/blob/main/docs/02-configuration.md

Configure essential site metadata such as URL, name, description, and author using environment variables. These settings are crucial for SEO, meta tags, sitemaps, and RSS feeds. Ensure you copy `.env.example` to `.env` and populate the variables.

```bash
SITE_URL=https://your-domain.com
SITE_NAME=Your Brand
SITE_DESCRIPTION=Your product description here
SITE_AUTHOR=Your Name
```

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

### Nginx Server Configuration (Nginx)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Sets up Nginx server configuration for serving a static site. It includes listening on port 80, setting the root directory, configuring error pages, and setting cache expiration for static assets.

```nginx
server {
    listen 80;
    server_name yoursite.com;
    root /var/www/dist;

    error_page 404 /404.html;
    
    location / {
        try_files $uri $uri/ /404.html;
    }

    location ~* \.(png|jpg|svg|css|js)$ {
        expires 1y;
    }
}
```

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

### Date Formatting Utility (TypeScript)

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Shows examples of using the `formatDate` utility function for different date formatting styles.

```typescript
import { formatDate } from '@/lib/utils';

formatDate(new Date());
// Returns: "Jan 15, 2025"

formatDate(new Date(), { dateStyle: 'long' });
// Returns: "January 15, 2025"
```

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

### Troubleshoot Build Command Failures (Bash)

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/frameworks.md

Commands for troubleshooting build issues. It's recommended to test your build command locally first to ensure all dependencies are correctly managed within your `package.json`.

```bash
# Test locally first:
npm run build
```

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

### Netlify Build and Redirects Configuration (TOML)

Source: https://context7.com/erlandv/virex/llms.txt

A `netlify.toml` configuration file specifying the build command and publish directory for Netlify deployments. It also includes a redirect rule to handle 404 errors.

```toml
# netlify.toml - Netlify configuration
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/404"
  status = 404
```

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

### Hero Section Component

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Example of using the Hero component for marketing pages. It accepts a title, subtitle, and primary/secondary call-to-action buttons.

```astro
<Hero
  title="Main headline"
  subtitle="Supporting text"
  primaryCTA={{ label: "Get Started", href: "/pricing" }}
  secondaryCTA={{ label: "Learn More", href: "/docs" }}
/>
```

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

### Virex Headers and Redirects Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Defines custom HTTP headers and redirects for a Virex project. This allows for fine-grained control over how requests are handled.

```javascript
export default {
  name: 'my-project',
  
  headers: [
    {
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
      ],
    },
  ],
  
  redirects: [
    {
      source: '/old-page',
      destination: '/new-page',
      permanent: true,
    },
  ],
};
```

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

### Virex Rollback Notification Payload

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/rollbacks.md

This is an example JSON payload for a rollback notification. It includes details about the project, the deployments involved (from and to), the reason for the rollback, and who triggered it.

```json
{
  "event": "rollback",
  "project": "your-project",
  "from": {
    "id": "deployment-abc123",
    "commit": "def456",
    "createdAt": "2024-01-15T10:00:00Z"
  },
  "to": {
    "id": "deployment-xyz789",
    "commit": "abc123",
    "createdAt": "2024-01-14T10:00:00Z"
  },
  "reason": "manual", // or "automatic"
  "triggeredBy": "user@example.com"
}
```

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

### Configure Custom Preview Domains

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/previews.md

Set up custom domain names for your preview deployments using the `domain` property in `virex.config.js`. This allows for branded preview URLs.

```javascript
export default {
  previews: {
    domain: 'preview.yourcompany.com',
    // Results in: pr-123.preview.yourcompany.com
  },
};
```

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

### SocialAuthButtons Component Usage (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Example of using the SocialAuthButtons component for social login/signup, including customization options for divider text and button variants.

```astro
<SocialAuthButtons
  dividerText="Or continue with"
  variant="login"
  googleUrl="/auth/google"
  githubUrl="/auth/github"
/>
```

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

### HowItWorks Component

Source: https://github.com/erlandv/virex/blob/main/docs/05-components.md

Illustrates the usage of the HowItWorks component for visualizing a step-by-step process. It supports different layout variants ('horizontal', 'vertical', 'alternating') and accepts a title, subtitle, and an array of steps, each with a title, description, and icon.

```astro
<HowItWorks
  title="How it works"
  subtitle="Get started in 3 simple steps"
  steps={[
    { title: "Sign up", description: "Create your account", icon: "lucide:user-plus" },
    { title: "Connect", description: "Link your repositories", icon: "lucide:git-branch" },
    { title: "Deploy", description: "Push and go live", icon: "lucide:rocket" },
  ]}
  variant="horizontal"  // 'horizontal' | 'vertical' | 'alternating'
  background="muted"
/>
```

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

### Netlify Forms Integration (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/09-deployment.md

Integrates Netlify Forms into an Astro component for handling form submissions. The `formName` attribute is used to identify the form in Netlify.

```astro
<ContactForm netlify formName="contact" />
```

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

### Create New Dashboard Page (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Example of creating a new dashboard page in Astro. It demonstrates importing layout components and defining breadcrumbs for navigation.

```astro
---
// src/pages/dashboard/analytics.astro
import DashboardLayout from '@/layouts/DashboardLayout.astro';
import Card from '@dashboard-ui/Card.astro';

const breadcrumbs = [
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'Analytics' }
];
---

<DashboardLayout
  title="Analytics"
  description="View detailed analytics"
  breadcrumbs={breadcrumbs}
>
  <h1 class="text-3xl font-bold mb-6">Analytics</h1>
  <Card>
    <!-- Your content -->
  </Card>
</DashboardLayout>
```

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

### Internationalization: Date Formatting Update (TypeScript)

Source: https://github.com/erlandv/virex/blob/main/docs/02-configuration.md

Modifies the date formatting to align with the selected locale. This ensures dates are displayed correctly according to international standards.

```typescript
return new Intl.DateTimeFormat('id-ID', options).format(date);
```

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

### Blog Post Content Collection in Markdown

Source: https://context7.com/erlandv/virex/llms.txt

Defines the structure for blog posts using Markdown/MDX. Supports automatic pagination, tag filtering, and RSS feed generation. Frontmatter includes title, description, publication date, author, image, tags, and draft status.

```markdown
---
# src/content/blog/my-first-post.md
title: "Getting Started with Virex"
description: "Learn how to build your SaaS with Virex theme"
publishedDate: 2025-01-15
author: "Jane Doe"
image: "/images/blog/getting-started.jpg"
tags: ["tutorial", "getting-started"]
draft: false
---

Your blog post content here using Markdown...

## Heading

Regular paragraph text with **bold** and *italic* formatting.

- List item one
- List item two

```javascript
// Code blocks are supported
const greeting = "Hello, World!";
```
```

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

### Virex Deployment Settings Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Configures deployment-specific options for Virex, including target regions, health check endpoints and intervals, and automatic rollback settings.

```javascript
export default {
  name: 'my-project',
  
  // Deployment settings
  regions: ['us-east-1', 'eu-west-1'],
  
  // Health checks
  healthCheck: {
    path: '/api/health',
    interval: 30,
  },
  
  // Automatic rollback on failure
  rollback: {
    automatic: true,
  },
};
```

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

### Virex Environment Variables Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Defines environment variables for Virex deployments, including public variables. Sensitive variables should be managed via the CLI or dashboard.

```javascript
export default {
  name: 'my-project',
  
  env: {
    PUBLIC_API_URL: 'https://api.example.com',
  },
};
```

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

### Documentation Content Collection in Markdown

Source: https://context7.com/erlandv/virex/llms.txt

Defines the structure for documentation pages using Markdown/MDX. Supports automatic sidebar generation based on section and order fields. Frontmatter includes title, description, section, order, and draft status.

```markdown
---
# src/content/docs/getting-started.md
title: "Getting Started"
description: "Quick start guide for new users"
section: "Introduction"
order: 1
draft: false
---

Documentation content here...
```

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

### Virex Environment-Specific Variables Configuration

Source: https://github.com/erlandv/virex/blob/main/src/content/docs/configuration.md

Configures environment variables that differ across deployment environments like staging and production. This allows for tailored configurations per environment.

```javascript
environments: {
  staging: {
    env: {
      PUBLIC_API_URL: 'https://staging-api.example.com',
    },
  },
  production: {
    env: {
      PUBLIC_API_URL: 'https://api.example.com',
    },
  },
},
```

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

### Display Toast Component (Astro)

Source: https://github.com/erlandv/virex/blob/main/docs/07-dashboard.md

Renders a Toast component within an Astro template. This example shows how to trigger the toast message programmatically after an action, like saving changes.

```astro
<Toast />

<script>
  function saveChanges() {
    // Save logic...
    window.showToast({
      message: 'Changes saved successfully',
      variant: 'success'
    });
  }
</script>
```