Merge branch 'feature/refactor-layouts'

_includes/disqus.html

@@ -2,6 +2,8 @@
   The Disqus lazy loading.
 -->
 
+{% if site.disqus.comments and page.comments %}
+
 <div id="disqus_thread" class="pt-2 pb-2">
   <p class="text-center text-muted small">
     Comments powered by <a href="https://disqus.com/">Disqus</a>.
@@ -52,3 +54,5 @@
   }
 
 </script>
+
+{% endif %}

_includes/panel.html

@@ -1,59 +0,0 @@
-<!--
-  The Pannel on right side (Desktop views)
--->
-
-{% include lang.html %}
-
-<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
-
-  <div class="access">
-
-  {% include update-list.html %}
-
-  {% if update_list.size > 0 %}
-
-    <div id="access-lastmod" class="post">
-      <span>{{- site.data.locales[lang].panel.lastmod -}}</span>
-      <ul class="post-content pl-0 pb-1 ml-1 mt-2">
-
-      {% for item in update_list %}
-        {% assign index = item | split: "::" | last | plus: 0 %}
-        {% assign post = site.posts[index] %}
-        {% assign url = post.url | relative_url %}
-        <li><a href="{{ url }}">{{ post.title }}</a></li>
-      {% endfor %}
-
-      </ul>
-    </div> <!-- #access-lastmod -->
-
-  {% endif %}
-
-  {% include trending-tags.html %}
-
-  {% if trending_tags.size > 0 %}
-    <div id="access-tags">
-      <span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
-      <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-
-      {% for tag_name in trending_tags %}
-        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
-      {% endfor %}
-
-      </div>
-    </div>
-  {% endif %}
-  </div> <!-- .access -->
-
-  {% if include.toc %}
-    <!-- BS-toc.js will be loaded at medium priority -->
-    <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
-    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-      <span class="pl-3 pt-2 mb-2">
-      {{- site.data.locales[lang].panel.toc -}}
-      </span>
-      <nav id="toc" data-toggle="toc"></nav>
-    </div>
-  {% endif %}
-
-</div> <!-- #panel-wrapper -->

_includes/search-results.html

@@ -4,15 +4,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
-
       {% include trending-tags.html %}
