StaticAstroFile

The StaticAstroFile resource lets you create Astro component files with automatic formatting and directory creation.

Minimal Example

Creates a basic Astro component file:

import { StaticAstroFile } from "alchemy/fs";

const component = await StaticAstroFile(
  "Header.astro",
  `
---
const title = "Hello World";
---

<h1>{title}</h1>
`
);

Custom Path

Creates an Astro component in a specific directory:

import { StaticAstroFile } from "alchemy/fs";

const component = await StaticAstroFile(
  "header",
  "src/components/Header.astro",
  `---
  import Logo from '../components/Logo.astro';
  const navItems = ['Home', 'About', 'Contact'];
  ---

  <header>
    <Logo />
    <nav>
      {navItems.map(item => (
        <li><a href={item}>{item}</a></li>
      ))}
    </nav>
  </header>
`
);

Full Component Example

Creates a complete Astro component with styles:

import { StaticAstroFile } from "alchemy/fs";

const component = await StaticAstroFile(
  "Header.astro",
  `
---
import Logo from '../components/Logo.astro';
const navItems = ['Home', 'About', 'Contact'];
---

<header class="header">
  <Logo />
  <nav>
    <ul>
      {navItems.map(item => (
        <li><a href={item}>{item}</a></li>
      ))}
    </ul>
  </nav>
</header>

<style>
  .header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
  }
</style>
`
);