jekyll-bonsai 0.0.3 → 0.0.4

data/assets/js/scripts.js

@@ -1,64 +1,34 @@
 ---
 ---
-import GraphNav from './graph.js';
-import ThemeColors from './theme-colors.js';
 import Entry from './entry.js';
 import SiteNav from './site-nav.js';
 
- //
 // go
- //
 // from: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t
 (() => {
-  // your page initialization code here
-  // the DOM will be available here
-  initListeners();
-  new ThemeColors();
+  initLinks();
+
+  if (!isSafari() && !isMobile()) {
+    applyPencilFilter();
+  }
+
   new SiteNav();
-  new GraphNav();
   if (document.getElementById('entry')) {
     new Entry();
   }
 })();
 
- //
-// init
- //
-function initListeners () {
-  // open external links in new window; wiki-links in current window.
-  document.querySelectorAll("a:not(.wiki-link):not(.wiki-link-embed-link):not(.sem-tag):not(.stat-tag):not(.anchor-heading):not(.footnote):not(.reversefootnote)").forEach(setupLinkOpen);
-  // init hover-preview.html listeners.
-  document.querySelectorAll('{{ include.wrapperQuerySelector }} a:not(.wiki-link-embed-link):not(.stat-tag):not(.anchor-heading)').forEach(setupListeners);
-
-  document.getElementById('stat-tags-btn')
-    .addEventListener('click', function(event) {
-      goTo('{{ site.baseurl }}/stat/tags');
-    }, false);
-  document.getElementById('posts-btn')
-    .addEventListener('click', function(event) {
-      goTo('{{ site.baseurl }}/posts');
-    }, false);
-  document.getElementById('recent-btn')
-    .addEventListener('click', function(event) {
-      goTo('{{ site.baseurl }}/recent');
-    }, false);
-  document.getElementById('home-btn')
-    .addEventListener('click', function(event) {
-      goTo('{{ site.baseurl }}/');
-    }, false);
-
-  document.getElementById('wiki-link-nav-checkbox')
-    .addEventListener('click', function(event) {
-      expandGraphNav();
-      document.getElementById('svg-graph').dispatchEvent(new Event('draw')); // tell graph to redraw itself
-    }, false);
-}
-
- //
 // helpers
