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

README.md

@@ -222,6 +222,10 @@ bookSearchExclude = false
 
 # (Optional) Set explicit href attribute for this page in a menu.
 bookHref = ''
+
+# /!\ This is an experimental feature, might be removed or changed at any time
+# (Optional) Set an icon for the menu entity of the page, icons are discovered from `assets/icons` folder.
+bookIcon = 'calendar'
 ```
 
 ### Partials

assets/_main.scss

@@ -26,17 +26,20 @@ h6 {
 }
 
 a {
+  display: inline-flex;
+  flex: auto;
+  align-items: center;
+  gap: .5em;
+
   text-decoration: none;
+  cursor: default;
 
-  &[href] {
+  &[href], &[role=button] {
     color: var(--color-link);
+    cursor: pointer;
   }
 }
 
-img {
-  vertical-align: baseline;
-}
-
 small {
   @extend .text-small;
 }
@@ -54,17 +57,17 @@ nav ul {
     position: relative;
   }
 
-  a, span {
+  a {
     padding: .5em 0;
-    display: block;
+    display: flex;
   }
 
-  a:hover {
+  a[href]:hover, a[role=button]:hover {
     opacity: 0.5;
   }
 
   ul {
-    padding-inline-start: $padding-16;
+    padding-inline-start: 1.5em;
   }
 }
 
@@ -116,10 +119,8 @@ a .book-icon {
     @include fixed;
   }
 
-  a,
+  a, label {
-  label {
     color: inherit;
-    cursor: pointer;
     word-wrap: break-word;
   }
 
@@ -127,22 +128,28 @@ a .book-icon {
     color: var(--color-link);
   }
 
-  input.toggle + label + ul {
+  label > img:last-child {
-    display: none;
+    height: 1em;
-  }
+    width: 1em;
 
-  input.toggle:checked + label + ul {
+    cursor: pointer;
-    display: block;
-  }
 
-  input.toggle + label::after {
-    content: "▸";
     align-self: center;
     transition: transform 0.1s ease-in-out;
   }
 
-  input.toggle:checked + label::after {
+  input.toggle + label + ul {
-    transform: rotate(90deg);
+    display: none;
+  }
+
+  input.toggle:checked + label{
+    > img:last-child {
+      transform: rotate(90deg);
+    }
+
+    + ul {
+      display: block;
+    }
   }
 }
 
@@ -214,11 +221,6 @@ body[dir="rtl"] .book-menu {
     text-overflow: ellipsis;
     margin: 0 $padding-16;
   }
-
-  img.book-icon {
-    height: 1.5em;
-    width: 1.5em;
-  }
 }
 
 .book-layout-landing .book-header {
@@ -322,11 +324,6 @@ body[dir="rtl"] .book-menu {
     margin: $padding-4 0;
     padding: $padding-4 0;
   }
-
-  a.flex {
-    display: inline-flex;
-    gap: $padding-8;
-  }
 }
 
 .book-comments {
@@ -347,10 +344,6 @@ body[dir="rtl"] .book-menu {
   ul {
     padding-inline-start: 1.5em;
   }
-
-  a.flex {
-    gap: 0.5em;
-  }
 }
 
 // Responsive styles

assets/_markdown.scss

@@ -180,7 +180,7 @@
       list-style: none;
 
       &::before {
-        content: "▸"; 
+        content: "›";
         display: inline-block;
         margin-inline-end: $padding-8;
         transition: transform 0.1s ease-in-out;

assets/book.scss

@@ -5,6 +5,7 @@
 @import "normalize";
 @import "utils";
 @import "main";
+@import "fonts";
 @import "print";
 
 @import "markdown";

assets/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

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">
+      <a role="button">
-        <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
+        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="Languages" />
-        <span>{{ $.Site.Language.LanguageName }}</span>
+        {{ $.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 }}">
+        <a href="{{ cond hugo.IsMultihost .Permalink .RelPermalink }}" class="flex flex-auto">
-          <span>{{ .Language.LanguageName }}</span>
+          {{ .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 }}">
+      <a {{ if .Page.Content }}href="{{ .Page.RelPermalink }}"{{ else }}role="button"{{ end }} class="{{ if $current }}active{{ end }}">
-        {{- partial "docs/title" .Page -}}
+        {{ 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 }}
+{{- with .Params.BookIcon -}}
-  {{ .Name }}
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
-{{ else if .Page }}
+{{- end -}}
-  {{ partial "docs/title" .Page }}
+{{- if .Name -}}
-{{ end }}
+  {{- .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>