A lot of small changes improving keyboard navigation, readability and accesibility

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" />
+    <img src="{{ . | relURL }}" alt="{{ partial "docs/text/i18n" "Logo" }}" />
     {{- end -}}
     <span>{{ .Site.Title }}</span>
   </a>

layouts/_partials/docs/footer.html

@@ -3,8 +3,8 @@
 <div>
 {{ if and .GitInfo .Site.Params.BookLastChangeLink }}
   {{- $date := partial "docs/date" (dict "Date" .Lastmod "Format" .Site.Params.BookDateFormat) -}}
-  <a class="flex align-center" href="{{ partial "docs/links/commit" . }}" title='{{ i18n "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
-    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
+  <a class="flex align-center" href="{{ partial "docs/links/commit" . }}" title='{{ partial "docs/text/i18n" "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Calendar" }}" />
     <span>{{ $date }}</span>
   </a>
 {{ end }}
@@ -13,8 +13,8 @@
 <div>
 {{ if and .File .Site.Params.BookEditLink }}
   <a class="flex align-center" href="{{ partial "docs/links/edit" . }}" target="_blank" rel="noopener edit">
-    <img src="{{ partial "docs/icon" "edit" }}" class="book-icon" alt="" />
-    <span>{{ i18n "Edit this page" }}</span>
+    <img src="{{ partial "docs/icon" "edit" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Edit" }}" />
+    <span>{{ partial "docs/text/i18n" "Edit this page" }}</span>
   </a>
 {{ end }}
 </div>
@@ -22,8 +22,3 @@
 </div>
 
 {{ partial "docs/prev-next" . }}
-
-{{ $script := resources.Get "clipboard.js" | resources.Minify }}
-{{ with $script.Content }}
-  <script>{{ . | safeJS }}</script>
-{{ end }}

layouts/_partials/docs/header.html

@@ -1,13 +1,13 @@
 <div class="flex align-center justify-between">
   <label for="menu-control">
-    <img src="{{ partial "docs/icon" "menu" }}" class="book-icon" alt="Menu" />
+    <img src="{{ partial "docs/icon" "menu" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Menu" }}" />
   </label>
 
   <h3>{{ partial "docs/title" . }}</h3>
 
   <label for="toc-control">
     {{ if partial "docs/toc-show" . }}
-    <img src="{{ partial "docs/icon" "toc" }}" class="book-icon" alt="Table of Contents" />
+    <img src="{{ partial "docs/icon" "toc" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Table of Contents" }}" />
     {{ end }}
   </label>
 </div>

layouts/_partials/docs/html-head.html

@@ -5,7 +5,7 @@ https://github.com/alex-shpak/hugo-book
 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="{{ default .Summary .Description }}">
+<meta name="description" content="{{ or .Description .Summary | plainify | htmlUnescape }}">
 <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#343a40">
 <meta name="color-scheme" content="light dark">
@@ -15,6 +15,7 @@ https://github.com/alex-shpak/hugo-book
 {{- end -}}
 
 {{ partial "opengraph.html" . }}
+{{ partial "schema.html" . }}
 
 <title>{{ partial "docs/html-head-title" . }}</title>
 {{ partial "docs/html-head-favicon" . }}

layouts/_partials/docs/icon.html

@@ -1,3 +1,2 @@
-{{- with resources.Get (printf "icons/%s.svg" .) -}}
-{{- .RelPermalink -}}
-{{- end -}}
+{{- $icon := resources.Get (printf "icons/%s.svg" .) -}}
+{{- return $icon.RelPermalink -}}

layouts/_partials/docs/languages.html

@@ -14,10 +14,10 @@
     <input type="checkbox" id="languages" class="toggle" />
     <label for="languages" class="flex">
       <a role="button">
-        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="Languages" />
+        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Languages" }}" />
         {{ $.Site.Language.LanguageName }}
       </a>
-      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" />
+      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Expand" }}" />
     </label>
 
     <ul>

layouts/_partials/docs/menu-filetree.html

