### Install Dependencies and Run Development Server

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Installs project dependencies using Bun and starts the development server.

```bash
bun install
bun run dev
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Clone the project repository and install project dependencies using Bun. This is a prerequisite for starting local development.

```bash
git clone https://github.com/openclaw/openclaw.ai.git
cd openclaw.ai
bun install
```

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

### Onboard to OpenClaw

Source: https://github.com/openclaw/openclaw.ai/blob/main/src/content/blog/openai-models-in-openclaw-done-right.md

Use this command to start the guided onboarding process for OpenClaw.

```bash
openclaw onboard
```

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

### Install Node.js and Bun

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Ensure Node.js v22+ and Bun are installed. Verify installations using the respective version commands.

```bash
node --version  # v22.x.x

curl -fsSL https://bun.sh/install | bash

bun --version
```

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

### Build and Preview Project

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Builds the project for production and starts a local preview server.

```bash
bun run build
bun run preview
```

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

### Example Catalog Integration Item

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/types.md

An example of how to structure a `CatalogItem` object for an integration like Discord. Ensure all required properties are provided.

```typescript
const item: CatalogItem = {
  name: 'Discord',
  desc: 'Servers, channels, DMs, commands, and app events.',
  docs: 'https://docs.openclaw.ai/channels/discord',
  icon: '<svg path>', // Simple Icons SVG
  color: '#5865F2',
  status: 'official'
};
```

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

### Blog Post Front-Matter Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

A complete front-matter example for a blog post, including title, description, date, author details (name, title, org, handle, links, avatar), draft status, tags, and a cover image.

```markdown
---
title: "Building AI Agents with OpenClaw"
description: "Learn how to create powerful AI agents using the new OpenClaw Agent SDK"
date: 2024-01-15
authors:
  - name: "Vincent Koc"
    title: "Chief Architect"
    org: "OpenClaw Foundation"
    handle: "vincent_koc"
    links:
      - label: "@vincent_koc"
        url: "https://x.com/vincent_koc"
      - label: "LinkedIn"
        url: "https://www.linkedin.com/in/koconder/"
    avatar: "/blog/authors/vince-koc.jpg"
  - name: "Jesse Merhi"
    title: "Core Maintainer"
    org: "OpenClaw / Atlassian"
    handle: "jesse_merhi"
draft: false
tags: ["agents", "sdk", "tutorial", "getting-started"]
coverImage: "/blog/agent-sdk-cover.jpg"
---

# Building AI Agents with OpenClaw

Your blog post content in Markdown...
```

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

### Install OpenClaw (Windows)

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Installs OpenClaw on Windows using PowerShell. This command downloads and executes the installation script.

```powershell
powershell -c "irm https://openclaw.ai/install.ps1 | iex"
```

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

### Install OpenClaw (macOS/Linux)

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Installs OpenClaw globally on macOS or Linux systems using curl. This script handles Node.js installation and prompts for onboarding.

```bash
curl -fsSL --proto '=https' --tlsv1.2 https://openclaw.ai/install.sh | bash
```

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

### SectionHeader Usage Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

This example demonstrates how to import and use the SectionHeader component in an Astro file, showing both with and without a link.

```astro
---
import SectionHeader from '../components/SectionHeader.astro';
---

<section class="channels">
  <SectionHeader 
    title="Chat Channels" 
    link={{ href: '/channels', text: 'View all' }}
  />
  
  {/* Channel cards */}
</section>

<section class="features">
  <SectionHeader title="Core Features" />
  
  {/* Feature list */}
