git: 07c328f62a - main - Add search to book chapters menu and improve UX
- Go to: [ bottom of page ] [ top of archives ] [ this month ]
Date: Sun, 24 Apr 2022 07:56:38 UTC
The branch main has been updated by carlavilla:
URL: https://cgit.FreeBSD.org/doc/commit/?id=07c328f62adb94ef7b8e19be96c5f703a371c565
commit 07c328f62adb94ef7b8e19be96c5f703a371c565
Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2022-04-24 07:54:53 +0000
Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
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 -->