Import the framework.

_layouts/category.html

@@ -0,0 +1,26 @@
+---
+layout: page
+# The Category layout
+# © 2017-2019 Cotes Chung
+# MIT Licensed
+---
+
+{% include date-format.html %}
+
+<div id="page-category">
+  <h1>
+    <i class="far fa-folder-open fa-fw text-muted"></i>
+    {{ page.title }}
+    <span class="lead text-muted pl-2">{{ site.categories[page.category] | size }}</span>
+  </h1>
+
+  <ul class="post-content pl-0">
+    {% for post in site.categories[page.category] %}
+    <li class="d-flex justify-content-between pl-md-3 pr-md-3">
+      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <span class="dash flex-grow-1"></span>
+      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

_layouts/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 %}

_layouts/default.html

@@ -0,0 +1,44 @@
+---
+layout: compress
+# Default layout
+# © 2017-2019 Cotes Chung
+# MIT Licensed
+---
+
+<!DOCTYPE html>
+<html lang="en">
+
+  {% include head.html %}
+
+  <body data-spy="scroll" data-target="#toc">
+    <div id="sidebar" class="d-flex flex-column">
+      {% include sidebar.html %}
+    </div>
+    <div id="main-wrap">
+      {% include topbar.html %}
+      <div id="main">
+        <div class="row justify-content-center bg-white">
+
+        {% capture _content %}
+          {{ content }}
+        {% endcapture %}
+
+        {% include fixlinenos.html %}
+        {{ _content }}
+
+        </div>
+        {% include footer.html %}
+      </div>
+      {% include search-results.html %}
+    </div>
+
+    <div id="mask"></div>
+
+    {% include search.html %}
+
+    <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
+      <i class="fas fa-angle-up"></i>
+    </a>
+  </body>
+
+</html>

_layouts/home.html

