jekyll-wikibonsai 0.0.9 → 0.0.10

data/_layouts/home.html

@@ -0,0 +1,96 @@
+---
+layout: base
+---
+
+<div id="home" class="home">
+  
+  <section class="lead">
+    <div class="lead__img">
+      <img id="home-logo" class="lead__img--size">
+    </div>
+    {% assign root = site.entries | find_exp: "item", "item.path == site.bonsai.entries.root_path" %}
+    <div class="lead__title hp-title">
+      <h1 class="p-name"><a class="wiki-link" href="{{ root.url | relative_url }}">{{ page.title }}</a></h4>
+    </div>
+    <div class="lead__content markdown hp-content">
+      {{ content }}
+    </div>
+  </section>
+  
+  <div class="home__content">
+
+    {% if site.bonsai.home.notable.enabled %}
+      <section class="featured">
+        <div class="featured__header">
+          <h4>Notable</h4>
+        </div>
+        <div class="featured__content">
+          <ul>
+            {% for notable in site.bonsai.home.notable.docs %}
+              {% assign doc = site.documents | find_exp: "item", "item.path contains notable" %}
+              <li>
+                <div class="item">
+                  <div class="item__status">
+                    {% include btn_state.html states=doc.status %}
+                  </div>
+                  <div class="item__text">
+                    <span>
+                      <a class="wiki-link" href="{{ doc.url | relative_url }}"> {{ doc.title }}</a>
+                    </span>
+                    <time class="text--date dt-updated">
+                      {{ doc.updated | date: '%s' | slice: 0, 10 | date: site.bonsai.date_format }}
+                    </time>
+                  </div>
+                </div>
+              </li>
+            {% endfor %}
+            </ul>
+          {% assign about_page = site.pages | where: "name", "about.md" %}
+          <!-- using '.first' to test if any results were found -->
+          {% if about_page.first %}
+            <p class="featured__footer">For more, see <a class="wiki-link" href="{{ '/about/' | relative_url }}">about {{ site.data.emoji.about }}</a></p>
+          {% endif %}
+        </div>
+      </section>
+    {% endif %}
+
+    {% if site.bonsai.home.recent.enabled %}
+      <section class="featured__section">
+        <div class="featured__header">
+          <h4>Recent</h4>
+        </div>
+        <div class="featured__content">
+          <ul>
+            {% assign recent_docs = site.documents | sort: 'updated' | reverse %}
+            {% for doc in recent_docs limit: site.bonsai.home.recent.cap %}
+              <li>
+                <div class="item">
+                  <div class="item__status">
+                    {% include btn_state.html states=doc.status %}
+                  </div>
+                  <div class="item__text">
+                    <span>
+                      <a class="wiki-link" href="{{ doc.url | relative_url }}"> {{ doc.title }}</a>
+                    </span>
+                    <time class="text--date dt-updated">
+                      {{ doc.updated | date: '%s' | slice: 0, 10 | date: site.bonsai.date_format }}
+                    </time>
+                  </div>
+                </div>
+              </li>
+            {% endfor %}
+            </ul>
+          {% assign recent_page = site.pages | where: "name", "recent.md" %}
+          <!-- using '.first' to test if any results were found -->
+          {% if recent_page.first %}
+            <p class="featured__footer">
+              For more updates, check the <a class="wiki-link" href="{{ '/recent/' | relative_url }}">weather {{ site.data.emoji.recent }}</a>
+            </p>
+          {% endif %}
+        </div>
+      </section>
+    {% endif %}
+
+  </div>
+
+</div>

data/_layouts/map.html

@@ -0,0 +1,17 @@
+---
+layout: base
+---
+<div id="map" class="map">
+
+  <div class="hp-title">
+    <h1 class="p-name">{{ site.data.emoji.bonsai }} {{ page.title }}</h1>
+  </div>
+
+  <div class="hp-content e-content p-name">
+    {{ content }}
+
+    {% assign child_nodes = page.nodes | where_exp: "node", "node.ancestors.size == 0"%}
+    {% include branch.html children=child_nodes  %}
+  </div>
+
+</div>

