• Stars
    star
    160
  • Rank 234,703 (Top 5 %)
  • Language
    TypeScript
  • Created almost 3 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Integration to add Netlify CMS’s admin dashboard to any Astro project

Astro + Netlify CMS

Add Netlify CMS’s admin dashboard to any Astro project

Installation

npm i astro-netlify-cms

What is this?

This is an integration for the Astro site builder, which adds support for Netlify CMS, an open-source, Git-based content management system.

Adding the integration will:

  • Add the Netlify CMS dashboard at /admin (or another route if you prefer)
  • Inject Netlify’s Identity Widget across your site to support logging in to the admin app
  • Run a local proxy server in dev mode to allow local content updates via the CMS

Usually each of these requires individual set up and configuration. Using this integration, you configure your CMS once in astro.config.mjs, sit back, and enjoy!

Looking for a quick way to get started? Try out the Blog Starter with Netlify CMS →

Usage

Adding the integration

To add Netlify CMS to your project, import and use the integration in your Astro config file, adding it to the integrations array.

// astro.config.mjs

import { defineConfig } from 'astro/config';
import NetlifyCMS from 'astro-netlify-cms';

export default defineConfig({
  integrations: [
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'main',
        },
        collections: [
          // Content collections
        ],
      },
    }),
  ],
});

Configuration options

You can pass an options object to the integration to configure how it behaves.

adminPath

Type: string
Default: '/admin'

Determines the route where the Netlify CMS admin dashboard will be available on your site.

Feeling nostalgic for WordPress? You could set this to '/wp-admin'!

config

Type: CmsConfig

This option is required. It allows you to configure Netlify CMS with the same options you would use when using Netlify CMS’s config.yml file format.

You can see a full list of configuration options in the Netlify CMS docs.

At a minimum, you must set the backend and collections options:

config: {
  // Use Netlify’s “Git Gateway” authentication and target our default branch
  backend: {
    name: 'git-gateway',
    branch: 'main',
  },
  collections: [
    // Define a blog post collection
    {
      name: 'posts',
      label: 'Blog Posts',
      folder: 'src/pages/posts',
      create: true,
      delete: true,
      fields: [
        { name: 'title', widget: 'string', label: 'Post Title' },
        { name: 'body', widget: 'markdown', label: 'Post Body' },
      ],
    },
  ],
};

previewStyles

Type: Array<string | [string, { raw: true }]>

Sets custom CSS styles to apply in the Netlify CMS preview pane.

You can provide URLs to external CSS stylesheets (Google Fonts for example), paths to local CSS files in your project, or even raw CSS strings:

previewStyles: [
  // Path to a local CSS file, relative to your project’s root directory
  '/src/styles/main.css',
  // An npm module identifier
  '@fontsource/roboto',
  // A URL to an externally hosted CSS file
  'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap',
  // Raw CSS!
  ['p { color: red; }', { raw: true }],
];

disableIdentityWidgetInjection

Type: boolean
Default: false

By default, astro-netlify-cms injects Netlify’s Identity Widget across your site to enable authentication. If you only want to inject the widget on the admin route, you can set disableIdentityWidgetInjection: true.

To-do

  • Support registering custom preview components to render content as it is edited.
  • Support registering custom block components for use in the Markdown editor.

More Repositories

1

astro-embed

Low-JavaScript embed components for Astro websites
JavaScript
175
star
2

astro-og-canvas

Generate OpenGraph images for your Astro site
TypeScript
142
star
3

astro-auto-import

Auto-import components in Astro projects
TypeScript
82
star
4

astro-badge

Badges for Astro projects
Astro
82
star
5

astro-netlify-cms-starter

Blog Starter Template for Astro & Netlify CMS
Astro
35
star
6

hyperdrive-speedometer

Speedlify for Astro sites
Astro
29
star
7

bgio-firebase

🔌 A Firebase Firestore connector for boardgame.io
TypeScript
25
star
8

github-to-linear

View and create Linear tickets from any GitHub PR or issue.
JavaScript
24
star
9

pellicola

🎥 Generate video files from <canvas> animations in Node.js
JavaScript
20
star
10

bgio-effects

📤 Helpers for managing state effects in boardgame.io
TypeScript
19
star
11

cs.2click

🔊 A Better Audio Router for a Modular System.
Max
12
star
12

astro-blog-full-text-rss

XSLT
9
star
13

expressive-code-color-chips

An Expressive Code plugin to add color previews to your CSS code examples
TypeScript
8
star
14

plode

