### npm Scripts for Project Development and Build

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

Standard npm scripts are provided for managing the project's lifecycle. This includes installing dependencies with `pnpm install`, starting a local development server with `pnpm dev`, building the production site with `pnpm build`, and previewing the production build locally using `pnpm preview`. The scripts also allow direct execution of Astro CLI commands via `pnpm astro`.

```bash
# Install dependencies
pnpm install

# Start development server at http://localhost:4321
pnpm dev

# Build production site with post-build cleanup
pnpm build

# Preview production build locally
pnpm preview

# Run Astro CLI commands directly
pnpm astro
```

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

### Post-Build HTML Cleanup Script (JavaScript)

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

This Node.js script traverses a 'dist' directory to find and clean HTML files. It specifically removes meta tags generated by frameworks like Astro and Starlight to produce cleaner production output. The script uses Node.js built-in 'fs/promises' for file operations.

```javascript
import { readdir, readFile, writeFile, stat } from 'fs/promises'
import { join } from 'path'

const DIST_DIR = 'dist'

async function getHtmlFiles(dir) {
  const files = []
  const entries = await readdir(dir, { withFileTypes: true })

  for (const entry of entries) {
    const fullPath = join(dir, entry.name)
    if (entry.isDirectory()) {
      files.push(...(await getHtmlFiles(fullPath)))
    } else if (entry.name.endsWith('.html')) {
      files.push(fullPath)
    }
  }

  return files
}

async function cleanHtmlFile(filePath) {
  let content = await readFile(filePath, 'utf-8')
  let modified = false

  // Remove Astro generator meta tag
  const astroRegex = /<meta\s+name="generator"\s+content="Astro[^"]*"\s*\/?>/gi
  if (astroRegex.test(content)) {
    content = content.replace(astroRegex, '')
    modified = true
  }

  // Remove Starlight generator meta tag
  const starlightRegex = /<meta\s+name="generator"\s+content="Starlight[^"]*"\s*\/?>/gi
  if (starlightRegex.test(content)) {
    content = content.replace(starlightRegex, '')
    modified = true
  }

  if (modified) {
    content = content.replace(/\n\s*\n\s*\n/g, '\n\n')
    await writeFile(filePath, content, 'utf-8')
    console.log(`Cleaned: ${filePath}`)
  }
}

async function main() {
  console.log('Post-build: Removing generator meta tags...')

  try {
    const files = await getHtmlFiles(DIST_DIR)
    console.log(`Found ${files.length} HTML files`)

    for (const file of files) {
      await cleanHtmlFile(file)
    }

    console.log('Post-build: Complete!')
  } catch (error) {
    console.error('Post-build error:', error)
    process.exit(1)
  }
}

main()

```

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

### Astro SDKCard Component for Language-Specific SDKs

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

The SDKCard component displays information about SDKs for various programming languages, utilizing devicon integrations for visual representation. It supports languages like Python, TypeScript, PHP, Rust, and Go, along with others. The component takes language, title, description, and link as props, with an optional badge, and applies distinct accent colors based on the specified programming language.

```astro
---
import IconPython from '~icons/devicon/python'
import IconTypescript from '~icons/devicon/typescript'
import IconPhp from '~icons/devicon/php'
import IconRust from '~icons/devicon/rust'
import IconGo from '~icons/devicon/go'

interface Props {
  lang: 'python' | 'typescript' | 'php' | 'rust' | 'go' | 'csharp' | 'java' | 'kotlin' | 'ruby' | 'swift';
  title: string;
  description: string;
  href: string;
  badge?: string;
}

const { lang, title, description, href, badge } = Astro.props;

const icons = {
  python: IconPython,
  typescript: IconTypescript,
  php: IconPhp,
  rust: IconRust,
  go: IconGo,
  // ... other languages
};

const langColors = {
  python: '#3776AB',
  typescript: '#3178C6',
  php: '#777BB4',
  rust: '#DEA584',
  go: '#00ADD8',
  // ... other colors
};

const IconComponent = icons[lang];
---

<a href={href} class="sdk-card" style={`--accent-color: ${langColors[lang]}`}>
  <div class="sdk-icon">
    <IconComponent />
  </div>
  <div class="sdk-content">
    <div class="sdk-header">
      <h3>{title}</h3>
      {badge && <span class="sdk-badge">{badge}</span>}
    </div>
    <p>{description}</p>
  </div>
</a>

<!-- Usage Example -->
<div class="sdk-grid">
  <SDKCard
    lang="python"
    title="Python SDK"
    description="Build MCP servers with Python"
    href="https://github.com/modelcontextprotocol/python-sdk"
    badge="Official"
  />
  <SDKCard
    lang="typescript"
    title="TypeScript SDK"
    description="Build MCP servers with TypeScript"
    href="https://github.com/modelcontextprotocol/typescript-sdk"
    badge="Official"
  />
</div>
```

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

