🌌 Astro components for Netlify
Install with your preferred package manager:
npm i astro-netlify-componentsThen 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"; ---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!
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>A helpful type-safe wrapper to create forms with Netlify Forms. The component:
- Requires a
nameprop to identify the form - Adds the
data-netlify=trueattribute to theformelement - Adds a honeypot field
- Warns if your
actionproperty 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>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.
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>