Convert list page into hugo templates

layouts/_default/list.html

@@ -1,14 +1,30 @@
 {{ define "header" }}
-
+    <link rel="stylesheet" href="/assets/css/list.css">
 {{ end }}
 
 {{ define "navbar" }}
     {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
 {{ end }}
 
-
 {{ define "content" }}
-    <h1>Here is the actual content</h1>
+<div class="sidebar" id="sidebar">
+    <div class="sidebar-tree">
+      <input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
+      <ul class="tree" id="tree">
+        <li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
+        <div class="subtree">
+            {{ partial "sections.html" .Sections }}
+        </div>
+      </ul>
+    </div>
+  </div>
+  <div class="content container-fluid" id="content">
+    <div class="content-cards">
+      <div class="container-fluid filtr-container post-cards" id="post-cards">
+        {{ partial "posts.html" . }}
+      </div>
+    </div>
+  </div>
 {{ end }}
 
 {{ define "scripts" }}

layouts/partials/cards/post.html

@@ -1,17 +1,19 @@
-<div class="col-lg-4 col-md-6 pt-2">
+<div class="filtr-item" data-category='{{ delimit .Params.categories ","}}'>
   <div class="card">
     <div class="card-head">
-      <img class="card-img-top" src="{{ .Params.hero }}"
-        alt="Card image cap"
-      />
+      <img class="card-img-top" src="{{ .Params.hero }}" alt="Card image cap" />
     </div>
     <div class="card-body">
       <h5 class="card-title">{{ .Title }}</h5>
-      <p class="card-text post-summery"> {{ .Summary }}</p>
+      <p class="card-text post-summery">{{ .Summary }}</p>
     </div>
     <div class="card-footer">
       <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
-      <a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Details</a>
+      <a
+        href="{{ .RelPermalink }}"
+        class="float-right btn btn-outline-info btn-sm"
+        >Read</a
+      >
     </div>
   </div>
 </div>

layouts/partials/cards/recent-post.html

@@ -0,0 +1,17 @@
+<div class="col-lg-4 col-md-6 pt-2">
+  <div class="card">
+    <div class="card-head">
+      <img class="card-img-top" src="{{ .Params.hero }}"
+        alt="Card image cap"
+      />
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">{{ .Title }}</h5>
+      <p class="card-text post-summery"> {{ .Summary }}</p>
+    </div>
+    <div class="card-footer">
+      <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
+      <a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Read</a>
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -51,7 +51,7 @@
       <div class="col-md-4">
         Powered by <a href="https://gohugo.io/">Hugo</a>
         <img
-          src="assets/images/logos/hugo-logo-wide.svg"
+          src="/assets/images/logos/hugo-logo-wide.svg"
           alt="Hugo Logo"
           height="18"
         />

layouts/partials/navbar.html

@@ -20,7 +20,7 @@
         {{ end }}
         <div class="dropdown-divider" id="top-navbar-divider"></div>
         <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="blog.html">Blog</a>
+          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
         </li>
       </ul>
     </div>

layouts/partials/posts.html

@@ -0,0 +1,7 @@
+{{ range .Pages }}
+    {{ if .IsNode }}
+        {{ partial "posts.html" . }}
+    {{ else }}
+        {{ partial "cards/post.html" . }}
+    {{ end }}
+{{ end }}

layouts/partials/recent-posts.html

@@ -3,7 +3,7 @@
   <div class="container">
     <div class="row" id="recent-posts">
       {{ range first 3 .Site.RegularPages }}
-        {{ partial "cards/post.html" . }}
+        {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>
   </div>

layouts/partials/sections.html

@@ -0,0 +1,11 @@
+{{ range . }}
+{{ if .Sections }}
+    <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a>
+    <ul>
+        {{ partial "sections.html" .Sections }}
+    </ul>
+    </li>
+    {{ else }}
+        <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
+    {{ end }}
+{{ end }}

static/assets/css/list.css

@@ -43,6 +43,10 @@
   position: fixed;
 }
 
+#list-heading{
+  padding-left: 0px!important;
+}
+
 .tree,
 .tree ul {
   margin: 0;
@@ -52,7 +56,7 @@
 }
 
 .tree ul {
-  margin-left: 1em;
+  margin-left: 0.5rem;
   position: relative;
 }
 
@@ -65,12 +69,27 @@
   display: block;
   width: 0;
   position: absolute;
-  top: -17px;
+  top: -20px;
   left: -3px;
   bottom: 16px;
   border-left: 1px solid;
 }
 
+.subtree{
+  padding-left: 0.7rem;
+}
+
+.subtree:before{
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 6.5rem;
+  left: 0.5rem;
+  bottom: 16px;
+  border-left: 1px solid;
+}
+
 .tree li {
   margin: 0;
   padding: 0 1em;
@@ -80,10 +99,10 @@
   position: relative;
 }
 
-.tree ul li:before {
+.subtree li:before {
   content: "";
   display: block;
-  width: 16px;
+  width: 20px;
   height: 0;
   border-top: 1px solid;
   margin-top: -1px;
@@ -92,7 +111,7 @@
   left: -3px;
 }
 
-.tree ul li:last-child:before {
+.subtree li:last-child:before {
   background: #f9fafc;
   height: auto;
   top: 1em;

static/assets/css/single.css

@@ -1,3 +1,6 @@
+body{
+  background-color: #e5e9f2;
+}
 .read-area {
   background-color: #f9fafc;
 }
@@ -7,7 +10,7 @@
 }
 
 .hero-area {
-  margin-top: 50px;
+  margin-top: 3.5rem;
   width: 100%;
   height: 400px;
   background-position: center;

static/assets/js/list.js

@@ -26,7 +26,11 @@ var isMobile = false, isTablet = false, isLaptop = false;
     // ======= Adjust height of the post cards =============
     function adjustPostCardsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("post-cards").children;
+        let postCardHolder = document.getElementById("post-cards");
+        if (postCardHolder == null ){
+          return
+        }
+        let el = postCardHolder.children;
         let maxHeight = 0;
         for (let i = 0; i < el.length; i++) {
           if (el[i].children[0].clientHeight > maxHeight) {