</section>
```

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

### Showcase JSON Example Items

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/data-files.md

An example of the JSON structure for showcase items, including fields like id, author, quote, category, and likes. This format is used to populate the showcase section of the website.

```json
[
  {
    "id": "2012535486401671588",
    "author": "dreetje",
    "quote": "What I'm currently doing with @openclaw:\n• Check my incoming mail...",
    "category": "automation",
    "likes": 271
  },
  {
    "id": "2012565160586625345",
    "author": "danpeguine",
    "quote": "Things my @openclaw does for me:\n• Timeblocks tasks in my calendar...",
    "category": "productivity",
    "likes": 257
  }
]
```

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

### Start Local Development Server

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Use this script to start the local development server with hot module reloading enabled. It watches for file changes and rebuilds on save. Typically runs on localhost:3000 or localhost:4321.

```bash
bun run dev
```

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

### Example Catalog Group

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/types.md

Demonstrates the structure of a `CatalogGroup` for 'Hosted models'. It includes a descriptive name, icon, color, and a list of associated links.

```typescript
const group: CatalogGroup = {
  name: 'Hosted models',
  desc: 'Direct model APIs and subscription-backed coding providers.',
  icon: 'lucide:brain',
  color: '#FF7A7A',
  links: [
    { name: 'Mistral', docs: '...' },
    { name: 'DeepSeek', docs: '...' }
  ]
};
```

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

### Common Development Commands

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

A collection of essential commands for local development, including starting the server, building for production, serving the built version, running tests, and formatting code.

```bash
# Start dev server
bun run dev

# Build production version locally
bun run build

# Serve built version locally (test production)
bun run preview

# Run tests
bun run test

# Cache author avatars
bun run avatars:cache

# Format code (if configured)
bun run format

# Lint code (if configured)
bun run lint
```

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

### Install OpenClaw CLI Only (macOS/Linux)

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Installs only the OpenClaw CLI on macOS or Linux, skipping the onboarding process.

```bash
curl -fsSL --proto '=https' --tlsv1.2 https://openclaw.ai/install-cli.sh | bash
```

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

### Example XML Sitemap Output

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/pages-routing.md

This is an example of the XML output for a sitemap, including URLs and last modification dates for SEO.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://openclaw.ai/</loc>
  </url>
  <url>
    <loc>https://openclaw.ai/blog/my-post</loc>
    <lastmod>2024-01-15T00:00:00.000Z</lastmod>
  </url>
  <!-- ... more URLs ... -->
</urlset>
```

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

### Icon Component Usage Examples

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Demonstrates how to use the Icon component with Lucide icons, Simple Icons SVG paths, custom icon objects, and additional CSS classes. Ensure necessary imports for icon sources.

```astro
---
import Icon from '../components/Icon.astro';
import { siIcon, siDiscord } from 'simple-icons';
---

<!-- Lucide icon -->
<Icon icon="lucide:github" color="#00e5cc" size={32} />

<!-- Simple Icons SVG -->
<Icon icon={siIcon(siDiscord)} color="#5865F2" />

<!-- Custom icon -->
<Icon icon={customIconObject} color="#ff4d4d" />

<!-- With CSS class -->
<Icon icon="lucide:search" class="icon-interactive" />
```

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

### Layout Component Astro Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/types.md

Example of using the Layout component in an Astro file, including passing structured data. Ensure the structured data conforms to the expected schema.

```astro
---
import Layout from '../layouts/Layout.astro';

const structuredData = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: "My Blog Post"
};
---

<Layout title="My Blog Post" structuredData={structuredData}>
  <!-- page content -->
</Layout>
```

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

### Rerun Installer with Specific Install Method

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Re-runs the OpenClaw installer, forcing a specific installation method (e.g., git checkout or npm package).

```bash
rerun the installer with --install-method git or --install-method npm
```

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

### Displaying Catalog Statistics in Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/integrations-catalog.md

An Astro component example demonstrating how to iterate over the catalog statistics and display them in a grid format. This requires importing the catalogSnapshot object.

```astro
---
import { catalogSnapshot } from '../data/integrations';
---

<div class="stats-grid">
  {catalogSnapshot.stats.map(stat => (
    <div class="stat">
      <span class="value">{stat.value}</span>
      <span class="label">{stat.label}</span>
    </div>
  ))}
</div>
```

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

### Define Blog Post Front-Matter

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

Example of front-matter for a blog post, including title, description, date, author details, and tags. Ensure all required fields are present for build-time validation.

```markdown
---
title: "My Blog Post"
description: "A short description"
date: 2024-01-15
author: "Vincent Koc"
authorHandle: "vincent_koc"
authorUrl: "https://x.com/vincent_koc"
authorAvatar: "/blog/authors/vince-koc.jpg"
draft: false
tags: ["tutorial"]
---

# My Blog Post

Content here...
```

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

### Icon Component Astro Examples

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/types.md

Demonstrates different ways to use the Icon component: with Lucide icons, SVG paths (Simple Icons), and custom icon objects. Ensure the correct icon source format is used.

