A extremely easy to use JSON2CMS

[milewski]

Project description

As a developer, i work for many clients, some of the projects i usually take are static sites generated thought webpack + webpack-html-plugin, vue, react, angular etc, these projects always require some sort of CMS where the clients can input the data, and this data get feed to the frontend by REST API endpoints or a static json with the whole data dumped to a dir where webpack finishes the job.

Core Idea

The CMS works differently from what you would expect, im aiming for simplicity so here is the way i imagine it could be the simplest ever possible way to archive such CMS

The end user writes a JSON config like this:

{
    "header": {
        "logo": "image",
        "title": "text", // number, range, date, etc....
        "subtitle": "text|max:50|required" // inline validation something like Laravel validation
    },
    "footer": {
        "copyright": "text"
    }
}

run json2cms server --config config.json and based on the given config a CMS is generated to input the described fields,

once the data has been input, any consumer can access the data thought an api /api/header, /api/footer or /api/

there would also need an option to dump the user input data to a local json file so other tools could take it and use to generate static pages like webpack...

json2cms --out data.json which would result in a data exactly like this:

{
    "header": {
        "logo": "/url/to/image.jpg",
        "title": "hello world", 
        "subtitle": "hello world 2"
    },
    "footer": {
        "copyright": "hello world 3"
    }
}

wouldn't matter how you nest your keys, etc, the goal is the json config you write, is what you get. so this cms wouldnt be modifying the keys or nesting it in somehow differently from the original config shape.

Similar Projects

• https://keystonejs.com/

The problem i see with keystonejs is that it requires "coding".. it requires me to read the documentation!, spend hours figuring out how to use it and customize it the way i need.

The json2cms approach would be much more straight forward, the config you write is the json you get back out of it!

Relevant Technology

I have started building it already, but lack of time slow me down, and i dont see when i can finish this project, however the intended stack is:

nodejs + webpack + express + TypeORM + Vue/React + css-modules + sass and most important written inTypescript

for the frontend i am aiming to use any ui library that is popular nowadays for the time being, i would recommend Element.ui

Who is this for

Any developer that requires a simple easy to use CMS without having to touch a line of code but json to create it.

[FredrikAugust]

Very cool! If you have started it already, do you mind posting a link to the code? :)

[techpeace]

I'd definitely recommend checking out Contentful for inspiration, as it offers the functionality you appear to be looking for.

[ryuhhnn]

I definitely second @techpeace on drawing from Contentful as inspiration. I have always wanted to work on a project similar to this. I've always wanted to think of it as more or less a "headless" CMS system. If you've started anything or would like to collaborate I would love to get in contact!

[petrk94]

Checkout jasonette, this is a tool to create android/ios apps based on json, maybe its something helpful to adapt from it?

[milewski]

@FredrikAugust well i got it published here: https://github.com/milewski/json2cms but i have "re-started" it many times, so the dev state is at bare bones yet....

@techpeace i really like Contentful, however most of times it is not a go to for me as i have several issues with network at the current location i live in... but their cms looks very neat... another one which i think is a bit of improvement over Contentfull is StoryBlok .. both can be great fountain of inspiration...

@petrk94 i think the use case is different, but the idea of json is pretty much the same.

[kevinkub]

I absolutely like your idea. I find myself often in the situation you describe. My current idea is to have a building block solution that comes with only a few base types: Text (with validations), Dropdown and File-Input. In Addition to that there may be complex blocks like a Multiple-Block or an Any-Of-Block, which may be nested in each other. So a image gallery may be described as

{
    images: ”multiple“,
    multipleBlock: {
        title: ”text|varchar|max:50”,
        image: ”file|required|image”
    }
}

and a blogpost like

{
    title: ”text”,
    body: ”multiple”,
    multipleBlock: {
        field: ”any-of“,
        anyOfBlock: [
            { content: ”text” },
            { content: ”file|image” }
        ]
    }

You may find a better json structure, but I think this might be able to cover all sorts of smaller CMS requirements.

Sometimes I feel like this is JSON-Schema, but I feel the CMS tooling for JSON-Schema is missing.

[theodesp]

Isn't what https://github.com/typicode/json-server tries to do?

[milewski]

@kevinkub i think my goal is that given this:

{
    images: ”multiple“,
    multipleBlock: {
        title: ”text|varchar|max:50”,
        image: ”file|required|image”
    }
}

it should return this:

{
    images: "multiple", /// <- maybe this should be invalid.... so just ignore and return as it is
    multipleBlock: {
        title: "some text",
        image: "/path/to/image.jpg"
    }
}

otherwise user will have to spend time on documentation learning about how to construct blocks... and because this can turn up to be a huge file, adding logic inside json would become a mess.... so i try to do not change the structure that the user gave as input... nor have special $ fields that does X or Y...

Perhaps a way to archive the same could be:

{
    images: [
      { 
        title: "text|varchar|max:50",
        image: "file|required|image"
      }
    ],   
}

so this could output this:

{
    images: [
      { 
        title: "test",
        image: "/path/to/image"
      },
      { 
        title: "test 2",
        image: "/path/to/image"
      }
    ],   
}

@theodesp that library just mocks the json response... it doesn't build a frontend for you to input the data, u have to input it manually beforehand, the idea here is that u give a json file with the structure u want the response to be, and based on that a CMS is dynamically generated for you (think something like keystone.js, contentful) to fill in these data, and then u can consume it as a REST API or dump to static json file

[kevinkub]

Do you have a concept for multiple sites in mind? Like a blog with multiple posts or even a site with multiple content types (landing page, pricing page, faq page, ...).

[milewski]

Yes nothing would stop you on doing something like the following:

{
    "home": {
        "header": "text",
        "logo": "image",
        "posts": "link:posts,limit=5|paginated"
    },
    "posts": [
        {
            "title": "text",
            "content": "text",
            "cover": "image"
        }
    ]
},

outputs

{
    "home": {
        "header": "Hello World",
        "logo": "path/to/image.png",
        "posts": "https://localhost:3000/posts?limit=5&page=1"
    },
    "posts": [
        {
            "title": "Hello World",
            "content": "Hello World",
            "cover": "path/to/cover.png"
        },
        {
            "title": "Hello World",
            "content": "Hello World",
            "cover": "path/to/cover.png"
        } 
        ...
    ]
}

and nothing would stop you to nest it as deep as you wish:

{
    "landing-page": {
        "home": {
            "header": "Hello World",
            "logo": "path/to/image.png",
            "posts": "https://localhost:3000/posts?limit=5&page=1"
        },
        "posts": [
            {
                "title": "Hello World",
                "content": "Hello World",
                "cover": "path/to/cover.png"
            },
            {
                "title": "Hello World",
                "content": "Hello World",
                "cover": "path/to/cover.png"
            }
        ]
    }
}

[techpeace]

Netlify CMS would also be worth a look.

[milewski]

@hazim-j yeah this is something I'm still interested doing, the repo I started I haven't been able to update that for quite a while...

[petrk94]

I would like to develop something like that, but have lack of time and then it need someone who is continuing the development in that :/