npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astro-netlify-cms

v0.5.4

Published

Add Netlify CMS’s admin dashboard to your Astro project

Downloads

197

Readme

Astro + Netlify CMS

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.