Datacat-cms NPM

Installation

npm install datacat-cms

Requirements

VueJS 2.x

Add this code to these files

build/build.js

const indexer = require('datacat-cms/build')
indexer.indexFiles()
indexer.indexContent()

src/main.js

require('datacat-cms/admin')

And to load content for displaying:

store.commit('content/loadConfig')
store.commit('content/loadContent')

App.vue

Replace #app with:

#app(v-if='$route.path.indexOf("/admin") !== 0')

index.html

    <div id="admin"></div>

below the app tag.

router/index.js

    {
      path: '/admin',
      beforeEnter: (to, from, next) => {
        if (from.matched.length > 0) { // experimental fix for multi routers
          next()
          return location.reload()
        }

        next()
      }
    },

Before your 404 route. This is experimental for now.

Content

Add a content folder to your project root.

Inside this new folder, add config.json with these defaults:

{
  "upload_folder": "static/content",
  "contenttypes": [
    "blogpost"
  ]
}

And since we have now defined a content type named blogpost, add a blogpost folder inside the content folder. Here is an example for it:

{
  "name": "blogpost",
  "create": true,
  "fields": [
    {
      "name": "slug",
      "type": "hidden",
      "required": true
    },
    {
      "name": "draft",
      "type": "boolean",
      "label": "Draft (drafts are not published)",
      "default": true
    },
    {
      "name": "title",
      "type": "string",
      "label": "Title",
      "required": true,
      "overviewShow": true
    },
    {
      "name": "subtitle",
      "type": "string",
      "label": "Subtitle",
      "default": "default subtitle"
    },
    {
      "name": "readtime_minutes",
      "type": "number",
      "label": "Read time (in minutes)"
    },
    {
      "name": "publishdate",
      "type": "date",
      "label": "Publish Date",
      "overviewShow": true
    },
    {
      "name": "body",
      "type": "markdown",
      "label": "Body",
      "required": true,
      "overviewShow": true
    },
    {
      "name": "tags",
      "type": "array",
      "arraytype": "string",
      "label": "Tags",
      "default": [123, 4]
    }
  ]
}

overviewShow means that the specified field will be used in the overview list preview.

And to prevent _content.json and _files.json to get added to git, .gitignore them:

content/_content.json
content/_files.json

VueX

To use the content, add the datacat client module to your VueX instance:

import content from 'datacat-cms/client'

Auth0

Datacat uses auth0 for authentication. You must set your domain and client id in the config/settings.json file:

{
  "auth0": {
    "domain": "my.auth0.domain",
    "clientId" "client-id"
  }
}


# Improvements

So yea obviously this is alot of work, but this is a very early version of this system.