Customize tale theme (& add sidenotes+footnotes).

This is a large-ish commit that adds bunch of features to the base
"tale" theme forked from https://github.com/chesterhow/tale at de5cd20.

The changes:

- custom footer
- support for sidenotes, original taken from:
  https://blog.jkl.gg/jekyll-footnote-tufte-sidenote/
- logo at the top of the website
- date format is %Y-%m-%d
- The "written by" in article is only shown when article's author
  differs from site author
- Pages subpage shows list of posts sorted by years

.gitignore

@@ -1,3 +1,4 @@
+.svn
 *.gem
 .bundle
 .DS_Store

_includes/footer.html

@@ -1,5 +1,6 @@
 <footer>
   <span>
-    &copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> {{ site.author.name }}. Made with Jekyll using the <a href="https://github.com/chesterhow/tale/">Tale</a> theme.
+    &copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> {{ site.author.name }}. I speak only for myself.
+    <!-- Made with Jekyll using a customized https://github.com/chesterhow/tale/ theme. -->
   </span>
 </footer>

_includes/head.html

@@ -8,7 +8,12 @@
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700">
 
+  <!-- scripts -->
+  <script src="{{ "/assets/js/jquery.min.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/sidenotes.js" | relative_url }}"></script>
+
   <!-- Favicon -->
+  <link rel="icon" type="image/png" sizes="128x128" href="{{ "/assets/favicon-128x128.png" | relative_url }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/favicon-32x32.png" | relative_url }}">
   <link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/favicon-16x16.png" | relative_url }}">
   <link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/apple-touch-icon.png" | relative_url }}">

_includes/navigation.html

@@ -1,12 +1,12 @@
 <nav class="nav">
   <div class="nav-container">
     <a href="{{ site.baseurl }}/">
-      <h2 class="nav-title">{{ site.title }}</h2>
+      <h2 class="nav-title"><img src="{{ '/assets/favicon-32x32.png' | prepend: site.baseurl }}" srcset="{{ '/assets/favicon-64x64.png' | prepend: site.baseurl }} 2x, {{ '/assets/favicon-96x96.png' | prepend: site.baseurl }} 3x, {{ '/assets/favicon-128x128.png' | prepend: site.baseurl }} 4x, {{ '/assets/favicon-256x256.png' | prepend: site.baseurl }} 8x"> {{ site.title }}</h2>
     </a>
     <ul>
-      <li><a href="{{ site.baseurl }}/">Posts</a></li>
-      <li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
-      <li><a href="{{ '/about' | prepend: site.baseurl }}">About</a></li>
+      <li><a href="{{ '/posts/' | prepend: site.baseurl }}">Posts</a></li>
+      <li><a href="{{ '/tags/' | prepend: site.baseurl }}">Tags</a></li>
+      <li><a href="{{ '/about/' | prepend: site.baseurl }}">About</a></li>
     </ul>
   </div>
 </nav>

_layouts/home.html

@@ -6,11 +6,12 @@ layout: default
   {% for post in paginator.posts %}
     <a href="{{ post.url | prepend: site.baseurl }}" class="catalogue-item">
       <div>
-        <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time>
+        <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%Y-%m-%d" }}</time>
         <h1 class="catalogue-title">{{ post.title }}</h1>
         <div class="catalogue-line"></div>
 
         <p>
+          <!-- sadly this template is not compatible with post.excerpt -->
           {{ post.content | strip_html | truncatewords: 30 }}
         </p>
 

_layouts/post.html

@@ -4,16 +4,21 @@ layout: default
 
 <div class="post">
   <div class="post-info">
-    <span>Written by</span>
+    {% if page.author or page.date %}
+    <span>Written</span>
+    {% if page.author %}
+    <span>by</span>
     {% if page.author %}
         {{ page.author }}
     {% else %}
         {{ site.author.name }}
     {% endif %}
+      <br>
+    {% endif %}
 
     {% if page.date %}
-      <br>
-      <span>on&nbsp;</span><time datetime="{{ page.date }}">{{ page.date | date: "%B %d, %Y" }}</time>
+      <span>on&nbsp;</span><time datetime="{{ page.date }}">{{ page.date | date: "%Y-%m-%d" }}</time>
+    {% endif %}
     {% endif %}
   </div>
 
