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

@tdukart/gatsby-plugin-netlify-cms

v4.1.7-beta1

Published

A Gatsby plugin which generates the Netlify CMS single page app

Downloads

3

Readme

gatsby-plugin-netlify-cms

Gatsby v1 and Netlify CMS 1.x require gatsby-plugin-netlify-cms@^2.0.0.

Gatsby v2 and Netlify CMS 2.x require gatsby-plugin-netlify-cms@^3.0.0.

Gatsby v2 and Netlify CMS (netlify-cms-app) 2.9.x required gatsby-plugin-netlify-cms@^4.0.0, which is documented below.

Overview

Automatically generates an admin/index.html with a default Netlify CMS implementation.

Netlify CMS is a React single page app for editing git based content via API. Its built for non-technical and technical editors alike, and its super easy to install and configure. For more details, check out the docs site.

Note: gatsby-plugin-netlify-cms@^4.0.0 changes the requirement for Netlify CMS to use a new library published netlify-cms-app@^2.9.x and is a breaking change.

Install

npm install --save netlify-cms-app gatsby-plugin-netlify-cms

How to use

Add the Netlify CMS plugin in your gatsby-config.js:

plugins: [`gatsby-plugin-netlify-cms`]

Then add your Netlify CMS configuration file in static/admin/config.yml.

Options

Netlify CMS can be configured via the plugin options below. You can learn about how to pass options to plugins in the Gatsby docs.

modulePath

(optional, type: string | Array<string>, default: undefined)

If you need to customize Netlify CMS, e.g. registering custom widgets or styling the preview pane, you'll need to do so in a JavaScript module and provide Gatsby with the path to your module via the modulePath option. Any styles imported by this module (or by the modules that it imports, all the way down the chain) are automatically applied to the editor preview pane by the plugin.

plugins: [
  {
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
      /**
       * One convention is to place your Netlify CMS customization code in a
       * `src/cms` directory.
       */
      modulePath: `${__dirname}/src/cms/cms.js`,
    },
  },
]

The js module might look like this:

/**
 * The default export of `netlify-cms-app` is an object with all of the Netlify CMS
 * extension registration methods, such as `registerWidget` and
 * `registerPreviewTemplate`.
 */
import CMS from "netlify-cms-app"

/**
 * Any imported styles will automatically be applied to the editor preview
 * pane, there is no need to use `registerPreviewStyle` for imported styles.
 * All of the example imports below would result in styles being applied to the
 * preview pane.
 */
import "module-that-imports-styles.js"
import "styles.scss"
import "../other-styles.css"

/**
 * Let's say you've created widget and preview components for a custom image
 * gallery widget in separate files:
 */
import ImageGalleryWidget from "./image-gallery-widget.js"
import ImageGalleryPreview from "./image-gallery-preview.js"

/**
 * Register the imported widget:
 */
CMS.registerWidget(`image-gallery`, ImageGalleryWidget, ImageGalleryPreview)

manualInit

(optional, type: boolean, default: false)

Set this to true If you need to manually initialize Netlify CMS. The plugin will take care of setting window.CMS_MANUAL_INIT to true:

plugins: [
  {
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
      manualInit: true,
    },
  },
]

The js module might look like this:

import CMS from "netlify-cms-app"

/**
 * Optionally pass in a config object. This object will be merged into `config.yml` if it exists
 */

CMS.init({
  config: {
    backend: {
      name: "git-gateway",
    },
  },
})

enableIdentityWidget

(optional, type: boolean, default: true)

enableIdentityWidget is true by default, allowing Netlify Identity to be used without configuration, but you may need to disable it in some cases, such as when using a Netlify CMS backend that conflicts. This is currently known to be the case when using the GitLab backend, but only when using implicit OAuth.

plugins: [
  {
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
      enableIdentityWidget: true,
    },
  },
]

publicPath

(optional, type: string, default: "admin")

Customize the path to Netlify CMS on your Gatsby site.

htmlTitle

(optional, type: string, default: Content Manager)

Customize the value of the title tag in your CMS HTML (shows in the browser bar).

htmlFavicon

(optional, type: string, default: "")

Customize the value of the favicon tag in your CMS HTML (shows in the browser bar).

excludeRobots

(optional, type: boolean, default: true)

Use a meta tag to ask robots to not index the CMS page.

Example

Here is the plugin with example values for all options (note that no option is required):

plugins: [
  {
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
      modulePath: `path/to/custom/script.js`, // default: undefined
      enableIdentityWidget: true,
      publicPath: `admin`,
      htmlTitle: `Content Manager`,
      htmlFavicon: `path/to/favicon`,
      excludeRobots: false,
    },
  },
]

Support

For help with integrating Netlify CMS with Gatsby, check out the community Gitter.