jekyll-wikibonsai 0.0.9 → 0.0.10

data/_includes/branch.html

@@ -0,0 +1,18 @@
+<!-- from: https://jekyllrb.com/tutorials/navigation/#scenario-9-nested-tree-navigation-with-recursion -->
+<ul>
+  {% for child in include.children %}
+    {% assign doc = site.documents | where: "url", child.url | first %}
+    <li>
+      <span>{% include img/bullet-branch.svg %}</span>
+      {% if doc %}
+        <a class="wiki-link" href="{{ doc.url }}">{{ doc.title }}</a>
+      {% else %}
+        <span class="text--small text--no-point">{{ child.text }}</span>
+      {% endif %}
+      {% if child.children.size > 0 %}
+        {% assign child_nodes = page.nodes | where_exp: "node", "child.children contains node.text" %}
+        {% include branch.html children=child_nodes %}
+      {% endif %}
+    </li>
+  {% endfor %}
+</ul>

data/_includes/btn_state.html

@@ -0,0 +1,14 @@
+{% comment %}
+  
+  Usage: (where 'status' in 'page.status' is a yml list of strings)
+    {% include btn_state.html states=page.status %}
+
+  Parameters:
+    * states         (array) - a page's status which maps to a state document.
+
+{% endcomment %}
+
+{% for stat_tag in include.states %}
+  {% assign state = site.states | find_exp: "item", "item.emoji == stat_tag" %}
+  <a class="stat-tag" href="{{ state.url | relative_url }}" title={{ state.title }}>{{ state.emoji }}</a>
+{% endfor %}

data/_includes/connect.html

@@ -0,0 +1,46 @@
+<!-- from: https://jekyllcodex.org/without-plugin/connect-buttons/ -->
+<style>
+#connect-buttons {display: inline-block; vertical-align: middle; }
+#connect-buttons:after {content: ""; display: block; clear: both;}
+#connect-buttons > div {
+  position: relative;
+  text-align: left; 
+  height: 36px; 
+  width: 32px; 
+  float: left; 
+  text-align: center;
+}
+#connect-buttons > div > svg {height: 16px; fill: #959396; margin-top: 10px;} /* $grey-dk-000 */
+#connect-buttons > div:hover {cursor: pointer;}
+#connect-buttons > div.facebook:hover > svg {fill: #3B5998;}
+#connect-buttons > div.github:hover > svg {fill: #000000;}
+#connect-buttons > div.twitter:hover > svg {fill: #55ACEE;}
+#connect-buttons > div.linkedin:hover > svg {fill: #0077b5;}
+#connect-buttons > div.pinterest:hover > svg {fill: #CB2027;}
+#connect-buttons > div.rss:hover > svg {fill: #ECB13D;}
+#connect-buttons > div.gplus:hover > svg {fill: #dd4b39;}
+#connect-buttons > div.mail:hover > svg {fill: #5c5962;} /* $grey-dk-100 */
+#connect-buttons > div.instagram:hover > svg {fill: #C73B92;}
+#connect-buttons > div.facebook > svg {height: 18px; margin-top: 9px;}
+#connect-buttons > div.github > svg {height: 18px; margin-top: 9px;}
+#connect-buttons > div.twitter > svg {height: 20px; margin-top: 8px;}
+#connect-buttons > div.linkedin > svg {height: 19px; margin-top: 7px;}
+#connect-buttons > div.pinterest > svg {height: 20px; margin-top: 9px;}
+#connect-buttons > div.rss > svg {height: 16px; margin-top: 10px;}
+#connect-buttons > div.gplus > svg {height: 17px; margin-top: 9px; position: relative; left: 1px;}
+#connect-buttons > div.mail > svg {height: 14px; margin-top: 11px;}
+</style>
+
+<div class="connect-bar">
+  <span class="connect-icon" title="Connect and Follow">
+    {{ site.data.emoji.connect }}
+  </span>
+  <div id="connect-buttons">
+    {% if site.social.connect.url.facebook %}<div class="facebook" title="Connect on Facebook" onclick="window.open('{{ site.social.connect.url.facebook }}');"><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.connect.url.github %}<div class="github" title="Connect on Github" onclick="window.open('{{ site.social.connect.url.github }}');"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></div>{% endif %}
+    {% if site.social.connect.url.linkedin %}<div class="linkedin" title="Connect on Linkedin" onclick="window.open('{{ site.social.connect.url.linkedin }}');"><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.connect.url.pinterest %}<div class="pinterest" title="Connect on Pinterest" onclick="window.open('{{ site.social.connect.url.pinterest }}');"><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.connect.url.twitter %}<div class="twitter" title="Connect on Twitter" onclick="window.open('{{ site.social.connect.url.twitter }}');"><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.connect.url.rss %}<div class="rss" title="Connect RSS Feed" onclick="window.open('{{ site.social.connect.url.rss }}');"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/></svg></div>{% endif %}
+  </div>
+</div>