-
-      {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
-      {% endfor %}
-
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/toc.html

@@ -0,0 +1,10 @@
+{% if site.toc and page.toc %}
+<!-- BS-toc.js will be loaded at medium priority -->
+<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
+<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+  <h4 class="pl-3 pt-2 mb-2">
+    {{- site.data.locales[lang].panel.toc -}}
+  </h4>
+  <nav id="toc" data-toggle="toc"></nav>
+</div>
+{% endif %}

_includes/trending-tags.html

@@ -34,3 +34,17 @@
     {% endif %}
   {% endfor %}
 {% endfor %}
+
+{% if trending_tags.size > 0 %}
+  <div id="access-tags">
+    <h4 class="text-muted">{{- site.data.locales[lang].panel.trending_tags -}}</h4>
+    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
+
+    {% for tag_name in trending_tags %}
+      {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
+      <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
+    {% endfor %}
+
+    </div>
+  </div>
+{% endif %}

_includes/update-list.html

@@ -22,3 +22,19 @@
 {% for entry in all_list limit:MAX_SIZE %}
   {% assign update_list = update_list | push: entry %}
 {% endfor %}
+
+{% if update_list.size > 0 %}
+
+  <div id="access-lastmod" class="post">
+    <h4>{{- site.data.locales[lang].panel.lastmod -}}</h4>
+    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+      {% for item in update_list %}
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+      <li><a href="{{ url }}">{{ post.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div> <!-- #access-lastmod -->
+
+{% endif %}

_layouts/default.html

@@ -30,7 +30,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include refactor-content.html content=content %}
+        {{ content }}
 
         {% include footer.html %}
 

_layouts/page.html

@@ -1,11 +1,14 @@
 ---
 layout: default
-# The page layout
 ---
 
-<div class="row">
+{% include lang.html %}
-  <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 mb-md-4">
+<div class="row{% unless layout.tail_includes %} alone{% endunless %}">
+
+  <!-- core -->
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
+    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
     {% if page.dynamic_title %}
       <h1 class="dynamic-title">
         {% if page.collection == 'tabs' %}
@@ -16,26 +19,40 @@ layout: default
         {% endif %}
       </h1>
       <div class="post-content">
-        {{ content }}
+        {% include refactor-content.html content=content %}
       </div>
     {% else %}
-      {{ content }}
+      {% include refactor-content.html content=content %}
     {% endif %}
-    </div> <!-- #page -->
+    </div>
-  </div><!-- .col-12 -->
+  </div> <!-- #core-wrapper -->
 
-  {% include panel.html %}
+  <!-- pannel -->
+  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
+
+    <div class="access">
+      {% include update-list.html %}
+      {% include trending-tags.html %}
+    </div>
+
+    {% for _include in layout.pannel_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
+  </div>
 
 </div>
 
-{% if site.disqus.comments and page.comments %}
+<!-- tail -->
+{% if layout.tail_includes %}
 <div class="row">
   <div class="col-12 col-lg-11 col-xl-8">
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    <div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
-
+      {% for _include in layout.tail_includes %}
-    {% include disqus.html %}
+        {% assign _include_path = _include | append: '.html' %}
-
+        {% include {{ _include_path }} %}
-    </div> <!-- .pl-1 pr-1 -->
+      {% endfor %}
-  </div> <!-- .col-12 -->
+    </div>
+  </div>
 </div> <!-- .row -->
 {% endif %}

_layouts/post.html

@@ -1,143 +1,110 @@
 ---
-layout: default
+layout: page
-# The posts' layout
+pannel_includes:
+  - toc
+tail_includes:
+  - related-posts
+  - post-nav
+  - disqus
 ---
 
 {% include lang.html %}
 
-<div class="row">
+<h1 data-toc-skip>{{ page.title }}</h1>
 
-  <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
+<div class="post-meta text-muted d-flex flex-column">
+  <!-- Published date and author -->
+  <div>
+    <span class="semi-bold">
+     {{ page.author | default: site.social.name }}
+    </span>
+    {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
+    {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
+  </div>
 
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+  <div>
-
+    <!-- lastmod -->
-      <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.last_modified_at %}
-
+      <span>
-      <div class="post-meta text-muted d-flex flex-column">
+        {{ site.data.locales[lang].post.updated }}
-        <!-- Published date and author -->
+        {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-        <div>
+      </span>
-          <span class="semi-bold">
-            {{ page.author | default: site.social.name }}
-          </span>
-          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
-          {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
-        </div>
-
-        <div>
-          <!-- lastmod -->
-          {% if page.last_modified_at %}
-          <span>
-            {{ site.data.locales[lang].post.updated }}
-            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-          </span>
-          {% endif %}
-
-          <!-- read time -->
-          {% include read-time.html content=content prompt=true %}
-
-          <!-- page views -->
-          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-          <span id="pv" class="pageviews">
-            <i class="fas fa-spinner fa-spin fa-fw"></i>
-          </span>
-          {{ site.data.locales[lang].post.pageview_measure }}
-          {% endif %}
-
-        </div>
-
-      </div> <!-- .post-meta -->
-
-      <div class="post-content">
-
-        {% if page.image.src %}
-          <img src="{{ page.image.src }}"
-            class="preview-img"
-            alt="{{ page.image.alt | default: "Preview Image" }}"
-            {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
-            {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
-        {% endif %}
-
-        {{ content }}
-
-      </div>
-
-      <div class="post-tail-wrapper text-muted">
-
-        <!-- categories -->
-        {% if page.categories.size > 0 %}
-
-        <div class="post-meta mb-3">
-          <i class="far fa-folder-open fa-fw mr-1"></i>
-          {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
-            {%- unless forloop.last -%}, {%- endunless -%}
-          {% endfor %}
-        </div>
-        {% endif %}
-
-        <!-- tags -->
-        {% if page.tags.size > 0 %}
-        <div class="post-tags">
-          <i class="fa fa-tags fa-fw mr-1"></i>
-          {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-            class="post-tag no-text-decoration" >
-            {{- tag -}}
-          </a>
-          {% endfor %}
-          </div>
-        {% endif %}
-
-        <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
-          <div class="license-wrapper">
-          {% if site.data.locales[lang].copyright.license.template %}
-            {% capture _replacement %}
-            <a href="{{ site.data.locales[lang].copyright.license.link }}">
-              {{ site.data.locales[lang].copyright.license.name }}
-            </a>
-            {% endcapture %}
-            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-          {% endif %}
-          </div>
-
-          {% include post-sharing.html %}
-
-        </div><!-- .post-tail-bottom -->
-
-      </div><!-- div.post-tail -->
-
-    </div> <!-- .post -->
-
-
-  </div> <!-- #post-wrapper -->
-
-  {% assign enable_toc = false %}
-
-  {% if site.toc and page.toc %}
-    {% if content contains '<h2' or content contains '<h3' %}
-      {% assign enable_toc = true %}
     {% endif %}
+
+    <!-- read time -->
+    {% include read-time.html content=content prompt=true %}
+
+    <!-- page views -->
+    {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+      <span id="pv" class="pageviews">
+        <i class="fas fa-spinner fa-spin fa-fw"></i>
+      </span>
+      {{ site.data.locales[lang].post.pageview_measure }}
+    {% endif %}
+
+  </div>
+
+</div> <!-- .post-meta -->
+
+<div class="post-content">
+
+  {% if page.image.src %}
+  <img src="{{ page.image.src }}"
+      class="preview-img"
+      alt="{{ page.image.alt | default: "Preview Image" }}"
+      {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+      {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
   {% endif %}
 
-  {% include panel.html toc=enable_toc %}
+  {{ content }}
 
-</div> <!-- .row -->
+</div>
 
-<div class="row">
+<div class="post-tail-wrapper text-muted">
-  <div class="col-12 col-lg-11 col-xl-8">
-    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    {% include related-posts.html %}
+  <!-- categories -->
+  {% if page.categories.size > 0 %}
+  <div class="post-meta mb-3">
+    <i class="far fa-folder-open fa-fw mr-1"></i>
+    {% for category in page.categories %}
+      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
+      {%- unless forloop.last -%}, {%- endunless -%}
+    {% endfor %}
+  </div>
+  {% endif %}
 
-    {% include post-nav.html %}
+  <!-- tags -->
+  {% if page.tags.size > 0 %}
+  <div class="post-tags">
+    <i class="fa fa-tags fa-fw mr-1"></i>
+      {% for tag in page.tags %}
+      <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
+          class="post-tag no-text-decoration" >
+        {{- tag -}}
+      </a>
+      {% endfor %}
+  </div>
+  {% endif %}
 
-    {% if site.disqus.comments and page.comments %}
+  <div class="post-tail-bottom
-      {% include disqus.html %}
+    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
-    {% endif %}
+    <div class="license-wrapper">
 
-    </div> <!-- #post-extend-wrapper -->
+      {% if site.data.locales[lang].copyright.license.template %}
 
-  </div> <!-- .col-* -->
+        {% capture _replacement %}
+        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+          {{ site.data.locales[lang].copyright.license.name }}
+        </a>
+        {% endcapture %}
 
-</div> <!-- .row -->
+        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+
+      {% endif %}
+    </div>
+
+    {% include post-sharing.html %}
+
+  </div><!-- .post-tail-bottom -->
+
+</div><!-- div.post-tail-wrapper -->

_sass/addon/commons.scss

@@ -223,19 +223,16 @@ i { // fontawesome icons
     }
   }
 
-  span {
-    @include panel-label;
-  }
-
   .post-content {
     font-size: 0.9rem;
   }
 
 }
 
-#access-tags {
+#panel-wrapper {
-  > div.post-content > div {
+  h4 {
-    max-width: 80%;
+    @include panel-label;
+    font-family: inherit;
   }
 
   .post-tag {
@@ -996,7 +993,11 @@ $sidebar-display: "sidebar-display";
 }
 
 #search-hints {
-  display: none;
+  padding: 0 1rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
 
   .post-tag {
     display: inline-block;
@@ -1005,13 +1006,15 @@ $sidebar-display: "sidebar-display";
     background: var(--search-tag-bg);
     border: none;
     padding: 0.5rem;
-    margin: 0 1rem 1rem 0;
+    margin: 0 1.25rem 1rem 0;
 
     &::before {
       content: "#";
       color: var(--text-muted-color);
       padding-right: 0.2rem;
     }
+
+    @extend %link-color;
   }
 }
 
@@ -1068,7 +1071,7 @@ $sidebar-display: "sidebar-display";
   white-space: nowrap;
 }
 
-#page {
+#core-wrapper {
   .categories,
   #tags,
   #archives {
@@ -1105,20 +1108,28 @@ $sidebar-display: "sidebar-display";
   @include pl-pr(0);
 }
 
-#main > div.row:first-child > div {
+#main {
-  &:nth-child(1),
+  .row:first-child {
-  &:nth-child(2) {
+    > div {
-    margin-top: $topbar-height; /* same as the height of topbar */
+      &:nth-child(1),
+      &:nth-child(2) {
+        margin-top: $topbar-height; /* same as the height of topbar */
+      }
+
+      &:first-child {
+        /* 3rem for topbar, 6rem for footer */
+        min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
+      }
+    }
   }
 
-  &:first-child {
+  .row.alone {
-    /* 3rem for topbar, 6rem for footer */
+    margin-bottom: 4rem;
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
   }
 }
 
-#post-wrapper {
+#core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
 }
 
 #topbar-wrapper.row,
@@ -1175,8 +1186,8 @@ $sidebar-display: "sidebar-display";
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
-  #post-wrapper {
+  #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
 
     h1 {
       margin-top: 2.2rem;
@@ -1318,18 +1329,13 @@ $sidebar-display: "sidebar-display";
     letter-spacing: 0;
   }
 
-  #search-hints {
-    display: block;
-    padding: 0 1rem;
-  }
-
   #tags {
     -webkit-box-pack: center !important;
     -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
-  #page h1.dynamic-title {
+  h1.dynamic-title {
     display: none;
 
     ~ .post-content {
@@ -1523,6 +1529,10 @@ $sidebar-display: "sidebar-display";
     }
   }
 
+  #search-hints {
+    display: none;
+  }
+
   .post-content {
     font-size: 1.03rem;
   }

_sass/addon/module.scss

@@ -48,7 +48,7 @@
 }
 
 %section {
-  #post-wrapper & {
+  #core-wrapper & {
     line-height: 1.2;
     margin-bottom: 1rem;
   }

_sass/addon/variables.scss

@@ -27,7 +27,7 @@ $main-content-max-width: 1150px !default;
 
 $panel-max-width: 300px !default;
 
-$post-extend-min-height: 35rem !default;
+$bottom-min-height: 35rem !default;
 
 /* syntax highlight */
 

_sass/layout/post.scss

@@ -23,7 +23,7 @@
   padding-right: $pr;
 }
 
-#post-wrapper .post-meta {
+h1 + .post-meta {
   > div:nth-child(2) {
     > span:not(:first-child)::before {
       @include dot;
@@ -220,7 +220,7 @@ nav[data-toggle=toc] {
   }
 }
 
-#post-extend-wrapper {
+#tail-wrapper {
   min-height: 2rem;
 
   #disqus_thread {
@@ -339,8 +339,8 @@ nav[data-toggle=toc] {
 }
 
 @media all and (min-width: 768px) {
-  #post-wrapper {
+  #core-wrapper {
-    .post-meta {
+    h1 + .post-meta {
       > div:not(:first-child)::before {
         @include dot(0.5rem, 0.2rem);
       }