jekyll-bonsai 0.0.3 → 0.0.7

data/_includes/dates.html

@@ -0,0 +1,22 @@
+{% comment %}
+  
+  Usage:
+    {% include dates.html updated=page.updated date=page.date %}
+
+  Parameters:
+    * updated         (seconds)  - unix epoch time of page update.
+    * published       (datetime) - datetime of page publish.
+
+{% endcomment %}
+
+<div class="dates text--date">
+  <div>
+    <a class="stat-tag btn--blue" href="{{ '/recent' | relative_url }}" title="Published">{{ site.data.emoji.published }}</a>
+    <time class="dt-published">{{ include.date | date: site.bonsai.date_format }}</time>
+  </div>
+  <div>
+    <a class="stat-tag btn--blue" href="{{ '/recent' | relative_url }}" title="Updated">{{ site.data.emoji.updated }}</a> 
+    <!-- 'slice' because epoch timestamps currently use milliseconds -->
+    <time class="dt-updated">{{ include.updated | slice: 0, 10 |  date: site.bonsai.date_format }}</time>
+  </div>
+</div>

data/_includes/hp-tooltip.html

@@ -0,0 +1,106 @@
+<!-- "hover-preview tooltip"
+
+with help from: https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html
+
+for hover-preview to work, every page should define...
+- at a minimum:
+  - 'hp-title'
+  - 'hp-content'
+- optionally
+  - 'hp-header' 
+...in a div that wraps the desired element, so the hover-preview can properly build the content to display
+
+-->
+
+<style>  
+  /* leave id for opacity toggle */
+  #hp-tooltip {
+    opacity: 0;
+    transition: opacity 100ms;
+  }
+</style>
+  
+<div id="hp-tooltip" class="hp-tooltip">
+  <div id='hp-tooltip-content'></div>
+</div>
+<iframe id="hp-iframe" src=""></iframe>
+  
+<script>
+  var opacityTimeout;
+  var contentTimeout;
+  var transitionDurationMs = 100;
+
+  var iframe = document.getElementById('hp-iframe');
+  var tooltip = document.getElementById('hp-tooltip');
+  var tooltipContent = document.getElementById('hp-tooltip-content');
+
+  function hideTooltip() {
+    opacityTimeout = setTimeout(function() {
+    tooltip.style.opacity = 0;
+    contentTimeout = setTimeout(function() {
+        tooltipContent.innerHTML = '';
+        tooltip.style.display = 'none';
+    }, transitionDurationMs + 1);
+    }, transitionDurationMs)
+  }
+
+  function showTooltip(event) {
+    var elem = event.target;
+    var elem_props = elem.getClientRects()[elem.getClientRects().length - 1];
+    var top = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (event.target.host === window.location.host) {
+      iframe.src = event.target.href;
+      iframe.onload = function() {
+        let title = iframe.contentWindow.document.querySelector('.hp-title').innerHTML;
+        let content = iframe.contentWindow.document.querySelector('.hp-content').innerHTML;
+        // populate header breadcrumbs if they exist
+        if (iframe.contentWindow.document.querySelector('.hp-header')) {
+          let header = iframe.contentWindow.document.querySelector('.hp-header').innerHTML;
+          tooltipContent.innerHTML = header + title + content;
+        // everything else (doesn't have header breadcrumbs)
+        } else {
+          tooltipContent.innerHTML = title + content;
+        }
+        tooltip.style.display = 'block';
+        setTimeout(function() {
+            tooltip.style.opacity = 1;
+        }, 1);
+      };
+
+      tooltip.style.left = elem_props.left - (tooltip.offsetWidth / 2) + (elem_props.width / 2) + "px";
+      if ((window.innerHeight - elem_props.top) < (tooltip.offsetHeight)) {
+        tooltip.style.top = elem_props.top + top - tooltip.offsetHeight - 10 + "px";
+      } else if ((window.innerHeight - elem_props.top) > (tooltip.offsetHeight)) {
+        tooltip.style.top = elem_props.top + top + 35 + "px";
+      }
+
+      if ((elem_props.left + (elem_props.width / 2)) < (tooltip.offsetWidth / 2)) {
+        tooltip.style.left = "10px";
+      } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltip.offsetWidth / 2)) {
+        tooltip.style.left = document.body.clientWidth - tooltip.offsetWidth - 20 + "px";
+      }
+    }   
+  }
+
+  function setupListeners(linkElement) {
+    linkElement.addEventListener('mouseleave', function(_event) {
+      hideTooltip();
+    });
+
+    tooltip.addEventListener('mouseleave', function(_event) {
+      hideTooltip();
+    });
+
+    linkElement.addEventListener('mouseenter', function(event) {
+      clearTimeout(opacityTimeout);
+      clearTimeout(contentTimeout);
+      showTooltip(event);
+    });
+
+    tooltip.addEventListener('mouseenter', function(event) {
+      clearTimeout(opacityTimeout);
+      clearTimeout(contentTimeout);
+    });
+  }
+</script>