### Astro ServerCard Component for Displaying MCP Servers

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

The ServerCard component renders an interactive card for MCP servers, featuring type-specific icons and customizable colors. It accepts props for server type, title, description, link, and an optional badge, with built-in support for a 'featured' state. Icons and colors are defined using JavaScript objects, and the component dynamically applies styles based on the server type.

```astro
---
interface Props {
  type: 'context7' | 'filesystem' | 'git' | 'fetch' | 'memory' | 'time' | 'everything' | 'sequentialthinking';
  title: string;
  description: string;
  href: string;
  badge?: string;
  featured?: boolean;
}

const { type, title, description, href, badge, featured = false } = Astro.props;

const icons: Record<string, string> = {
  context7: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>`,
  filesystem: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`,
  git: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><line x1="3" x2="9" y1="12" y2="12"/><line x1="15" x2="21" y1="12" y2="12"/></svg>`
  // ... other icons
};

const colors: Record<string, string> = {
  context7: '#8b5cf6',
  filesystem: '#f59e0b',
  git: '#ef4444',
  fetch: '#06b6d4',
  memory: '#ec4899',
  time: '#10b981',
  everything: '#f97316',
  sequentialthinking: '#6366f1',
};
---

<a href={href} class:list={"server-card", { featured }}
  style={`--accent-color: ${colors[type]}`}>
  {featured && <div class="featured-glow"></div>}
  <div class="server-icon">
    <Fragment set:html={icons[type]} />
  </div>
  <div class="server-content">
    <div class="server-header">
      <h3>{title}</h3>
      {badge && <span class="server-badge">{badge}</span>}
    </div>
    <p>{description}</p>
  </div>
  <div class="server-arrow">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </div>
</a>

<!-- Usage Example -->
<ServerCard
  type="context7"
  title="Context7 MCP Server"
  description="Document analysis and context extraction for AI agents"
  href="/ai-mcp/mcp-servers-official/"
  badge="Official"
  featured={true}
/>
```

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

### StatsSection Component (Astro)

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

A reusable Astro component that displays a collection of statistics. Each statistic item includes a value, label, and a color, which is used for gradient styling. The component is designed for flexibility and can be easily integrated into pages to visualize data.

```astro
---
interface StatItem {
  value: string;
  label: string;
  color: string;
}

interface Props {
  stats: StatItem[];
}

const { stats } = Astro.props;
---

<div class="stats-container">
  {stats.map((stat) => (
    <div class="stat-item" style={`--stat-color: ${stat.color}`}>
      <span class="stat-value">{stat.value}</span>
      <span class="stat-label">{stat.label}</span>
    </div>
  ))}
</div>

<style>
  .stats-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 2rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, var(--sl-color-bg-nav) 0%, var(--sl-color-gray-6) 100%);
    border-radius: 1.5rem;
    border: 1px solid var(--sl-color-gray-5);
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    min-width: 120px;
  }

  .stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--stat-color);
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--stat-color), color-mix(in srgb, var(--stat-color) 70%, white));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .stat-label {
    font-size: 0.9rem;
    color: var(--sl-color-gray-2);
    text-align: center;
    font-weight: 500;
  }
</style>

<!-- Usage Example -->
<StatsSection stats={[
  { value: '50+', label: 'Articles', color: '#8b5cf6' },
  { value: '400+', label: 'Integrations', color: '#06b6d4' },
  { value: '16', label: 'AI/MCP Guides', color: '#ec4899' }
]} />

```

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

### Translation Utility Function (TypeScript)

Source: https://context7.com/kaktaknet/n8n-mcp.ru/llms.txt

A TypeScript function designed for localization in Astro projects. It resolves translations for given links and descriptions, with a fallback mechanism to a default language. It relies on Starlight's configuration for the default locale and ensures that a translation exists for the default language to prevent errors.

```typescript
import { AstroError } from 'astro/errors'
import starlightConfig from 'virtual:starlight/user-config'

export const defaultLang = starlightConfig.defaultLocale?.lang || starlightConfig.defaultLocale?.locale || 'ru'

export function getTranslation(
  translations: Record<string, string>,
  link: string,
  description: string,
  currentLocale?: string
) {
  const defaultTranslation = translations[defaultLang]

  if (!defaultTranslation) {
    throw new AstroError(
      `The ${description} for "${link}" must have a key for the default language "${defaultLang}".`,
      'Update the Starlight config to include a topic label for the default language.',
    )
  }

  let translation = defaultTranslation

  if (currentLocale) {
    translation = translations[currentLocale] ?? defaultTranslation
  }

  return translation
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.