simple-jekyll-theme 1.0.0

data/_sass/mobile.scss

@@ -0,0 +1,48 @@
+// Mobile Critical
+
+@include tablet {
+    .container {
+        width: 75%;
+    }
+    #main-header {
+        a {
+            font-size: $huge;
+        }
+    }
+    figure > img {
+        width: 75%;
+    }
+}
+
+@include phone {
+    .container {
+        width: 90%;
+    }
+    #main-header {
+        a {
+            font-size: 10vw;
+        }
+    }
+    .header {
+        font-size: $LARGE;
+    }
+    figure > img {
+        width: 95%;
+    }
+    table {
+        width: 95%;
+    }
+    // https://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten
+    td {
+        -webkit-text-size-adjust:100%;
+    }
+    #blog-list a .card{
+        @include float-card;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        .post-title {
+            font-size: $large;
+            font-weight: 600;
+        }
+    }
+}

data/_sass/print.scss

@@ -0,0 +1,107 @@
+// Print Styles
+
+@media print {
+
+  @page {
+    size: A4;
+  }
+
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  .container {
+    width: 90%;
+  }
+
+  body {
+    font-size: 12pt;
+  }
+
+  #main-header a {
+    font-size: 24pt;
+  }
+
+  #main-footer {
+    font-size: 11pt;
+  }
+
+  .header {
+    font-size: 18pt;
+  }
+
+  h1 {
+    font-size: 14pt;
+  }
+
+  h2 {
+    font-size: 13pt;
+  }
+
+  h3, h4 {
+    font-size: 12pt;
+  }
+
+  #navbar, #share-btn, #utterances, .reversefootnote {
+    display: none;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 80%;
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+   * Don't show links that are fragment identifiers,
+   * or use the `javascript:` pseudo protocol
+   */
+  a[href^="/index.html"]::after,
+  .tag a::after,
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  img {
+    max-width: 500px;
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre, blockquote, figure {
+    break-inside: avoid;
+  }
+
+  /*
+   * Printing Tables:
+   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+   */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,img {
+    break-inside: avoid;
+  }
+
+  p,h2,h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h1, h2, h3, h4, h5 {
+    break-after: avoid;
+  }
+}

data/assets/css/styles.scss

@@ -0,0 +1,15 @@
+---
+---
+/*!
+ * © 2020 W Zhang 
+ * For weixuanz.github.io
+ */
+
+@import "definitions";
+
+@import "main";
+
+@import "blog";
+@include blog-critical;
+
+@import "mobile";

data/assets/css/styles_noncritical.scss

@@ -0,0 +1,14 @@
+---
+---
+/*!
+ * © 2020 W Zhang 
+ * For weixuanz.github.io, non-critical styles
+ */
+
+@import "definitions";
+
+@import "blog";
+@include blog-noncritical;
+
+@import "code";
+@import "print";

data/assets/js/main.js

