jekyll-bonsai 0.0.3 → 0.0.4

data/_layouts/post.html

@@ -1,29 +1,47 @@
 ---
-layout: default
+layout: base
 ---
 
-<div id="post">
+<article id="post" 
+  class="post h-entry"
+  role="article" 
+  itemscope 
+  itemtype="http://schema.org/BlogPosting"
+  aria-labelledby="{{ title | slug }}-title">
 
-  <h1>{{ page.title }}</h1>
-  <p class="small-descr">
-    {% assign stat_tags = page.tags | stat_tags %}
-    {% for stat_tag in stat_tags %}
-      <a class="stat-tag" href="{{ stat_tag.url | relative_url }}">{{ stat_tag.emoji }}</a>
-    {% endfor %}
-    <span>Last Tended: {{ page.updated | date: "%Y-%m-%d" }}</span>
-  </p>
+  <div class="post__title hp-title">
+    <h1 class="p-name">{{ page.title }}</h1>
+  </div>
 
-  {{ content }}
+  <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">
+        {% for sem_tag in page.tags %}
+          {% assign sem_tag_file = sem_tag | append: ".md" %}
+          {% assign entry = site.entries | find_exp: "item", "item.path contains sem_tag_file" %}
+          <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 %}
+      </div>
+    </div>
+  </section>
 
-  <p>
-    {% assign sem_tags = page.tags | sem_tags %}
-    {% for sem_tag in sem_tags %}
-      <a class="sem-tag" href="{{ sem_tag.url | relative_url }}">{{ sem_tag.tag }}</a>
-    {% endfor %}
-  </p>
+  <div class="post__content markdown hp-content e-content p-name">
+    {{ content }}
+  </div>
 
-  {% if site.social.enabled %}
-    {% include share.html %}
-  {% endif %}
-
-</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,65 @@
+---
+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 -->
+        <!-- {% assign ctime = doc.created | date: '%s' %} -->
+        {% assign ptime = doc.date | date: '%s' %}
+        {% assign mtime = doc.updated | date: '%s' %}
+        {% 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

@@ -1,59 +1,70 @@
 ---
-layout: default
+layout: base
 ---
+
 {% assign states = site.states  %}
 {% assign index_state_title = "Plant Tags Page" %}
 
-<div id="states" class="states-page">
-  <nav class="states-nav">
-    <ul class="states-nav-list">
+<div id="state" class="state">
+
+  <nav class="state__nav">
+    <ul>
       {% for state in states %}
-        <li class="states-list-item {% if page.url == state.url %}active{% endif %}">
-          <a href="{{ state.url | relative_url }}" class="stat-tag">
+        <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">
 
-  <!-- all states -->
-  {% if page.title == index_state_title %}
-    <h1>🔖 Plant Tags In This Garden</h1>
-    {{ content }}
-    <p class="small-descr">
-      Descriptions only reflect the spirit of this garden. 
-      Click <a href="{{ page.emojipedia }}">here</a> for the official emoji description.
-    </p>
-    {% for state in states %}
-      {% if state.title != index_state_title %}
-        <h2>{{ state.emoji }} <a href="{{ state.url | relative_url }}" class="wiki-link">{{ state.title }}</a></h2>
-        <p>{{ state.content | markdownify }}</p>
-      {% endif %}
-    {% endfor %}
-  <!-- individual states -->
-  {% else %}
-    <!-- page == tag (from tag-nav) -->
-    {% assign entries_w_stat = site.entries | where: 'tags', page.emoji %}
-    <h1>{{ page.emoji }} {{ page.title }}</h1>
-    {{ content }}
-    <p class="small-descr">
-      Descriptions only reflect the spirit of this garden. 
-      Click <a href="{{ page.emojipedia }}">here</a> for the official emoji description.
-    </p>
-
-    {% if entries_w_stat.size == 0 %}
-      <div class="no-results">
-        There are currently no {{ page.emoji }}s.
+    <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 %}
-      <ul class="states-list">
-        {% for entry in entries_w_stat %}
-          <li class="states-list-item">
-            {{ page.emoji }} <a href="{{ entry.url | relative_url }}" class="wiki-link">{{ entry.title }}</a>
-          </li>
-        {% endfor %}  
-      </ul>
-      {% endif %}
-  {% endif %}
+      <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/_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

@@ -1,54 +1,55 @@
-//
 // two column layout
-//
 
 .side-bar {
-  z-index: 1;
-  display: flex;
-  flex-wrap: wrap;
+  position: fixed;
+  z-index: $z-nav;
+  display: none;
+  height: 100vh;
 
   @include mq(md) {
+    display: block;
     width: $nav-width-md;
-    flex-wrap: nowrap;
-    position: fixed;
-    height: 100%;
   }
 
   @include mq(lg) {
+    display: block;
     width: $nav-width-lg;
   }
+
+  &.nav-open {
+    display: block;
+    width: 100vw;
+  }
 }
 
 .main {
-  height: 100%;
+  @include container;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 
   @include mq(md) {
-    max-width: $content-width;
     margin-left: $nav-width-md;
   }
 
   @include mq(lg) {
     margin-left: $nav-width-lg;
   }
-}
 
-.main-content-wrap { 
-  @include container;
-  
-  display: flex;
-  flex-direction: column;
-
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
-
-  min-height: 100vh;
-
-  @include mq(md) {
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
+  &__content {
+    flex: 1 0 auto;
   }
-}
 
-.entry-body {
-  padding: $sp-3;
-}
+  &__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%;
+  }
+}