data/_includes/img/bullet-net-web.svg

@@ -1,4 +1,4 @@
-<svg class="graph-icon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 50 50" overflow="visible" stroke-width="5" stroke-linecap="round"> 
+<svg class="graph-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 50 50" overflow="visible" stroke-width="5" stroke-linecap="round"> 
   <line class="bullet-link" x1="25" y1="33" x2="2" y2="50" stroke="#8C6239" />
   <line class="bullet-link" x1="25" y1="33" x2="25" y2="5" stroke="#8C6239" />
   <line class="bullet-link" x1="25" y1="33" x2="47" y2="50" stroke="#8C6239" />

data/_includes/img/bullet-tree.svg

@@ -1,4 +1,4 @@
-<svg class="graph-icon" xmlns="http://www.w3.org/2000/svg" height="10" width="10" viewBox="0 0 50 50" overflow="visible" stroke-width="5" stroke-linecap="round"> 
+<svg class="graph-icon" xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 50 50" overflow="visible" stroke-width="5" stroke-linecap="round"> 
   <line class="bullet-link" x1="20" y1="25" x2="5" y2="50" stroke="#8C6239" />
   <line class="bullet-link" x1="25" y1="25" x2="25" y2="50" stroke="#8C6239" />
   <line class="bullet-link" x1="30" y1="25" x2="45" y2="50" stroke="#8C6239" />

data/_includes/img/pencil-filter.svg

@@ -0,0 +1,17 @@
+<!-- due to a chromium bug regarding svg-reuse...: https://bugs.chromium.org/p/chromium/issues/detail?id=109212 -->
+<!-- ...using this hacky off-screen-style from: https://stackoverflow.com/questions/67961573/how-to-hide-reusable-svg-with-filter-that-has-filterunits-userspaceonuse#comment120130719_67961573 -->
+<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="absolute + top:-1000vw;">
+  <!-- from: https://css-tricks.com/creating-a-pencil-effect-in-svg/ -->
+  <filter id="PencilTexture" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
+    <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="5" stitchTiles="stitch" result="f1">
+    </feTurbulence>
+    <feColorMatrix type="matrix" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5" result="f2">
+    </feColorMatrix>
+    <feComposite operator="in" in2="f2b" in="SourceGraphic" result="f3">
+    </feComposite>
+    <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" result="noise">
+    </feTurbulence>
+    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="2.5" in="f3" result="f4">
+    </feDisplacementMap>
+  </filter>
+</svg>

data/_includes/share.html

@@ -2,7 +2,7 @@
 {% if include.pageurl != nil and include.pageurl != '' %}
     {% assign pageurl = include.pageurl %}
 {% else %}
-    {% assign pageurl = page.url %}
+    {% assign pageurl = page.url | relative_url %}
 {% endif %}
 
 <style>
@@ -33,13 +33,15 @@
 #share-buttons > div.mail > svg {height: 14px; margin-top: 11px;}
 </style>
 
