From 91811355058a50db900da720acbcdbdf84be4a58 Mon Sep 17 00:00:00 2001
From: Alex Shpak <alex-shpak@users.noreply.github.com>
Date: Thu, 31 Jul 2025 23:18:41 +0200
Subject: [PATCH] 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                           | 16 ++++++++++-
 layouts/_partials/docs/brand.html           |  2 +-
 layouts/_partials/docs/footer.html          |  2 ++
 layouts/_partials/docs/languages.html       |  4 +--
 layouts/_partials/docs/prev-next-cache.html | 14 ++++++++++
 layouts/_partials/docs/prev-next.html       | 31 +++++++++++++++++++++
 static/svg/backward.svg                     |  1 +
 static/svg/forward.svg                      |  1 +
 8 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 layouts/_partials/docs/prev-next-cache.html
 create mode 100644 layouts/_partials/docs/prev-next.html
 create mode 100644 static/svg/backward.svg
 create mode 100644 static/svg/forward.svg

diff --git a/assets/_main.scss b/assets/_main.scss
index 25eed41..ffdd47d 100644
--- a/assets/_main.scss
+++ b/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;
   }
diff --git a/layouts/_partials/docs/brand.html b/layouts/_partials/docs/brand.html
index fa7f415..7824ef1 100644
--- a/layouts/_partials/docs/brand.html
+++ b/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>
diff --git a/layouts/_partials/docs/footer.html b/layouts/_partials/docs/footer.html
index 77e96d8..7fcc648 100644
--- a/layouts/_partials/docs/footer.html
+++ b/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>
diff --git a/layouts/_partials/docs/languages.html b/layouts/_partials/docs/languages.html
index 90d3f82..70ddc0a 100644
--- a/layouts/_partials/docs/languages.html
+++ b/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 }}
diff --git a/layouts/_partials/docs/prev-next-cache.html b/layouts/_partials/docs/prev-next-cache.html
new file mode 100644
index 0000000..1561c06
--- /dev/null
+++ b/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" }}
diff --git a/layouts/_partials/docs/prev-next.html b/layouts/_partials/docs/prev-next.html
new file mode 100644
index 0000000..42465c7
--- /dev/null
+++ b/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 }}
diff --git a/static/svg/backward.svg b/static/svg/backward.svg
new file mode 100644
index 0000000..26300eb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/svg/forward.svg b/static/svg/forward.svg
new file mode 100644
index 0000000..465c7e4
--- /dev/null
+++ b/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>
\ No newline at end of file