```astro
<!-- Lucide icon -->
<Icon icon="lucide:github" color="#00e5cc" size={32} />
```

```astro
<!-- SVG path (Simple Icons) -->
<Icon icon={siIcon(siDiscord)} color="#5865F2" />
```

```astro
<!-- Custom icon object -->
<Icon icon={customIconObject} color="#ff4d4d" />
```

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

### Accessing Blog Posts with Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

Demonstrates how to import and use the `getCollection` function from 'astro:content' to retrieve blog posts. Shows examples for fetching all posts and filtering by a custom condition.

```typescript
import { getCollection, type CollectionEntry } from 'astro:content';

// Get all posts (respects draft filter)
const posts = await getCollection('blog');

// Get with custom filter
const published = await getCollection('blog', ({ data }) => !data.draft);

// Type: CollectionEntry<'blog'>
// Access: post.id, post.slug, post.data, post.render()
```

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

### Blog Post Front-Matter Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/00-START-HERE.md

This YAML front-matter is used for blog posts, defining metadata such as title, description, date, authors, tags, and draft status.

```yaml
---
title: "My Post Title"
description: "Short excerpt"
date: 2024-01-15
authors:
  - name: "Your Name"
    handle: "your_x_handle"
tags: ["tag1", "tag2"]
draft: false
---
```

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

### pnpm Dependency Optimization (`package.json`)

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Specifies binary dependencies for pnpm to only build, optimizing workspace installations. Useful for managing build-time dependencies efficiently.

```json
{
  "pnpm": {
    "onlyBuiltDependencies": [
      "esbuild",
      "sharp"
    ]
  }
}
```

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

### Switch to Development Channel

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Updates the OpenClaw installation from the stable npm package to the development channel using a git checkout.

```bash
openclaw update --channel dev
```

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

### Integrations Catalog Component Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/integrations-catalog.md

A complete Astro component demonstrating how to fetch and display various integration catalog data, including channels, featured providers, provider groups, and built-in tools. Requires 'Icon' component and data imports.

```astro
---
import { 
  channels, 
  featuredProviders, 
  providerGroups, 
  capabilities 
} from '../data/integrations';
import Icon from '../components/Icon.astro';

const allChannels = channels;
const topProviders = featuredProviders;
const providerCategories = providerGroups;
const tools = capabilities;
---

<section class="integrations">
  <h2>Chat Channels ({allChannels.length})</h2>
  <div class="grid">
    {allChannels.map(channel => (
      <a href={channel.docs} class="card">
        <Icon icon={channel.icon} color={channel.color} />
        <h3>{channel.name}</h3>
        <p>{channel.desc}</p>
      </a>
    ))}
  </div>

  <h2>Featured Providers</h2>
  <div class="providers-grid">
    {topProviders.map(provider => (
      <a href={provider.docs} class="provider-card">
        <h3>{provider.name}</h3>
      </a>
    ))}
  </div>

  <h2>All Provider Categories</h2>
  {providerCategories.map(group => (
    <div class="provider-group">
      <h3>{group.name}</h3>
      <ul>
        {group.links.map(link => (
          <li><a href={link.docs}>{link.name}</a></li>
        ))}
      </ul>
    </div>
  ))}

  <h2>Built-in Tools</h2>
  <div class="capabilities-grid">
    {tools.map(tool => (
      <div class="tool-card">
        <Icon icon={tool.icon} color={tool.color} size={32} />
        <h4>{tool.name}</h4>
      </div>
    ))}
  </div>
</section>
```

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

### Switch to Stable Channel

Source: https://github.com/openclaw/openclaw.ai/blob/main/README.md

Updates the OpenClaw installation from the development channel (git checkout) back to the stable npm package.

```bash
openclaw update --channel stable
```

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

### CSS Media Query for Mobile

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Example of a CSS media query used for mobile-first responsive design adjustments.

```css
@media (max-width: 640px) {
  /* Mobile adjustments */
}
```

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

### Define Blog Post Type with CollectionEntry

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

TypeScript example showing how to define a type for blog posts using Astro's `CollectionEntry`. This enables type safety for accessing post data and metadata.

