<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/powershell.min.js"></script>
<script>
- const article = document.getElementsByTagName("article")[0];
+ const article = document.getElementsByTagName('article')[0];
article.innerHTML = '<div class="skeleton-line"></div>'.repeat(20);
const mapping = {
- TITLE: "# ",
- SUBTITLE: "",
- HEADING_1: "## ",
- HEADING_2: "### ",
- HEADING_3: "#### ",
- NORMAL_TEXT: "",
+ TITLE: '# ',
+ SUBTITLE: '',
+ HEADING_1: '## ',
+ HEADING_2: '### ',
+ HEADING_3: '#### ',
+ NORMAL_TEXT: '',
};
const inject = (googleDoc) => {
document.title = googleDoc.title;
- article.innerHTML = "";
- let articleContent = "";
+ article.innerHTML = '';
+ let articleContent = '';
for (let content of googleDoc.body.content) {
const tag = mapping[content?.paragraph?.paragraphStyle?.namedStyleType];
const bullet = content?.paragraph?.bullet ? '- ' : '';
};
(async () => {
- const proxyUrl = "https://cms.ardislu.dev/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec";
- const documentId = window.location.pathname.split("/").pop();
+ const proxyUrl = 'https://cms.ardislu.dev/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec';
+ const documentId = window.location.pathname.split('/').pop();
const url = `${proxyUrl}?https://docs.googleapis.com/v1/documents/${documentId}`;
await fetch(url)
navigator.serviceWorker.register('/sw.js');
}
-const main = document.getElementsByTagName("main")[0];
+const main = document.getElementsByTagName('main')[0];
const initialColumns = Math.max(1, Math.floor(main.clientWidth / 320) - 1);
/* Generic element builders */
const createColumnElement = () => {
- const el = document.createElement("div");
- el.classList.add("column");
+ const el = document.createElement('div');
+ el.classList.add('column');
return el;
};
const createSkeletonElement = () => {
- const el = document.createElement("article");
- el.classList.add("card");
+ const el = document.createElement('article');
+ el.classList.add('card');
el.innerHTML = '<div class="skeleton-line"></div>'.repeat(6);
return el;
};
const createArticleElement = (article) => {
- const el = document.createElement("article");
- el.classList.add("card");
+ const el = document.createElement('article');
+ el.classList.add('card');
el.innerHTML = `<h2>${article[0]}</h2><p>${article[1]}</p><p><a href="/posts/${article[2]}">${article[3]}</a></p>`;
return el;
};
const col = createColumnElement();
for (let j = 0; j < 12; j++) {
const a = createSkeletonElement();
- col.insertAdjacentElement("beforeend", a);
+ col.insertAdjacentElement('beforeend', a);
}
- main.insertAdjacentElement("beforeend", col);
+ main.insertAdjacentElement('beforeend', col);
}
/* Callback to inject content from API */
const inject = (resp) => {
- main.innerHTML = "";
+ main.innerHTML = '';
const chunkSize = Math.ceil(resp.length / initialColumns);
for (let i = 0; i < initialColumns; i++) {
const col = createColumnElement();
const chunk = resp.splice(0, chunkSize);
for (let a of chunk) {
- col.insertAdjacentElement("beforeend", createArticleElement(a));
+ col.insertAdjacentElement('beforeend', createArticleElement(a));
}
- main.insertAdjacentElement("beforeend", col);
+ main.insertAdjacentElement('beforeend', col);
}
};
/* Query Google Sheet for the card content */
(async () => {
const proxyUrl =
- "https://cms.ardislu.dev/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec";
- const controllerId = "1pfGF8yBu3D0GPTezygLuzu3Cif8SkjhtG98nL-czlhc";
- const range = "B3:E";
+ 'https://cms.ardislu.dev/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec';
+ const controllerId = '1pfGF8yBu3D0GPTezygLuzu3Cif8SkjhtG98nL-czlhc';
+ const range = 'B3:E';
const url = `${proxyUrl}?https://sheets.googleapis.com/v4/spreadsheets/${controllerId}/values/${range}`;
await fetch(url)