#692, #723: Redesign blog, add thumbnails support and pagination

assets/_main.scss

@@ -87,13 +87,6 @@ ul.pagination {
 a .book-icon {
   height: 1em;
   width: 1em;
-
-  &:first-child {
-    margin-inline-end: $padding-8;
-  }
-  &:last-child {
-    margin-inline-start: $padding-8;
-  }
 }
 
 .book-brand {
@@ -189,9 +182,19 @@ body[dir="rtl"] .book-menu {
     margin-inline-end: .5em;
   }
 
-  .book-post-content > :first-child {
+  .book-post-content {
     margin-top: $padding-16;
   }
+
+  .book-post-thumbnail {
+    flex: 0 0 34%;
+
+    img {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+  }
 }
 
 .book-header {
@@ -314,6 +317,10 @@ body[dir="rtl"] .book-menu {
   a {
     margin: $padding-8 0;
   }
+
+  a.flex {
+    gap: $padding-8;
+  }
 }
 
 .book-comments {
@@ -341,11 +348,6 @@ body[dir="rtl"] .book-menu {
 }
 
 @media screen and (max-width: $mobile-breakpoint) {
-  #menu-control,
-  #toc-control {
-    display: inline;
-  }
-
   .book-menu {
     visibility: hidden;
     margin-inline-start: -$menu-width;
@@ -360,6 +362,15 @@ body[dir="rtl"] .book-menu {
     display: block;
   }
 
+  .book-post-container {
+    flex-direction: column-reverse;
+  }
+
+  #menu-control,
+  #toc-control {
+    display: inline;
+  }
+
   #menu-control:focus ~ main label[for="menu-control"] {
     @include outline;
   }

assets/_shortcodes.scss

@@ -210,7 +210,7 @@
       background: var(--gray-100);
     }
 
-    img {
+    > img {
       width: 100%;
       display: block;
       aspect-ratio: 4 / 3;

assets/_utils.scss

@@ -1,5 +1,9 @@
 .flex {
   display: flex;
+
+  &.gap {
+    gap: $padding-16;
+  }
 }
 
 .flex-auto {

exampleSite/assets/thumbnail.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="680.764" height="528.354" viewBox="0 0 180.119 139.794"><g transform="translate(-13.59 -66.639)" paint-order="fill markers stroke"><path fill="#d0d0d0" d="M13.591 66.639H193.71v139.794H13.591z"/><path d="m118.507 133.514-34.249 34.249-15.968-15.968-41.938 41.937H178.726z" opacity=".675" fill="#fff"/><circle cx="58.217" cy="108.555" r="11.773" opacity=".675" fill="#fff"/><path fill="none" d="M26.111 77.634h152.614v116.099H26.111z"/></g></svg>
+<!-- By Flanoz - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=94184060 -->

layouts/_partials/docs/pagination.html

@@ -0,0 +1,28 @@
+{{- if .Paginator -}}
+<div class="flex flex-wrap justify-between">
+  <span>
+  {{- with .Paginator.Prev }}
+    <a href="{{ .URL }}" class="flex align-center">
+      <img src="{{ "svg/backward.svg" | relURL }}" class="book-icon" alt="Previous" />
+    </a>
+  {{ end }}
+  </span>
+  {{ if gt (len .Paginator.Pagers) 1 }}
+  <span class="flex gap">
+    {{- $currentPageNumber := .Paginator.PageNumber -}}
+    {{- range $pageIndex := (slice -2 -1 0 1 2) -}}
+    {{- with index $.Paginator.Pagers (add $currentPageNumber $pageIndex -1) -}}
+      <a {{if ne $currentPageNumber .PageNumber }}href="{{ .URL }}"{{end}}>{{ .PageNumber }}</a>
+    {{- end -}}
+    {{- end -}}
+  </span>
+  {{ end }}
+  <span>
+  {{- with .Paginator.Next }}
+    <a href="{{ .URL }}" class="flex align-center">
+      <img src="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" />
+    </a>
+  {{ end }}
+  </span>
+</div>
+{{- end -}}

layouts/_partials/docs/post-prev-next.html

@@ -0,0 +1,18 @@
+<div class="flex flex-wrap justify-between">
+  <span>
+  {{ with .NextInSection }}
+    <a href="{{ .RelPermalink }}" class="flex align-center">
+      <img src="{{ "svg/backward.svg" | relURL }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+      <span>{{ partial "docs/title" . }}</span>
+    </a>
+  {{ end }}
+  </span>
+  <span>
+  {{ with .PrevInSection }}
+    <a href="{{ .RelPermalink }}" class="flex align-center">
+      <span>{{ partial "docs/title" . }}</span>
+      <img src="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+    </a>
+  {{ end }}
+  </span>
+</div>

layouts/posts/list.html

@@ -1,17 +1,25 @@
 {{ define "main" }}
   {{ range sort .Paginator.Pages }}
-  <article class="markdown book-post">
+  <article class="book-post markdown">
     <h2>
-      <a href="{{ .RelPermalink }}">{{ partial "docs/title.html" . }}</a>
+      <a href="{{ .RelPermalink }}">{{ partial "docs/title" . }}</a>
     </h2>
-    {{ partial "docs/post-meta" . }}
-    <div class="book-post-content">
-      {{- .Summary -}}
+    <div class="book-post-container flex gap">
+      <div>
+        {{ partial "docs/post-meta" . }}
+        <div class="book-post-content markdown-inner">
+          {{- .Summary | truncate 256 -}}
+        </div>
+      </div>
+      {{- $thumbnail := default "thumbnail.*" .Params.BookPostThumbnail -}}
+      {{- with or (.Resources.GetMatch $thumbnail) (resources.GetMatch $thumbnail) -}}
+      <div class="book-post-thumbnail">
+        <img src="{{ .RelPermalink }}" />
+      </div>
+      {{- end -}}
     </div>
   </article>
   {{ end }}
-
-  {{ template "_internal/pagination.html" . }}
 {{ end }}
 
 {{ define "toc-container" }}
@@ -25,3 +33,7 @@
 {{ define "toc" }}
   {{ partial "docs/taxonomy" . }}
 {{ end }}
+
+{{ define "footer" }}
+  {{ partial "docs/pagination.html" . }}
+{{ end }}

layouts/posts/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
 <article class="markdown book-post">
   <h1>
-    {{ partial "docs/title.html" . }}
+    {{ partial "docs/title" . }}
   </h1>
   {{ partial "docs/post-meta" . }}
-  <div class="book-post-content">
+  <div class="book-post-content markdown-inner">
     {{- .Content -}}
   </div>
 </article>
@@ -13,3 +13,7 @@
 {{ define "toc" }}
   {{ partial "docs/toc" . }}
 {{ end }}
+
+{{ define "footer" }}
+  {{ partial "docs/post-prev-next" . }}
+{{ end }}

layouts/term.html

@@ -2,7 +2,7 @@
   {{ range sort .Paginator.Pages }}
   <article class="markdown book-post">
     <h2>
-      <a href="{{ .RelPermalink }}">{{ partial "docs/title.html" . }}</a>
+      <a href="{{ .RelPermalink }}">{{ partial "docs/title" . }}</a>
     </h2>
     {{ partial "docs/post-meta" . }}
     <div class="book-post-content">