```typescript
import type { CollectionEntry } from 'astro:content';

type BlogPost = CollectionEntry<'blog'>;

// Full type access
const post: BlogPost = { /* ... */ };
post.data.title      // string
post.data.date       // Date
post.data.draft      // boolean
post.data.tags       // string[]
post.id              // collection ID
post.slug            // URL slug
```

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

### Fetch Published Blog Posts in Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

Imports a function to get all published blog posts, ordered by newest first. Excludes drafts unless preview mode is active.

```astro
--- 
import { getPublishedBlogPosts } from '../../lib/blog';

const posts = await getPublishedBlogPosts();
---
```

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

### Fetch Blog Posts with Draft Filtering

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

Example function to fetch blog posts, conditionally including drafts based on the `OPENCLAW_BLOG_PREVIEW_DRAFTS` environment variable. Posts are sorted by date in descending order.

```typescript
import type { CollectionEntry } from 'astro:content';

type BlogPost = CollectionEntry<'blog'>;

export async function getPublishedBlogPosts(): Promise<BlogPost[]> {
  const includeDrafts = import.meta.env.OPENCLAW_BLOG_PREVIEW_DRAFTS === '1';
  const posts = await getCollection('blog', ({ data }) => 
    includeDrafts || !data.draft
  );
  return posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
}
```

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

### Icon Component Rendering Output (Custom with Gradient)

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Example of the HTML output for custom icons that include gradients. Features a SVG element with a 'defs' section for the linear gradient and a path element referencing it.

```html
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad-id" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#color" stop-opacity="1" />
    </linearGradient>
  </defs>
  <path d="..." fill="..." />
</svg>
```

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

### Preview Production Build Locally

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Serves the built `dist/` directory locally to test the production build without actual deployment. This command reads directly from disk and does not use hot reloading.

```bash
bun run preview
```

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

### Build Production-Ready Files

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Compiles Astro pages to static HTML, bundles and minifies assets, optimizes images, and generates production-ready files in the `dist/` directory. Use this before deploying.

```bash
bun run build
```

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

### AuthorLink Type Definition and Example

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/types.md

Represents a labeled social or web link for an author. An example demonstrates its usage with a label and URL.

```typescript
type AuthorLink = {
  label: string;
  url: string;
};
```

```typescript
const link: AuthorLink = {
  label: '@vincent_koc',
  url: 'https://x.com/vincent_koc'
};
```

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

### Styling File Structure

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/00-START-HERE.md

The root layout and reusable components for styling are located in `src/layouts/Layout.astro` and `src/components/*.astro` respectively.

```astro
src/layouts/Layout.astro       ← Root layout, CSS variables, theme toggle
src/components/*.astro         ← Reusable components
```

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

### Complex Page with Layout and Structured Data

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Example of using the Layout component for a complex page, including passing structured data for SEO purposes.

```astro
---
import Layout from '../layouts/Layout.astro';

const structuredData = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: "My Post",
  datePublished: "2024-01-15",
  author: { "@type": "Person", name: "Author" }
};
---

<Layout 
  title="My Blog Post" 
  description="A short excerpt"
  ogType="article"
  structuredData={structuredData}
>
  <article>
    <h1>My Blog Post</h1>
    <!-- content -->
  </article>
</Layout>
```

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

### Configure Local Gateway-Host for Auto Mode

Source: https://github.com/openclaw/openclaw.ai/blob/main/src/content/blog/safer-than-yolo-auto-mode-for-exec-approvals.md

Set up a local gateway-host to opt into automatic approvals for host execution. This configuration is essential for enabling the auto mode.

```bash
openclaw config set tools.exec.host gateway
openclaw config set tools.exec.mode auto
```

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

### Displaying Press Coverage in Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/data-files.md

Example of how to import and display press data on an Astro page. Filters articles into featured and regular sections for distinct presentation.

```astro
---
import pressData from '../data/press.json';

const featured = pressData.filter(p => p.featured);
const regular = pressData.filter(p => !p.featured);
---

<section class="press">
  <h2>Featured in the Press</h2>
  <div class="featured-grid">
    {featured.map(article => (
      <a href={article.url} class="press-card featured">
        {article.image && <img src={article.image} alt={article.publication} />}
        <h3>{article.title}</h3>
        <p class="publication">{article.publication}</p>
        <time>{new Date(article.date).toLocaleDateString()}</time>
      </a>
    ))}
  </div>

  <h2>More Coverage</h2>
  <div class="press-grid">
    {regular.map(article => (
      <a href={article.url} class="press-card">
        {/* ... */}
      </a>
    ))}
  </div>
</section>
```

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