- //
-function goTo (location) {
-  window.location.href = location;
+
+function initLinks() {
+  // web
+  // open external links in new window; wiki-links in current window.
+  document.querySelectorAll('a.web-link').forEach(setupLinkOpen);
+  // wiki
+  //  init hp-tooltip.html listeners.
+  document.querySelectorAll('{{ include.wrapperQuerySelector }} a.wiki-link').forEach(setupListeners);
+  //  add microdata to wiki links
+  document.querySelectorAll('a.wiki-link').forEach((wikiLink) => wikiLink.classList.add('u-url'));
 }
 
 function setupLinkOpen (link) {
@@ -66,15 +36,29 @@ function setupLinkOpen (link) {
   link.setAttribute("rel", "noopener");  // for security: https://css-tricks.com/use-target_blank/#correct-html
 }
 
-function expandGraphNav() {
-  var siteNav = document.getElementById('site-nav');
-  var wikiBonsai = document.getElementById('nav-bonsai');
-  
-  if (document.getElementById('wiki-link-nav-checkbox').checked) {
-    siteNav.classList.add('nav-open');
-    wikiBonsai.hidden = false;
-  } else {
-    siteNav.classList.remove('nav-open');
-    wikiBonsai.hidden = true;
-  }
+function applyPencilFilter() {
+  // apply pencil-filter to all svg images
+  let imgElements = document.getElementsByClassName('embed-image-wrapper');
+  Array.prototype.forEach.call(imgElements, (img) => {
+    if (img.firstElementChild.tagName === "svg") {
+      if ('{{ site.bonsai.svg.filter }}') {
+        // attach filter to svg element's parent because of safari/mobile bug
+        // bug from: https://github.com/Fyrd/caniuse/issues/3803
+        // workaround from: https://newbedev.com/why-is-filter-drop-shadow-causing-my-svg-to-disappear-in-safari
+        img.style.filter = "url(#PencilTexture)";
+      }
+    }
+  });
 }
+
+function isMobile() {
+  // from: https://stackoverflow.com/questions/58141018/mobile-device-detection
+  var check = false;
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+  return check;
+};
+
+function isSafari() {
+  // Safari 3.0+ "[object HTMLElementConstructor]" 
+  return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
+};

data/assets/js/search.js

@@ -0,0 +1,164 @@
+---
+---
+
+window.store = {
+  {% for doc in site.documents %}
+    {% unless site.bonsai.nav.search.exclude contains doc.type %}
+      "{{ doc.url | slugify }}": {
+        "title": "{{ doc.title | xml_escape }}",
+        "content": {{ doc.content | strip_html | strip_newlines | jsonify }},
+        "status": "{{ doc.status | xml_escape }}",
+        "tags": "{{ doc.tags | xml_escape }}",
+        "emoji": "{{ doc.emoji | xml_escape }}",
+        "url": "{{ doc.url | xml_escape }}",
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endunless %}
+  {% endfor %}
+};
+export default class Search {
+
+  constructor() {
+    this.searchBtn = document.getElementById('search-btn');
+    this.search = document.getElementById('search');
+    this.searchInput = document.getElementById('search-input');
+    this.searchResults = document.getElementById('search-results');
+    this.navContent = document.getElementById('site-nav-content');
+    this.init();
+  }
+
+  init() {
+    this.searchInput.classList.add('hide');
+    this.searchResults.classList.add('hide');
+    this.initIndex();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    // keys
+    /// cmd/ctrl + k
+    document.addEventListener('keydown', (event) => {
+      const macKeys = (event.metaKey && (event.key === 'k'));
+      const winKeys = (event.ctrlKey && (event.key === 'k'));
+      if (macKeys || winKeys) {
+        this.toggleSearch();
+      }
+    });
+    // enter
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        this.doSearch();
+      }
+    });
+    /// esc
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        this.hideSearch();
+      }
+    });
+    // btn
+    this.searchBtn.addEventListener('click', () => {
+      this.toggleSearch();
+    });
+    // unfocus
+    this.searchInput.addEventListener('focusout', (event) => {
+      // click on a search result: 
+      //   if (event.relatedTarget.nodeName !== 'A')
+      if (!event.relatedTarget) {
+        this.hideSearch();
+      }
+    });
+  }
+
+  initIndex() {
+    // lunr: https://lunrjs.com/
+    // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+    // Initalize lunr with the fields it will be searching on. I've given title
+    // a boost of 10 to indicate matches on this field are more important.
+    this.idx = lunr(function () {
+      this.field('id');
+      this.field('title', { boost: 10 });
+      this.field('status');
+      // this.field('tags');
+      this.field('emoji');
+      this.field('content');
+
+      for (var key in window.store) { // Add the data to lunr
+        this.add({
+          'id': key,
+          'title': window.store[key].title,
+          'status': window.store[key].status,
+          // 'tags': window.store[key].tags,
+          'emoji': window.store[key].emoji,
+          'content': window.store[key].content
+        });
+      }
+    });
+  }
+
+  toggleSearch() {
+    if (this.searchInput.classList.contains('hide')) {
+      this.showSearch();
+    } else {
+      this.hideSearch();
+    }
+  }
+
+  showSearch() {
+    this.searchInput.classList.remove('hide');
+    this.searchInput.focus();
+    this.navContent.style.filter = "blur(4px)";
+  }
+
+  hideSearch() {
+    this.searchInput.classList.add('hide');
+    this.searchResults.classList.add('hide');
+    this.navContent.style.filter = "";
+  }
+
+  doSearch() {
+    // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+    var results = this.idx.search(this.searchInput.value);
+    this.displayResults(results, window.store);
+  }
+
+  displayResults(results, store) {
+    if (results.length) {
+      var appendString = '<ul>';
+  
+      for (var i = 0; i < results.length; i++) {
+        var item = store[results[i].ref];
+        appendString += '<li>'
+        appendString +=   '<a href="' + '{{ site.baseurl }}' + item.url + '">';
+        if (item.status) {
+          appendString +=     '<h6> ' + item.status + ' ' + item.title + '</h6>';
+        } else if (item.emoji) {
+          appendString +=     '<h6> ' + item.emoji + ' ' + item.title + '</h6>';
+        } else {
+          appendString +=     '<h6> ' + item.title + '</h6>';
+        }
+        appendString +=     '<p>' + item.content.substring(0, 150) + '...</p>';
+        appendString +=   '</a>';
+        appendString += '</li>';
+      }
+    } else {
+      var appendString = '<ul><li>No results found</li></ul>';
+    }
+    this.searchResults.innerHTML = appendString + '</ul>';
+    this.searchResults.classList.remove('hide');
+  }
+
+  // getQueryVariable(variable) {
+  //   // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+  //   var query = window.location.search.substring(1);
+  //   var vars = query.split('&');
+
+  //   for (var i = 0; i < vars.length; i++) {
+  //     var pair = vars[i].split('=');
+
+  //     if (pair[0] === variable) {
+  //       return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+  //     }
+  //   }
+  // }
+}

