diff --git a/src/content/docs/en/guides/integrations.mdx b/src/content/docs/en/guides/integrations.mdx
index 0bd000665f5d2..760d8932eea6f 100644
--- a/src/content/docs/en/guides/integrations.mdx
+++ b/src/content/docs/en/guides/integrations.mdx
@@ -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
---
@@ -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.
-## 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).
@@ -96,7 +96,7 @@ If you see any warnings like `Cannot find package '[package-name]'` after adding
:::
-### Manual Installation
+### Manual installation
Astro integrations are always added through the `integrations` property in your `astro.config.mjs` file.
@@ -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:
@@ -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`.
-### 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.
@@ -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.
@@ -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
@@ -218,7 +218,7 @@ To upgrade all official integrations at once, run the `@astrojs/upgrade` command
-### Manual Upgrading
+### Manual upgrading
To upgrade one or more integrations manually, use the appropriate command for your package manager.
@@ -243,7 +243,7 @@ To upgrade one or more integrations manually, use the appropriate command for yo
-## Removing an Integration
+## Removing an integration
1. To remove an integration, first uninstall the integration from your project.
@@ -281,27 +281,27 @@ To upgrade one or more integrations manually, use the appropriate command for yo
```
-## 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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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
---
@@ -484,7 +484,7 @@ import { MyReactComponent } from 'my-component';
```
-#### Example: Using Namespace Imports
+##### Example: Using namespace imports
```astro
---
@@ -494,7 +494,7 @@ import * as Example from 'example-astro-component';
```
-#### Example: Using Individual Imports
+##### Example: Using individual imports
```astro
---
@@ -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/)!