Following on from an earlier post (User Defined Content), I expanded my code to create a very simple CMS using google docs to allow the client to edit the page.
Setup:
Google Docs:
Create a doc for each page you want to manage, add your text, then File>Share>Publish to Web
Copy the link in the publish to web dialog box to be added to the relevant gdoc in the javascript
Bootstrap Studio
In your bss page create an empty heading element with an ID of showtitle, and an empty div with an ID of showcontent
bsdesign file available here if you want to test: simplecms.bsdesign - Google Drive
It uses just one js file:
var url = location.href.split("#")[0]; //set url removing any anchors
url = url.split("?")[0]; //remove any parameters from url
var gdoc = ""; //set gdoc to empty
/*set the homepage*/
if (
url.includes("index.html") ||
url == "https://cms.bss.design/" ||
url == "http://cms.bss.design/" //change to YOUR homepage with https and http
) {
gdoc =
"https://docs.google.com/document/d/e/2PACX-1vRVG8Bsugj9h041OCos6RGInDu7SYeUfh04gn8FtgPHHBKJX3jkT3UGBfuH2WiVNyoJ3JxhyQEC3uYD/pub";
}
/*set other pages*/
if (url.includes("sample-page.html")) {
gdoc =
"https://docs.google.com/document/d/e/2PACX-1vR4z7VBP67vY6P9m_EnG6eImP8-v1roN8Y7DL5S5UcA5QhX9iPuIMQR0w128RE6NpVyjAZLGo8dpmeS/pub";
}
if (url.includes("another-sample.html")) {
gdoc =
"https://docs.google.com/document/d/e/2PACX-1vSvvJknJMPbWBmweVB5vKNoXhYiyBJzvAKOCZNrpMKHEf5-hoG2-sLjadP_Xb-IW1S3nGPrmMDKu0PA/pub";
}
// ---------------------------------------------------------------------------------------------
if (gdoc != "") {
fetch(gdoc)
.then(function (response) {
return response.text();
})
.then(function (html) {
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var title = doc.querySelector("#title").innerHTML;
var content = doc.querySelector(".doc-content").innerHTML;
content = content.replace(/<span\/?[^>]+(>|$)/g, ""); //remove spans created by google docs
document.querySelector("#showtitle").innerHTML = title;
document.querySelector("#showcontent").innerHTML = content;
document.querySelector("#showcontent img").removeAttribute("style"); //remove the google docs styles for images
})
.catch(function (err) {
console.warn("Something went wrong.", err);
});
}
Example here: