Skip to content

Fix casing and heading levels in guides/integrations.mdx #13596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArmandPhilippot merged 1 commit into from
Mar 26, 2026
Merged

Fix casing and heading levels in guides/integrations.mdx #13596

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/content/docs/en/guides/integrations.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Working with Integrations
title: Working with integrations
description: Learn how to add, configure, and build integrations for your Astro project.
i18nReady: false
---
Expand All @@ -24,13 +24,13 @@ Integrations can…
Browse or search the complete set of hundreds of official and community integrations in our [integrations directory](https://astro.build/integrations/). Find packages to add to your Astro project for authentication, analytics, performance, SEO, accessibility, UI, developer tools, and more.
:::

## Official Integrations
## Official integrations

The following integrations are maintained by Astro.

<IntegrationsNav />

## Automatic Integration Setup
## Automatic integration setup

Astro includes an `astro add` command to automate the setup of official integrations. Several community plugins can also be added using this command. Please check each integration's own documentation to see whether `astro add` is supported, or whether you must [install manually](#manual-installation).

Expand Down Expand Up @@ -96,7 +96,7 @@ If you see any warnings like `Cannot find package '[package-name]'` after adding
</PackageManagerTabs>
:::

### Manual Installation
### Manual installation

Astro integrations are always added through the `integrations` property in your `astro.config.mjs` file.

Expand Down Expand Up @@ -126,9 +126,9 @@ There are three common ways to import an integration into your Astro project:

Check out the [Integration API](/en/reference/integrations-reference/) reference to learn all of the different ways that you can write an integration.

#### Installing an NPM package
#### Installing an npm package

Install an NPM package integration using a package manager, and then update `astro.config.mjs` manually.
Install an npm package integration using a package manager, and then update `astro.config.mjs` manually.

For example, to install the `@astrojs/sitemap` integration:

Expand Down Expand Up @@ -169,7 +169,7 @@ For example, to install the `@astrojs/sitemap` integration:
Note that different integrations may have different configuration settings. Read each integration's documentation, and apply any necessary config options to your chosen integration in `astro.config.mjs`.
</Steps>

### Custom Options
### Custom options

Integrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.

Expand All @@ -180,7 +180,7 @@ integrations: [
]
```

### Toggle an Integration
### Toggle an integration

Falsy integrations are ignored, so you can toggle integrations on & off without worrying about left-behind `undefined` and boolean values.

Expand All @@ -191,11 +191,11 @@ integrations: [
]
```

## Upgrading Integrations
## Upgrading integrations

To upgrade all official integrations at once, run the `@astrojs/upgrade` command. This will upgrade both Astro and all official integrations to their latest versions.

### Automatic Upgrading
### Automatic upgrading

<PackageManagerTabs>
<Fragment slot="npm">
Expand All @@ -218,7 +218,7 @@ To upgrade all official integrations at once, run the `@astrojs/upgrade` command
</Fragment>
</PackageManagerTabs>

### Manual Upgrading
### Manual upgrading

To upgrade one or more integrations manually, use the appropriate command for your package manager.

Expand All @@ -243,7 +243,7 @@ To upgrade one or more integrations manually, use the appropriate command for yo
</Fragment>
</PackageManagerTabs>

## Removing an Integration
## Removing an integration

<Steps>
1. To remove an integration, first uninstall the integration from your project.
Expand Down Expand Up @@ -281,27 +281,27 @@ To upgrade one or more integrations manually, use the appropriate command for yo
```
</Steps>

## Finding More Integrations
## Finding more integrations

You can find many integrations developed by the community in the [Astro Integrations Directory](https://astro.build/integrations/). Follow links there for detailed usage and configuration instructions.

## Building Your Own Integration
## Building your own integration

Astro's Integration API is inspired by Rollup and Vite, and designed to feel familiar to anyone who has ever written a Rollup or Vite plugin before.

Check out the [Integration API](/en/reference/integrations-reference/) reference to learn what integrations can do and how to write one yourself.

## Publishing Your Integration to npm
## Publishing your integration to npm

Publishing an Astro component is a great way to reuse your existing work across your projects, and to share with the wider Astro community at large. Astro components can be published directly to and installed from npm, just like any other JavaScript package.

Looking for inspiration? Check out some of our favorite [themes](https://astro.build/themes/) and [components](https://astro.build/integrations/) from the Astro community. You can also [search npm](https://www.npmjs.com/search?q=keywords:astro-component,withastro) to see the entire public catalog.

:::tip[Don't want to go it alone?]
Check out [Astro Community's component template](https://github.com/astro-community/component-template) for a community-supported, out-of-the-box template!
Check out [Astro community's component template](https://github.com/Princesseuh/component-template) for a community-supported, out-of-the-box template!
:::

### Quick Start
### Quick start

To get started developing your component quickly, you can use a template already set up for you.

Expand Down Expand Up @@ -362,7 +362,7 @@ pnpm create astro@latest demo -- --template minimal

There are two initial files that will make up your individual package: `package.json` and `index.js`.

### `package.json`
#### `package.json`

The `package.json` in the package directory includes all of the information related to your package, including its description, dependencies, and any other package metadata.

Expand All @@ -383,7 +383,7 @@ The `package.json` in the package directory includes all of the information rela
}
```

#### `description`
##### `description`

A short description of your component used to help others know what it does.

Expand All @@ -393,7 +393,7 @@ A short description of your component used to help others know what it does.
}
```

#### `type`
##### `type`

The module format used by Node.js and Astro to interpret your `index.js` files.

Expand All @@ -405,7 +405,7 @@ The module format used by Node.js and Astro to interpret your `index.js` files.

Use `"type": "module"` so that your `index.js` can be used as an entrypoint with `import` and `export` .

#### `homepage`
##### `homepage`

The url to the project homepage.

Expand All @@ -417,7 +417,7 @@ The url to the project homepage.

This is a great way to direct users to an online demo, documentation, or homepage for your project.

#### `exports`
##### `exports`

The entry points of a package when imported by name.

Expand All @@ -433,7 +433,7 @@ The entry points of a package when imported by name.

In this example, importing `my-component` would use `index.js`, while importing `my-component/astro` or `my-component/react` would use `MyAstroComponent.astro` or `MyReactComponent.jsx` respectively.

#### `files`
##### `files`

An optional optimization to exclude unnecessary files from the bundle shipped to users via npm. Note that **only files listed here will be included in your package**, so if you add or change files necessary for your package to work, you must update this list accordingly.

Expand All @@ -443,7 +443,7 @@ An optional optimization to exclude unnecessary files from the bundle shipped to
}
```

