astro-netlify-components

0.2.1 • Public • Published

astro-netlify-components

npm npm

🌌 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

Package Sidebar

Install

npm i astro-netlify-components

Weekly Downloads

5

Version

0.2.1

License

MIT

Unpacked Size

7.4 kB

Total Files

6

Last publish

Collaborators

  • seanmcp