data/_includes/cookie-consent.html

@@ -0,0 +1,79 @@
+<!-- from: https://jekyllcodex.org/without-plugin/cookie-consent/ -->
+<!-- duplicate code with cookie-consent-response.html -->
+<div id="cookie-consent">
+  <span>This site uses third party cookies and scripts to improve the functionality of this website.</span>
+  <a id="cookie-consent-response-accept" class="btn" title="Ok">
+    {{ site.data.emoji.approve }}
+  </a>
+  <a id="cookie-consent-hmm" class="btn" href="{{ '/privacy' | relative_url }}" title="Hmm...Tell me more...">
+    {{ site.data.emoji.consider }}
+  </a>
+  {% if site.bonsai.debug %}
+    <a id="cookie-consent-response-reject" class="btn" title="Nope!">
+      {{ site.data.emoji.disapprove }}
+    </a>
+  {% endif %}
+</div>
+<script>
+  function createCookie(name,value,days) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days*24*60*60*1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + value + expires + "; path=/";
+  }
+  function readCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+      var c = ca[i];
+      while (c.charAt(0)==' ') c = c.substring(1,c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+  }
+  function eraseCookie(name) {
+    createCookie(name,"",-1);
+  }
+  function clearCookies() {
+    var cookies = document.cookie.split(";");
+    for (var i = 0; i < cookies.length; i++) {
+      eraseCookie(cookies[i].split("=")[0]);
+    }
+  }
+  document.getElementById('cookie-consent-response-accept').addEventListener("click",function() {
+    clearCookies();
+    createCookie('cookie-consent-accepted','true',31);
+    document.getElementById('cookie-consent').style.display = 'none';
+    location.reload();
+  });
+
+  {% if site.bonsai.debug %}
+    document.getElementById('cookie-consent-response-reject').addEventListener("click",function() {
+      clearCookies();
+      createCookie('cookie-consent-declined','true',10);
+      document.getElementById('cookie-consent').style.display = 'none';
+      location.reload();
+    });
+  {% else %}
+    /** 
+     * from: https://jekyllcodex.org/without-plugin/metrics/Z 
+     * (use multi-line comment because compression causes single line to comment out entire file)
+     * */
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', '{{ site.ga_tracking }}']);
+    _gaq.push(['_gat._forceSSL']);
+    _gaq.push(['_gat._anonymizeIp']);
+    _gaq.push(['_trackPageview']);
+
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  {% endif %}
+
+  if ((readCookie('cookie-consent-accepted')!=='true') && (readCookie('cookie-consent-declined')!=='true')) {
+    document.getElementById('cookie-consent').style.display = 'flex';
+  }
+</script>

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-ancestor.svg

@@ -0,0 +1,5 @@
+<svg 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="0" y1="5" x2="25" y2="25" stroke="#8C6239" />
+  <line class="bullet-link" x1="0" y1="45" x2="25" y2="25" stroke="#8C6239" />
+  <circle class="bullet-node" cx="25" cy="25" r="10" fill="#31AF31" />
+</svg>

data/_includes/img/bullet-branch.svg

