Cloudy CMS era. Implementation example

We continue to talk about the CMS, which is written in Javascript, fully working in the browser and saves to the cloud. The theory was in the previous article , and now - practice. We make the simplest system for static sites - only three buttons and a hundred lines on JS.

TK:

1. Website hosting - cloud storage with the ability to bind your own domain to the container. Anyone that has an HTTP file management API is suitable for us: Amazon S3, Openstack Swift providers or free GitHub Pages. In my case - it will be a cloud Selectel , because I already have an account there.
2. Visual “in-place” editing is when an administrator can edit any item right on the site’s page. Parts of the page that can be edited will be tagged with a special CSS class (“sv”).
3. The mode of editing the source code of an HTML page is in case the WYSIWYG editor cannot cope, or the design of the entire page needs to be changed.

Interface:


The only problem that stands in our way is access to the Selectel repository from the browser via XmlHttpRequest bypassing the same-origin policy.
Selectel itself supports CORS, but auth.selcdn.ru cannot authorize this. Ambush! It is necessary to proxy the request through any server. The ingenious and undervalued hack of Yahoo Tables , which allows you to create simple JSONP services on a mixture of XML markup and Javascript, comes to the rescue. Our “table” will send an authorization request through the Yahoo server and, if successful, return the key to the vault.
In the words of Yahoo Query Language (YQL), everything is elementary:

USE 'http://cms.svsite.com/auth.selectel.xml' AS auth; /*   */ SELECT * FROM auth WHERE url='https://auth.selcdn.ru' AND user='' AND key=''; 

Traffic goes over https, so it’s a safe login. I trust Marissa and the NSA.

CMS code can live anywhere - for example, as a bookmarklet or as a browser extension. I settled it in the same Selectel. Now, in order to “install” CMS on the site, it is enough to upload an html page with a link to our 100-line Javascript. What is not SaaS?
')
So let's summarize.
Our technological stack is bitter to the brim: HTML and jQuery on the front end, Selectel storage and Yahoo Tables backend. If auth.selcdn.ru starts supporting CORS, then you can get rid of the latter.
Interface: three main menu buttons and CKEditor. You can live.

CMS code is available at: cms.svsite.com/sv.js
Demo: demo.svsite.com/admin.html 3341_democms / VdmXrmKpZe
Important! Who saved the last - that and sneakers. Updates are not always immediately visible (CDN cache). All functions are available in the demo, so it will work until someone breaks.

Ps.
1. This is proof of concept.
2. Code is open - send a patch or shut up.
3. Thank you yuhenobi for the story about Selectel Storage.