CMS on a SPA(Single Page Application)

Body Focused CMS

We already made a CMS. That programming was focused on the document header and the header and footer of the document body. That scripting enabled us to copy-paste an empty template html file around anywhere passing in our CMS script and having it ready to go for the body content. Then when we inputed our body content we did it by script too. Aha, we scripted the whole page. Who needs to copy-paste template files around anymore. We can work on a single page.

For example, we loaded page-content into the home and resume pages. With the page content scripted it occurs to the programmer that there is no need to change pages. With the body content scripted, we have a single page application. Our whole website can be browsed from a single page.

This SPA-CMS does not use multiple pages. It does not need to script the document head. It will only script the document body. We will enter the document header code in html as per usual. There is an exception. We will need to script the meta-viewport configuration

We are designing responsive web pages. Responsive web pages are designed to fit small screen sizes. But mobile devices are configured to zoom out big size web pages onto their small screens. The meta-viewport configuration disables the zoom-out configuration. Our entire website will be optimized for the small screen sizes of mobile devices except the resume page. Our resume page will contain an A4 US Letter document whose size is 816x1056 px. It won't be responsive or fit on small screens.

Mission

Write a CMS that scripts the document body only with the exception of the document head's meta-viewport configuration. Since we are not changing pages we will use button nodes for our website's page links instead of anchor link nodes. When we change pages, we will update the documents content; just the heading level 1 h1 node for now to start. For when we change to the resume page, we will write a function to unload the meta-viewport node from the document's head and vice versa.

Initialization

Here is the startup script which gets dom handles by node id, loads the meta-viewport node into the document head. Then loads the body with a main wrapper containing a header, an article and a footer node. Then loads the main header and footer nodes with the same set of page link buttons. Finally a click handler is added. The click handler checks for a match. For the matching page it changes the heading level 1 h1 text loading from the JSON database. It changes the button's id for assigning the styles for the current page button.

a11_appx1y2y3.init.js

All files

And here are all the files

a01_appx1y2y3.js

a03_appx1y2y3.click.js

a05_appx1y2y3.data.js

a11_appx1y2y3.init.js

Demo page

Notice how the heading level 1 h1 node updates between the pages. Notice the meta-viewport tag loads and unloads as we click on and away from the resume page.

We were hoping to update the url's pathname with page changes but any updates to the url initiates a full page reload.

demo