### Create a New Blog Post Draft

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/content-collections.md

Command to create a new markdown file for a blog post within the content collection. Specify the desired file name, including the date.

```bash
# Create file: src/content/blog/2024-01-15-new-post.md
```

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

### Project Documentation Directory Structure

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/REFERENCE-INDEX.md

Lists the directory structure for all documentation files within the Openclaw AI project. Each markdown file covers a specific aspect of the project.

```bash
/workspace/home/output/
├── README.md                     # This overview
├── REFERENCE-INDEX.md            # This navigation guide
├── types.md                      # Type definitions
├── blog-utilities.md             # Blog functions & authors
├── url-security.md               # URL sanitization
├── integrations-catalog.md       # Integration catalog data
├── components.md                 # Astro components
├── content-collections.md        # Blog content configuration
├── pages-routing.md              # Pages & routing
├── data-files.md                 # JSON data files
└── build-and-deployment.md       # Build & deployment

```

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

### Recommended URL Sanitization in Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/url-security.md

Provides an example of how to use the `sanitizeUrl` function within an Astro component to safely render external URLs. Ensure URLs are sanitized before being used in `href` attributes.

```astro
---
// In Astro components
import { sanitizeUrl } from '../lib/sanitize-url';

interface Props {
  link: {
    href: string;
    text: string;
  };
}

const { link } = Astro.props;
const safeHref = sanitizeUrl(link.href);
---

<a href={safeHref}>{link.text}</a>
```

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

### Basic Layout Usage

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Use the Layout component in every page to wrap content with essential HTML structure, meta tags, and theme toggling.

```astro
--- 
import Layout from '../layouts/Layout.astro';
---

<Layout title="Page Title" description="Page description">
  <!-- page content here -->
</Layout>
```

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

### Astro Configuration (`astro.config.mjs`)

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Defines the site's canonical URL, output format (static), and integrates various Astro plugins. Essential for setting up a static site with Astro.

```javascript
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://openclaw.ai',
  output: 'static', // Static site generation
  
  integrations: [
    // Astro integrations
  ],
  
  // Build options
  vite: {
    // Vite configuration
  }
});
```

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

### Image Handling in Astro

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Demonstrates how to use the Astro Image component for optimized image rendering or a standard HTML img tag.

```astro
--- 
import { Image } from 'astro:assets';
import myImage from '../assets/image.jpg';
---

<Image src={myImage} alt="Description" />
<!-- or -->
<img src="/images/image.jpg" alt="Description" />
```

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

### Run Unit and Asset Tests

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Executes unit tests using Bun's built-in test runner and verifies that assets are built correctly. These commands are essential before committing code or in CI/CD pipelines.

```bash
bun run test
```

```bash
bun run test:built-assets
```

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

### Get Cached X Avatar Source

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/blog-utilities.md

Retrieves the URL for a cached X/Twitter avatar. If the avatar is not found in the cache, it falls back to generating an initials avatar using the ui-avatars.com service. Handles URL encoding for special characters.

```typescript
import { getCachedXAvatarSrc } from '../lib/avatars';

// Get cached avatar (if exists)
const url1 = getCachedXAvatarSrc('vincent_koc');
// => '/avatars/x/vincent_koc.jpg' (if cached)

// Fallback to initials
const url2 = getCachedXAvatarSrc('@unknown_user', 'John Doe', 128);
// => 'https://ui-avatars.com/api/?name=John+Doe&background=FF4D4D&color=fff&size=128'

// Invalid handle falls through
const url3 = getCachedXAvatarSrc('invalid@@', 'Unknown');
// => 'https://ui-avatars.com/api/?name=Unknown&...'
```

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

### Astro Component Composition

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/components.md

Demonstrates composing multiple Astro components to build a page layout. Includes importing components and rendering dynamic content.