@@ -0,0 +1,234 @@
+/**
+ * @preserve W Zhang
+ * For weixuanz.github.io
+ */
+
+/* Dark Toggle
+ * Modified, from https://gist.github.com/kslstn/20f654fd27eb29619040c74fa6526919
+ */
+
+;(function initializeTheme() {
+  syncBetweenTabs()
+  listenToOS()
+  listenToCheckbox()
+  hideCheckbox()
+
+  updatePref(storedPref() || OSPref(), false)
+})()
+
+// Helper Functions
+
+function currentPref() {
+  return document.querySelector('#dark-toggle-box').checked ? 'dark' : 'light'
+}
+
+function OSPref() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
+function storedPref() {
+  const pref = localStorage.getItem('preference-theme')
+  if (pref === 'light') return 'light'
+  else if (pref === 'dark') return 'dark'
+  else return undefined
+}
+
+function updateCheckbox(pref) {
+  document.querySelector('#dark-toggle-box').checked = pref === 'dark'
+}
+
+function savePref(key, value) {
+  localStorage.setItem(key, value)
+}
+
+function updatePref(
+  newPref,
+  withTransition = true,
+  save = true,
+  override = false
+) {
+  const root = document.documentElement
+  const els = elsRequireTransit([
+    'body',
+    '#navbar',
+    '#main-header',
+    'code',
+    '#blog-list-mini',
+    '.card',
+    '#toc'
+  ])
+  if ((currentPref() === 'dark' || override) && newPref === 'light') {
+    if (withTransition) toggleTransition(els)
+    root.classList.remove('theme-dark')
+    navbar.style.background = '#fff'
+    updateCheckbox('light')
+    if (withTransition)
+      setTimeout(() => {
+        toggleTransition(els, false)
+      }, 1000)
+  } else if ((currentPref() === 'light' || override) && newPref === 'dark') {
+    if (withTransition) toggleTransition(els)
+    root.classList.add('theme-dark')
+    navbar.style.background = '#121212'
+    updateCheckbox('dark')
+    if (withTransition)
+      setTimeout(() => {
+        toggleTransition(els, false)
+      }, 1000)
+  }
+  if (save) savePref('preference-theme', newPref)
+}
+
+function toggleTransition(els, addTransit = true) {
+  els.map((el) => {
+    addTransit
+      ? el.forEach((e) => e.classList.add('theme-transit'))
+      : el.forEach((e) => e.classList.remove('theme-transit'))
+  })
+}
+
+function elsRequireTransit(els) {
+  return els.map((el) => document.querySelectorAll(el))
+}
+
+// Event Listeners
+
+function hideCheckbox() {
+  const toggleLabel = document.querySelector('#dark-toggle-label')
+  window.addEventListener('scroll', function () {
+    if (this.scrollY >= nav_init) {
+      toggleLabel.classList.add('transparent')
+      if (currentPref() === 'dark') {
+        navbar.style.background = '#22222280'
+      }
+    } else {
+      toggleLabel.classList.remove('transparent')
+      if (currentPref() === 'dark') {
+        navbar.style.background = '#121212'
+      }
+    }
+  })
+}
+
+function syncBetweenTabs() {
+  window.addEventListener('storage', (e) => {
+    if (e.key === 'preference-theme') {
+      if (e.newValue === 'light') {
+        updatePref('light', true, false)
+      } else if (e.newValue === 'dark') {
+        updatePref('dark', true, false)
+      }
+    }
+  })
+}
+
+function listenToOS() {
+  const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+  mediaQueryList.addListener((m) => {
+    if (m.matches !== true) {
+      updatePref('light')
+    } else {
+      updatePref('dark')
+    }
+  })
+}
+
+function listenToCheckbox() {
+  const checkbox = document.querySelector('#dark-toggle-box')
+  checkbox.addEventListener('change', function () {
+    if (this.checked) {
+      updatePref('dark', true, true, true)
+    } else {
+      updatePref('light', true, true, true)
+    }
+  })
+}
+
+/* Code Copy
+ * Modified, from  https://stackoverflow.com/a/48078807/10365842
+ */
+const allCodeBlocksElements = document.querySelectorAll('div.highlighter-rouge')
+allCodeBlocksElements.forEach(function (el, i) {
+  const currentId = `codeblock${i + 1}`
+  el.querySelector('code').setAttribute('id', currentId)
+  const clipButton = document.createElement('button')
+  clipButton.innerHTML = '<svg class="icon"><use xlink:href="#icon-clone-solid"></use></svg>'
+  clipButton.className = 'code-copy-btn'
+  clipButton.setAttribute('data-clipboard-target', `#${currentId}`)
+  clipButton.setAttribute('aria-label', `Copy ${currentId}`)
+  el.querySelector('code').after(clipButton)
+})
+if (allCodeBlocksElements.length > 0) {
+  new ClipboardJS('.code-copy-btn')
+}
+
+/* Share Button */
+function share() {
+  if (navigator.share !== undefined) {
+    navigator
+      .share({
+        title: document.querySelector('.header').textContent,
+        text: 'Check this out!',
+        url: window.location.href
+      })
+      .then(() => console.log('Shared!'))
+      .catch((e) => console.error(e))
+  } else {
+    const shareButton = document.querySelector('#share-btn')
+    shareButton.setAttribute('data-clipboard-text', location.href)
+    new ClipboardJS('#share-btn')
+    shareButton.classList.add('shared')
+    setTimeout(() => {
+      shareButton.classList.remove('shared')
+    }, 5000)
+  }
+}
+
+const shareButton = document.querySelector('#share-btn')
+if (shareButton) shareButton.addEventListener('click', share)
+
+/* Dynamic TOC */
+const toc = document.querySelector('#toc')
+if (toc) {
+  const tocItems = Array.from(toc.querySelectorAll('li'))
+  const tocMapping = tocItems.map(function (item) {
+    const anchor = item.querySelector('a')
+    const targetID = anchor.getAttribute('href').slice(1)
+    const target = document.getElementById(targetID)
+
+    return {
+      listItem: item,
+      anchor: anchor,
+      targetID: targetID,
+      target: target,
+      targetOffset: target.offsetTop
+    }
+  })
+
+  function getCurrentSection(tocMapping) {
+    return tocMapping.reduce((acc, val) =>
+      window.pageYOffset + 70 > val.targetOffset ? val : acc
+    )
+  }
+
+  function sectionUpdaterInit(initialSection = {}) {
+    let currentSection = initialSection
+    function wrapped(newSection) {
+      if (newSection.targetID !== currentSection.targetID) {
+        if (currentSection.targetID) {
+          currentSection.anchor.classList.remove('active')
+        }
+        newSection.anchor.classList.add('active')
+        currentSection = newSection
+      }
+    }
+    return wrapped
+  }
+
+  const sectionUpdater = sectionUpdaterInit()
+  window.addEventListener('scroll', () =>
+    sectionUpdater(getCurrentSection(tocMapping))
+  )
+}

data/assets/js/main.min.js

