git: 07c328f62a - main - Add search to book chapters menu and improve UX
Sergio Carlavilla Delgado <[email protected]>
| Newsgroups | gmane.os.freebsd.devel.cvs.doc |
|---|---|
| Message-ID | <[email protected]> |
The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=07c328f62adb94ef7b8e19be96c5f703a371c565 commit 07c328f62adb94ef7b8e19be96c5f703a371c565 Author: Sergio Carlavilla Delgado <[email protected]> AuthorDate: 2022-04-24 07:54:53 +0000 Commit: Sergio Carlavilla Delgado <[email protected]> CommitDate: 2022-04-24 07:56:27 +0000 Add search to book chapters menu and improve UX - Add a search input to search inside the book chapters - Reduce the line height - Change font type to use Inter in admonitions title - Add single page version to Resources menu --- documentation/themes/beastie/assets/js/search.js | 62 ++++++++++++++++++++++ .../beastie/assets/styles/documentation.scss | 13 +++++ .../themes/beastie/assets/styles/global.scss | 13 ++++- documentation/themes/beastie/i18n/bn-bd.toml | 3 ++ documentation/themes/beastie/i18n/da.toml | 3 ++ documentation/themes/beastie/i18n/de.toml | 3 ++ documentation/themes/beastie/i18n/el.toml | 3 ++ documentation/themes/beastie/i18n/en.toml | 3 ++ documentation/themes/beastie/i18n/es.toml | 3 ++ documentation/themes/beastie/i18n/fr.toml | 3 ++ documentation/themes/beastie/i18n/hu.toml | 3 ++ documentation/themes/beastie/i18n/it.toml | 3 ++ documentation/themes/beastie/i18n/ja.toml | 3 ++ documentation/themes/beastie/i18n/ko.toml | 3 ++ documentation/themes/beastie/i18n/mn.toml | 3 ++ documentation/themes/beastie/i18n/nl.toml | 3 ++ documentation/themes/beastie/i18n/pl.toml | 3 ++ documentation/themes/beastie/i18n/pt-br.toml | 3 ++ documentation/themes/beastie/i18n/ru.toml | 3 ++ documentation/themes/beastie/i18n/tr.toml | 3 ++ documentation/themes/beastie/i18n/zh-cn.toml | 3 ++ documentation/themes/beastie/i18n/zh-tw.toml | 3 ++ .../themes/beastie/layouts/books/list.html | 12 ++--- .../themes/beastie/layouts/books/single.html | 12 ++--- .../themes/beastie/layouts/partials/site-head.html | 6 +++ 25 files changed, 160 insertions(+), 15 deletions(-) diff --git a/documentation/themes/beastie/assets/js/search.js b/documentation/themes/beastie/assets/js/search.js new file mode 100644 index 0000000000..cab7098d09 --- /dev/null +++ b/documentation/themes/beastie/assets/js/search.js @@ -0,0 +1,62 @@ +/* +BSD 2-Clause License + +Copyright (c) 2001-2022, The FreeBSD Documentation Project +Copyright (c) 2021-2022, Sergio Carlavilla +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +;(function () { + 'use strict' + + var searchBookInput = document.querySelector("#search-book"); + var menuContents = document.querySelector("#MenuContents"); + searchBookInput.addEventListener('keyup', search); + + function search() { + var menuElements = menuContents.children[0]; + + Array.from(menuElements.children).map(element => { + var menuContent = element.textContent || element.innerText; + var check = element.getElementsByTagName("input"); + + if (menuContent.toUpperCase().includes(searchBookInput.value.toUpperCase())) { + element.classList.remove("hidden"); + if (check && check[0]) { + if (searchBookInput.value) { + check[0].checked = true; + } else { + check[0].checked = false; + } + } + } else { + element.classList.add("hidden"); + if (check && check[0]) { + check[0].checked = false; + } + } + }); + } + +})(); diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss index d0c8d3bcb8..28e15c5544 100644 --- a/documentation/themes/beastie/assets/styles/documentation.scss +++ b/documentation/themes/beastie/assets/styles/documentation.scss @@ -88,6 +88,17 @@ padding-left: .5rem; } + #search-book { + margin: 0 0 .75rem .75rem; + border: 1px solid #CCC; + border-radius: 4px; + box-shadow: inset 0 1px 3px #DDD; + box-sizing: border-box; + background-color: #FCFCFD; + color: #444; + width: 95%; + } + input.toggle ~ .icon::after { display: inline-block; font: 1rem FontAwesome; @@ -114,6 +125,7 @@ position: sticky; overflow: auto; max-height: calc(90vh); + line-height: 2; ul { margin: 0 0 0 .75rem; @@ -241,6 +253,7 @@ li { margin: 0; + margin-bottom: .5rem; list-style: none; a { diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss index e2172bbcf9..157cfd669c 100644 --- a/documentation/themes/beastie/assets/styles/global.scss +++ b/documentation/themes/beastie/assets/styles/global.scss @@ -47,7 +47,7 @@ html { html, body { text-rendering: optimizeLegibility; - line-height: calc(1ex / 0.32); + line-height: 1.5; } body { @@ -269,6 +269,15 @@ ul.language-list { font-weight: 700; } +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + h1, h2, h3, @@ -561,6 +570,7 @@ table.stretch { &:after { content: attr(title); + font-family: 'Inter var', sans-serif; font-weight: bolder; padding: 0 .5em; margin: -.05em; @@ -657,6 +667,7 @@ table.stretch { .title { font-weight: bolder; + font-family: 'Inter var', sans-serif; } .content { diff --git a/documentation/themes/beastie/i18n/bn-bd.toml b/documentation/themes/beastie/i18n/bn-bd.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/bn-bd.toml +++ b/documentation/themes/beastie/i18n/bn-bd.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/da.toml b/documentation/themes/beastie/i18n/da.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/da.toml +++ b/documentation/themes/beastie/i18n/da.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/de.toml b/documentation/themes/beastie/i18n/de.toml index d6f2b53c6b..649bca3856 100644 --- a/documentation/themes/beastie/i18n/de.toml +++ b/documentation/themes/beastie/i18n/de.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/el.toml b/documentation/themes/beastie/i18n/el.toml index b35d5319ac..1fdffc4fa8 100644 --- a/documentation/themes/beastie/i18n/el.toml +++ b/documentation/themes/beastie/i18n/el.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/en.toml b/documentation/themes/beastie/i18n/en.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/en.toml +++ b/documentation/themes/beastie/i18n/en.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/es.toml b/documentation/themes/beastie/i18n/es.toml index 1467813b32..68784326b1 100644 --- a/documentation/themes/beastie/i18n/es.toml +++ b/documentation/themes/beastie/i18n/es.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/fr.toml b/documentation/themes/beastie/i18n/fr.toml index 4a573c7e21..5678dbd984 100644 --- a/documentation/themes/beastie/i18n/fr.toml +++ b/documentation/themes/beastie/i18n/fr.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/hu.toml b/documentation/themes/beastie/i18n/hu.toml index 5ad8d6c679..81d267b112 100644 --- a/documentation/themes/beastie/i18n/hu.toml +++ b/documentation/themes/beastie/i18n/hu.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/it.toml b/documentation/themes/beastie/i18n/it.toml index f30f752e4c..21f45fe7ef 100644 --- a/documentation/themes/beastie/i18n/it.toml +++ b/documentation/themes/beastie/i18n/it.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/ja.toml b/documentation/themes/beastie/i18n/ja.toml index 1573ecb41b..85dd24fdd9 100644 --- a/documentation/themes/beastie/i18n/ja.toml +++ b/documentation/themes/beastie/i18n/ja.toml @@ -49,6 +49,9 @@ other = "最終更新日" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/ko.toml b/documentation/themes/beastie/i18n/ko.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/ko.toml +++ b/documentation/themes/beastie/i18n/ko.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/mn.toml b/documentation/themes/beastie/i18n/mn.toml index 888f7fc406..f46f1e08d7 100644 --- a/documentation/themes/beastie/i18n/mn.toml +++ b/documentation/themes/beastie/i18n/mn.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/nl.toml b/documentation/themes/beastie/i18n/nl.toml index 3313d57718..279a9b8237 100644 --- a/documentation/themes/beastie/i18n/nl.toml +++ b/documentation/themes/beastie/i18n/nl.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/pl.toml b/documentation/themes/beastie/i18n/pl.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/pl.toml +++ b/documentation/themes/beastie/i18n/pl.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/pt-br.toml b/documentation/themes/beastie/i18n/pt-br.toml index e111baa28a..ff00ae1f00 100644 --- a/documentation/themes/beastie/i18n/pt-br.toml +++ b/documentation/themes/beastie/i18n/pt-br.toml @@ -49,6 +49,9 @@ other = "Última alteração em" [by] other = "por" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/ru.toml b/documentation/themes/beastie/i18n/ru.toml index bc98d2c4ed..a4bd2f44b6 100644 --- a/documentation/themes/beastie/i18n/ru.toml +++ b/documentation/themes/beastie/i18n/ru.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/tr.toml b/documentation/themes/beastie/i18n/tr.toml index 5cb974ed89..1e8a387b99 100644 --- a/documentation/themes/beastie/i18n/tr.toml +++ b/documentation/themes/beastie/i18n/tr.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/zh-cn.toml b/documentation/themes/beastie/i18n/zh-cn.toml index ed7eef5539..25cd823f7c 100644 --- a/documentation/themes/beastie/i18n/zh-cn.toml +++ b/documentation/themes/beastie/i18n/zh-cn.toml @@ -49,6 +49,9 @@ other = "Last modified on" [by] other = "by" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/i18n/zh-tw.toml b/documentation/themes/beastie/i18n/zh-tw.toml index acc3b77e58..d67e1ac68e 100644 --- a/documentation/themes/beastie/i18n/zh-tw.toml +++ b/documentation/themes/beastie/i18n/zh-tw.toml @@ -49,6 +49,9 @@ other = "最後修改於" [by] other = "由" +[search] +other = "Search" + # --------------------------------------------------- # Header # --------------------------------------------------- diff --git a/documentation/themes/beastie/layouts/books/list.html b/documentation/themes/beastie/layouts/books/list.html index 7a50dcf830..a9fcae0cbc 100644 --- a/documentation/themes/beastie/layouts/books/list.html +++ b/documentation/themes/beastie/layouts/books/list.html @@ -6,6 +6,7 @@ <aside class="book-menu"> <div class="book-menu-content"> <h3>{{ i18n "book-chapters" }}</h3> + <input id="search-book" type="text" placeholder="{{ i18n "search" }}" aria-label="{{ i18n "search" }}" maxlength="128" /> <nav id="MenuContents"> {{ partial "menu" . }} </nav> @@ -24,11 +25,6 @@ </div> {{ end }} <h1 class="title">{{ .Title }}</h1> - {{ if .Params.subtitle }} - <h3 class="subtitle">{{ .Params.subtitle }}</h3> - {{ end }} - <div> - </div> {{ if .Params.copyright }} <div class="copyright"> Copyright © {{ .Params.copyright }} @@ -37,8 +33,6 @@ {{ if isset .Params "trademarks" }} {{ partial "trademarks" .Params.trademarks }} {{ end }} - <div> - </div> <div class="toc-mobile"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} @@ -128,6 +122,10 @@ <h3>{{ i18n "resources" }}</h3> <ul class="contents"> {{ $pathSections := split .Page.File "/" }} + {{ if $.Site.Params.isOnline }} + {{ $singlePagePath := printf "%s/%s/book/" (index $pathSections 0) (index $pathSections 1) }} + <li><i class="fa fa fa-book" aria-hidden="true"></i><a href={{ $singlePagePath | absLangURL }}>{{ i18n "single-html" }}</a></li> + {{ end }} {{ $path := printf "%s/%s/%s_%s.pdf" (index $pathSections 0) (index $pathSections 1) (index $pathSections 1) $.Site.Home.Language }} {{ $pdfUrl := printf "%s%s/%s" $.Site.Params.downloadBaseUrl $.Site.Home.Language $path }} <li><i class="fa fa-file-pdf-o" aria-hidden="true"></i><a href="{{ $pdfUrl }}">{{ i18n "download-pdf" }}</a></li> diff --git a/documentation/themes/beastie/layouts/books/single.html b/documentation/themes/beastie/layouts/books/single.html index 7a50dcf830..a9fcae0cbc 100644 --- a/documentation/themes/beastie/layouts/books/single.html +++ b/documentation/themes/beastie/layouts/books/single.html @@ -6,6 +6,7 @@ <aside class="book-menu"> <div class="book-menu-content"> <h3>{{ i18n "book-chapters" }}</h3> + <input id="search-book" type="text" placeholder="{{ i18n "search" }}" aria-label="{{ i18n "search" }}" maxlength="128" /> <nav id="MenuContents"> {{ partial "menu" . }} </nav> @@ -24,11 +25,6 @@ </div> {{ end }} <h1 class="title">{{ .Title }}</h1> - {{ if .Params.subtitle }} - <h3 class="subtitle">{{ .Params.subtitle }}</h3> - {{ end }} - <div> - </div> {{ if .Params.copyright }} <div class="copyright"> Copyright © {{ .Params.copyright }} @@ -37,8 +33,6 @@ {{ if isset .Params "trademarks" }} {{ partial "trademarks" .Params.trademarks }} {{ end }} - <div> - </div> <div class="toc-mobile"> <h3>{{ i18n "toc" }}</h3> {{ .TableOfContents }} @@ -128,6 +122,10 @@ <h3>{{ i18n "resources" }}</h3> <ul class="contents"> {{ $pathSections := split .Page.File "/" }} + {{ if $.Site.Params.isOnline }} + {{ $singlePagePath := printf "%s/%s/book/" (index $pathSections 0) (index $pathSections 1) }} + <li><i class="fa fa fa-book" aria-hidden="true"></i><a href={{ $singlePagePath | absLangURL }}>{{ i18n "single-html" }}</a></li> + {{ end }} {{ $path := printf "%s/%s/%s_%s.pdf" (index $pathSections 0) (index $pathSections 1) (index $pathSections 1) $.Site.Home.Language }} {{ $pdfUrl := printf "%s%s/%s" $.Site.Params.downloadBaseUrl $.Site.Home.Language $path }} <li><i class="fa fa-file-pdf-o" aria-hidden="true"></i><a href="{{ $pdfUrl }}">{{ i18n "download-pdf" }}</a></li> diff --git a/documentation/themes/beastie/layouts/partials/site-head.html b/documentation/themes/beastie/layouts/partials/site-head.html index e20572e820..7db1145ebd 100644 --- a/documentation/themes/beastie/layouts/partials/site-head.html +++ b/documentation/themes/beastie/layouts/partials/site-head.html @@ -23,6 +23,9 @@ {{- $copyClipboard := resources.Get "js/copy-clipboard.js" | resources.Minify }} <script defer src="{{ $copyClipboard.RelPermalink }}"></script> + + {{- $search := resources.Get "js/search.js" | resources.Minify }} + <script defer src="{{ $search.RelPermalink }}"></script> {{ else }} <link rel="shortcut icon" href="/favicon.ico"> @@ -35,6 +38,9 @@ {{- $copyClipboard := resources.Get "js/copy-clipboard.js" | resources.Minify }} <script defer src="{{ $copyClipboard.RelPermalink }}"></script> + + {{- $search := resources.Get "js/search.js" | resources.Minify }} + <script defer src="{{ $search.RelPermalink }}"></script> {{ end }} <!-- SEO -->