content/articles/site-backend.md: populate most of the content

1 files changed, 37 insertions, 0 deletions

diff --git a/static/files/articles/site-backend/script.js.txt b/static/files/articles/site-backend/script.js.txt
new file mode 100644
index 0000000..ecf41b8
--- /dev/null
+++ b/static/files/articles/site-backend/script.js.txt
@@ -0,0 +1,37 @@
+'use strict';
+
+//
+// script.js - script which handles:
+//
+// - set theme
+// - theme switcher and burger menu event handlers
+//
+
+const D = document,
+      C = D.body.parentElement.classList,
+      L = localStorage,
+      M = window.matchMedia,
+      on = (el, id, fn) => el.addEventListener(id, fn);
+
+// use theme if set, otherwise fall back to browser preference
+if (L && L.theme && L.theme === 'dark') {
+  C.add('dark'); // theme set to "dark"
+} else if ((!L || !L.theme) && M && M('(prefers-color-scheme: dark)').matches) {
+  C.add('dark'); // prefers dark color scheme
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  // theme toggle event handler
+  on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', (e) => {
+    e.preventDefault(); // stop event
+    L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle
+  });
+
+  // iterate through burgers, bind to click events
+  D.querySelectorAll('.navbar-burger').forEach(e => on(e, 'click', () => {
+    // then toggle is-active on burger and menu
+    [e, D.getElementById(e.dataset.target)].forEach(
+      e => e.classList.toggle('is-active')
+    )
+  }));
+});