@@ -1,4 +1,4 @@
-{{ $bookSection := default "docs" .Site.Params.BookSection  }}
+{{ $bookSection := default "docs" .Site.Params.BookSection }}
 {{ if eq $bookSection "*" }}
   {{ $bookSection = "/" }}{{/* Backward compatibility */}}
 {{ end }}
@@ -34,7 +34,7 @@
       <a {{ if .Page.Content }}href="{{ .Page.RelPermalink }}"{{ else }}role="button"{{ end }} class="{{ if $current }}active{{ end }}">
         {{ template "book-icon-title" .Page -}}
       </a>
-      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" />
+      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Expand" }}" />
     </label>
   {{ else if .Page.Params.BookHref }}
     <a href="{{ .Page.Params.BookHref }}" class="{{ if $current }}active{{ end }}" target="_blank" rel="noopener">
@@ -53,7 +53,7 @@
 
 {{ define "book-icon-title" }}
 {{- with .Page.Params.BookIcon -}}
-  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" alt="{{ partial "docs/text/i18n" . }}" />
 {{- end -}}
 {{- partial "docs/title" .Page -}}
 {{ end }}

layouts/_partials/docs/menu-hugo.html

@@ -36,7 +36,7 @@
 
 {{ define "book-menu-title" }}
 {{- with .Params.BookIcon -}}
-  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" alt="{{ partial "docs/text/i18n" . }}" />
 {{- end -}}
 {{- if .Name -}}
   {{- .Name -}}

layouts/_partials/docs/pagination.html