@@ -0,0 +1,7 @@
+<svg 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="5" y1="33" x2="5" y2="5" stroke="#8C6239"/>
+  <line class="bullet-link" x1="5" y1="33" x2="33" y2="33" stroke="#8C6239"/>
+  <circle class="bullet-node" cx="5" cy="5" r="6" fill="#31AF31"/>
+  <circle class="bullet-node" cx="5" cy="33" r="6" fill="#31AF31"/>
+  <circle class="bullet-node" cx="33" cy="33" r="6" fill="#31AF31"/>
+</svg>

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

@@ -0,0 +1,9 @@
+<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" />
+  <circle class="bullet-node" cx="25" cy="33" r="10" fill="#31AF31"/>
+  <circle class="bullet-node" cx="2" cy="50" r="6" fill="#31AF31" />
+  <circle class="bullet-node" cx="25" cy="5" r="6" fill="#31AF31" />
+  <circle class="bullet-node" cx="47" cy="50" r="6" fill="#31AF31" />
+</svg>

data/_includes/img/bullet-tree.svg

@@ -0,0 +1,9 @@
+<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" />
+  <circle class="bullet-node" cx="25" cy="20" r="10" fill="#31AF31" />
+  <circle class="bullet-node" cx="5" cy="50" r="6" fill="#31AF31" />
+  <circle class="bullet-node" cx="25" cy="50" r="6" fill="#31AF31" />
+  <circle class="bullet-node" cx="45" cy="50" r="6" fill="#31AF31" />
+</svg>

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

@@ -0,0 +1,47 @@
+<!-- from: https://jekyllcodex.org/without-plugin/share-buttons/ -->
+{% if include.pageurl != nil and include.pageurl != '' %}
+    {% assign pageurl = include.pageurl %}
+{% else %}
+    {% assign pageurl = page.url | relative_url %}
+{% endif %}
+
+<style>
+#share-buttons {display: inline-block; vertical-align: middle; }
+#share-buttons:after {content: ""; display: block; clear: both;}
+#share-buttons > div {
+    position: relative;
+    text-align: left; 
+    height: 36px; 
+    width: 32px; 
+    float: left; 
+    text-align: center;
+}
+#share-buttons > div > svg {height: 16px; fill: #959396; margin-top: 10px;} /* $grey-dk-000 */
+#share-buttons > div:hover {cursor: pointer;}
+#share-buttons > div.facebook:hover > svg {fill: #3B5998;}
+#share-buttons > div.twitter:hover > svg {fill: #55ACEE;}
+#share-buttons > div.linkedin:hover > svg {fill: #0077b5;}
+#share-buttons > div.pinterest:hover > svg {fill: #CB2027;}
+#share-buttons > div.gplus:hover > svg {fill: #dd4b39;}
+#share-buttons > div.mail:hover > svg {fill: #5c5962;} /* $grey-dk-100 */
+#share-buttons > div.instagram:hover > svg {fill: #C73B92;}
+#share-buttons > div.facebook > svg {height: 18px; margin-top: 9px;}
+#share-buttons > div.twitter > svg {height: 20px; margin-top: 8px;}
+#share-buttons > div.linkedin > svg {height: 19px; margin-top: 7px;}
+#share-buttons > div.pinterest > svg {height: 20px; margin-top: 9px;}
+#share-buttons > div.gplus > svg {height: 17px; margin-top: 9px; position: relative; left: 1px;}
+#share-buttons > div.mail > svg {height: 14px; margin-top: 11px;}
+</style>
+
+<div class="share-bar">
+  <span class="share-icon" title="Share This">
+    {{ site.data.emoji.share }}
+  </span>
+  <div id="share-buttons">
+    {% 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

@@ -0,0 +1,100 @@
+<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 %}
+        {% assign map_page = site.pages | where: "name", "map.md" %}
+        {% if map_page.first %}
+          <a class="btn btn--green drop-3" href="{{ '/map' | relative_url }}" title="Go To Archive">
+            {{ site.data.emoji.bonsai }}
+          </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 class="dropdown__btn">
+        <span title="Site-Nav Toggles">
+          {{ site.data.emoji.site_nav }}
+        </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>
+    {% 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>
+
+  {% 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="text--small">🪴 Grown with 💚 from a <a class="web-link" href="https://jekyll-wikibonsai.netlify.app">jekyll-wikibonsai</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 }};
+}