-<div style="text-align: center;">
-  <span style="user-select: none;" title="Share This">🐝</span>
+<div class="share-bar">
+  <span class="share-icon" title="Share This">
+    {{ site.data.emoji.share }}
+  </span>
   <div id="share-buttons">
-    {% if site.social.share contains 'email' %}<div class="mail" title="Share this through Email" onclick="window.open('mailto:?&body={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z"/></svg></div>{% endif %}
-    {% if site.social.share contains 'facebook' %}<div class="facebook" title="Share this on Facebook" onclick="window.open('http://www.facebook.com/share.php?u={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg></div>{% endif %}
-    {% if site.social.share contains 'linkedin' %}<div class="linkedin" title="Share this on Linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ pageurl }}&title=&summary=&source=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"/></svg></div>{% endif %}
-    {% if site.social.share contains 'pinterest' %}<div class="pinterest" title="Share this on Pinterest" onclick="window.open('https://pinterest.com/pin/create/button/?url=&media={{ site.url }}{{ site.baseurl }}{{ page.image }}&description=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 597q0-108 37.5-203.5t103.5-166.5 152-123 185-78 202-26q158 0 294 66.5t221 193.5 85 287q0 96-19 188t-60 177-100 149.5-145 103-189 38.5q-68 0-135-32t-96-88q-10 39-28 112.5t-23.5 95-20.5 71-26 71-32 62.5-46 77.5-62 86.5l-14 5-9-10q-15-157-15-188 0-92 21.5-206.5t66.5-287.5 52-203q-32-65-32-169 0-83 52-156t132-73q61 0 95 40.5t34 102.5q0 66-44 191t-44 187q0 63 45 104.5t109 41.5q55 0 102-25t78.5-68 56-95 38-110.5 20-111 6.5-99.5q0-173-109.5-269.5t-285.5-96.5q-200 0-334 129.5t-134 328.5q0 44 12.5 85t27 65 27 45.5 12.5 30.5q0 28-15 73t-37 45q-2 0-17-3-51-15-90.5-56t-61-94.5-32.5-108-11-106.5z"/></svg></div>{% endif %}
-    {% if site.social.share contains 'twitter' %}<div class="twitter" title="Share this on Twitter" onclick="window.open('http://twitter.com/intent/tweet?url={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/></svg></div>{% endif %}
+    {% if site.social.share.type contains 'email' %}<div class="mail" title="Share this through Email" onclick="window.open('mailto:?&body={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z"/></svg></div>{% endif %}
+    {% if site.social.share.type contains 'facebook' %}<div class="facebook" title="Share this on Facebook" onclick="window.open('http://www.facebook.com/share.php?u={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg></div>{% endif %}
+    {% if site.social.share.type contains 'linkedin' %}<div class="linkedin" title="Share this on Linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ pageurl }}&title=&summary=&source=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"/></svg></div>{% endif %}
+    {% if site.social.share.type contains 'pinterest' %}<div class="pinterest" title="Share this on Pinterest" onclick="window.open('https://pinterest.com/pin/create/button/?url=&media={{ site.url }}{{ site.baseurl }}{{ page.image }}&description=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 597q0-108 37.5-203.5t103.5-166.5 152-123 185-78 202-26q158 0 294 66.5t221 193.5 85 287q0 96-19 188t-60 177-100 149.5-145 103-189 38.5q-68 0-135-32t-96-88q-10 39-28 112.5t-23.5 95-20.5 71-26 71-32 62.5-46 77.5-62 86.5l-14 5-9-10q-15-157-15-188 0-92 21.5-206.5t66.5-287.5 52-203q-32-65-32-169 0-83 52-156t132-73q61 0 95 40.5t34 102.5q0 66-44 191t-44 187q0 63 45 104.5t109 41.5q55 0 102-25t78.5-68 56-95 38-110.5 20-111 6.5-99.5q0-173-109.5-269.5t-285.5-96.5q-200 0-334 129.5t-134 328.5q0 44 12.5 85t27 65 27 45.5 12.5 30.5q0 28-15 73t-37 45q-2 0-17-3-51-15-90.5-56t-61-94.5-32.5-108-11-106.5z"/></svg></div>{% endif %}
+    {% if site.social.share.type contains 'twitter' %}<div class="twitter" title="Share this on Twitter" onclick="window.open('http://twitter.com/intent/tweet?url={{ site.url }}{{ site.baseurl }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/></svg></div>{% endif %}
   </div>
 </div>

