astro-netlify-components
Usage
Install with your preferred package manager:
npm i astro-netlify-components
Then import the components into your Astro project:
---
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 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)
---
// src/pages/admin.astro
import CMS from "astro-netlify-components/CMS.astro";
---
<CMS />
Note: Make sure to configure your CMS with a config.yml
file in the correct public directory!
Slots
The CMS
component supports the following slots:
- "head": Content rendered in the
<head>
element - "foot": Content rendered in the
<body>
element, after the CMS script
<CMS>
<Fragment slot="head">
<link rel="icon" href="/favicon.ico" />
<style>
/** ... */
</style>
</Fragment>
<script slot="foot">
// Create custom widget
</script>
</CMS>
Form
A helpful type-safe wrapper to create forms with Netlify Forms. The component:
- Requires a
name
prop to identify the form - Adds the
data-netlify=true
attribute to theform
element - Adds a honeypot field
- Warns if your
action
property does not begin with/
---
import Form from "astro-netlify-components/Form.astro";
---
<Form name="contact">
<label>
<b>Name</b>
<input type="text" name="name" />
</label>
<label>
<b>Email</b>
<input type="email" name="email" />
</label>
<label>
<b>Message</b>
<textarea name="message"></textarea>
</label>
<button>Send</button>
</Form>
Props
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.
Identity
A script tag to add to your document.head
to enable Netlify Identity. This is used internally by CMS
(read more).
---
import Identity from "astro-netlify-components/Identity.astro";
---
<!DOCTYPE html>
<html>
<head>
<Identity />
</head>
<body>
<!-- ... -->
</body>
</html>