https://github.com/seanmcp/astro-netlify-components
🌌 Astro components for Netlify
https://github.com/seanmcp/astro-netlify-components
astro netlify netlify-cms netlify-forms netlify-identity
Last synced: 5 months ago
JSON representation
🌌 Astro components for Netlify
- Host: GitHub
- URL: https://github.com/seanmcp/astro-netlify-components
- Owner: SeanMcP
- License: mit
- Created: 2022-11-19T04:05:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-06T19:58:29.000Z (over 3 years ago)
- Last Synced: 2025-02-22T22:37:54.815Z (over 1 year ago)
- Topics: astro, netlify, netlify-cms, netlify-forms, netlify-identity
- Language: Astro
- Homepage:
- Size: 476 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# astro-netlify-components
[](https://npmjs.com/package/astro-netlify-components) [](https://npmjs.com/package/astro-netlify-components)
🌌 Astro components for Netlify
## Usage
Install with your preferred package manager:
```bash
npm i astro-netlify-components
```
Then import the components into your Astro project:
```astro
---
import CMS from "astro-netlify-components/CMS.astro";
import Form from "astro-netlify-components/Form.astro";
import Identity from "astro-netlify-components/Identity.astro";
---
```
## Components
### `CMS`
A full-page component to render the [Netlify CMS](https://www.netlifycms.org/) admin interface. The component:
- Adds the Netlify Identity script to the document `head`
- Adds the Netlify CMS script to the document `body`
- Implements a redirect script based on Netlify Identity and `Astro.url.pathname`
- Exposes "head"/"food" slots for customization
- Fixes jumping cursor issue in WebKit browsers ([netlify/netlify-cms#5092](https://github.com/netlify/netlify-cms/issues/5092))
```astro
---
// src/pages/admin.astro
import CMS from "astro-netlify-components/CMS.astro";
---
```
**Note**: Make sure to [configure your CMS with a `config.yml` file](https://www.netlifycms.org/docs/configuration-options/) in the correct public directory!
#### Slots
The `CMS` component supports the following slots:
- "head": Content rendered in the `` element
- "foot": Content rendered in the `` element, _after_ the CMS script
```astro
/** ... */
// Create custom widget
```
### `Form`
A helpful type-safe wrapper to create forms with [Netlify Forms](https://docs.netlify.com/forms/setup/). The component:
- Requires a `name` prop to identify the form
- Adds the `data-netlify=true` attribute to the `form` element
- Adds a honeypot field
- Warns if your `action` property does not begin with `/`
```astro
---
import Form from "astro-netlify-components/Form.astro";
---
Name
Email
Message
Send
```
#### Props
```ts
export interface Props extends HTMLAttributes<"form"> {
name: string;
}
```
`name` is the only required prop, and is used by Netlify to identify the form.
If you pass an `action` prop that does not start with a `/`, then the component will throw an error. [Read Netlify's docs about success redirects](https://docs.netlify.com/forms/setup/#success-messages).
### `Identity`
A script tag to add to your `document.head` to enable [Netlify Identity](https://docs.netlify.com/visitor-access/identity/). This is used internally by `CMS` ([read more](https://www.netlifycms.org/docs/add-to-your-site/#add-the-netlify-identity-widget)).
```astro
---
import Identity from "astro-netlify-components/Identity.astro";
---
```
## License
[MIT](/LICENSE)