fix: update layout and import Chirpy template files

_javascript/categories.js

@@ -0,0 +1,7 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { categoryCollapse } from './modules/plugins';
+
+basic();
+initSidebar();
+initTopbar();
+categoryCollapse();

_javascript/commons.js

@@ -0,0 +1,5 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+
+initSidebar();
+initTopbar();
+basic();

_javascript/home.js

@@ -0,0 +1,8 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime, loadImg } from './modules/plugins';
+
+loadImg();
+initLocaleDatetime();
+initSidebar();
+initTopbar();
+basic();

_javascript/misc.js

@@ -0,0 +1,7 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime } from './modules/plugins';
+
+initSidebar();
+initTopbar();
+initLocaleDatetime();
+basic();

_javascript/modules/components/back-to-top.js

@@ -0,0 +1,19 @@
+/**
+ * Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
+ */
+
+export function back2top() {
+  const btn = document.getElementById('back-to-top');
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      btn.classList.add('show');
+    } else {
+      btn.classList.remove('show');
+    }
+  });
+
+  btn.addEventListener('click', () => {
+    window.scrollTo({ top: 0 });
+  });
+}

_javascript/modules/components/category-collapse.js

@@ -0,0 +1,36 @@
+/**
+ * Tab 'Categories' expand/close effect.
+ */
+
+import 'bootstrap/js/src/collapse.js';
+
+const childPrefix = 'l_';
+const parentPrefix = 'h_';
+const children = document.getElementsByClassName('collapse');
+
+export function categoryCollapse() {
+  [...children].forEach((elem) => {
+    const id = parentPrefix + elem.id.substring(childPrefix.length);
+    const parent = document.getElementById(id);
+
+    // collapse sub-categories
+    elem.addEventListener('hide.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder-open').className =
+          'far fa-folder fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
+        parent.classList.remove('hide-border-bottom');
+      }
+    });
+
+    // expand sub-categories
+    elem.addEventListener('show.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder').className =
+          'far fa-folder-open fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
+        parent.classList.add('hide-border-bottom');
+      }
+    });
+  });
+}

_javascript/modules/components/clipboard.js

@@ -0,0 +1,143 @@
+/**
+ * Clipboard functions
+ *
+ * Dependencies:
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
+ */
+
+import Tooltip from 'bootstrap/js/src/tooltip';
+
+const clipboardSelector = '.code-header>button';
+
+const ICON_DEFAULT = 'far fa-clipboard';
+const ICON_SUCCESS = 'fas fa-check';
+
+const ATTR_TIMEOUT = 'timeout';
+const ATTR_TITLE_SUCCEED = 'data-title-succeed';
+const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
+const TIMEOUT = 2000; // in milliseconds
+
+function isLocked(node) {
+  if (node.hasAttribute(ATTR_TIMEOUT)) {
+    let timeout = node.getAttribute(ATTR_TIMEOUT);
+    if (Number(timeout) > Date.now()) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function lock(node) {
+  node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+}
+
+function unlock(node) {
+  node.removeAttribute(ATTR_TIMEOUT);
+}
+
+function showTooltip(btn) {
+  const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
+  btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+  Tooltip.getInstance(btn).show();
+}
+
+function hideTooltip(btn) {
+  Tooltip.getInstance(btn).hide();
+  btn.removeAttribute(ATTR_TITLE_ORIGIN);
+}
+
+function setSuccessIcon(btn) {
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_SUCCESS);
+}
+
+function resumeIcon(btn) {
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_DEFAULT);
+}
+
+function setCodeClipboard() {
+  const clipboardList = document.querySelectorAll(clipboardSelector);
+
+  if (clipboardList.length === 0) {
+    return;
+  }
+
+  // Initial the clipboard.js object
+  const clipboard = new ClipboardJS(clipboardSelector, {
+    target: (trigger) => {
+      const codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
+
+  [...clipboardList].map(
+    (elem) =>
+      new Tooltip(elem, {
+        placement: 'left'
+      })
+  );
+
+  clipboard.on('success', (e) => {
+    const trigger = e.trigger;
+
+    e.clearSelection();
+
+    if (isLocked(trigger)) {
+      return;
+    }
+
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+  });
+}
+
+function setLinkClipboard() {
+  const btnCopyLink = document.getElementById('copy-link');
+
+  if (btnCopyLink === null) {
+    return;
+  }
+
+  btnCopyLink.addEventListener('click', (e) => {
+    const target = e.target;
+
+    if (isLocked(target)) {
+      return;
+    }
+
+    // Copy URL to clipboard
+    navigator.clipboard.writeText(window.location.href).then(() => {
+      const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN);
+      const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED);
+
+      // Switch tooltip title
+      target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+      Tooltip.getInstance(target).show();
+
+      lock(target);
+
+      setTimeout(() => {
+        target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle);
+        unlock(target);
+      }, TIMEOUT);
+    });
+  });
+
+  btnCopyLink.addEventListener('mouseleave', (e) => {
+    Tooltip.getInstance(e.target).hide();
+  });
+}
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
+}

