diff options
author | zwbetz-gh <zwbetz@gmail.com> | 2020-06-21 06:16:24 +0300 |
---|---|---|
committer | zwbetz-gh <zwbetz@gmail.com> | 2020-06-21 06:16:24 +0300 |
commit | 67f79b84748d41610856caeb761e119f877d2bc6 (patch) | |
tree | c1fc48b4d73870b55c0a8ba29c3c8b964fe63393 | |
parent | 10ae1fcf36919371eabf9a458015c5c25aba602a (diff) |
add search by title
-rw-r--r-- | assets/css/search.css | 8 | ||||
-rw-r--r-- | assets/js/search.js | 21 | ||||
-rw-r--r-- | exampleSite/config.yaml | 1 | ||||
-rw-r--r-- | layouts/_default/list.html | 43 | ||||
-rw-r--r-- | layouts/partials/script.html | 7 |
5 files changed, 65 insertions, 15 deletions
diff --git a/assets/css/search.css b/assets/css/search.css new file mode 100644 index 0000000..77a424b --- /dev/null +++ b/assets/css/search.css @@ -0,0 +1,8 @@ +#search { + height: 50px; + width: 100%; + padding: 8px; + border: 2px solid; + line-height: 1.6; + font-size: 1.25rem; +} diff --git a/assets/js/search.js b/assets/js/search.js new file mode 100644 index 0000000..f760b85 --- /dev/null +++ b/assets/js/search.js @@ -0,0 +1,21 @@ +(function () { + function onEvent() { + var filter = search.value.toUpperCase(); + var list = document.getElementById("list"); + var listItems = list.getElementsByTagName("li"); + for (i = 0; i < listItems.length; i++) { + var item = listItems[i]; + var text = item.innerText.toUpperCase(); + if (text.indexOf(filter) > -1) { + item.style.display = ""; + } else { + item.style.display = "none"; + } + } + } + + var search = document.getElementById("search"); + if (search) { + search.addEventListener("keyup", onEvent); + } +})(); diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index ff982c6..287122d 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -26,6 +26,7 @@ params: katex: true darkThemeAsDefault: false hideHeaderLinks: false + search: true # A list of custom css files can be provided, which must be placed inside # 'static/'. # This is useful to override just specific css classes, instead of copying diff --git a/layouts/_default/list.html b/layouts/_default/list.html index fc5e158..98058f4 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,19 +1,32 @@ {{ define "main" }} - <main id="main"> - <h1>{{ .Title }}</h1> - <ul class="patterns-list"> +<main id="main"> + <h1>{{ .Title }}</h1> + {{ if site.Params.search }} + <input + id="search" + type="text" + placeholder="Search by title..." + aria-label="Search by title" + /> + {{ end }} + <ul class="patterns-list" id="list"> {{ range .Pages.ByPublishDate.Reverse }} - <li> - <h2> - <a href="{{ .Permalink }}"> - <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> - <use xlink:href="#bookmark"></use> - </svg> - {{ .Title }} - </a> - </h2> - </li> + <li> + <h2> + <a href="{{ .Permalink }}"> + <svg + class="bookmark" + aria-hidden="true" + viewBox="0 0 40 50" + focusable="false" + > + <use xlink:href="#bookmark"></use> + </svg> + {{ .Title }} + </a> + </h2> + </li> {{ end }} - </ul> - </main> + </ul> +</main> {{ end }} diff --git a/layouts/partials/script.html b/layouts/partials/script.html index 95ebeb2..793a553 100644 --- a/layouts/partials/script.html +++ b/layouts/partials/script.html @@ -3,3 +3,10 @@ {{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }} {{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/dom-scripts.js" . }} <script src="{{ $domScripts.Permalink }}"></script> + +{{ if site.Params.search }} +{{ $searchJs := resources.Get "js/search.js" | fingerprint }} +<script src="{{ $searchJs.RelPermalink }}"></script> +{{ $searchCss := resources.Get "css/search.css" | fingerprint }} +<link rel="stylesheet" href="{{ $searchCss.RelPermalink }}"></link> +{{ end }} |