🔣 Fork of IBM Plex Mono with expanded ligatures for code editing
8
star
15

eslint-config-max-msp

🔎 ESLint configuration for [js] and [jsui] objects in Cycling 74’s Max/MSP
JavaScript
6
star
16

load-nextstep-plist

📂 Read and parse a NeXTSTEP property list file
JavaScript
6
star
17

fauxtiverb

🔊 Friendly impulse response reverb with HISSTools’s multiconvolve~.
Max
6
star
18

if-env

🏃❓ Run NPM scripts conditionally based on environment variables
JavaScript
5
star
19

nanoKontrolViz

⚡ A Max Extra for visualising Korg nanoKontrol MIDI messages
Max
4
star
20

avara-variable

🔣 Variable fork of the Avara curveless type family
HTML
4
star
21

troglodyte-angels

🎮 Web Audio synthesis for Clara Iannotta’s Troglodyte Angels Clank By
JavaScript
3
star
22

cs.utensils

🍴 Small reusable Max abstractions
Max
3
star
23

schattenspiel-cnsmdp

💡 Collection of Max patches for operation of an Arduino-controlled motorised sculpture, sample playback, and live sound processing
Max
3
star
24

linter-dryer

☔️ Highlight repetition in Atom to help you stay DRY
JavaScript
2
star
25

whorl

✏️❔ Find out who the author(s) is/are from an input URL
JavaScript
2
star
26

n4m-socket-demo

🚇 An example of how to use websockets with Node for Max
Max
2
star
27

troglodyte-angel-mega-synth

🎻 Central audio synthesis hub for Clara Iannotta’s Troglodyte Angels Clank By
Max
2
star
28

make-glyphs

🔧🔣 Tools for working with .glyphs font files
JavaScript
2
star
29

colloquium-2016

📺 reveal.js slides for colloquium talk
JavaScript
1
star
30

ucsd-talk

📺 reveal.js slides for talk at UCSD
JavaScript
1
star
31

module-starter

Generic project starter kit for building a module for the Music 264 “Modular”
Max
1
star
32

v3.chrisswithinbank.net

💻 Jekyll-based personal website
HTML
1
star
33

hgnm-holding-page

⏳ Holding page for use during redevelopment of http://hgnm.org
CSS
1
star
34

filesize-cli

📏 Command line utility that prints human-friendly file sizes.
JavaScript
1
star
35

pdf2imgpdf

📄➜📄 A command line utility that converts a PDF into a PDF of PNG images!
Shell
1
star
36

aglfn

🔣 Adobe Glyph List For New Fonts as a JSON array
JavaScript
1
star
37

csw-itunes-multiplayer

Max 6 patch to grab tracks from iTunes library and play them
Max
1
star
38

MetaMancunia

Max/MSP audio installation
1
star
39

haze-saver

Max patches for performance of union|haze with ensemble recherche, 21 May 2016
Max
1
star
40

resurrection-box

🎻 Sample playback for Clara Iannotta’s Intent on Resurrection — Spring or Some Such Thing
Max
1
star
41

reading-data

📚 Aggregate data from different sources.
JavaScript
1
star
42

wege-und-waldstille

🎻 Max performance patch for Chris Swithinbank’s Wege & Waldstille (2010)
Max
1
star
43

collaborative-central-patch

Collaborative central patch from Music 264 (Spring 2015) at Harvard University.
Max
1
star
44

music-264-modular

Central class patch for collaborative module development from Music 264 (Spring 2015) at Harvard University.
Max
1
star
45

steel-rosette

Live electronics for steel rosette
Max
1
star
46

supriya-gui

💻 Web GUI for Supriya.
JavaScript
1
star
47

irrelevant-noise

🎻 Performance patch for Chris Swithinbank’s irrelevant noise [subsection (1)(ab)(i)]
Max
1
star
48

wasp-box

🎻 Sample playback for Clara Iannotta’s dead wasps in the jam-jar (ii)
Max
1
star
49

darmstadt-2016

📊 Gender representation data for the 2016 edition of the Darmstadt Summer Courses
SCSS
1
star
50

people-box

🎻 Sample playback for Clara Iannotta’s ‘The people here go mad. They blame the wind.’
Max
1
star
51

write-nextstep-plist

💾 Stringify and write a NeXTSTEP property list atomically
JavaScript
1
star
52

apples

💻 WordPress theme development for claraiannotta.com 🍏🍏🍏
PHP
1
star
53

astro-blog-rss

Created with StackBlitz ⚡️
1
star