_javascript/modules/components/img-loading.js

@@ -0,0 +1,67 @@
+/**
+ * Setting up image lazy loading and LQIP switching
+ */
+
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+
+const cover = {
+  SHIMMER: 'shimmer',
+  BLUR: 'blur'
+};
+
+function removeCover(clzss) {
+  this.parentElement.classList.remove(clzss);
+}
+
+function handleImage() {
+  if (!this.complete) {
+    return;
+  }
+
+  if (this.hasAttribute(ATTR_DATA_LQIP)) {
+    removeCover.call(this, cover.BLUR);
+  } else {
+    removeCover.call(this, cover.SHIMMER);
+  }
+}
+
+/**
+ * Switches the LQIP with the real image URL.
+ */
+function switchLQIP() {
+  const src = this.getAttribute(ATTR_DATA_SRC);
+  this.setAttribute('src', encodeURI(src));
+  this.removeAttribute(ATTR_DATA_SRC);
+}
+
+export function loadImg() {
+  const images = document.querySelectorAll('article img');
+
+  if (images.length === 0) {
+    return;
+  }
+
+  images.forEach((img) => {
+    img.addEventListener('load', handleImage);
+  });
+
+  // Images loaded from the browser cache do not trigger the 'load' event
+  document.querySelectorAll('article img[loading="lazy"]').forEach((img) => {
+    if (img.complete) {
+      removeCover.call(img, cover.SHIMMER);
+    }
+  });
+
+  // LQIPs set by the data URI or WebP will not trigger the 'load' event,
+  // so manually convert the URI to the URL of a high-resolution image.
+  const lqips = document.querySelectorAll(
+    `article img[${ATTR_DATA_LQIP}="true"]`
+  );
+
+  if (lqips.length) {
+    lqips.forEach((lqip) => {
+      switchLQIP.call(lqip);
+    });
+  }
+}

_javascript/modules/components/img-popup.js

@@ -0,0 +1,48 @@
+/**
+ * Set up image popup
+ *
+ * Dependencies: https://github.com/biati-digital/glightbox
+ */
+
+const html = document.documentElement;
+const lightImages = '.popup:not(.dark)';
+const darkImages = '.popup:not(.light)';
+let selector = lightImages;
+
+if (
+  (html.hasAttribute('data-mode') &&
+    html.getAttribute('data-mode') === 'dark') ||
+  (!html.hasAttribute('data-mode') &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+  selector = darkImages;
+}
+
+let lightbox = GLightbox({ selector: `${selector}` });
+
+function updateImages(event) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.direction === ModeToggle.ID
+  ) {
+    if (selector === lightImages) {
+      selector = darkImages;
+    } else {
+      selector = lightImages;
+    }
+  }
+
+  lightbox.destroy();
+  lightbox = GLightbox({ selector: `${selector}` });
+}
+
+export function imgPopup() {
+  if (document.querySelector(`${selector}`) === null) {
+    return;
+  }
+
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', updateImages);
+  }
+}

_javascript/modules/components/locale-datetime.js

@@ -0,0 +1,53 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+/* A tool for locale datetime */
+class LocaleHelper {
+  static get attrTimestamp() {
+    return 'data-ts';
+  }
+
+  static get attrDateFormat() {
+    return 'data-df';
+  }
+
+  static get locale() {
+    return document.documentElement.getAttribute('lang').substring(0, 2);
+  }
+
+  static getTimestamp(elem) {
+    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
+  }
+
+  static getDateFormat(elem) {
+    return elem.getAttribute(this.attrDateFormat);
+  }
+}
+
+export function initLocaleDatetime() {
+  dayjs.locale(LocaleHelper.locale);
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  document
+    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .forEach((elem) => {
+      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = text;
+      elem.removeAttribute(LocaleHelper.attrTimestamp);
+      elem.removeAttribute(LocaleHelper.attrDateFormat);
+
+      // setup tooltips
+      if (
+        elem.hasAttribute('data-bs-toggle') &&
+        elem.getAttribute('data-bs-toggle') === 'tooltip'
+      ) {
+        // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+        const tooltipText = date.format('llll');
+        elem.setAttribute('data-bs-title', tooltipText);
+      }
+    });
+}

_javascript/modules/components/mode-watcher.js

@@ -0,0 +1,14 @@
+/**
+ * Add listener for theme mode toggle
+ */
+const toggle = document.getElementById('mode-toggle');
+
+export function modeWatcher() {
+  if (!toggle) {
+    return;
+  }
+
+  toggle.addEventListener('click', () => {
+    modeToggle.flipMode();
+  });
+}

