From 6ba59e191d1723f5cc0f7f3ab599a602af1f7983 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Mon, 22 Sep 2025 23:47:25 +0200 Subject: [PATCH] Add experimental icons support in menus, move icons to assets folder --- README.md | 4 ++ assets/_fonts.scss | 0 assets/_main.scss | 65 ++++++++++------------ assets/_markdown.scss | 2 +- assets/book.scss | 1 + {static/svg => assets/icons}/backward.svg | 0 {static/svg => assets/icons}/calendar.svg | 0 assets/icons/chevron-right.svg | 1 + {static/svg => assets/icons}/edit.svg | 0 {static/svg => assets/icons}/forward.svg | 0 {static/svg => assets/icons}/menu.svg | 0 {static/svg => assets/icons}/toc.svg | 0 {static/svg => assets/icons}/translate.svg | 0 layouts/_partials/docs/footer.html | 4 +- layouts/_partials/docs/header.html | 4 +- layouts/_partials/docs/icon.html | 3 + layouts/_partials/docs/languages.html | 11 ++-- layouts/_partials/docs/menu-filetree.html | 20 +++++-- layouts/_partials/docs/menu-hugo.html | 13 +++-- layouts/_partials/docs/pagination.html | 4 +- layouts/_partials/docs/post-meta.html | 2 +- layouts/_partials/docs/post-prev-next.html | 4 +- layouts/_partials/docs/prev-next.html | 4 +- 23 files changed, 79 insertions(+), 63 deletions(-) create mode 100644 assets/_fonts.scss rename {static/svg => assets/icons}/backward.svg (100%) rename {static/svg => assets/icons}/calendar.svg (100%) create mode 100644 assets/icons/chevron-right.svg rename {static/svg => assets/icons}/edit.svg (100%) rename {static/svg => assets/icons}/forward.svg (100%) rename {static/svg => assets/icons}/menu.svg (100%) rename {static/svg => assets/icons}/toc.svg (100%) rename {static/svg => assets/icons}/translate.svg (100%) create mode 100644 layouts/_partials/docs/icon.html diff --git a/README.md b/README.md index 36af809..8e053c7 100644 --- a/README.md +++ b/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 diff --git a/assets/_fonts.scss b/assets/_fonts.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/_main.scss b/assets/_main.scss index a390578..e648bca 100644 --- a/assets/_main.scss +++ b/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, - label { + a, label { color: inherit; - cursor: pointer; word-wrap: break-word; } @@ -127,22 +128,28 @@ a .book-icon { color: var(--color-link); } - input.toggle + label + ul { - display: none; - } + label > img:last-child { + height: 1em; + width: 1em; - input.toggle:checked + label + ul { - display: block; - } + cursor: pointer; - input.toggle + label::after { - content: "▸"; align-self: center; transition: transform 0.1s ease-in-out; } - input.toggle:checked + label::after { - transform: rotate(90deg); + input.toggle + label + ul { + 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 diff --git a/assets/_markdown.scss b/assets/_markdown.scss index ccfc423..7e9c21b 100644 --- a/assets/_markdown.scss +++ b/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; diff --git a/assets/book.scss b/assets/book.scss index 8d4d8c0..59369fa 100644 --- a/assets/book.scss +++ b/assets/book.scss @@ -5,6 +5,7 @@ @import "normalize"; @import "utils"; @import "main"; +@import "fonts"; @import "print"; @import "markdown"; diff --git a/static/svg/backward.svg b/assets/icons/backward.svg similarity index 100% rename from static/svg/backward.svg rename to assets/icons/backward.svg diff --git a/static/svg/calendar.svg b/assets/icons/calendar.svg similarity index 100% rename from static/svg/calendar.svg rename to assets/icons/calendar.svg diff --git a/assets/icons/chevron-right.svg b/assets/icons/chevron-right.svg new file mode 100644 index 0000000..976b2ae --- /dev/null +++ b/assets/icons/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/edit.svg b/assets/icons/edit.svg similarity index 100% rename from static/svg/edit.svg rename to assets/icons/edit.svg diff --git a/static/svg/forward.svg b/assets/icons/forward.svg similarity index 100% rename from static/svg/forward.svg rename to assets/icons/forward.svg diff --git a/static/svg/menu.svg b/assets/icons/menu.svg similarity index 100% rename from static/svg/menu.svg rename to assets/icons/menu.svg diff --git a/static/svg/toc.svg b/assets/icons/toc.svg similarity index 100% rename from static/svg/toc.svg rename to assets/icons/toc.svg diff --git a/static/svg/translate.svg b/assets/icons/translate.svg similarity index 100% rename from static/svg/translate.svg rename to assets/icons/translate.svg diff --git a/layouts/_partials/docs/footer.html b/layouts/_partials/docs/footer.html index 01b253a..04fd33e 100644 --- a/layouts/_partials/docs/footer.html +++ b/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) -}} - + {{ $date }} {{ end }} @@ -13,7 +13,7 @@
{{ if and .File .Site.Params.BookEditLink }} - + {{ i18n "Edit this page" }} {{ end }} diff --git a/layouts/_partials/docs/header.html b/layouts/_partials/docs/header.html index ad5582e..c2d3e54 100644 --- a/layouts/_partials/docs/header.html +++ b/layouts/_partials/docs/header.html @@ -1,13 +1,13 @@

{{ partial "docs/title" . }}

diff --git a/layouts/_partials/docs/icon.html b/layouts/_partials/docs/icon.html new file mode 100644 index 0000000..0f3ae06 --- /dev/null +++ b/layouts/_partials/docs/icon.html @@ -0,0 +1,3 @@ +{{- with resources.Get (printf "icons/%s.svg" .) -}} +{{- .RelPermalink -}} +{{- end -}} diff --git a/layouts/_partials/docs/languages.html b/layouts/_partials/docs/languages.html index 70ddc0a..cafa737 100644 --- a/layouts/_partials/docs/languages.html +++ b/layouts/_partials/docs/languages.html @@ -14,17 +14,18 @@
    • {{ range .Site.Languages }}{{ with index $translations .Lang }}
    • - - {{ .Language.LanguageName }} + + {{ .Language.LanguageName }}
      • {{ end }}{{ end }} diff --git a/layouts/_partials/docs/menu-filetree.html b/layouts/_partials/docs/menu-filetree.html index 5105aa8..6d93343 100644 --- a/layouts/_partials/docs/menu-filetree.html +++ b/layouts/_partials/docs/menu-filetree.html @@ -31,19 +31,29 @@ {{ if .Page.Params.BookCollapseSection }} {{ else if .Page.Params.BookHref }} - {{- partial "docs/title" .Page -}} + {{ template "book-icon-title" .Page -}} {{ else if .Page.Content }} - {{- partial "docs/title" .Page -}} + {{ template "book-icon-title" .Page -}} {{ else }} - {{- partial "docs/title" .Page -}} + + {{ template "book-icon-title" .Page -}} + {{ end }} {{ end }} + +{{ define "book-icon-title" }} +{{- with .Page.Params.BookIcon -}} + +{{- end -}} +{{- partial "docs/title" .Page -}} +{{ end }} \ No newline at end of file diff --git a/layouts/_partials/docs/menu-hugo.html b/layouts/_partials/docs/menu-hugo.html index 137653b..d1fa9de 100644 --- a/layouts/_partials/docs/menu-hugo.html +++ b/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 -}} + +{{- end -}} +{{- if .Name -}} + {{- .Name -}} +{{- else if .Page -}} + {{- partial "docs/title" .Page -}} +{{- end -}} {{ end }} \ No newline at end of file diff --git a/layouts/_partials/docs/pagination.html b/layouts/_partials/docs/pagination.html index 9e0d154..1342fb3 100644 --- a/layouts/_partials/docs/pagination.html +++ b/layouts/_partials/docs/pagination.html @@ -3,7 +3,7 @@ {{- with .Paginator.Prev }} - Previous + Previous {{ end }} @@ -20,7 +20,7 @@ {{- with .Paginator.Next }} - Next + Next {{ end }} diff --git a/layouts/_partials/docs/post-meta.html b/layouts/_partials/docs/post-meta.html index 6410cef..cb4ad8f 100644 --- a/layouts/_partials/docs/post-meta.html +++ b/layouts/_partials/docs/post-meta.html @@ -1,6 +1,6 @@ {{ with .Date }}
      - + {{ partial "docs/date" (dict "Date" . "Format" $.Site.Params.BookDateFormat) }}
      {{ end }} diff --git a/layouts/_partials/docs/post-prev-next.html b/layouts/_partials/docs/post-prev-next.html index c7832d2..3ae38b4 100644 --- a/layouts/_partials/docs/post-prev-next.html +++ b/layouts/_partials/docs/post-prev-next.html @@ -2,7 +2,7 @@
      {{ with .NextInSection }} - Previous + Previous {{ partial "docs/title" . }} {{ end }} @@ -11,7 +11,7 @@ {{ with .PrevInSection }} {{ partial "docs/title" . }} - Next + Next {{ end }}
      diff --git a/layouts/_partials/docs/prev-next.html b/layouts/_partials/docs/prev-next.html index d93e5ed..64da818 100644 --- a/layouts/_partials/docs/prev-next.html +++ b/layouts/_partials/docs/prev-next.html @@ -13,7 +13,7 @@ {{ with $prev }} - Previous + Previous {{ partial "docs/title" . }} {{ end }} @@ -22,7 +22,7 @@ {{ with $next }} {{ partial "docs/title" . }} - Next + Next {{ end }}