@@ -0,0 +1,13 @@
+/*
+ W Zhang
+ For weixuanz.github.io
+*/
+'use strict';window.addEventListener("storage",a=>{"preference-theme"===a.key&&("light"===a.newValue?f("light",!0,!1):"dark"===a.newValue&&f("dark",!0,!1))});window.matchMedia("(prefers-color-scheme: dark)").addListener(a=>{!0!==a.matches?f("light"):f("dark")});document.querySelector("#dark-toggle-box").addEventListener("change",function(){this.checked?f("dark",!0,!0,!0):f("light",!0,!0,!0)});h();var k;{const a=localStorage.getItem("preference-theme");k="light"===a?"light":"dark"===a?"dark":void 0}
+f(k||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),!1);function l(){return document.querySelector("#dark-toggle-box").checked?"dark":"light"}function m(a){document.querySelector("#dark-toggle-box").checked="dark"===a}
+function f(a,d=!0,b=!0,c=!1){const e=document.documentElement,g=n();"dark"!==l()&&!c||"light"!==a?"light"!==l()&&!c||"dark"!==a||(d&&p(g),e.classList.add("theme-dark"),navbar.style.background="#121212",m("dark"),d&&setTimeout(()=>{p(g,!1)},1E3)):(d&&p(g),e.classList.remove("theme-dark"),navbar.style.background="#fff",m("light"),d&&setTimeout(()=>{p(g,!1)},1E3));b&&localStorage.setItem("preference-theme",a)}
+function p(a,d=!0){a.map(b=>{d?b.forEach(c=>c.classList.add("theme-transit")):b.forEach(c=>c.classList.remove("theme-transit"))})}function n(){return"body #navbar #main-header code #blog-list-mini .card #toc".split(" ").map(a=>document.querySelectorAll(a))}
+function h(){const a=document.querySelector("#dark-toggle-label");window.addEventListener("scroll",function(){this.scrollY>=nav_init?(a.classList.add("transparent"),"dark"===l()&&(navbar.style.background="#22222280")):(a.classList.remove("transparent"),"dark"===l()&&(navbar.style.background="#121212"))})}const q=document.querySelectorAll("div.highlighter-rouge");
+q.forEach(function(a,d){d=`codeblock${d+1}`;a.querySelector("code").setAttribute("id",d);const b=document.createElement("button");b.innerHTML='<svg class="icon"><use xlink:href="#icon-clone-solid"></use></svg>';b.className="code-copy-btn";b.setAttribute("data-clipboard-target",`#${d}`);b.setAttribute("aria-label",`Copy ${d}`);a.querySelector("code").after(b)});0<q.length&&new ClipboardJS(".code-copy-btn");
+function r(){if(void 0!==navigator.share)navigator.share({title:document.querySelector(".header").textContent,text:"Check this out!",url:window.location.href}).then(()=>console.log("Shared!")).catch(a=>console.error(a));else{const a=document.querySelector("#share-btn");a.setAttribute("data-clipboard-text",location.href);new ClipboardJS("#share-btn");a.classList.add("shared");setTimeout(()=>{a.classList.remove("shared")},5E3)}}const t=document.querySelector("#share-btn");
+t&&t.addEventListener("click",r);const u=document.querySelector("#toc");
+if(u){var v=function(b){return b.reduce((c,e)=>window.pageYOffset+70>e.b?e:c)};const a=Array.from(u.querySelectorAll("li")).map(function(b){const c=b.querySelector("a"),e=c.getAttribute("href").slice(1),g=document.getElementById(e);return{c:b,anchor:c,a:e,target:g,b:g.offsetTop}}),d=function(b={}){let c=b;return function(e){e.a!==c.a&&(c.a&&c.anchor.classList.remove("active"),e.anchor.classList.add("active"),c=e)}}();window.addEventListener("scroll",()=>d(v(a)))};

data/assets/js/pagination.js

@@ -0,0 +1,51 @@
+/**
+ * @preserve W Zhang
+ * For weixuanz.github.io
+ */
+
+const loadBtn = document.querySelector('#loadmore-btn')
+loadBtn.addEventListener('click', loadNextPage)
+
+function loadNextPage() {
+  const postList = document.querySelector('#blog-list')
+  const currentPage = +postList.getAttribute('data-page')
+  const totalPages = +postList.getAttribute('data-totalPages')
+
+  const setBusy = () => {
+    loadBtn.textContent = 'Loading...'
+    loadBtn.disabled = true
+  }
+  const setInitial = () => {
+    loadBtn.textContent = 'Load more...'
+    loadBtn.disabled = false
+  }
+
+  if (currentPage === totalPages) {
+    return
+  }
+
+  setBusy()
+
+  const opts = {
+    method: 'GET',
+    headers: {}
+  }
+
+  fetch(`/page${currentPage + 1}`, opts)
+    .then((response) => response.text())
+    .then((html) => {
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(html, 'text/html')
+      doc
+        .querySelectorAll('#blog-list a')
+        .forEach((el) => postList.appendChild(el))
+
+      setInitial()
+      postList.setAttribute('data-page', currentPage + 1)
+
+      if (currentPage + 1 === totalPages) {
+        loadBtn.onclick = null
+        loadBtn.remove()
+      }
+    })
+}