data/_includes/site-nav.html

@@ -1,48 +1,94 @@
-<nav id="site-nav" class="site-nav" role="navigation" aria-label="main">
+<nav id="site-nav" class="site-nav" role="navigation">
   <header>
+    <span>
+      <a id="home-btn" class="btn btn--green" href="{{ '/' | relative_url }}" title="Go Home">
+        {{ site.data.emoji.home }}
+      </a>
+    </span>
+    <span class="dropdown">
+      <button class="dropdown__btn">
+        <span title="Page Navigation">
+          {{ site.data.emoji.pages }}
+        </span>
+      </button>
+      <div class="dropdown__content">
+        {% assign recent_page = site.pages | where: "name", "recent.md" %}
+        {% if recent_page.first %}
+          <a class="btn btn--blue drop-1" href="{{ '/recent' | relative_url }}" title="Go To Recent Changes">
+          {{ site.data.emoji.recent }}
+          </a>
+        {% endif %}
+        {% if site.states %}
+          {% assign root_state = site.states | find_exp: "item", "item.path == site.bonsai.states.root_path" %}
+          <a class="btn btn--brown drop-2" href="{{ root_state.url | relative_url }}" title="Go To States">
+            {{ site.data.emoji.stat_tags }}
+          </a>
+        {% endif %}
+        {% assign archive_page = site.pages | where: "name", "archive.md" %}
+        {% if archive_page.first %}
+          <a class="btn btn--purple drop-3" href="{{ '/archive' | relative_url }}" title="Go To Archive">
+            {{ site.data.emoji.archive }}
+          </a>
+        {% endif %}
+      </div>
+    </span>
+    <span class="dropdown">
+      <button class="dropdown__btn">
+        <span title="Theme Color Toggles">
+          {{ site.data.emoji.colors }}
+        </span>
+      </button>
+      <div class="dropdown__content">
+        {% for theme in site.data.themes %}
+          <a data-theme-id="{{ theme.id }}" class="btn btn--yellow drop-{{ forloop.index }}" title="{{ theme.id }}">
+            {{ theme.emoji }}
+          </a>
+        {% endfor %}
+      </div>
+    </span>
     <span class="dropdown">
-      <button id="pages-btn" class="dropdown-btn">
-        <span id="pages-emoji-span">🗺</span>
+      <button class="dropdown__btn">
+        <span title="Site-Nav Toggles">
+          {{ site.data.emoji.site_nav }}
+        </span>
       </button>
-      <div class="dropdown-content">
-        <!-- <button id="search-btn" class="site-nav-btn" title="Search">
-          <span id="search-emoji-span">🔍</span>
-        </button> -->
-        <button id="posts-btn" class="dropbtn drop-2" title="Go To Posts">
-          <span id="posts-emoji-span">📓</span>
-        </button>
-        <button id="stat-tags-btn" class="dropbtn drop-1" title="Go To Status Tags">
-          <span id="stat-tags-emoji-span">🔖</span>
-        </button>
-        <button id="recent-btn" class="dropbtn drop-3" title="Go To Recent Changes">
-          <span id="recent-emoji-span">🌦</span>
-        </button>
-        <button id="home-btn" class="dropbtn drop-4" title="Go To Home">
-          <span id="home-emoji-span">🛖</span>
-        </button>
+      <div class="dropdown__content">
+        {% if site.bonsai.nav.visited.enabled %}
+          <label class="btn btn--orange">
+            <input id="nav-type-checkbox" type="checkbox" checked="checked">
+            <span id="nav-type-emoji-span" title="Toggle Nav Type"></span>
+          </label>
+        {% endif %}
+        <label class="btn btn--green">
+          <input id="graph-type-checkbox" type="checkbox" checked="checked">
+          <span id="graph-type-emoji-span" title="Toggle Graph Type"></span>
+        </label>
+        <a id="delete-btn" class="btn btn--red drop-3" title="Delete Visited History">
+          {{ site.data.emoji.delete }}
+        </a>
       </div>
     </span>