@@ -35,5 +40,5 @@ layout: default
     <a href="{{ page.previous.url | prepend: site.baseurl }}" class="right arrow">&#8594;</a>
   {% endif %}
 
-  <a href="#" class="top">Top</a>
-</div>
+  <a href="#" class="top">⇈</a>
+</div>

_pages/posts.md

@@ -0,0 +1,50 @@
+---
+layout: default
+title: "Posts"
+permalink: /posts/
+---
+
+<div class="tags">
+  <div class="tags-header">
+    <h2 class="tags-header-title">{{ page.title }}</h2>
+    <div class="tags-header-line"></div>
+  </div>
+  <div class="tags-clouds">
+    {% for post in site.posts %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% if forloop.first %}<a href="#{{ this_year }}">{{ this_year }}</a>{% endif %}
+    {% unless forloop.last %}
+    {% if this_year != next_year %}<a href="#{{ next_year }}">{{ next_year }}</a>{% endif %}
+    {% endunless %}
+    {% endfor %}
+  </div>
+  {% for post in site.posts %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% if forloop.first %}
+  <div class="tags-item" id="{{ this_year }}">
+    <h2 class="tags-item-label">{{ this_year }}</h2>
+    {% endif %}
+    <a class="tags-post" href="{{ post.url | prepend: site.baseurl }}">
+      <div>
+        <span class="tags-post-title">{{ post.title }}</span>
+        <div class="tags-post-line"></div>
+      </div>
+      <span class="tags-post-meta">
+        <time datetime="{{ post.date }}">
+          {{ post.date | date:"%Y-%m-%d" }}
+        </time>
+      </span>
+    </a>
+    {% if forloop.last %}
+  </div>
+    {% else %}
+        {% if this_year != next_year %}
+  </div>
+  <div class="tags-item" id="{{ next_year }}">
+    <h2 class="tags-item-label">{{ next_year }}</h2>
+        {% endif %}
+    {% endif %}
+  {% endfor %}
+</div>

_pages/tags.md

@@ -0,0 +1,53 @@
+---
+layout: default
+title: "Tags"
+permalink: /tags/
+---
+
+<div class="tags">
+  <div class="tags-header">
+    <h2 class="tags-header-title">{{ page.title }}</h2>
+    <div class="tags-header-line"></div>
+  </div>
+  <div class="tags-clouds">
+    {% for tag in site.tags %}
+    <a href="#{{ tag[0] }}">{{ tag[0] }}</a>
+    {% endfor %}
+  </div>
+  {% for tag in site.tags %}
+  <div class="tags-item" id="{{ tag[0] }}">
+    <svg
+      class="tags-item-icon"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-tag"
+    >
+      <path
+        d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
+      ></path>
+      <line x1="7" y1="7" x2="7.01" y2="7"></line>
+    </svg>
+    <h2 class="tags-item-label">{{ tag[0] }}</h2>
+    {% for post in tag[1] %}
+    <a class="tags-post" href="{{ post.url | prepend: site.baseurl }}">
+      <div>
+        <span class="tags-post-title">{{ post.title }}</span>
+        <div class="tags-post-line"></div>
+      </div>
+      <span class="tags-post-meta">
+        <time datetime="{{ post.date }}">
+          {{ post.date | date:"%Y-%m-%d" }}
+        </time>
+      </span>
+    </a>
+    {% endfor %}
+  </div>
+  {% endfor %}
+</div>

_sass/tale.scss

@@ -7,4 +7,7 @@
 @import 'tale/pagination';
 @import 'tale/catalogue';
 @import 'tale/404';
-@import 'tale/tags';
+@import 'tale/tags';
+@import 'tale/sidenote';
+@import 'tale/footnotes';
+@import 'tale/navigation';

_sass/tale/_footnotes.scss

