From f51db60b3567c5947b135116a5cbca280e5a4f0c Mon Sep 17 00:00:00 2001 From: Gabriele Musco Date: Tue, 13 Apr 2021 15:21:40 +0200 Subject: [PATCH] added optional js powered search --- README.md | 2 ++ assets/scss/style.scss | 26 ++++++++++++++- content/search.md | 7 ++++ layouts/_default/search.html | 51 ++++++++++++++++++++++++++++++ layouts/_default/search.json | 26 +++++++++++++++ layouts/partials/header.html | 3 ++ layouts/partials/js_paginator.html | 44 ++++++++++++++++++++++++++ layouts/partials/paginator.html | 43 +------------------------ 8 files changed, 159 insertions(+), 43 deletions(-) create mode 100644 content/search.md create mode 100644 layouts/_default/search.html create mode 100644 layouts/_default/search.json create mode 100644 layouts/partials/js_paginator.html diff --git a/README.md b/README.md index 3fe3038..303ce1a 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,8 @@ summaryLength = 70 # number of words for article summaries gridView = false # show post list as a grid. goes well with discreteCards highlightBgColor = "#34363b"; # card and circle navigation background color for discrete card mode + enableSearch = true # enable search page + # enable comments support with commento using the script from your server commento = "https://example.com/js/commento.js" diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 0d75361..939dfbf 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -33,7 +33,7 @@ a { color: $fg_color; text-decoration: none; border-bottom: 2px solid $fg_color; - &:hover { + &:hover, &:focus { border-color: $accent_color !important; } } @@ -335,3 +335,27 @@ ul.list { } } } + +.search { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + .nerdlink { + display: inline-block; + cursor: pointer; + } + #searchbar { + @extend a; + width: 100%; + display: inline-block; + background-color: transparent; + border-top: none; + border-left: none; + border-right: none; + padding: 6px 0; + font-family: $main_font; + font-size: 1.3em; + outline: none; + } +} diff --git a/content/search.md b/content/search.md new file mode 100644 index 0000000..ae3e341 --- /dev/null +++ b/content/search.md @@ -0,0 +1,7 @@ +--- +title: Search +layout: search +outputs: + - "html" + - "json" +--- diff --git a/layouts/_default/search.html b/layouts/_default/search.html new file mode 100644 index 0000000..c746082 --- /dev/null +++ b/layouts/_default/search.html @@ -0,0 +1,51 @@ +{{ define "main" }} + + +
+
+{{- partial "js_paginator.html" . -}} + +{{ end }} diff --git a/layouts/_default/search.json b/layouts/_default/search.json new file mode 100644 index 0000000..7dae89a --- /dev/null +++ b/layouts/_default/search.json @@ -0,0 +1,26 @@ +{{ define "main" }} +{ + "pages": [ + {{ range $i, $e := .Site.RegularPages }} + {{ if $i }},{{ end }} + { + "title": {{ .Title | jsonify }}, + "date": {{ .Date.Format "2006-01-02" | jsonify }}, + "tags": {{ if .Params.tags }} + {{ .Params.tags | jsonify }} + {{ else }} + [] + {{ end }}, + "summary": {{ .Summary | jsonify }}, + "text": {{ lower .Plain | jsonify }}, + "link": "{{ .Permalink }}" + {{ if .Site.Params.imageInArticlePreview }} + , "image": {{ if .Params.Image }} + {{ .Params.Image | jsonify }}{{ else }}"" + {{ end }} + {{ end }} + } + {{ end }} + ] +} +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index f8390ae..34c5ea3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -16,6 +16,9 @@ {{ if (.Site.Params.showTags | default true) }}
  • Tags
  • {{ end }} + {{ if (.Site.Params.enableSearch | default true) }} +
  • Search
  • + {{ end }} diff --git a/layouts/partials/js_paginator.html b/layouts/partials/js_paginator.html new file mode 100644 index 0000000..7459881 --- /dev/null +++ b/layouts/partials/js_paginator.html @@ -0,0 +1,44 @@ + diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html index 1d254a6..bdf1a13 100644 --- a/layouts/partials/paginator.html +++ b/layouts/partials/paginator.html @@ -1,48 +1,7 @@ {{ if .Site.Params.infiniteScrolling }} +{{- partial "js_paginator.html" . -}}