-    <label class="btn-selector">
-      <input id="theme-colors-checkbox" type="checkbox" checked="checked">
-      <span id="theme-colors-emoji-span" title="Toggle Colors"></span>
-    </label>
-    <label class="btn-selector">
-      <input id="nav-type-checkbox" type="checkbox" checked="checked">
-      <span id="nav-type-emoji-span" title="Toggle Nav Type"></span>
-    </label>
-    <label class="btn-selector">
-      <input id="graph-type-checkbox" type="checkbox" checked="checked">
-      <span id="graph-type-emoji-span" title="Toggle Graph Type"></span>
-    </label>
+    {% if site.bonsai.nav.search.enabled %}
+      <a id="search-btn" class="btn btn--brown" href="#" title="Search (cmd/ctrl+k)">
+        {{ site.data.emoji.search }}
+      </a>
+    {% endif %}
   </header>
 
-  <nav id="visited-nav" class="visited-nav"></nav>
-  <svg id="svg-graph" height="100%" width="100%"></svg>
+  {% if site.bonsai.nav.search.enabled %}
+    <div id="search">
+      <input id="search-input" class="search__input hide"></input>
+      <div id="search-results" class="search__results"></div>
+    </div>
+  {% endif %}
+  <div id="site-nav-content">
+    <div id="jekyll-graph"></div>
+    {% if site.bonsai.nav.visited.enabled %}
+      <nav id="visited-nav" class="visited-nav"></nav>
+    {% endif %}
+  </div>
 
   <footer>
-    <span class="small-descr">Grown 🪴 with 💚 from a <a href="https://github.com/manunamz/jekyll-bonsai/">jekyll-bonsai</a>.</span>
-    <button id="delete-btn" class="delete-btn" title="Delete Visited History">
-      <span id="delete-emoji-span" title="Delete Visited Info">🧹</span>
-    </button>
+    <span class="text--small">🪴 Grown with 💚 from a <a class="web-link" href="https://jekyll-bonsai.netlify.app">jekyll-bonsai</a></span>
   </footer>
 </nav>

data/_includes/tags.html

@@ -0,0 +1,49 @@
+{% comment %}
+  
+  Usage: 
+    {% assign tag_attr = page.attributes | link_type: "tags" %}
+    {% include tags.html tags_attrs=tag_attr tags_fms=page.tags %}
+
+  Parameters:
+    * tags_attrs          (array) - array of attributes that are hashes with keys 
+                                  'type' and 'urls'
+                                  (which correspond to `jekyll-wikilinks` 
+                                   attributes and attributed metadata)
+    * tags_fms            (array) - array of strings that are tag names 
+                                  (which correspond to entry filenames)
+
+  Note:
+    To be used with germ-type documents.
+    (e.g. markdown documents that use tags metadata to map to entries)
+
+{% endcomment %}
+
+
+<!-- 'tags' attribute -->
+{% for tag_attr in tags_attrs %}
+  {% for url in tag_attr.urls %}
+    {% assign entry = site.entries | where: "url", url | first %}
+    <button class="tag-pill {% if entry %}{% else %}disabled{% endif %}">
+      {% if entry %}
+        {% include btn_state.html states=entry.status %}
+        <a class="sem-tag" href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
+      {% else %}
+        <span class="text--small">{{ site.data.emoji.missing }} {{ sem_tag }}</span>
+      {% endif %}
+    </button>
+  {% endfor %}
+{% endfor %}
+<!-- 'tags' frontmatter -->
+{% for sem_tag in tags_fms %}
+  <!-- prefix with '/' to prevent matching subhierarchies -->
+  {% assign sem_tag_path = "/" | append: sem_tag | append: ".md" %}
+  {% assign entry = site.entries | find_exp: "item", "item.path contains sem_tag_path" %}
+  <button class="tag-pill {% if entry %}{% else %}disabled{% endif %}">
+    {% if entry %}
+      {% include btn_state.html states=entry.status %}
+      <a class="sem-tag" href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
+    {% else %}
+      <span class="text--small">{{ site.data.emoji.missing }} {{ sem_tag }}</span>
+    {% endif %}
+  </button>
+{% endfor %}