@@ -0,0 +1,12 @@
+.footnotes { 
+  border-top: .5px solid $grey-2;
+  font-size: 80%;
+
+  li {
+    padding: 0 1em 0 0;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}

_sass/tale/_navigation.scss

@@ -0,0 +1,5 @@
+.nav-container img {
+  display: inline;
+  margin: 0;
+  vertical-align: middle;
+}

_sass/tale/_sidenote.scss

@@ -0,0 +1,28 @@
+.sidenote {
+  position: absolute;
+  text-align: left;
+  padding-left: 20px;
+  margin-left: 20px;
+  margin-bottom: 1.5em;
+  border-left: 1px solid $default-color;
+  color: $default-color;
+  font-style: italic;
+  font-size: 0.8em;
+
+  &-header {
+    font-weight: bold;
+  }
+
+  &-hover {
+    color: $highlight-color;
+    border-color: $highlight-color;
+  }
+
+  p {
+    display: inline;
+  }
+
+  .reversefootnote {
+    display: none;
+  }
+}

_sass/tale/_variables.scss

@@ -9,6 +9,7 @@ $white: #fff !default;
 $blue: #4a9ae1 !default;
 $shadow-color: rgba(0, 0, 0, .2) !default;
 $code-color: #bf616a !default;
+$highlight-color: #f99b6d !default;
 
 // Fonts
 $serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif !default;

assets/js/sidenotes.js

@@ -0,0 +1,103 @@
+/*
+ * @author: Kaushik Gopal
+ * @author: Michal Jirků
+ *
+ * A jQuery function that displays the footnotes
+ * on the side (sidenotes) for easier reading.
+ *
+ * This is as recommended by Edward Tufte's style sidenotes:
+ * https://edwardtufte.github.io/tufte-css/#sidenotes
+ *
+ * ---
+ *
+ *  Changelog:
+ *  - 2020-11-23, Michal Jirků
+ *    - make sidenotes flexible width
+ *    - make sidenotes not overlap one another
+ *    - make sidenotes reload on font load (to help with &previous)
+ *    - make sidenotes compatible with multiple links to the same note
+ *  - 2020-09-07, Kaushik Gopal
+ *    - initial version from https://blog.jkl.gg/jekyll-footnote-tufte-sidenote/
+ *
+ */
+(function () {
+
+    function showSidenote(index, sup, ww, $fnli, minh) {
+
+        // construct sidenote div
+        let content = $fnli.eq(index).html();
+        let div = $(document.createElement('div'));
+        div.html("<span class=\"sidenote-header\">" + (index+1) + ". </span>" +
+            content);
+        div.addClass("sidenote");
+        let position = sup.offset();
+
+        div.css({
+            position: "absolute",
+            left: ww,
+            top: minh > position["top"] ? minh : position["top"],
+            'min-width': ww > 420 ? ww/4 : ww/3,
+            'max-width': ww/3,
+        });
+
+        if (ww > 420) {
+            sup.hover(function() {
+                div.addClass("sidenote-hover");
+            }, function () {
+                div.removeClass("sidenote-hover");
+            });
+        } else {
+            div.addClass("sidenote-hover");
+        }
+
+        // console.log("props " + ww + " fn: " + $fnli.text());
+
+        $(document.body).append(div);
+
+        // console.log("sidenote: " + index + " top: " + div.position().top + " height: " + div.height());
+
+        return div.position().top + div.height() + 5;
+    }
+
+    function loadSidenotes(ww, $fnli, fncount, $fn) {
+        let minh = 0;
+        $("sup[role='doc-noteref']").each(function(index, el) {
+            minh = showSidenote(el.textContent - 1, $(this), ww, $fnli, minh);
+        });
+        if (ww > 420) {
+            $fn.hide();
+        } else {
+            $fn.show();
+        }
+
+    }
+
+    $(window).on("load", function() {
+        let $fn = $(".footnotes"),
+            $fnli = $fn.find("ol li"),
+            fncount = $fnli.length,
+            ww = $("main").outerWidth() + $("main").offset().left;
+
+        // load first time
+        loadSidenotes(ww, $fnli, fncount, $fn);
+
+        $(window).resize(function() {
+            const new_ww = $("main").outerWidth() + $("main").offset().left;
+            if (new_ww === ww) return;
+
+            // console.log(" XXX -- RESIZE -- XXX ");
+            ww = new_ww;
+            $(".sidenote").remove();
+            loadSidenotes(ww, $fnli, fncount, $fn);
+        });
+
+        // fonts have a power to blow up the size of the sidenotes, hence the
+        // need to adjust
+        document.fonts.onloadingdone = function(fss) {
+            ww = $("main").outerWidth() + $("main").offset().left;
+            $(".sidenote").remove();
+            loadSidenotes(ww, $fnli, fncount, $fn);
+        };
+    });
+
+})();