_javascript/modules/components/search-display.js

@@ -0,0 +1,110 @@
+/**
+ * This script make #search-result-wrapper switch to unload or shown automatically.
+ */
+
+const btnSbTrigger = document.getElementById('sidebar-trigger');
+const btnSearchTrigger = document.getElementById('search-trigger');
+const btnCancel = document.getElementById('search-cancel');
+const content = document.querySelectorAll('#main-wrapper>.container>.row');
+const topbarTitle = document.getElementById('topbar-title');
+const search = document.getElementById('search');
+const resultWrapper = document.getElementById('search-result-wrapper');
+const results = document.getElementById('search-results');
+const input = document.getElementById('search-input');
+const hints = document.getElementById('search-hints');
+
+// CSS class names
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
+const FOCUS = 'input-focus';
+const FLEX = 'd-flex';
+
+/* Actions in mobile screens (Sidebar hidden) */
+class MobileSearchBar {
+  static on() {
+    btnSbTrigger.classList.add(UNLOADED);
+    topbarTitle.classList.add(UNLOADED);
+    btnSearchTrigger.classList.add(UNLOADED);
+    search.classList.add(FLEX);
+    btnCancel.classList.add(LOADED);
+  }
+
+  static off() {
+    btnCancel.classList.remove(LOADED);
+    search.classList.remove(FLEX);
+    btnSbTrigger.classList.remove(UNLOADED);
+    topbarTitle.classList.remove(UNLOADED);
+    btnSearchTrigger.classList.remove(UNLOADED);
+  }
+}
+
+class ResultSwitch {
+  static resultVisible = false;
+
+  static on() {
+    if (!this.resultVisible) {
+      resultWrapper.classList.remove(UNLOADED);
+      content.forEach((el) => {
+        el.classList.add(UNLOADED);
+      });
+      this.resultVisible = true;
+    }
+  }
+
+  static off() {
+    if (this.resultVisible) {
+      results.innerHTML = '';
+
+      if (hints.classList.contains(UNLOADED)) {
+        hints.classList.remove(UNLOADED);
+      }
+
+      resultWrapper.classList.add(UNLOADED);
+      content.forEach((el) => {
+        el.classList.remove(UNLOADED);
+      });
+      input.textContent = '';
+      this.resultVisible = false;
+    }
+  }
+}
+
+function isMobileView() {
+  return btnCancel.classList.contains(LOADED);
+}
+
+export function displaySearch() {
+  btnSearchTrigger.addEventListener('click', () => {
+    MobileSearchBar.on();
+    ResultSwitch.on();
+    input.focus();
+  });
+
+  btnCancel.addEventListener('click', () => {
+    MobileSearchBar.off();
+    ResultSwitch.off();
+  });
+
+  input.addEventListener('focus', () => {
+    search.classList.add(FOCUS);
+  });
+
+  input.addEventListener('focusout', () => {
+    search.classList.remove(FOCUS);
+  });
+
+  input.addEventListener('input', () => {
+    if (input.value === '') {
+      if (isMobileView()) {
+        hints.classList.remove(UNLOADED);
+      } else {
+        ResultSwitch.off();
+      }
+    } else {
+      ResultSwitch.on();
+      if (isMobileView()) {
+        hints.classList.add(UNLOADED);
+      }
+    }
+  });
+}

_javascript/modules/components/sidebar.js

@@ -0,0 +1,27 @@
+/**
+ * Expand or close the sidebar in mobile screens.
+ */
+
+const ATTR_DISPLAY = 'sidebar-display';
+
+class SidebarUtil {
+  static isExpanded = false;
+
+  static toggle() {
+    if (SidebarUtil.isExpanded === false) {
+      document.body.setAttribute(ATTR_DISPLAY, '');
+    } else {
+      document.body.removeAttribute(ATTR_DISPLAY);
+    }
+
+    SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
+  }
+}
+
+export function sidebarExpand() {
+  document
+    .getElementById('sidebar-trigger')
+    .addEventListener('click', SidebarUtil.toggle);
+
+  document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
+}

_javascript/modules/components/toc.js

@@ -0,0 +1,15 @@
+export function toc() {
+  if (document.querySelector('main h2, main h3')) {
+    // see: https://github.com/tscanlin/tocbot#usage
+    tocbot.init({
+      tocSelector: '#toc',
+      contentSelector: '.content',
+      ignoreSelector: '[data-toc-skip]',
+      headingSelector: 'h2, h3, h4',
+      orderedList: false,
+      scrollSmooth: false
+    });
+
+    document.getElementById('toc-wrapper').classList.remove('d-none');
+  }
+}

_javascript/modules/components/tooltip-loader.js

@@ -0,0 +1,11 @@
+import Tooltip from 'bootstrap/js/src/tooltip';
+
+export function loadTooptip() {
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+  );
+
+  [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
+  );
+}