data/_layouts/post.html

@@ -0,0 +1,37 @@
+---
+layout: base
+---
+
+<article id="post" 
+         class="post h-entry"
+         role="article" 
+         itemscope 
+         itemtype="http://schema.org/BlogPosting"
+         aria-labelledby="{{ page.title | slugify }}-title">
+
+  <div class="post__title hp-title">
+    <h1 class="p-name">{{ page.title }}</h1>
+  </div>
+
+  <section class="post__infobox">
+    <div class="infobox">
+      {% include toc.html html=content wrap_class="toc" class="toc__list" item_class="toc__list-item" anchor_class="toc__anchor" %}
+      {% include dates.html updated=page.updated date=page.date %}
+      <div class="infobox__bar">
+        {% include btn_state.html states=page.status %}
+        {% if site.social.share.enabled %}
+          {% include share.html %}
+        {% endif %}
+      </div>
+      <div class="infobox__sem-tags p-category">
+        {% assign tags_attrs = page.attributes | link_type: "tags" %}
+        {% include tags.html tags_attrs=tags_attrs tag_fm=page.tags %}
+      </div>
+    </div>
+  </section>
+
+  <div class="post__content markdown hp-content e-content p-name">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/privacy.html

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

data/_layouts/recent.html

@@ -0,0 +1,66 @@
+---
+layout: base
+---
+<div id="recent" class="recent">
+
+  <section class="recent__leader">
+    <div class="hp-title">
+      <h1 class="p-name">{{ site.data.emoji.recent }} {{ page.title }}</h1>
+    </div>
+    <div class="leader">
+      <div class="leader__content markdown hp-content e-content p-name">
+        {{ content }}
+      </div>
+      <aside class="key">
+        <span class="key__title">Key</span>
+        <div class="key__content">
+          <p class="text--small"><em>{{ site.data.emoji.created }} Planted (Created) (Inactive)</em></p>
+          <p>{{ site.data.emoji.published }} Transplanted (Published)</p>
+          <p>{{ site.data.emoji.updated }} Last Tended (Updated)</p>
+          <p class="text--small"><em>{{ site.data.emoji.deleted }} Uprooted (Deleted) (Inactive)</em></p>
+        </div>
+      </aside>
+    </div>
+  </section>
+
+  <section class="recent__content">
+    <ul>
+      {% assign recent_docs = site.documents | sort: 'updated' | reverse %}
+      {% for doc in recent_docs limit: site.bonsai.recent.cap %}
+        <!-- determine if doc's recent status -->
+        <!-- from: https://stackoverflow.com/questions/37340705/shopify-liquid-find-number-of-days-between-two-dates -->
+        <!-- note: slicing off milliseconds -->
+        <!-- {% assign ctime = doc.created | date: '%s' | slice: 0, 10 %} -->
+        {% assign ptime = doc.date | date: '%s' | slice: 0, 10 %}
+        {% assign mtime = doc.updated | date: '%s' | slice: 0, 10 %}
+        {% assign sec_diff = mtime | minus: ptime %}
+        {% assign is_same_day = sec_diff | divided_by: 3600 | divided_by: 24 %}
+        <li>
+          <div class="item">
+            <div class="bullet-scene">
+              <span class="bullet-scene__change-type">
+                {% if is_same_day == 0 %}
+                  {{ site.data.emoji.published }}
+                {% else %}
+                  {{ site.data.emoji.updated }}
+                {% endif %}
+              </span>
+              <span class="bullet-scene__status">
+                {% include btn_state.html states=doc.status %}
+              </span>
+            </div>
+            <div class="item__text">
+              <span class="item__text--big">
+                <a class="wiki-link" href="{{ doc.url | relative_url }}">{{ doc.title }}</a>  
+              </span>
+              <time class="text--date dt-updated">
+                {{ doc.updated | slice: 0, 10 | date: site.bonsai.date_format }}
+              </time>
+            </div>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </section>
+
+</div>

