Steps

Use Steps for procedures where order matters: installation, migration, configuration, debugging, or release checklists. Each step should represent one reader action or decision.

Import

import { Steps } from '@prosefly/astro-components';

Basic Usage

1. Install the package.

   pnpm add @prosefly/astro-components

2. Import the component.

   import { Callout } from '@prosefly/astro-components';

3. Write the page.

   Compose the imported components with normal Markdown.

Wrap normal ordered list content in <Steps> to apply the visual step layout.

<Steps>

1. **Install the package.**

   ```sh
   pnpm add @prosefly/astro-components
   ```

2. **Import the component.**

   ```mdx
   import { Callout } from '@prosefly/astro-components';
   ```

3. **Write the page.**

   Compose the imported components with normal Markdown.

</Steps>

Writing Guidelines

• Start each step with a verb.
• Keep one action per step.
• Put commands close to the step that needs them.
• Use callouts inside a step only for risk or important context.

Good Fit

1. Create the content directory.

   mkdir -p src/content/docs/en

2. Register the collection.

   Add docsLoader() and docsSchema() in src/content.config.ts.

3. Write the first page.

   Create src/content/docs/en/index.mdx and add frontmatter.

<Steps>

1. **Create the content directory.**

   ```sh
   mkdir -p src/content/docs/en
   ```

2. **Register the collection.**

   Add `docsLoader()` and `docsSchema()` in `src/content.config.ts`.

3. **Write the first page.**

   Create `src/content/docs/en/index.mdx` and add frontmatter.

</Steps>