{"id":20459225,"url":"https://github.com/codingstark-dev/astro-netlify-cms","last_synced_at":"2025-03-05T11:14:59.003Z","repository":{"id":122846670,"uuid":"486996270","full_name":"codingstark-dev/astro-netlify-cms","owner":"codingstark-dev","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-29T14:16:22.000Z","size":2192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"latest","last_synced_at":"2025-01-16T00:23:00.591Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codingstark-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-29T14:10:24.000Z","updated_at":"2022-04-29T14:11:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"243d0817-8d06-4bf2-b73b-e4f722bea738","html_url":"https://github.com/codingstark-dev/astro-netlify-cms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingstark-dev%2Fastro-netlify-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingstark-dev%2Fastro-netlify-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingstark-dev%2Fastro-netlify-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingstark-dev%2Fastro-netlify-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingstark-dev","download_url":"https://codeload.github.com/codingstark-dev/astro-netlify-cms/tar.gz/refs/heads/latest","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242014715,"owners_count":20057879,"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":[],"created_at":"2024-11-15T12:15:29.333Z","updated_at":"2025-03-05T11:14:58.983Z","avatar_url":"https://github.com/codingstark-dev.png","language":"Astro","readme":"# Astro Blog with Netlify CMS\n\nThis example is based on [the basic Astro blog starter kit][starter].\n\nIt adds:\n\n- [Netlify CMS][cms] dashboard at `/admin`\n- Live preview of posts in Netlify CMS\n- [Local proxy server][proxy] to allow local content updates via the CMS\n- Netlify Identity for authenticating with the admin app\n\n## Quick deploy\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy]\n\n☝️ Click this button to copy this project to your own GitHub (or GitLab)\naccount and set up continuous deployment with Netlify as if by magic. ✨\n\nOnce you’ve got the project set up, you do need to\n[activate Netlify Identity in the Netlify UI][identity] and then enable\n[“Git Gateway”][gateway] to allow e-mail/password authentication.\n\n## Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command           | Action                                             |\n| :---------------- | :------------------------------------------------- |\n| `npm install`     | Installs dependencies                              |\n| `npm run dev`     | Starts local dev \u0026 Netlify CMS proxy servers       |\n| `npm run build`   | Build your production site to `./dist/`            |\n| `npm run preview` | Serve `./dist/` \u0026 run the Netlify CMS proxy server |\n\n## Considerations\n\nNetlify CMS is a single-page React app. It supports a live preview pane while\nediting posts, but previews must also be React components. This means any\nlayouts/components that you want to preview in the CMS must be written using\nReact.\n\nWe can also get reasonably good preview support for components in Markdown, but\nthe same caveat applies: they’ve got to be React components. This project\n[registers them as custom editor components][editor-components].\n\nAstro makes it fairly simple to share our components across the site and in the\neditor previews, but it does mean we opt out of some Astro benefits like\nauto-scoped styles and are forced to use React (at least for things that need\npreviewing — this project still uses Astro components for other things).\n\n### Blockers\n\n- Expressions in Markdown, like `{frontmatter.value}` are not supported in live\n  previews. Two blockers from Netlify CMS:\n\n  1. [No support for custom _inline_ preview components][cms5065] (so\n     expressions could work at a block-level, but not in the middle of text).\n\n  2. Editor components can’t access other post data, so it’s not possible to\n     provide variables like `frontmatter` to expressions. (More obviously,\n     APIs like `Astro.request` aren’t available in the browser.)\n\n- Component support in Markdown requires that components are imported in the\n  front matter’s `setup` block. This repository suggests an architecture for\n  providing components to the editor and sets a default `setup` block that\n  imports all currently known components. [A bug][astro2474] in Astro means we\n  can’t (currently) manage with a single `import Components` and then render\n  `\u003cComponent.Button\u003e` or `\u003cComponent.Whatever\u003e`, but if that is fixed, this\n  step can be more robust.\n\n## Project Structure\n\nInside of your Astro project, you'll see the following folders and files:\n\n```\n/\n├── public/\n│    └── ...\n├── src/\n│   ├── collections/       # CMS collection configurations\n│   │   └── posts/\n│   ├── components/\n│   │   ├── index.ts       # Export custom CMS editor components\n│   │   └── ...\n│   ├── layouts/\n│   ├── pages/\n│   │   ├── admin/         # Page for the Netlify CMS admin dashboard\n│   │   ├── posts/\n│   │   └── ...\n│   ├── scripts/\n│   │   └── cms.ts         # Script that configures the CMS admin dashboard\n│   └── styles/\n└── package.json\n```\n\nThis follows the same logic as a standard Astro project. The additional details\nare:\n\n- `src/collections` — This directory exports an array of collection\n  configurations for use by the CMS. Each collection object contains the\n  component used to render a collection item, its CSS, and a configuration\n  object for Netlify CMS, telling it which fields it needs to edit it.\n\n- `src/components/index.ts` — This file similarly exposes components that can\n  be included in Markdown files. That means they also include configuration\n  for what kind of inputs they need.\n\n- `src/pages/admin/index.astro` — This page serves the admin dashboard for\n  Netlify CMS.\n\n- `src/scripts/cms.ts` — This script is imported by the `/admin` page and\n  configures the CMS dynamically based on the components and collections\n  above.\n\n### Adding a new collection\n\n_See `src/collections/posts/index.tsx` for an example._\n\n1. Create a directory with the name of your collection under `src/collections`.\n\n2. Write a component to render an item in the collection.\n\n3. Export the component, its CSS (if any), and a collection object configuring\n   it for Netlify CMS.\n\n4. Add your collection to the export in `src/collections/index.ts`.\n\n### Adding a new editor component\n\n_See `src/components/Author.tsx` for an example._\n\n1. Create a component.\n\n2. Write a configuration object detailing the component’s inputs.\n\n3. Add it to the `Components` and `CMSComponents` exports in\n   `src/components/index.ts`.\n\n[starter]: https://astro.new/blog?on=github\n[cms]: https://www.netlifycms.org/\n[proxy]: https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository\n[deploy]: https://app.netlify.com/start/deploy?repository=https://github.com/delucis/astro-netlify-cms\n[identity]: https://docs.netlify.com/visitor-access/identity/\n[gateway]: https://docs.netlify.com/visitor-access/git-gateway/\n[editor-components]: https://www.netlifycms.org/docs/custom-widgets/#registereditorcomponent\n[cms5065]: https://github.com/netlify/netlify-cms/issues/5065\n[astro2474]: https://github.com/withastro/astro/issues/2474\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingstark-dev%2Fastro-netlify-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingstark-dev%2Fastro-netlify-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingstark-dev%2Fastro-netlify-cms/lists"}