#### `keywords`
##### `keywords`

An array of keywords relevant to your component, used to help others [find your component on npm](https://www.npmjs.com/search?q=keywords:astro-component,withastro) and in any other search catalogs.

Expand All @@ -461,7 +461,7 @@ Keywords are also used by our [integrations library](https://astro.build/integra

---

### `index.js`
#### `index.js`

The main **package entrypoint** used whenever your package is imported.

Expand All @@ -473,7 +473,7 @@ export { default as MyReactComponent } from './MyReactComponent.jsx';

This allows you to package multiple components together into a single interface.

#### Example: Using Named Imports
##### Example: Using named imports

```astro
---
Expand All @@ -484,7 +484,7 @@ import { MyReactComponent } from 'my-component';
<MyReactComponent />
```

#### Example: Using Namespace Imports
##### Example: Using namespace imports

```astro
---
Expand All @@ -494,7 +494,7 @@ import * as Example from 'example-astro-component';
<Example.MyReactComponent />
```

#### Example: Using Individual Imports
##### Example: Using individual imports

```astro
---
Expand Down Expand Up @@ -544,7 +544,7 @@ Notice that there was no `build` step for Astro packages. Any file type that Ast

If you need another file type that isn't natively supported by Astro, add a build step to your package. This advanced exercise is left up to you.

### Integrations Library
### Integrations library

Share your hard work by adding your integration to our [integrations library](https://astro.build/integrations/)!

Expand Down
Loading