@@ -3,7 +3,7 @@
   <span>
   {{- with .Paginator.Prev }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
     </a>
   {{ end }}
   </span>
@@ -20,7 +20,7 @@
   <span>
   {{- with .Paginator.Next }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
     </a>
   {{ end }}
   </span>

layouts/_partials/docs/post-meta.html

@@ -1,6 +1,6 @@
 {{ with .Date }}
   <div class="flex align-center text-small book-post-date">
-    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Calendar" }}" />
     <span>{{ partial "docs/date" (dict "Date" . "Format" $.Site.Params.BookDateFormat) }}</span>
   </div>
 {{ end }}

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

@@ -2,7 +2,7 @@
   <div>
   {{ with .NextInSection }}
     <a href="{{ .RelPermalink }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
       <span>{{ partial "docs/title" . }}</span>
     </a>
   {{ end }}
@@ -11,7 +11,7 @@
   {{ with .PrevInSection }}
     <a href="{{ .RelPermalink }}" class="flex align-center">
       <span>{{ partial "docs/title" . }}</span>
-      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
     </a>
   {{ end }}
   </div>

layouts/_partials/docs/prev-next.html

@@ -13,7 +13,7 @@
     <span>
     {{ with $prev }}
       <a href="{{ .RelPermalink }}" class="flex align-center">
-        <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
         <span>{{ partial "docs/title" . }}</span>
       </a>
     {{ end }}
@@ -22,7 +22,7 @@
     {{ with $next }}
       <a href="{{ .RelPermalink }}" class="flex align-center">
         <span>{{ partial "docs/title" . }}</span>
-        <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
       </a>
     {{ end }}
     </span>

layouts/_partials/docs/search.html

@@ -1,9 +1,11 @@
 {{ if default true .Site.Params.BookSearch }}
 <div class="book-search hidden">
-  <input type="text" id="book-search-input" placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}" maxlength="64" data-hotkeys="s/" />
+  <input id="book-search-input" type="text" 
+    placeholder="{{ partial "docs/text/i18n" "Search" }}"
+    aria-label="{{ partial "docs/text/i18n" "Search" }}"
+    maxlength="64" data-hotkeys="s/" />
   <div class="book-search-spinner hidden"></div>
   <ul id="book-search-results"></ul>
 </div>
 <script>document.querySelector(".book-search").classList.remove("hidden")</script>
-
 {{ end }}

layouts/_partials/docs/taxonomy.html

@@ -3,7 +3,7 @@
   {{ range $term, $_ := .Site.Taxonomies }}
     {{ with $.Site.GetPage (printf "/%s" $term | urlize) }}
     <li class="book-section-flat">
-      <a>{{ T .Title | default .Title }}</a>
+      <a>{{ partial "docs/text/i18n" .Title }}</a>
       <ul>
       {{ range .Pages }}
         <li class="flex align-center">

layouts/_partials/docs/text/i18n.html

@@ -0,0 +1 @@
+{{- return or (i18n .) . -}}

layouts/_shortcodes/card.html

@@ -12,7 +12,7 @@
 {{- define "book-card-content" -}}
 {{- with .Get "image" -}}
   {{- $destination := partial "docs/links/portable-image" (dict "Page" $.Page "Destination" .) -}}
-  <img src="{{ $destination | safeURL }}" />
+  <img src="{{ $destination | safeURL }}" alt="{{ partial "docs/text/i18n" ($.Get "alt" ) }}" />
   {{- end -}}
   <div class="markdown-inner">
 {{ with .Inner }}{{ . }}{{ end -}}

layouts/_shortcodes/i18n.html

@@ -1,2 +1 @@
-{{- $content := .Get 0 -}}
-{{- default $content (i18n $content) -}}
+{{- partial "docs/text/i18n" (.Get 0) -}}

layouts/_shortcodes/section.html

@@ -6,7 +6,7 @@
   </dt>
   {{ if (in $.Params "summary") -}}
   <dd class="markdown-inner">
-    {{ default .Summary .Description }}
+    {{- or .Description .Summary site.Params.description | plainify | htmlUnescape }}
   </dd>
   {{ end -}}
 {{ end }}

layouts/baseof.html

@@ -24,6 +24,7 @@
         {{ template "comments" . }} <!-- Comments block -->
         {{ partial "docs/inject/footer" . }}
         {{ template "copyright" . }} <!-- Copyright block -->
+        {{ template "clipboard" . }}
       </footer>
 
       <label for="menu-control" class="hidden book-menu-overlay"></label>
@@ -62,12 +63,19 @@
   {{ partial "docs/footer" . }}
 {{ end }}
 
-{{ define "copyright" }}
-{{ if .Site.Copyright }}
-<div class="book-copyright flex justify-center">
-  {{ partial "docs/copyright" . }}
-</div>
+{{ define "clipboard" }}
+  <!-- Clipboard -->
+  {{ with resources.Get "clipboard.js" | resources.Minify }}
+    <script>{{ .Content | safeJS }}</script>
+  {{ end }}
 {{ end }}
+
+{{ define "copyright" }}
+  {{ if .Site.Copyright }}
+  <div class="book-copyright flex justify-center">
+    {{ partial "docs/copyright" . }}
+  </div>
+  {{ end }}
 {{ end }}
 
 {{ define "comments" }}
@@ -85,13 +93,13 @@
 {{ end }}
 
 {{ define "toc-container" }}
-{{ if partial "docs/toc-show" . }}
-<aside class="book-toc">
-  <div class="book-toc-content">
-    {{ template "toc" . }}
-  </div>
-</aside>
-{{ end }}
+  {{ if partial "docs/toc-show" . }}
+  <aside class="book-toc">
+    <div class="book-toc-content">
+      {{ template "toc" . }}
+    </div>
+  </aside>
+  {{ end }}
 {{ end }}
 
 {{ define "toc" }}

layouts/posts/list.html

@@ -14,7 +14,7 @@
       {{- $thumbnail := default "thumbnail.*" .Params.BookPostThumbnail -}}
       {{- with or (.Resources.GetMatch $thumbnail) (resources.GetMatch $thumbnail) -}}
       <div class="book-post-thumbnail">
-        <img src="{{ .RelPermalink }}" />
+        <img src="{{ .RelPermalink }}" alt="{{ partial "docs/text/i18n" "Thumbnail" }}" />
       </div>
       {{- end -}}
     </div>