empress-blog-netlify-cms

empress-blog-netlify-cms aims to integrate Netlify CMS with empress-blog.

Empress-blog is a fully-functional, static site implementation of a blog system built on EmberJS.

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.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install empress-blog-netlify-cms

Usage

• Install empress-blog-netlify-cms to the empress-blog project.
• Enable Identity in your netlify project.

Go to netlify-hosted-url/admin/index.html in browser to view the content management system.

For detailed instruction check this blog post.

By default addon configures Netlify CMS with git-gateway backend. You can change this though the addon options.

Options

empress-blog-netlify-cms aims to be zero config implementation to connect Netlify CMS with empress-blog. But if you wish to modify or enhance the default implementation, there are a couple of options available:

netlify-config

(optional, type: Object)

Use this to modify the default netlify-CMS config file. Object passed here will me be merged with the default config object. For options available check out netlify docs.

ember-cli-build.js

  'empress-blog-netlify-cms': {
    'netlify-config: {
      "backend" {
        "name": "github",
        "repo": "owner-name/repo-name"
      }
    }
  }

The default netlify-CMS config config is:

{
   "backend": {
      "name": "git-gateway",
      "branch": "master"
   },
   "media_folder": "public/uploads",
   "public_folder": "/uploads",
   "collections": [
      {
         "name": "blog",
         "label": "Blog",
         "folder": "content/",
         "create": true,
         "slug": "{{year}}-{{month}}-{{day}}-{{slug}}",
         "fields": [
            {
               "name": "title",
               "label": "Title",
               "widget": "string"
            },
            {
               "name": "image",
               "label": "Image",
               "widget": "image",
               "required": false
            },
            {
               "name": "imageMeta",
               "label": "ImageMeta",
               "widget": "object",
               "collapsed": true,
               "fields": [
                  {
                     "label": "attribution",
                     "name": "attribution",
                     "widget": "string",
                     "default": "",
                     "required": false
                  },
                  {
                     "label": "attributionLink",
                     "name": "attributionLink",
                     "widget": "string",
                     "default": "",
                     "required": false
                  }
               ]
            },
            {
               "name": "featured",
               "label": "Featured",
               "widget": "boolean",
               "default": true
            },
            {
               "name": "authors",
               "label": "Authors",
               "widget": "list",
               "default": [
                  "ghost"
               ]
            },
            {
               "name": "tags",
               "label": "Tags",
               "widget": "list",
               "default": [
                  "new"
               ],
               "required": false
            },
            {
               "name": "body",
               "label": "Body",
               "widget": "markdown"
            },
            {
               "label": "Publish Date",
               "name": "date",
               "widget": "datetime",
               "format": "ddd MMM DD YYYY h:mm:ss a"
            }
         ]
      },
      {
         "name": "author",
         "label": "Author",
         "folder": "author/",
         "create": true,
         "slug": "{{name}}",
         "fields": [
            {
               "name": "name",
               "label": "Name",
               "widget": "string"
            },
            {
               "name": "id",
               "label": "Id",
               "widget": "string"
            },
            {
               "name": "image",
               "label": "Image",
               "widget": "image",
               "required": false
            },
            {
               "name": "cover",
               "label": "Cover",
               "widget": "string",
               "required": false
            },
            {
               "name": "website",
               "label": "Website",
               "widget": "string",
               "required": false
            },
            {
               "name": "twitter",
               "label": "Twitter",
               "widget": "string",
               "required": false
            },
            {
               "name": "facebook",
               "label": "Facebook",
               "widget": "string",
               "required": false
            },
            {
               "name": "location",
               "label": "Location",
               "widget": "string",
               "required": false
            },
            {
               "name": "body",
               "label": "Body",
               "widget": "markdown",
               "required": false
            }
         ]
      },
      {
         "name": "tag",
         "label": "Tag",
         "folder": "tag/",
         "create": true,
         "slug": "{{name}}",
         "fields": [
            {
               "name": "name",
               "label": "Name",
               "widget": "string"
            },
            {
               "name": "image",
               "label": "Image",
               "widget": "image",
               "required": false
            },
            {
               "name": "body",
               "label": "Body",
               "widget": "markdown",
               "required": false
            }
         ]
      }
   ]
}

To view the default config in yml, click here.

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 file and provide empress-blog-netlify-cms with the path to your file via the modulePath option.

ember-cli-build.js

  'empress-blog-netlify-cms': {
    modulePath: `${__dirname}/custom-netlify-script.js`
  }

The js file might look like this:

CMS.registerPreviewStyle("/example.css");

publicPath

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

Customize the path to Netlify CMS on your Empress site.

disableIdentityScriptInIndex

(optional, type: boolean, default: false)

By default empress-blog-netlify-cms adds netlify-identity-widget to your index page of the project for netlify user activation mails to work. Pass false if you wish to disable this.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.