```astro
---
import Layout from '../layouts/Layout.astro';
import SectionHeader from '../components/SectionHeader.astro';
import Icon from '../components/Icon.astro';

const items = [ /* ... */ ];
---

<Layout title="Integrations">
  <main>
    <SectionHeader 
      title="Chat Channels" 
      link={{ href: '#all-channels', text: 'View all →' }}
    />
    
    <div class="grid">
      {items.map(item => (
        <a href={item.docs} class="card">
          <Icon icon={item.icon} color={item.color} size={32} />
          <h3>{item.name}</h3>
          <p>{item.desc}</p>
        </a>
      ))}
    </div>
  </main>
</Layout>
```

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

### Blog Post File Structure

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/00-START-HERE.md

Blog posts are created as Markdown files within the `src/content/blog/` directory. Front-matter is used for metadata.

```markdown
src/content/blog/*.md          ← Create/edit blog posts here
src/lib/blog.ts                ← Get published posts
src/lib/authors.ts             ← Author profiles
src/content.config.ts          ← Schema definition
```

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

### Rebuild Project

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Executes the build script for the project using bun. This command is used after clearing caches or making significant changes to ensure the project is rebuilt correctly.

```bash
# Rebuild
bun run build
```

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

### Production Dependencies

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

Lists the core packages required for the project's production environment, including the static site generator, RSS feed tools, and image optimization libraries.

```json
{
  "@astrojs/rss": "^4.0.18",
  "@lucide/astro": "^1.22.0",
  "@vercel/analytics": "^2.0.1",
  "astro": "^7.0.4",
  "js-yaml": "^5.2.0",
  "sharp": "0.34.5",
  "simple-icons": "^16.23.0"
}
```

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

### Project Directory Structure

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/README.md

Overview of the file and directory organization for the OpenClaw.ai project.

```tree
openclaw.ai/
├── src/
│   ├── components/         # Reusable Astro components
│   ├── data/              # JSON data files and TypeScript data modules
│   ├── layouts/           # Astro page layouts
│   ├── lib/               # Utility functions and data processing
│   ├── pages/             # Astro pages (auto-routed)
│   ├── content/           # Content collections (blog posts)
│   └── content.config.ts  # Content collection schema definition
├── public/                # Static assets (images, icons, favicons)
├── package.json
└── astro.config.mjs
```

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

### Login to OpenAI with API Key

Source: https://github.com/openclaw/openclaw.ai/blob/main/src/content/blog/openai-models-in-openclaw-done-right.md

Configure OpenClaw to use a direct API key for OpenAI agent turns as a backup or alternative to subscription authentication.

```bash
openclaw models auth login --provider openai --method api-key
```

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

### Clear Cache and Reinstall Dependencies

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/build-and-deployment.md

This command sequence clears the node_modules and .astro cache directories, then reinstalls project dependencies using bun. It's useful for resolving issues caused by corrupted caches or dependency conflicts.

```bash
# Clear cache and reinstall
rm -rf node_modules .astro
bun install
```

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

### Configure Slack Exec Approvals

Source: https://github.com/openclaw/openclaw.ai/blob/main/src/content/blog/where-openclaw-security-is-heading.md

Configure Slack integration for executive approvals, specifying approvers and enabling auto-approval mode.

```json5
{
  commands: {
    ownerAllowFrom: ["slack:U12345678"],
  },
  channels: {
    slack: {
      execApprovals: {
        enabled: "auto",
        target: "dm",
      },
    },
  },
}
```

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

### Utility File Structure

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/00-START-HERE.md

Utility functions for SEO, avatar caching, and URL sanitization are found in the `src/lib/` directory.

```typescript
src/lib/seo.ts                 ← SEO functions
src/lib/avatars.ts             ← Avatar caching
src/lib/sanitize-url.ts        ← URL validation
```

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

### Showcase Component Usage

Source: https://github.com/openclaw/openclaw.ai/blob/main/_autodocs/data-files.md

This Astro component demonstrates how to import and render showcase data from `showcase.json`. It iterates over the JSON array to display each item's quote, author, category, and likes.

```astro
--- 
import showcaseData from '../data/showcase.json';
---

<div class="showcase-grid">
  {showcaseData.map(item => (
    <blockquote class="showcase-item">
      <p>{item.quote}</p>
      <footer>
        <strong>{item.author}</strong> ({item.category})
        <span class="likes">{item.likes} ❤️</span>
      </footer>
      {item.images && item.images.map(img => (
        <img src={img} alt="Tweet image" />
      ))}
    </blockquote>
  ))}
</div>
```