data/assets/js/site-nav.js

@@ -1,132 +1,132 @@
 ---
 ---
 
+import GraphNav from './graph.js';
+import Search from './search.js';
+import ThemeColors from './theme-colors.js';
+import VisitedNav from './visited-nav.js';
+
 export default class SiteNav {
 
   constructor() {
-    // this.navType set in initNavType();
-    // this.visited set in initVisited();
-    this.visitedNav = document.getElementById('visited-nav');
-    this.navTypeCheckBox = document.getElementById('nav-type-checkbox');
-    this.navTypeEmojiSpan = document.getElementById('nav-type-emoji-span');
-    this.deleteVisitedBtn = document.getElementById('delete-btn');
-    this.init();
-  }
+    // bonsai-burger --> [[.]]
+    this.bonsaiBurger = document.getElementById('bonsai-burger-nav-checkbox');
+    this.sideBar = document.getElementById('side-bar');
+    this.mainView = document.getElementById('main');
+    this.bonsai = document.getElementById('nav-bonsai');
+    
+    this.bonsaiBurger.addEventListener('click', () => {
+      this.toggleSiteNav();
+      this.graph.redraw();
+    });
 
-  init() {
-    this.initNavType();
-    this.initVisited();
-    this.bindEvents();
-    this.addVisited();
-  }
+    // themes
+    new ThemeColors();
+    
+    // search
+    {% if site.bonsai.nav.search.enabled %}
+      this.search = new Search();
+    {% endif %}
 
-  bindEvents() {
-    this.navTypeCheckBox.addEventListener('click', () => {
-      this.updateNavType();
-    });
+    // graph
+    this.graph = new GraphNav();
+
+    // visited nav
+    {% if site.bonsai.nav.visited.enabled %} 
+      // attach elements
+      // this.navType set in initNavType();
+      this.navTypeCheckBox = document.getElementById('nav-type-checkbox');
+      this.navTypeEmojiSpan = document.getElementById('nav-type-emoji-span');
+      this.visited = new VisitedNav();
+      this.initNavType();
+      this.navTypeCheckBox.addEventListener('click', () => {
+        this.updateNavType();
+      });
+    {% endif %}
+
+    // visited data
+    // visitedURLs set in initVisitedData();
+    this.deleteVisitedBtn = document.getElementById('delete-btn');
+    this.initVisitedData();
     this.deleteVisitedBtn.addEventListener('click', () => {
-      this.deleteVisitedHistory();
+      this.deleteVisitedData();
     });
   }
 
+  // bonsai-burger
+
+  toggleSiteNav() {
+    if (document.getElementById('bonsai-burger-nav-checkbox').checked) {
+      this.sideBar.classList.add('nav-open');
+      this.mainView.classList.add('hide');
+      this.bonsai.hidden = false;
+    } else {
+      this.sideBar.classList.remove('nav-open');
+      this.mainView.classList.remove('hide');
+      this.bonsai.hidden = true;
+    }
+  }
+
+  // graph <-> visited toggles
+
   initNavType() {
     this.navType = localStorage.getItem('nav-type');
-    if (this.navType !== "graph" && this.navType !== "tabs") {
-      this.navType = '{{ site.nav_type }}';	
+    if (this.navType !== "graph" && this.navType !== "visited") {
+      this.navType = '{{ site.bonsai.nav.type }}';	
     }
     this.navTypeCheckBox.checked = (this.navType === "graph");
     this.updateNavType();
   }
 
-  initVisited() {
-    this.visited = JSON.parse(localStorage.getItem('visited'));
-    if (!this.visited) this.visited = [];
-  }
-
   updateNavType() {
     if (this.navTypeCheckBox.checked) {
-      this.navTypeEmojiSpan.innerText = "🥾";
+      this.navTypeEmojiSpan.innerText = "{{ site.data.emoji.visited }}";
       this.navType = "graph";
-      this.visitedNav.classList.remove("show");
-      this.visitedNav.classList.add("hide");
-      document.getElementById("svg-graph").classList.remove("hide");
+      this.visited.hide();
+      this.graph.graphDiv.classList.remove("hide");
     } else {
-      this.navTypeEmojiSpan.innerText = "🪴";
-      this.navType = "tabs";
-      document.getElementById("svg-graph").classList.add("hide");
-      this.visitedNav.classList.remove("hide");
-      this.visitedNav.classList.add("show");
+      this.navTypeEmojiSpan.innerText = "{{ site.data.emoji.graph }}";
+      this.navType = "visited";
+      this.graph.graphDiv.classList.add("hide");
+      this.visited.show();
     }
     localStorage.setItem('nav-type', this.navType);
   }
 
-  //
-  // visited
-  //
+    // visited-data
 
-  addVisited() {
-    if (this.visited) {
-      // remove duplicates to current (since json and !SortedSet)
-      // step backward so splicing doesn't change indeces as tabs are removed
-      for (var i = this.visited.length - 1; i > -1; i--) {
-        let aTab = this.visited[i];
-        if ((aTab['title'] == window.document.title) 
-          && (aTab['url'] == window.location.pathname)) {
-            this.visited.splice(i, 1);
+    initVisitedData() {
+      // init
+      this.visitedURLs = JSON.parse(localStorage.getItem('visited'));
+      if (!this.visitedURLs) this.visitedURLs = [];
+      // populate
+      if (this.visitedURLs) {
+        // remove duplicates to current (since json and !SortedSet)
+        // step backward so splicing doesn't change indeces as tabs are removed
+        for (var i = this.visitedURLs.length - 1; i > -1; i--) {
+          let aTab = this.visitedURLs[i];
+          if ((aTab['title'] == window.document.title) 
+            && (aTab['url'] == window.location.pathname)) {
+              this.visitedURLs.splice(i, 1);
+          }
         }
+        this.visitedURLs.push({ title: window.document.title, url: window.location.pathname }); 
+        localStorage.setItem('visited', JSON.stringify(this.visitedURLs));
       }
-      this.visited.push({ title: window.document.title, url: window.location.pathname }); 
-      localStorage.setItem('visited', JSON.stringify(this.visited));
+      // draw
+      {% if site.bonsai.nav.visited.enabled %} 
+        this.visited.build(this.visitedURLs);
+      {% endif %}
     }
-    this.buildVisitedTabs();
-  }
-
-  deleteVisitedHistory() {
-    // reset visited data
-    this.visited = [];
-    localStorage.setItem('visited', JSON.stringify([]));
-    // reset visible elements
-    document.getElementById('svg-graph').dispatchEvent(new Event('draw')); // tell graph to redraw itself
-    this.visitedNav.innerHTML = "";
-    this.buildVisitedTabs();
-  }
-
-  // 
-  // dynamically built elements 
-  // 
-
-  buildNavLink(title, url) {
-    var visitedNavLink = document.createElement('a');
-    visitedNavLink.setAttribute('href', url);
-    visitedNavLink.classList.add('wiki-link');
-    visitedNavLink.innerText = title;
-    return visitedNavLink;
-  }
-
-  buildNavList() {
-    var visitedNavList = document.createElement('ul');
-    visitedNavList.classList.add('visited-nav-list');
-    return visitedNavList;
-  }
-
-  buildNavListItem(i, o) {
-    var visitedNavListItem = document.createElement('li');
-    visitedNavListItem.classList.add('visited-nav-list-item');
-    visitedNavListItem.classList.add('show');
-    visitedNavListItem.setAttribute('style', `--animation-show-order: ${i};`);
-    // visitedNavListItem.setAttribute('style', `--animation-hide-order: ${o};`);
-    return visitedNavListItem;
-  }
-
-  buildVisitedTabs() {
-    var visitedNavList = this.buildNavList();
-    this.visitedNav.appendChild(visitedNavList);
-    for (var i = this.visited.length - 1; i > -1; i--) {
-      const visitedDoc = this.visited[i];
-      var visitedNavListItem = this.buildNavListItem(this.visited.length - i, i);
-      var visitedNavLink = this.buildNavLink(visitedDoc['title'], visitedDoc['url']);
-      visitedNavListItem.appendChild(visitedNavLink);
-      visitedNavList.appendChild(visitedNavListItem);
+  
+    deleteVisitedData() {
+      // reset
+      this.visitedURLs = [];
+      // store
+      localStorage.setItem('visited', JSON.stringify([]));
+      // redraw
+      {% if site.bonsai.nav.visited.enabled %} 
+        this.visited.rebuild(this.visitedURLs);
+      {% endif %}
     }
-  }
 }

data/assets/js/theme-colors.js

@@ -4,14 +4,13 @@
 export default class ThemeColors {
   constructor() {
     // this.theme set in initThemeColors();
-    this.cssFile = document.querySelector('[rel="stylesheet"]');
     this.favicon = document.querySelector('[rel="icon"]');
     this.navBonsai = document.getElementById('nav-bonsai');
     this.navBase = document.getElementById('nav-base');
-    this.themeColorsCheckbox = document.getElementById('theme-colors-checkbox');
-    this.themeColorsEmojiSpan = document.getElementById('theme-colors-emoji-span');
-    // home-page logo
-    this.homeBonsaiLogo = document.getElementById('home-bonsai');
+    this.themeColorBtns = document.querySelectorAll('a[data-theme-id]');
+    // logo
+    this.homeLogo = document.getElementById('home-logo');
+    this.rootLogo = document.getElementById('root-logo');
     this.init();
   }
 
@@ -21,50 +20,37 @@ export default class ThemeColors {
   }
 
   bindEvents() {
-    this.themeColorsCheckbox.addEventListener('click', () => {
-      this.updateThemeColors();
-      document.getElementById('svg-graph').dispatchEvent(new Event('draw')); // tell graph to redraw itself
+    Array.prototype.forEach.call(this.themeColorBtns, (btn) => {
+      btn.addEventListener('click', (event) => {
+        this.updateThemeColors(event);
+      });
     });
   }
 
   initThemeColors() {
     this.theme = localStorage.getItem("theme-colors");
-    if (this.theme !== "dark" && this.theme !== "light") {
-      this.theme = getComputedStyle(document.documentElement).getPropertyValue('content');	
+    if (!this.theme) {
+      this.theme = '{{ site.bonsai.default_theme }}' !== "" ? '{{ site.bonsai.default_theme }}' : '{{ site.data.themes[0].id }}';
     }
-    this.themeColorsCheckbox.checked = (this.theme === "dark");
     this.updateThemeColors();
   }
 
-  updateThemeColors () {
-    // toggle theme colors
-    if (this.themeColorsCheckbox.checked) {
-      this.themeColorsEmojiSpan.innerHTML = "☀️";
-      this.theme = "dark";
-    } else {
-      this.themeColorsEmojiSpan.innerHTML = "🌘";
-      this.theme = "light";
+  updateThemeColors (event) {
+    if (event) {
+      this.theme = event.target.dataset.themeId;
     }
-    // update css file
-    const yesThisReallyIsSupposedToBeCSSNotSCSS = '.css'
-    this.cssFile.setAttribute('href', "{{site.baseurl}}/assets/css/styles-" + this.theme + yesThisReallyIsSupposedToBeCSSNotSCSS);
+    // update theme color data
+    document.documentElement.setAttribute('data-theme', this.theme);
     // update icons and images
-    this.favicon.setAttribute('href', "{{site.baseurl}}/assets/img/favicon-" + this.theme + ".png");
-    this.navBonsai.setAttribute('src', "{{site.baseurl}}/assets/img/nav-bonsai-" + this.theme + ".svg");
-    this.navBase.setAttribute('src', "{{site.baseurl}}/assets/img/nav-base-" + this.theme + ".svg");
-    if (this.homeBonsaiLogo) {
-      this.homeBonsaiLogo.setAttribute('src', "{{site.baseurl}}/assets/img/bonsai-" + this.theme + ".svg");
+    this.favicon.setAttribute('href', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--favicon-src')}`.replaceAll(/\s/g,''));
+    this.navBase.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-base')}`.replaceAll(/\s/g,''));
+    this.navBonsai.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-bonsai')}`.replaceAll(/\s/g,''));
+    if (this.homeLogo) {
+      this.homeLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
+    }
+    if (this.rootLogo) {
+      this.rootLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
     }
-    // update bullet icon colors
-    let bulletLinks = document.getElementsByClassName('bullet-link');
-    Array.prototype.forEach.call(bulletLinks, (bl) => {
-      // using $link-line-stroke-color
-      if (this.theme == 'dark') {
-        bl.style.stroke = '#5c5962'; // $grey-dk-200
-      } else {
-        bl.style.stroke = '#8C6239'; // $brown-02
-      }
-    });
     // save to local storage
     window.localStorage.setItem('theme-colors', this.theme);
   }