@@ -0,0 +1,128 @@
+---
+layout: page
+# The Home page layout
+# © 2017-2019 Cotes Chung
+# MIT Licensed
+---
+
+{% include date-format.html %}
+
+<div id="post-list">
+  {% for post in paginator.posts %}
+  <div class="post-preview">
+    <h1>
+      <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+    </h1>
+    <div class="post-content">
+      <p>
+      {{ post.content | strip_html | truncate: 200 }}
+      </p>
+    </div>
+
+    <div class="post-meta text-muted pt-1">
+      <!-- posted date -->
+      <i class="far fa-clock fa-fw"></i>
+      <span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
+      {{ post.date | date: POST_DATE }}
+      <i class="hidden">{{ post.date | date_to_xmlschema }}</i>
+      </span>
+      <!-- page views -->
+      {% if site.google_analytics.pv %}
+      <i class="far fa-eye fa-fw"></i>
+      <span id="pv_{{-post.title-}}" class="pageviews">
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>
+      {% endif %}
+    </div>
+  </div> <!-- .post-review -->
+  {% endfor %}
+</div> <!-- #post-list -->
+
+{% if paginator.total_pages > 0 %}
+<ul class="pagination mt-4 mb-0 pl-lg-2">
+  <!-- left arrow -->
+  {% if paginator.previous_page %}
+  <li class="page-item">
+    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+      <i class="fas fa-angle-left"></i>
+    </a>
+  </li>
+  {% else %}
+  <li class="page-item disabled">
+    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
+  </li>
+  {% endif %}
+  <!-- endof left arrow -->
+
+  <!-- page numbers -->
+  {% assign left_ellipsis = false %}
+  {% assign right_ellipsis = false %}
+
+  {% for i in (1..paginator.total_pages) %}
+
+    {% assign pre = paginator.page | minus: 1 %}
+    {% assign next = paginator.page | plus: 1 %}
+    {% assign pre_less = pre | minus: 1 %}
+    {% assign next_more = next | plus: 1 %}
+    {% assign show = false %}
+
+    {% if paginator.page == 1 %}
+      {% if i <= 3 or i == paginator.total_pages %}
+        {% assign show = true %}
+      {% endif %}
+    {% elsif paginator.page == paginator.total_pages %}
+      {% if i == 1 or i >= pre_less %}
+        {% assign show = true %}
+      {% endif %}
+    {% else %}
+      {% if i == 1 or i == paginator.total_pages%}
+        {% assign show = true %}
+      {% elsif i >= pre and i <= next %}
+        {% assign show = true %}
+      {% endif %}
+    {% endif %}
+
+    {% if show %}
+        <!-- show number -->
+        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+        </li>
+      {% else %}
+        <!-- hide number -->
+        {% if i < pre and left_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link btn-box-shadow">...</span>
+          </li>
+          {% assign left_ellipsis = true %}
+        {% elsif i > next and right_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link btn-box-shadow">...</span>
+          </li>
+          {% assign right_ellipsis = true %}
+        {% endif %}
+      {% endif %}
+
+  {% endfor %}
+
+  <!-- right arrow -->
+  {% if paginator.next_page %}
+  <li class="page-item">
+    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+      <i class="fas fa-angle-right"></i>
+    </a>
+  </li>
+  {% else %}
+  <li class="page-item disabled">
+    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
+  </li>
+  {% endif %}
+
+</ul> <!-- .pagination -->
+{% endif %}
+
+<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
+
+{% if site.google_analytics.pv %}
+<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
+<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
+{% endif %}

_layouts/page.html

@@ -0,0 +1,29 @@
+---
+layout: default
+# The page layout
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+<div class="col-12 col-lg-11 col-xl-8">
+  <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+
+  {% if page.dynamic_title %}
+
+    <h1 class="dynamic-title">{{ page.title }}</h1>
+    <div class="post-content">
+      {{ content }}
+    </div>
+
+  {% else %}
+
+    {{ content }}
+
+  {% endif %}
+
+  </div> <!-- #page -->
+</div><!-- end .col-12 -->
+
+<div id="panel-wrap" class="col-xl-3 pl-2">
+  {% include panel.html %}
+</div>

_layouts/post.html

@@ -0,0 +1,117 @@
+---
+layout: default
+# The posts' layout
+# © 2017-2019 Cotes Chung
+# MIT Licensed
+---
+
+{% include date-format.html %}
+
+<div class="col-12 col-lg-11 col-xl-8">
+  <div id="post-wrap" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+    <div class="post">
+      <h1 data-toc-skip>{{ page.title }}</h1>
+      <div class="post-meta text-muted d-flex flex-column">
+        <!-- Published Date and Categoreis -->
+        <div>
+          <span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
+            {{ page.date | date: POST_DATE }}
+            <i class="hidden">{{ page.date | date_to_xmlschema }}</i>
+          </span>
+        {% if page.categories.size > 0 %}on{% endif %}
+        {% for category in page.categories %}
+          <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
+          {%- unless forloop.last -%}, {%- endunless -%}
+        {% endfor %}
+        </div>
+        <!-- lastmod -->
+        {% if page.seo.date_modified > page.date %}
+        <div>
+          Updated
+          <span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
+            {{ page.seo.date_modified | date: POST_DATE }}
+            <i class="hidden">{{ page.seo.date_modified | date_to_xmlschema}}</i>
+          </span>
+        </div>
+        {% endif %}
+        <!-- page views -->
+        {% if site.google_analytics.pv %}
+        <div>
+          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin"></i></span> views
+        </div>
+        {% endif %}
+      </div> <!-- .post-meta -->
+
+      <div class="post-content">
+        {% if page.image %}
+        <img src="{{ page.image }}" class="img-rounded">
+        {% endif %}
+        {{ content }}
+      </div><!-- .post-content -->
+
+      <div class="post-tail text-muted">
+        <!-- Tags -->
+        {% if page.tags.size > 0 %}
+        <div class="mb-2">
+          {% for tag in page.tags %}
+          <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase }}/"
+            class="post-tag no-text-decoration" >
+            {{- tag -}}
+          </a>{%- if forloop.last != true -%}&ensp;{%- endif -%}
+          {% endfor %}
+        </div>
+        {% endif %}
+
+      </div><!-- endof .post-tail -->
+
+    </div> <!-- .post -->
+
+    <div class="post-pager d-flex justify-content-between">
+    {% if page.previous.url %}
+      <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
+    {% else %}
+      <a href="javascript:;" class="btn btn-outline-primary disabled">
+    {% endif %}
+        <i class="fas fa-angle-left mr-1"></i>
+        OLDER POST
+      </a>
+
+    {% if page.next.url %}
+      <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+    {% else %}
+      <a href="javascript:;" class="btn btn-outline-primary disabled">
+    {% endif %}
+      NEWER POST
+      <i class="fas fa-angle-right ml-1"></i>
+      </a>
+    </div> <!-- end .post-pager -->
+
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% else %}
+      <br>
+    {% endif %}
+
+  </div> <!-- #post-wrap -->
+</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
+
+<div id="post-panel" class="col-xl-3 pl-2">
+  {% include panel.html %}
+  {% if site.toc and page.toc %}
+  <div id="toc-wrap" class="topbar-down pr-4">
+    <h3 data-toc-skip class="pl-3 pt-2">
+      {{ site.data.label.panel.toc }}
+    </h3>
+    <nav id="toc" data-toggle="toc"></nav>
+  </div>
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
+  <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
+  {% endif %}
+</div> <!-- #post-panel -->
+
+<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
+
+{% if site.google_analytics.pv %}
+<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
+<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
+{% endif %}

_layouts/tag.html

@@ -0,0 +1,25 @@
+---
+layout: page
+# The layout for Tag page
+# © 2017-2019 Cotes Chung
+# MIT Licensed
+---
+
+{% include date-format.html %}
+
+<div id="page-tag">
+  <h1>
+    <i class="fa fa-tag fa-fw text-muted"></i>
+    {{ page.title }}
+    <span class="lead text-muted pl-2">{{ site.tags[page.tag] | size }}</span>
+  </h1>
+  <ul class="post-content pl-0">
+    {% for post in site.tags[page.tag] %}
+    <li class="d-flex justify-content-between pl-md-3 pr-md-3">
+      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <span class="dash flex-grow-1"></span>
+      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+</div>