{"id":15062413,"url":"https://github.com/seanmcp/astro-netlify-components","last_synced_at":"2026-01-02T13:47:53.853Z","repository":{"id":63828056,"uuid":"567979532","full_name":"SeanMcP/astro-netlify-components","owner":"SeanMcP","description":"🌌 Astro components for Netlify","archived":false,"fork":false,"pushed_at":"2023-02-06T19:58:29.000Z","size":487,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-22T22:37:54.815Z","etag":null,"topics":["astro","netlify","netlify-cms","netlify-forms","netlify-identity"],"latest_commit_sha":null,"homepage":"","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SeanMcP.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-19T04:05:25.000Z","updated_at":"2022-12-07T14:45:21.000Z","dependencies_parsed_at":"2023-02-19T11:45:49.159Z","dependency_job_id":null,"html_url":"https://github.com/SeanMcP/astro-netlify-components","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeanMcP%2Fastro-netlify-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeanMcP%2Fastro-netlify-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeanMcP%2Fastro-netlify-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SeanMcP%2Fastro-netlify-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SeanMcP","download_url":"https://codeload.github.com/SeanMcP/astro-netlify-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725633,"owners_count":20337670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","netlify","netlify-cms","netlify-forms","netlify-identity"],"created_at":"2024-09-24T23:35:37.057Z","updated_at":"2026-01-02T13:47:53.814Z","avatar_url":"https://github.com/SeanMcP.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# astro-netlify-components\n\n[![npm](https://img.shields.io/npm/v/astro-netlify-components.svg)](https://npmjs.com/package/astro-netlify-components) [![npm](https://img.shields.io/npm/dt/astro-netlify-components.svg)](https://npmjs.com/package/astro-netlify-components)\n\n🌌 Astro components for Netlify\n\n## Usage\n\nInstall with your preferred package manager:\n\n```bash\nnpm i astro-netlify-components\n```\n\nThen import the components into your Astro project:\n\n```astro\n---\nimport CMS from \"astro-netlify-components/CMS.astro\";\nimport Form from \"astro-netlify-components/Form.astro\";\nimport Identity from \"astro-netlify-components/Identity.astro\";\n---\n```\n\n## Components\n\n### `CMS`\n\nA full-page component to render the [Netlify CMS](https://www.netlifycms.org/) admin interface. The component:\n\n- Adds the Netlify Identity script to the document `head`\n- Adds the Netlify CMS script to the document `body`\n- Implements a redirect script based on Netlify Identity and `Astro.url.pathname`\n- Exposes \"head\"/\"food\" slots for customization\n- Fixes jumping cursor issue in WebKit browsers ([netlify/netlify-cms#5092](https://github.com/netlify/netlify-cms/issues/5092))\n\n```astro\n---\n// src/pages/admin.astro\nimport CMS from \"astro-netlify-components/CMS.astro\";\n---\n\n\u003cCMS /\u003e\n```\n\n**Note**: Make sure to [configure your CMS with a `config.yml` file](https://www.netlifycms.org/docs/configuration-options/) in the correct public directory!\n\n#### Slots\n\nThe `CMS` component supports the following slots:\n\n- \"head\": Content rendered in the `\u003chead\u003e` element\n- \"foot\": Content rendered in the `\u003cbody\u003e` element, _after_ the CMS script\n\n```astro\n\u003cCMS\u003e\n  \u003cFragment slot=\"head\"\u003e\n    \u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n    \u003cstyle\u003e\n      /** ... */\n    \u003c/style\u003e\n  \u003c/Fragment\u003e\n  \u003cscript slot=\"foot\"\u003e\n    // Create custom widget\n  \u003c/script\u003e\n\u003c/CMS\u003e\n```\n\n### `Form`\n\nA helpful type-safe wrapper to create forms with [Netlify Forms](https://docs.netlify.com/forms/setup/). The component:\n\n- Requires a `name` prop to identify the form\n- Adds the `data-netlify=true` attribute to the `form` element\n- Adds a honeypot field\n- Warns if your `action` property does not begin with `/`\n\n```astro\n---\nimport Form from \"astro-netlify-components/Form.astro\";\n---\n\n\u003cForm name=\"contact\"\u003e\n  \u003clabel\u003e\n    \u003cb\u003eName\u003c/b\u003e\n    \u003cinput type=\"text\" name=\"name\" /\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    \u003cb\u003eEmail\u003c/b\u003e\n    \u003cinput type=\"email\" name=\"email\" /\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    \u003cb\u003eMessage\u003c/b\u003e\n    \u003ctextarea name=\"message\"\u003e\u003c/textarea\u003e\n  \u003c/label\u003e\n  \u003cbutton\u003eSend\u003c/button\u003e\n\u003c/Form\u003e\n```\n\n#### Props\n\n```ts\nexport interface Props extends HTMLAttributes\u003c\"form\"\u003e {\n  name: string;\n}\n```\n\n`name` is the only required prop, and is used by Netlify to identify the form.\n\nIf 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).\n\n### `Identity`\n\nA 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)).\n\n```astro\n---\nimport Identity from \"astro-netlify-components/Identity.astro\";\n---\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cIdentity /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- ... --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanmcp%2Fastro-netlify-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseanmcp%2Fastro-netlify-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanmcp%2Fastro-netlify-components/lists"}