wezell/index.html

## index.html
<html>
	<head>
		<script>

			function getUrl(){
				var url = (window.location.hash.length==0)
					? "/about-us/index"
					: window.location.hash.substr(1);
				if(!url.startsWith("/")){
					url = "/" + url;
				}
				if(url.endsWith("/")){
					url = url + "index";
				}
				window.location.hash = url;

				// HERE IS THE API ENDPOINT TO GET THE LAYOUT as a SERVICE back,
				// e.g. https://demo.dotcms.com/api/v1/page/render/about-us/index
				return "https://demo.dotcms.com/api/v1/page/render" + url;
			}
			var url = getUrl();

			console.log("reading:"+url);


			function readJson(url, callback) {
				var req = new XMLHttpRequest();
				req.open("GET", url, true);
				req.setRequestHeader("Authorization", "Basic " + btoa("admin@dotcms.com:admin"));
				req.onreadystatechange = function() {
					if (req.readyState === 4 && req.status == "200") {
						callback(req.responseText);
					}
				}
				req.send();
			}


			window.onload =
				readJson(url, function(text){
					var data = JSON.parse(text);
					if(window.location.search.indexOf("raw=")>-1){

						document.body.innerHTML=text;

					}
					else if(data.layout){
						writeLayoutDocument(data);
					}
					else{
						writeRawDocument(data);
					}
				});


			function writeRawDocument(data){
				document.body.innerHTML=data.page.map.rendered;
			}


			function writeLayoutDocument(data){
				var rows = data.layout.body.rows;
				var myPage = document.createElement('div');
				document.body.appendChild(myPage);
				myPage.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
				myPage.innerHTML="reading from : <a href='" + url + "'>" + url + "</a>";

				if(data.layout.header){
					var header = document.createElement('div');
					header.innerHTML="<h1>Including Header</h1>";
					header.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
					document.body.appendChild(header);
				}


				for(i=0;i<rows.length;i++){
					var row = rows[i];
					var columns = row.columns;

					var thisRow = document.createElement('div');
					thisRow.style.cssText = 'display:flex;flex-direction:row;justify-content:space-between';
					document.body.appendChild(thisRow);


					for(j=0;j<columns.length;j++){
						var column = columns[j];
						var containers = column.containers;
						var thisColumn = document.createElement('div');
						thisColumn.style.cssText = 'flex-basis:' + (column.widthPercent-0) + '%;border:2px solid #9AB3CE;margin:10px;padding:10px;background:#EEF5F9';
						thisRow.appendChild(thisColumn);

						for(k=0;k<containers.length;k++){
							var containerId = containers[k];
							var thisContainerInfo = document.createElement('div');
							thisContainerInfo.style.cssText = "color:gray;text-align:right;"
							thisColumn.appendChild(thisContainerInfo);
							thisContainerInfo.innerHTML="{row:" + (i+1) + ",column:" + (j+1)+ ",width:" + column.widthPercent + "%}";
							var thisContainer = document.createElement('div');
							thisContainer.style.cssText = 'border:3px solid #9AB3CE;background:#ffffff;margin:10px;padding:10px;';
							thisColumn.appendChild(thisContainer);

							// add in the pre-rendered container content
							thisContainer.innerHTML=data.containers[ containerId ].rendered;
						}
					}
				}
				if(data.layout.footer){
					var footer = document.createElement('div');
					footer.innerHTML="<h1>Including Footer</h1>";
					footer.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
					document.body.appendChild(footer);
				}
			}

		</script>
		<base href="https://demo.dotcms.com">
	</head>

	<body></body>
</html>
	<html>
	<head>
	<script>

	function getUrl(){
	var url = (window.location.hash.length==0)
	? "/about-us/index"
	: window.location.hash.substr(1);
	if(!url.startsWith("/")){
	url = "/" + url;
	}
	if(url.endsWith("/")){
	url = url + "index";
	}
	window.location.hash = url;

	// HERE IS THE API ENDPOINT TO GET THE LAYOUT as a SERVICE back,
	// e.g. https://demo.dotcms.com/api/v1/page/render/about-us/index
	return "https://demo.dotcms.com/api/v1/page/render" + url;
	}
	var url = getUrl();

	console.log("reading:"+url);


	function readJson(url, callback) {
	var req = new XMLHttpRequest();
	req.open("GET", url, true);
	req.setRequestHeader("Authorization", "Basic " + btoa("admin@dotcms.com:admin"));
	req.onreadystatechange = function() {
	if (req.readyState === 4 && req.status == "200") {
	callback(req.responseText);
	}
	}
	req.send();
	}



	window.onload =
	readJson(url, function(text){
	var data = JSON.parse(text);
	if(window.location.search.indexOf("raw=")>-1){

	document.body.innerHTML=text;

	}
	else if(data.layout){
	writeLayoutDocument(data);
	}
	else{
	writeRawDocument(data);
	}
	});



	function writeRawDocument(data){
	document.body.innerHTML=data.page.map.rendered;
	}


	function writeLayoutDocument(data){
	var rows = data.layout.body.rows;
	var myPage = document.createElement('div');
	document.body.appendChild(myPage);
	myPage.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
	myPage.innerHTML="reading from : <a href='" + url + "'>" + url + "</a>";

	if(data.layout.header){
	var header = document.createElement('div');
	header.innerHTML="<h1>Including Header</h1>";
	header.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
	document.body.appendChild(header);
	}


	for(i=0;i<rows.length;i++){
	var row = rows[i];
	var columns = row.columns;

	var thisRow = document.createElement('div');
	thisRow.style.cssText = 'display:flex;flex-direction:row;justify-content:space-between';
	document.body.appendChild(thisRow);


	for(j=0;j<columns.length;j++){
	var column = columns[j];
	var containers = column.containers;
	var thisColumn = document.createElement('div');
	thisColumn.style.cssText = 'flex-basis:' + (column.widthPercent-0) + '%;border:2px solid #9AB3CE;margin:10px;padding:10px;background:#EEF5F9';
	thisRow.appendChild(thisColumn);

	for(k=0;k<containers.length;k++){
	var containerId = containers[k];
	var thisContainerInfo = document.createElement('div');
	thisContainerInfo.style.cssText = "color:gray;text-align:right;"
	thisColumn.appendChild(thisContainerInfo);
	thisContainerInfo.innerHTML="{row:" + (i+1) + ",column:" + (j+1)+ ",width:" + column.widthPercent + "%}";
	var thisContainer = document.createElement('div');
	thisContainer.style.cssText = 'border:3px solid #9AB3CE;background:#ffffff;margin:10px;padding:10px;';
	thisColumn.appendChild(thisContainer);

	// add in the pre-rendered container content
	thisContainer.innerHTML=data.containers[ containerId ].rendered;
	}
	}
	}
	if(data.layout.footer){
	var footer = document.createElement('div');
	footer.innerHTML="<h1>Including Footer</h1>";
	footer.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
	document.body.appendChild(footer);
	}
	}

	</script>
	<base href="https://demo.dotcms.com">
	</head>

	<body></body>
	</html>