Feature: Add next and previous page links (#747)

* Rewrite prev-next with enw lang. selector
* Make sure next page stays on right side
* Align icon styles

assets/_main.scss

@@ -89,7 +89,13 @@ ul.pagination {
 a .book-icon {
   height: 1em;
   width: 1em;
-  margin-inline-end: .5em;
+
+  &:first-child {
+    margin-inline-end: $padding-8;
+  }
+  &:last-child {
+    margin-inline-start: $padding-8;
+  }
 }
 
 .book-brand {
@@ -279,6 +285,10 @@ body[dir="rtl"] .book-menu {
 .book-footer {
   padding-top: $padding-16;
   font-size: $font-size-14;
+
+  a {
+    margin: $padding-8 0;
+  }
 }
 
 .book-comments {
@@ -288,6 +298,10 @@ body[dir="rtl"] .book-menu {
 .book-languages {
   margin-bottom: $padding-16;
 
+  span {
+    padding: 0;
+  }
+
   ul {
     padding-inline-start: 1.5em;
   }

layouts/_partials/docs/brand.html

@@ -1,7 +1,7 @@
 <h2 class="book-brand">
   <a class="flex align-center" href="{{ cond (not .Site.Home.File) .Sites.Default.Home.RelPermalink .Site.Home.RelPermalink }}">
     {{- with .Site.Params.BookLogo -}}
-    <img src="{{ . | relURL }}" alt="Logo" class="book-icon" />
+    <img src="{{ . | relURL }}" alt="Logo" />
     {{- end -}}
     <span>{{ .Site.Title }}</span>
   </a>

layouts/_partials/docs/footer.html

@@ -21,6 +21,8 @@
 
 </div>
 
+{{ partial "docs/prev-next" . }}
+
 {{ $script := resources.Get "clipboard.js" | resources.Minify }}
 {{ with $script.Content }}
   <script>{{ . | safeJS }}</script>

layouts/_partials/docs/languages.html

@@ -16,7 +16,7 @@
     <label for="languages" class="flex">
       <a role="button" class="flex flex-auto">
         <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
-        {{ $.Site.Language.LanguageName }}
+        <span>{{ $.Site.Language.LanguageName }}</span>
       </a>
     </label>
 
@@ -24,7 +24,7 @@
       {{ range .Site.Languages }}{{ with index $translations .Lang }}
       <li>
         <a href="{{ cond hugo.IsMultihost .Permalink .RelPermalink }}">
-          {{ .Language.LanguageName }}
+          <span>{{ .Language.LanguageName }}</span>
         </a>
       </li>
       {{ end }}{{ end }}

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

@@ -0,0 +1,14 @@
+{{ $scratch := newScratch }}
+{{ template "recurse" (dict "Scratch" $scratch "Sections" .) }}
+{{ define "recurse" }}
+  {{ range .Sections }}
+    {{ if and .Content (not .Params.BookHidden) }}
+      {{ $.Scratch.Add "BookPages" (slice .) }}
+    {{ end }}
+    {{ if .IsSection }}
+      {{ template "recurse" (dict "Scratch" $.Scratch "Sections" .Pages) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ return $scratch.Get "BookPages" }}

layouts/_partials/docs/prev-next.html

@@ -0,0 +1,31 @@
+{{ $bookSection := default "docs" .Site.Params.BookSection  }}
+{{ if eq $bookSection "*" }}
+  {{ $bookSection = "/" }}{{/* Backward compatibility */}}
+{{ end }}
+
+{{ with .Site.GetPage $bookSection }}
+  {{ $pages := partialCached "docs/prev-next-cache" .Pages }}
+  {{ $prev := $pages.Next $ }}
+  {{ $next := $pages.Prev $ }}
+
+  {{- if or $prev $next }}
+  <div class="flex flex-wrap justify-between">
+    <span>
+    {{ with $prev }}
+      <a href="{{ .RelPermalink }}" class="flex align-center book-icon">
+        <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 $next }}
+      <a href="{{ .RelPermalink }}" class="flex align-center book-icon">
+        <span>{{ partial "docs/title" . }}</span>
+        <img src="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+      </a>
+    {{ end }}
+    </span>
+  </div>
+  {{ end -}}
+{{ end }}

static/svg/backward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

static/svg/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>