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 }}