Add experimental icons support in menus, move icons to assets folder

layouts/_partials/docs/footer.html

@@ -4,7 +4,7 @@
 {{ 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="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="" />
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
     <span>{{ $date }}</span>
   </a>
 {{ end }}
@@ -13,7 +13,7 @@
 <div>
 {{ if and .File .Site.Params.BookEditLink }}
   <a class="flex align-center" href="{{ partial "docs/links/edit" . }}" target="_blank" rel="noopener edit">
-    <img src="{{ "svg/edit.svg" | relURL }}" class="book-icon" alt="" />
+    <img src="{{ partial "docs/icon" "edit" }}" class="book-icon" alt="" />
     <span>{{ i18n "Edit this page" }}</span>
   </a>
 {{ end }}

layouts/_partials/docs/header.html

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

layouts/_partials/docs/icon.html

@@ -0,0 +1,3 @@
+{{- with resources.Get (printf "icons/%s.svg" .) -}}
+{{- .RelPermalink -}}
+{{- end -}}

layouts/_partials/docs/languages.html

@@ -14,17 +14,18 @@
   <li>
     <input type="checkbox" id="languages" class="toggle" />
     <label for="languages" class="flex">
-      <a role="button" class="flex flex-auto">
-        <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
-        <span>{{ $.Site.Language.LanguageName }}</span>
+      <a role="button">
+        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="Languages" />
+        {{ $.Site.Language.LanguageName }}
       </a>
+      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" />
     </label>
 
     <ul>
       {{ range .Site.Languages }}{{ with index $translations .Lang }}
       <li>
-        <a href="{{ cond hugo.IsMultihost .Permalink .RelPermalink }}">
-          <span>{{ .Language.LanguageName }}</span>
+        <a href="{{ cond hugo.IsMultihost .Permalink .RelPermalink }}" class="flex flex-auto">
+          {{ .Language.LanguageName }}
         </a>
       </li>
       {{ end }}{{ end }}

layouts/_partials/docs/menu-filetree.html

@@ -31,19 +31,29 @@
   {{ if .Page.Params.BookCollapseSection }}
     <input type="checkbox" id="section-{{ md5 .Page }}" class="toggle" {{ if or $current $ancestor }}checked{{ end }} />
     <label for="section-{{ md5 .Page }}" class="flex">
-      <a {{ if .Page.Content }}href="{{ .Page.RelPermalink }}"{{ else }}role="button"{{ end }} class="flex-auto {{ if $current }}active{{ end }}">
-        {{- partial "docs/title" .Page -}}
+      <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" />
     </label>
   {{ else if .Page.Params.BookHref }}
     <a href="{{ .Page.Params.BookHref }}" class="{{ if $current }}active{{ end }}" target="_blank" rel="noopener">
-      {{- partial "docs/title" .Page -}}
+      {{ template "book-icon-title" .Page -}}
     </a>
   {{ else if .Page.Content }}
     <a href="{{ .Page.RelPermalink }}" class="{{ if $current }}active{{ end }}">
-      {{- partial "docs/title" .Page -}}
+      {{ template "book-icon-title" .Page -}}
     </a>
   {{ else }}
-    <span>{{- partial "docs/title" .Page -}}</span>
+    <a>
+      {{ template "book-icon-title" .Page -}}
+    </a>
   {{ end }}
 {{ end }}
+
+{{ define "book-icon-title" }}
+{{- with .Page.Params.BookIcon -}}
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+{{- end -}}
+{{- partial "docs/title" .Page -}}
+{{ end }}

layouts/_partials/docs/menu-hugo.html

@@ -35,9 +35,12 @@
 {{ end }}
 
 {{ define "book-menu-title" }}
-{{ if .Name }}
-  {{ .Name }}
-{{ else if .Page }}
-  {{ partial "docs/title" .Page }}
-{{ end }}
+{{- with .Params.BookIcon -}}
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+{{- end -}}
+{{- if .Name -}}
+  {{- .Name -}}
+{{- else if .Page -}}
+  {{- partial "docs/title" .Page -}}
+{{- end -}}
 {{ end }}

layouts/_partials/docs/pagination.html

@@ -3,7 +3,7 @@
   <span>
   {{- with .Paginator.Prev }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ "svg/backward.svg" | relURL }}" class="book-icon" alt="Previous" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" />
     </a>
   {{ end }}
   </span>
@@ -20,7 +20,7 @@
   <span>
   {{- with .Paginator.Next }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" />
     </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="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="" />
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
     <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="{{ "svg/backward.svg" | relURL }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
       <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="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
     </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="{{ "svg/backward.svg" | relURL }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
         <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="{{ "svg/forward.svg" | relURL }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
       </a>
     {{ end }}
     </span>