data/_includes/themes.scss.liquid

@@ -0,0 +1,80 @@
+{% comment %}
+  
+  Usage:
+    {% include themes.scss.liquid id=theme.id colors=theme.colors svg=theme.svg graph=theme.graph %}
+
+  Parameters:
+    * colors         (object) - collection of color values for css theming
+    * svg            (object) - collection of color values for svg images
+    * graph          (object) - collection of graph/size values for d3 graph
+
+{% endcomment %}
+
+// theme colors
+[data-theme='{{ include.id }}'] {
+  // logo images //
+  
+  --favicon-src: {{ include.src.favicon }};
+  --logo-src: {{ include.src.logo }};
+  --nav-burger-base: {{ include.src.nav_burger.base }};
+  --nav-burger-bonsai: {{ include.src.nav_burger.bonsai }};
+
+  // theme colors //
+
+  // singles
+  --selection-color: {{ include.colors.selection }};
+  --body-background-color: {{ include.colors.background }};
+  --box-shadow-color: {{ include.colors.shadow }};
+  --body-text-color: {{ include.colors.text }};
+  --small-heading-color: {{ include.colors.text_grey }};
+  --accent-dark-color: {{ include.colors.accent_dark }};
+  --accent-light-color: {{ include.colors.accent_light }};
+
+  // link colors
+  --link-color: {{ include.colors.link.web.valid }};
+  --link-underline-color: {{ include.colors.link.web.underline }};
+  --wiki-link-color: {{ include.colors.link.wiki.valid }};
+  --wiki-link-underline-color: {{ include.colors.link.wiki.underline }};
+  --invalid-wiki-link-color: {{ include.colors.link.wiki.invalid }};
+
+  // svg colors //
+
+  // bullets
+  --bullet-link: {{ include.graph.link.color }};
+  --bullet-node: {{ include.graph.node.visited.color }};
+
+  // pencil
+
+  // fill
+  --pencil-fill-default: {{ include.svg.pencil.default }};
+  --pencil-fill-blue: {{ include.svg.pencil.blue }};
+  --pencil-fill-green: {{ include.svg.pencil.green }};
+  --pencil-fill-red: {{ include.svg.pencil.red }};
+  --pencil-fill-yellow: {{ include.svg.pencil.yellow }};
+  // stroke
+  --pencil-stroke-default: {{ include.svg.pencil.default }};
+  --pencil-stroke-blue: {{ include.svg.pencil.blue }};
+  --pencil-stroke-green: {{ include.svg.pencil.green }};
+  --pencil-stroke-red: {{ include.svg.pencil.red }};
+  --pencil-stroke-yellow: {{ include.svg.pencil.yellow }};
+
+  // graph colors //
+
+  // nodes
+  //  glow
+  --graph-node-current-glow: {{ include.graph.node.current }};
+  --graph-node-tagged-glow: {{ include.graph.node.tagged }};
+  --graph-node-visited-glow: {{ include.graph.node.visited.glow }};
+  //  color
+  --graph-node-stroke-color: {{ include.graph.node.stroke }};
+  --graph-node-missing-color: {{ include.graph.node.missing }};
+  --graph-node-unvisited-color: {{ include.graph.node.unvisited }};
+  --graph-node-visited-color: {{ include.graph.node.visited.color }};
+  
+  // links
+  --graph-link-color: {{ include.graph.link.color }};
+  --graph-particles-color: {{ include.graph.particles.color }};
+  
+  // label text
+  --graph-text-color: {{ include.graph.text.color }};
+}