_javascript/modules/layouts.js

@@ -0,0 +1,3 @@
+export { basic } from './layouts/basic';
+export { initSidebar } from './layouts/sidebar';
+export { initTopbar } from './layouts/topbar';

_javascript/modules/layouts/basic.js

@@ -0,0 +1,7 @@
+import { back2top } from '../components/back-to-top';
+import { loadTooptip } from '../components/tooltip-loader';
+
+export function basic() {
+  back2top();
+  loadTooptip();
+}

_javascript/modules/layouts/sidebar.js

@@ -0,0 +1,7 @@
+import { modeWatcher } from '../components/mode-watcher';
+import { sidebarExpand } from '../components/sidebar';
+
+export function initSidebar() {
+  modeWatcher();
+  sidebarExpand();
+}

_javascript/modules/layouts/topbar.js

@@ -0,0 +1,5 @@
+import { displaySearch } from '../components/search-display';
+
+export function initTopbar() {
+  displaySearch();
+}

_javascript/modules/plugins.js

@@ -0,0 +1,6 @@
+export { categoryCollapse } from './components/category-collapse';
+export { initClipboard } from './components/clipboard';
+export { loadImg } from './components/img-loading';
+export { imgPopup } from './components/img-popup';
+export { initLocaleDatetime } from './components/locale-datetime';
+export { toc } from './components/toc';

_javascript/page.js

@@ -0,0 +1,9 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { loadImg, imgPopup, initClipboard } from './modules/plugins';
+
+loadImg();
+imgPopup();
+initSidebar();
+initTopbar();
+initClipboard();
+basic();

_javascript/post.js

@@ -0,0 +1,17 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import {
+  loadImg,
+  imgPopup,
+  initLocaleDatetime,
+  initClipboard,
+  toc
+} from './modules/plugins';
+
+loadImg();
+toc();
+imgPopup();
+initSidebar();
+initLocaleDatetime();
+initClipboard();
+initTopbar();
+basic();

_javascript/pwa/app.js

@@ -0,0 +1,51 @@
+import { pwa, baseurl } from '../../_config.yml';
+import Toast from 'bootstrap/js/src/toast';
+
+if ('serviceWorker' in navigator) {
+  if (pwa.enabled) {
+    const swUrl = `${baseurl}/sw.min.js`;
+    const notification = document.getElementById('notification');
+    const btnRefresh = notification.querySelector('.toast-body>button');
+    const popupWindow = Toast.getOrCreateInstance(notification);
+
+    navigator.serviceWorker.register(swUrl).then((registration) => {
+      // In case the user ignores the notification
+      if (registration.waiting) {
+        popupWindow.show();
+      }
+
+      registration.addEventListener('updatefound', () => {
+        registration.installing.addEventListener('statechange', () => {
+          if (registration.waiting) {
+            if (navigator.serviceWorker.controller) {
+              popupWindow.show();
+            }
+          }
+        });
+      });
+
+      btnRefresh.addEventListener('click', () => {
+        if (registration.waiting) {
+          registration.waiting.postMessage('SKIP_WAITING');
+        }
+        popupWindow.hide();
+      });
+    });
+
+    let refreshing = false;
+
+    // Detect controller change and refresh all the opened tabs
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (!refreshing) {
+        window.location.reload();
+        refreshing = true;
+      }
+    });
+  } else {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
+}

_javascript/pwa/sw.js

@@ -0,0 +1,94 @@
+import { baseurl } from '../../_config.yml';
+
+importScripts(`${baseurl}/assets/js/data/swconf.js`);
+
+const purge = swconf.purge;
+const interceptor = swconf.interceptor;
+
+function verifyUrl(url) {
+  const requestUrl = new URL(url);
+  const requestPath = requestUrl.pathname;
+
+  if (!requestUrl.protocol.startsWith('http')) {
+    return false;
+  }
+
+  for (const prefix of interceptor.urlPrefixes) {
+    if (requestUrl.href.startsWith(prefix)) {
+      return false;
+    }
+  }
+
+  for (const path of interceptor.paths) {
+    if (requestPath.startsWith(path)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+self.addEventListener('install', (event) => {
+  if (purge) {
+    return;
+  }
+
+  event.waitUntil(
+    caches.open(swconf.cacheName).then((cache) => {
+      return cache.addAll(swconf.resources);
+    })
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (purge) {
+            return caches.delete(key);
+          } else {
+            if (key !== swconf.cacheName) {
+              return caches.delete(key);
+            }
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request).then((response) => {
+        const url = event.request.url;
+
+        if (purge || event.request.method !== 'GET' || !verifyUrl(url)) {
+          return response;
+        }
+
+        // See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
+        let responseToCache = response.clone();
+
+        caches.open(swconf.cacheName).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    })
+  );
+});