Giter VIP home page Giter VIP logo

cms-json's Introduction

cms-json

A lightweight CMS loading and saving its data from/to a json file

Build Dependencies NPM Downloads MIT Node.js version

cms-json: A lightweight CMS loading and saving its data from/to a json file

Install

npm install -g cms-json

Playground

You can give cms-json a shot in the playground. It runs the CMS with a default JSON and Schema files. The Save functionality is disabled, but you can export your work via the 'Export' button.

Quick Start

cms-json

Then open your browser at:

http://localhost:3000

Why do I need this?

In a small IT company, the question of how and by whom your website can be updated is a recurrent one.

I have explored many solutions, from pure HTML sites controlled by the dev team, using fancy web frameworks, to sites generated by the marketing/product team using pure wysiwyg tools like Adobe Muse, not to mention heavy stuff like Wordpress or Drupal.

I finally came up with that very simple feature set:

  • The Content part of my site is stored as a JSON file
  • It can be edited by tech or non tech people via a very simple UI
  • It is embedded in the web site / web app by developers, and exploited with the technology they like
  • It can be stored in Git, so that in case of conflicts, it can be solved as with any other source files
  • Last but not least, it can be run as an npm module. No Apache, no nginx, no PHP, no database, just simplicity of use.

Although tons of CMS products exist on the market, I didn't find any one fulfilling the constraints above.

Usage

Usage: cms-json {OPTIONS}

Standard Options:

    --schema, -s   JSON schema file.
                   Default is data/schema.json.

    --data, -d     JSON data file.
                   Default is data/data.json.

    --port, -p     Server port.
                   Default is 3000.

What's new

v0.1.1

  • The 'model' files are now standard JSON Schema Draft 6 files. See http://json-schema.org/.
  • Added a 'Developer' mode, to add/edit/delete nodes and fields. This mode is activated by default. Switching to 'Author' mode disables all schema editing features.
  • On a side note, I migrated the entire code base to Typescript.

v0.1.3

  • Show JSON data and schema on the right and sync with editor
  • Improved author view (removed useless dev stuff)

API

run([options]) โ‡’ *

Run an Express server embedding a simple UI for editing the content of the given dataFile.

Kind: global function
Returns: * - The express app

Param Type Description
[options] Object
[options.dataFile] Object A JSON file with the content. This parameter is mandatory. The content authored from the web site will be saved with that path name. The structure of this JSON file must match the model. See an example here: https://github.com/amelki/cms-json/blob/master/default/data.json
[options.modelFile] Object A JSON schema file representing the model to support/ease authoring via the UI. This parameter is mandatory. See an example here: https://github.com/amelki/cms-json/blob/master/default/schema.json
[options.port] Object The server port. 3000 by default

cms-json's People

Contributors

amelki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

cms-json's Issues

Reuse types across nodes

If one define:

{
  pages: [
    home: {
      title: "Home page",
      content: "the content"
    }
  ]
}

It would be very convenient to be able to create another node under 'pages' (eg 'about') that obey to the same structure (same fields, same subtree).
This would mean supporting JSON schema definitions/$ref, and be able to define and use these via the UI.

Support polymorphism in arrays and maps

Be able to create different types of objects in a list or in an object map.
Eg:

{
  assets: {
    key1: {
      type: "image",
      src: "foo.png",
      width: "100px",
      height: "100px"
    },
    key2: {
      type: "link",
      url: "http://helloworld.com",
      target: "_blank"
    }
  }
}

CMS supported?

Hey there. I tried to run it but getting error

module.js:549
    throw err;
    ^

Looks promising, but a few questions

Hey, stumbled upon this and it seems like something I would have a need for. I do have a few questions if you would be kind enough to answer :)

My use-case would be a single-deploy react + node app, where the backend would consist of pretty much only the json-cms. I would imagine using it something like this:

  • Expose a route for the admin UI at e.g. /api/admin
  • Expose a route for getting all of the json data in one request at e.g. /api/data
  • Have a default data.json & schema.json stored in version control, which does not overwrite any changes made on the deployed version of the app on new deploys

As for the questions:

  • Is it possible to run this as a module inside of a node.js app? How does that work?
  • Does the library expose some sort of api for accessing the cms data, or do I need to create my own routes for accessing certain parts of the data?
  • Is it possible to persist changes made via the visual editor between deploys, or will it always replace the data with whatever is in version control?

Thanks in advance :)

Creating different pages with components

Use case:
I'd like to be able to create different pages with components

Issue:
At the child level the array only supports strings, so there is no way to create a different page layout as far as I can tell

Desired outcome
Being able to generate something like the following would be great:

"pages": [
  {
    "key": "Home",
    "heading": "Home Page",
    "items": [
      {
        "id": "1"
        "type": "carousel",
        "images": [
          { src: "", alt: ""},
        ]
      },
      {
        "key": "2",
        "type": "table",
        "title": "my table"
        "items": [
          {
            "type": "tableRow"
            "title": "My title",
            "description": "My description"
          }
        ]
      }
    ]
  },
  {
    "key": "About Us Page",
    "heading": "About Us",
    "items": [
      {
        "key": "2",
        "type": "image",
        "src": "",
        "alt": "",
        "caption": "My image caption"
      },
      {
        "id": "1"
        "type": "markdown",
        "markdown": "My markdown text"
      }      
    ]
  }
]

Merge 'Add node' buttons

There should only be one 'Add node' button, instead of the current 'Add Node', 'Add List', 'Add String Map', 'Add Object Map'.
The selection of the type of node to add should be done in a dialog, that would better explain what each type of node is about.

Access of data via API

Hello, is there please a way to access the data via rest API: cms-json --schema data/schema.json --data data/data.json --port 3000?
Or do I have to use a json-server for that json-server data/data.json --port 3001?

curl "http://localhost:3000/node/meetings"
curl "http://localhost:3000/meetings"

Thanks.

Cannot add a top level node

First off, I think this is a great project you're working on! Perfect for small-infrequently changing websites like I need. I'm having some issues getting up and running though.

  • I cannot add a top level node (same in demo http://tenorcms.com/)
  • Because you cannot add nodes, starting with empty json files means you can't do anything
  • hitting save triggers a 404 and no data is saved. URL changes to http://localhost:3001/node//new_tree# and UI goes blank
  • deep linking does not persist on reload (e.g. navigating directly to /node/pages results in blank page.)

Thank you so much!

Define a field as a complex object

Currently, a field can only have a primitive type (string, string[], boolean).
It should be possible to define some sub-objects and arrays of sub-objects and use them as field types
eg:

{
  pages: [
    home: {
      title: "Home Page",
      seo: {
        keywords: ["foo", "bar", "hux"],
        canonicalUrl: "http://acme.com/home"
      }
    }
  ]
}

Number type doesn't appear/function

When setting the type to a number, nothing happens and it remains a string. The number type also does not appear in the drop down list.

@amelki would be a great help if you could deploy a quick update to fix this :)

Populating an array into data.json from user input

I'm trying to create a model that allows a user to enter in a comma-separated list of items which will then populate data.json with an array. Looking at the available types, I don't really see a clear cut way to do this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.