data/_layouts/state.html

@@ -0,0 +1,70 @@
+---
+layout: base
+---
+
+{% assign states = site.states  %}
+{% assign index_state_title = "Plant Tags Page" %}
+
+<div id="state" class="state">
+
+  <nav class="state__nav">
+    <ul>
+      {% for state in states %}
+        <li class="{% if page.url == state.url %}active{% endif %}">
+          <a class="stat-tag" href="{{ state.url | relative_url }}">
+            {{ state.emoji }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+  
+  <div class="state__content">
+
+    <section>
+      <div class="hp-title">
+        <h1 class="p-name">{{ page.emoji }} {{ page.title }}</h1>
+      </div>
+      <div class="markdown hp-content e-content p-name">
+        {{ content }}
+      </div>
+    </section>
+
+    <!-- display all states on root state -->
+    {% if page.path == site.bonsai.states.root_path %}
+      <section class="has-web-links">
+        {% for state in states %}
+          {% if state.path != site.bonsai.states.root_path %}
+            <h4>{{ state.emoji }} {{ state.title }}</h4>
+            {{ state.content | markdownify }}
+          {% endif %}
+      {% endfor %}
+      </section>
+    <!-- display entries with that state as its status -->
+    {% else %}
+      <section>
+        <!-- page == tag (from tag-nav) -->
+        {% assign docs_w_stat = site.documents | where: 'status', page.emoji %}
+        {% if docs_w_stat.size == 0 and page.path != site.bonsai.states.root_path %}
+          <div class="state__list-wrap--empty">
+            <span>There are currently no {{ page.emoji }}s.</span>
+          </div>
+        {% else %}
+          <ul class="state__list-wrap">
+            {% for entry in docs_w_stat %}
+              <li>
+                {{ page.emoji }} <a class="wiki-link" href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
+              </li>
+            {% endfor %}  
+          </ul>
+        {% endif %}
+      </section>
+    {% endif %}
+
+  </div>
+
+  <footer class="state__footer text--small">
+    Descriptions only reflect the spirit of this garden. Check out the official description: <a class="web-link" href="{{ page.emojipedia }}"> here </a>.
+  </footer>
+
+</div>

data/_layouts/table-wrappers.html

@@ -0,0 +1,7 @@
+---
+layout: vendor/compress
+---
+
+{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
+{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
+{{ content_ }}

data/_layouts/vendor/compress.html

@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.1.0
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

data/_sass/base/_code.scss

@@ -0,0 +1,133 @@
+//
+// Code and syntax highlighting
+//
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
+
+// from: https://bnhr.xyz/2017/03/25/add-syntax-highlighting-to-your-jekyll-site-with-rouge.html
+// @import './code_themes/gruvbox';
+@import './code_themes/solarized';
+// @import './code_themes/monokai';
+
+code {
+  padding: $sp-1 $sp-1;
+  font-weight: 400;
+  border-radius: $border-radius;
+  background-color: var(--accent-dark-color);
+}
+
+// Avoid appearance of dark border around visited code links in Safari
+a:visited code {
+  border-color: var(--accent-light-color);
+}
+
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+//
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+// ```[LANG]...```
+div.highlighter-rouge {
+  overflow-x: auto;
+  padding: $sp-3;
+  margin-top: $sp-3;
+  margin-bottom: $sp-3;
+  background-color: var(--accent-dark-color);
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  div.highlight,
+  pre.highlight,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  background-color: var(--accent-dark-color);
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// ```[LANG]...```, kramdown line_numbers = true,
+// {% highlight LANG linenos %}...{% endhighlight %}:
+.highlight .table-wrapper {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+
+  td,
+  pre {
+    @include fs-2;
+    min-width: 0;
+    padding: 0;
+    background-color: var(--accent-dark-color);
+    border: 0;
+  }
+
+  td.gl {
+    padding-right: $sp-3;
+  }
+
+  pre {
+    margin: 0;
+    line-height: 2;
+  }
+}
+
+.code-example {
+  padding: $sp-3;
+  margin-bottom: $sp-3;
+  overflow: auto;
+  border: 1px solid var(--accent-light-color);
+  border-radius: $border-radius;
+
+  + .highlighter-rouge,
+  + figure.highlight {
+    position: relative;
+    margin-top: -$sp-4;
+    border-right: 1px solid var(--accent-light-color);
+    border-bottom: 1px solid var(--accent-light-color);
+    border-left: 1px solid var(--accent-light-color);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

data/_sass/base/_layout.scss

@@ -0,0 +1,55 @@
+// two column layout
+
+.side-bar {
+  position: fixed;
+  z-index: $z-nav;
+  display: none;
+  height: 100vh;
+
+  @include mq(md) {
+    display: block;
+    width: $nav-width-md;
+  }
+
+  @include mq(lg) {
+    display: block;
+    width: $nav-width-lg;
+  }
+
+  &.nav-open {
+    display: block;
+    width: 100vw;
+  }
+}
+
+.main {
+  @include container;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  @include mq(md) {
+    margin-left: $nav-width-md;
+  }
+
+  @include mq(lg) {
+    margin-left: $nav-width-lg;
+  }
+
+  &__content {
+    flex: 1 0 auto;
+  }
+
+  &__footer {
+    // 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
+    //  ex = local
+    //    footer = main__footer
+    //    content = main__content
+    //    body = main
+    //    html, body = main (height is min-height)
+    flex-shrink: 0;
+    display: flex;
+
+    padding-top: $sp-10;
+  }
+}

data/_sass/base/_link.scss

@@ -0,0 +1,105 @@
+// link -- a tag -- styles
+
+a {
+  text-decoration: none;
+}
+
+a.sem-tag {
+  @include fs-2;
+  color: var(--wiki-link-color);
+}
+
+a.stat-tag {
+  color: var(--body-text-color);
+  filter: drop-shadow(0 0 0.2mm $drop-shadow-green);
+}
+
+a.web-link {
+  color: var(--link-color);
+  text-decoration: none;
+  background-image: linear-gradient(
+    var(--link-underline-color) 0%,
+    var(--link-underline-color) 100%
+  );
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+
+  &:hover {
+    background-image: linear-gradient(
+      var(--link-color) 0%,
+      var(--link-color) 100%
+    );
+    background-size: 1px 1px;
+  }
+}
+
+// wiki-link classes
+
+.invalid-wiki-link {
+  color: var(--invalid-wiki-link-color);
+  cursor: help;
+}
+
+a.wiki-link { 
+  color: var(--wiki-link-color);
+  text-decoration: none;
+  background-image: linear-gradient(
+    var(--wiki-link-underline-color) 0%, 
+    var(--wiki-link-underline-color) 100%
+  );
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+
+  &:hover {
+    background-image: linear-gradient(
+      var(--wiki-link-color) 0%,
+      var(--wiki-link-color) 100%
+    );
+    background-size: 1px 1px;
+  }  
+}
+
+.embed-wrapper {
+  position: relative;
+  border: 1px solid var(--accent-light-color);
+  border-radius: 15px;
+  padding: $sp-3;
+
+  .embed-title {
+    @include fs-6;
+    padding-top: $sp-3;
+    padding-left: $sp-3;
+  }
+
+  .embed-content {
+    padding: $sp-3;
+  }
+  
+  .embed-wiki-link {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+
+    &::before {
+      content: "🥾";
+    }
+
+    &:hover {
+      filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
+    }
+  }
+}
+
+.embed-image-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+
+  .embed-image {
+    height: 50%;
+    width: 50%;
+  }
+}