Building the World's Simplest CMS in Javascript

Worlds Simplest CMS

Introduction

This is an example of how to build the World's Simplest CMS using HTML, CSS, and Javascript. The full code can be found at: https://codepen.io/philipmunce/pen/KKwxKRE and I am building this myself to be able to create an easy to use static site generator, and also to work through the 7 projects in 7 days Twitter challenge. Any feedback would be appreciated

Architecture

Content

The content for each page is held within the HTML document itself inside a <div id="contentEdit"></div> section. Any text inside this section will render as HTML provided that text is entered as markdown.

Template

A <div class="page"></div> is provided to wrap the page content. Inside the div is a <div class="contentDisplay"></div>, this div should be left as is.

CSS

The CSS is used to hide the contentEdit section which will be rendered in the javascript. An example is also given of how to format a code section in the output:

  .page #contentDisplay code {
  background-color: #FFFF99;
}

In this case I have set up the template to display a yellow background highlight for code blocks.

Javascript

The Javascript works by loading the contents of contentEdit into memory and then rendering the content from Markdown to HTML using the Showdown library, see Showdown for more information about this library.

const content = document.getElementById('contentEdit').innerHTML;
const converter = new showdown.Converter();

document.getElementById('contentDisplay').innerHTML = converter.makeHtml(content);

Next Steps

The next steps for this are to look at:

• supporting multiple sections to be able to create a landing page,
• to support scripting to render a static site,
• to support tables, and
• to better support line breaks in the input.