/cscms

A simple client-rendered CMS written in JavaScript, HTML, CSS and JSON.

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

CS-CMS

A pseudo-CMS written in JavaScript, JSON, HTML5 and CSS3 which is rendered in the client's browser (hence the name: client-side CMS).

Warning

This is not to be used as an alternative to a full-fledged CMS and is, by no means, secure or production-ready!

Background

I've written this software because I needed a fast CMS-like software for my website and installing Plone or Drupal or something else was not suitable to me.

How does it work?

There's one file in the main folder, called index.html. It links to four JavaScript files. The file "onload.js" gets the configuration file, a .json file, lets the "parser.json" parse the initial file set in the configuration onto the HTML-Element "body" and the navigation from "navigation.page" onto the Element "nav". Every link that should be parsed by the CMS should have an onclick-event which links to the CMS' javascript function "openPage(page)", where "page" should be replaced with the page's name without the *.page extension.

Credits

Webfont "BebasNeue.otf" was made by Dharma Type, downloaded form 1001fonts.com (Licensed under SIL Open Font License)
Webfont "Roboto-Regular.ttf" and "RobotoCondensed-Regular.ttf" downloaded from google.com/fonts (Licensed under Apache 2.0)

System Requirements

Since this CMS is fully written in JavaScript, the only thing you need is a browser.

Installation

  1. Clone this repository into the folder you set in Apache's Configuration as the document root.
  2. Open .../assets/json/conf.json in your preferred editor (e.g. VisualStudio Code, Brackets, etc.)
  3. Edit the tags as you like, for example:
    (see assets/json/conf.json)
    title => The Name of your webpage.
    headerbgcolour => The CSS-Colour value of the background of the header (does NOT work with cscms-modern.css).
    headerimg => Your logo.
    headerbgimg => Your hero image.
    initialpagetoparse => The welcome page displayed when first rendering the CMS.
    navigationfile => The *.page file used for the navigation.
  4. Open index.html and choose a CSS-Stylesheet (cscms.css, cscms-standard.css or cscms-modern.css), put it into the "link" tag in the head-section.
  5. Open .../assets/pages/index.page in your editor and edit it that it fits to your requirements.
  6. Open .../assets/pages/navigation.page and edit that it fits to your links. When linking to a CMS page, please remember that the a-elements have to look like < a href="#" onclick="openPage('PAGE')" >My super link</ a >!

Link creation

(1) Add an a-element to your index.page
Open index.page from assets/pages/, add a simple a-element from html source.

(2) Remove href attribute
Use an onclick event instead: onclick="openPage(href)"

(3) Replace openPage(href)
with openPage(yourPageNameWithoutExtension)