Refactor HTML structure

_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,19 +1,18 @@
 ---
-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">
-
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
-
-      <h1 data-toc-skip>{{ page.title }}</h1>
-
-      <div class="post-meta text-muted d-flex flex-column">
   <!-- Published date and author -->
   <div>
     <span class="semi-bold">
@@ -45,9 +44,9 @@ layout: default
 
   </div>
 
-      </div> <!-- .post-meta -->
+</div> <!-- .post-meta -->
 
-      <div class="post-content">
+<div class="post-content">
 
   {% if page.image.src %}
   <img src="{{ page.image.src }}"
@@ -59,13 +58,12 @@ layout: default
 
   {{ content }}
 
-      </div>
+</div>
 
-      <div class="post-tail-wrapper text-muted">
+<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 %}
@@ -91,13 +89,17 @@ layout: default
   <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>
 
@@ -105,39 +107,4 @@ layout: default
 
   </div><!-- .post-tail-bottom -->
 
-      </div><!-- div.post-tail -->
+</div><!-- div.post-tail-wrapper -->
-
-    </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 %}
-  {% endif %}
-
-  {% include panel.html toc=enable_toc %}
-
-</div> <!-- .row -->
-
-<div class="row">
-  <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 %}
-
-    {% include post-nav.html %}
-
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
-    {% endif %}
-
-    </div> <!-- #post-extend-wrapper -->
-
-  </div> <!-- .col-* -->
-
-</div> <!-- .row -->