jekyll-bonsai 0.0.3 → 0.0.4

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/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 }};
+}

data/_includes/toc.html

@@ -0,0 +1,187 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Copyright (c) 2017 Vladimir "allejo" Jimenez
+
+        Permission is hereby granted, free of charge, to any person
+        obtaining a copy of this software and associated documentation
+        files (the "Software"), to deal in the Software without
+        restriction, including without limitation the rights to use,
+        copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the
+        Software is furnished to do so, subject to the following
+        conditions:
+
+        The above copyright notice and this permission notice shall be
+        included in all copies or substantial portions of the Software.
+
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+        EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+        OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+        NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+        HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+        WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+        FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+        OTHER DEALINGS IN THE SOFTWARE.
+    {% endcomment %}
+    {% comment %}
+        Version 1.1.0
+          https://github.com/allejo/jekyll-toc
+
+        "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+
+        Usage:
+            {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+
+        Parameters:
+            * html         (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+        Optional Parameters:
+            * sanitize      (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class         (string) :   ''   - a CSS class assigned to the TOC
+            * id            (string) :   ''   - an ID to assigned to the TOC
+            * h_min         (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max         (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered       (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class    (string) :   ''   - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
+            * submenu_class (string) :   ''   - add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level
+            * base_url      (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
+            * anchor_class  (string) :   ''   - add custom class(es) for each anchor element
+            * skip_no_ids   (bool)   : false  - skip headers that do not have an `id` attribute
+
+        Output:
+            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
+            generate the table of contents and will NOT output the markdown given to it
+    {% endcomment %}
+
+    {% capture newline %}
+    {% endcapture %}
+    {% assign newline = newline | rstrip %} <!-- Remove the extra spacing but preserve the newline -->
+
+    {% capture deprecation_warnings %}{% endcapture %}
+
+    {% if include.baseurl %}
+        {% capture deprecation_warnings %}{{ deprecation_warnings }}<!-- jekyll-toc :: "baseurl" has been deprecated, use "base_url" instead -->{{ newline }}{% endcapture %}
+    {% endif %}
+
+    {% if include.skipNoIDs %}
+        {% capture deprecation_warnings %}{{ deprecation_warnings }}<!-- jekyll-toc :: "skipNoIDs" has been deprecated, use "skip_no_ids" instead -->{{ newline }}{% endcapture %}
+    {% endif %}
+
+    {% capture jekyll_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign baseURL = include.base_url | default: include.baseurl | default: '' %}
+    {% assign skipNoIDs = include.skip_no_ids | default: include.skipNoIDs | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | strip | split: '<h' %}
+
+    {% assign firstHeader = true %}
+    {% assign currLevel = 0 %}
+    {% assign lastLevel = 0 %}
+
+    {% capture listModifier %}{% if orderedList %}ol{% else %}ul{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign currLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if currLevel < minHeader or currLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign htmlID = _idWorkspace[0] %}
+
+        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+        {% assign htmlClass = _classWorkspace[0] %}
+
+        {% if htmlClass contains "no_toc" %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign minHeader = currLevel %}
+        {% endif %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% if include.item_class and include.item_class != blank %}
+            {% capture listItemClass %} class="{{ include.item_class | replace: '%level%', currLevel | split: '.' | join: ' ' }}"{% endcapture %}
+        {% endif %}
+
+        {% if include.submenu_class and include.submenu_class != blank %}
+            {% assign subMenuLevel = currLevel | minus: 1 %}
+            {% capture subMenuClass %} class="{{ include.submenu_class | replace: '%level%', subMenuLevel | split: '.' | join: ' ' }}"{% endcapture %}
+        {% endif %}
+
+        {% capture anchorBody %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
+
+        {% if htmlID %}
+            {% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}"{% endcapture %}
+
+            {% if include.anchor_class %}
+                {% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %}
+            {% endif %}
+
+            {% capture listItem %}<a{{ anchorAttributes }}>{{ anchorBody }}</a>{% endcapture %}
+        {% elsif skipNoIDs == true %}
+            {% continue %}
+        {% else %}
+            {% capture listItem %}{{ anchorBody }}{% endcapture %}
+        {% endif %}
+
+        {% if currLevel > lastLevel %}
+            {% capture jekyll_toc %}{{ jekyll_toc }}<{{ listModifier }}{{ subMenuClass }}>{% endcapture %}
+        {% elsif currLevel < lastLevel %}
+            {% assign repeatCount = lastLevel | minus: currLevel %}
+
+            {% for i in (1..repeatCount) %}
+                {% capture jekyll_toc %}{{ jekyll_toc }}</li></{{ listModifier }}>{% endcapture %}
+            {% endfor %}
+
+            {% capture jekyll_toc %}{{ jekyll_toc }}</li>{% endcapture %}
+        {% else %}
+            {% capture jekyll_toc %}{{ jekyll_toc }}</li>{% endcapture %}
+        {% endif %}
+
+        {% capture jekyll_toc %}{{ jekyll_toc }}<li{{ listItemClass }}>{{ listItem }}{% endcapture %}
+
+        {% assign lastLevel = currLevel %}
+        {% assign firstHeader = false %}
+    {% endfor %}
+
+    {% assign repeatCount = minHeader | minus: 1 %}
+    {% assign repeatCount = lastLevel | minus: repeatCount %}
+    {% for i in (1..repeatCount) %}
+        {% capture jekyll_toc %}{{ jekyll_toc }}</li></{{ listModifier }}>{% endcapture %}
+    {% endfor %}
+
+    {% if jekyll_toc != '' %}
+        {% assign rootAttributes = '' %}
+
+        {% if include.wrap_class and include.wrap_class != blank %}
+            {% capture wrapperAttributes %} class="{{ include.wrap_class | split: '.' | join: ' '  }}"{% endcapture %} %}
+        {% endif %}
+
+        {% if include.class and include.class != blank %}
+            {% capture rootAttributes %} class="{{ include.class | split: '.' | join: ' ' }}"{% endcapture %}
+        {% endif %}
+
+        {% if include.id and include.id != blank %}
+            {% capture rootAttributes %}{{ rootAttributes }} id="{{ include.id }}"{% endcapture %}
+        {% endif %}
+
+        {% if rootAttributes %}
+            {% assign nodes = jekyll_toc | split: '>' %}
+            {% capture jekyll_toc %}<div {{ wrapperAttributes }}><{{ listModifier }}{{ rootAttributes }}>{{ nodes | shift | join: '>' }}></div>{% endcapture %}
+        {% endif %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}{{ deprecation_warnings }}{{ jekyll_toc }}

data/_layouts/404.html

@@ -0,0 +1,10 @@
+---
+layout: base
+---
+<div id="four-zero-four" class="four-zero-four">
+
+  <h1>{{ site.data.emoji.missing }} 404 {{ site.data.emoji.missing }}</h1>
+
+  <p class="markdown">{{ content }}</p>
+
+</div>

data/_layouts/about.html

@@ -0,0 +1,14 @@
+---
+layout: base
+---
+<div id="about" class="about">
+
+  <div class="hp-title">
+    <h1 class="p-name">{{ site.data.emoji.about }} {{ page.title }}</h1>
+  </div>
+
+  <div class="hp-content markdown e-content p-name">
+    {{ content }}
+  </div>
+
+</div>