astro-netlify-components

🌌 Astro components for Netlify

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 the form 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>

License

MIT

seanmcp / astro-netlify-components Goto Github PK