diff options
-rwxr-xr-x | exampleSite/config.toml | 65 | ||||
-rw-r--r-- | layouts/_default/list.algolia.json | 48 | ||||
-rw-r--r-- | layouts/partials/edit-page.html | 4 | ||||
-rw-r--r-- | layouts/partials/search.html | 57 | ||||
-rw-r--r-- | layouts/shortcodes/search.html | 4 | ||||
-rw-r--r-- | src/scss/_component.scss | 41 | ||||
-rw-r--r-- | src/scss/foundation/_element.scss | 15 |
7 files changed, 211 insertions, 23 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 044d7c4..29c07a1 100755 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -8,14 +8,11 @@ theme = "hugo-theme-techdoc" hasCJKLanguage = true metaDataFormat = "yaml" -pygmentsCodeFences = true -pygmentsUseClasses = true - defaultContentLanguage = "en" defaultContentLanguageInSubdir= false enableMissingTranslationPlaceholders = false -[Params] +[params] # Source Code repository section description = "put your description" @@ -59,26 +56,60 @@ enableMissingTranslationPlaceholders = false "blog", "entry", "post", - "posts" + "posts", ] + # Algolia site search section + # See https://www.algolia.com/doc/ + algolia_search_enable = true + algolia_indexName = "hugo-demo-techdoc" + algolia_appId = "7W4SAN4PLK" + algolia_apiKey = "cbf12a63ff72d9c5dc0c10c195cf9128" # Search-Only API Key + # Global menu section # See https://gohugo.io/content-management/menus/ [menu] - [[menu.main]] - name = "Home" - url = "/" - weight = 1 + [[menu.main]] + name = "Home" + url = "/" + weight = 1 - [[menu.main]] - name = "Twitter" - url = "https://twitter.com/thingsym" - weight = 2 + [[menu.main]] + name = "Twitter" + url = "https://twitter.com/thingsym" + weight = 2 # Markup configure section # See https://gohugo.io/getting-started/configuration-markup/ [markup] - [markup.tableOfContents] - startLevel = 2 - endLevel = 4 - ordered = false + defaultMarkdownHandler = "goldmark" + [markup.goldmark.renderer] + unsafe= true + [markup.tableOfContents] + startLevel = 2 + endLevel = 4 + ordered = false + +# Algolia Search configure section +[outputFormats.Algolia] + baseName = "algolia" + isPlainText = true + mediaType = "application/json" + notAlternative = true + +[params.algolia] + vars = [ + "title", + "summary", + "content", + "date", + "publishdate", + "description", + "permalink", + "keywords", + "lastmod", + ] + params = [ + "tags", + "categories", + ] diff --git a/layouts/_default/list.algolia.json b/layouts/_default/list.algolia.json new file mode 100644 index 0000000..af966ec --- /dev/null +++ b/layouts/_default/list.algolia.json @@ -0,0 +1,48 @@ +{{/* Generates a valid Algolia search index */}} +{{- $section := $.Site.GetPage "section" .Section }} +{{- $validVars := $.Param "algolia.vars" | default slice -}} +{{- $validParams := $.Param "algolia.params" | default slice -}} + +{{- range $i, $page := .Site.AllPages -}} + {{- $dot := . -}} + {{- if or (and ($page.IsDescendant $section) (and (not $page.Draft) (not $page.Params.private))) $section.IsHome -}} + {{ if $page.File }} + {{- .Scratch.SetInMap $page.File.Path "objectID" $page.File.UniqueID -}} + {{ end }} + + {{- .Scratch.SetInMap "temp" "date" $page.Date.UTC.Unix -}} + {{ if ne ( $page.PublishDate.Format "2006-01-02" ) "0001-01-01" }} + {{- .Scratch.SetInMap "temp" "publishdate" $page.PublishDate -}} + {{ end }} + {{ if ne ( $page.Lastmod.Format "2006-01-02" ) "0001-01-01" }} + {{- .Scratch.SetInMap "temp" "lastmod" $page.Lastmod -}} + {{ end }} + {{- .Scratch.SetInMap "temp" "content" ($page.Plain | truncate 2000) -}} + {{- .Scratch.SetInMap "temp" "title" $page.Title -}} + {{- .Scratch.SetInMap "temp" "permalink" $page.Permalink -}} + {{- .Scratch.SetInMap "temp" "description" $page.Description -}} + + {{/* Include valid page vars */}} + {{- range $key, $param := (.Scratch.Get "temp") -}} + {{- if in $validVars $key -}} + {{ if $page.File }} + {{- $dot.Scratch.SetInMap $page.File.Path $key $param -}} + {{- end -}} + {{- end -}} + {{- end -}} + + {{/* Include valid page params */}} + {{- range $key, $param := $page.Params -}} + {{- if in $validParams $key -}} + {{ if $page.File }} + {{- $dot.Scratch.SetInMap $page.File.Path $key $param -}} + {{- end -}} + {{- end -}} + {{- end -}} + {{ if $page.File }} + {{- $.Scratch.SetInMap "index" $page.File.Path (.Scratch.Get $page.File.Path) -}} + {{- end -}} + {{- end -}} +{{- end -}} + +{{- $.Scratch.GetSortedMapValues "index" | jsonify -}} diff --git a/layouts/partials/edit-page.html b/layouts/partials/edit-page.html index d853bf8..de94e06 100644 --- a/layouts/partials/edit-page.html +++ b/layouts/partials/edit-page.html @@ -1,3 +1,3 @@ -{{- with .Site.Params.github_doc_repository -}} -<a href="{{ . }}/edit/master/content/{{ $.File.Path }}" class="edit-page"><i class="fas fa-pen-square"></i> Edit on GitHub</a> +{{- if and .Site.Params.github_doc_repository .File -}} +<a href="{{ .Site.Params.github_doc_repository }}/edit/master/content/{{ .File.Path }}" class="edit-page"><i class="fas fa-pen-square"></i> Edit on GitHub</a> {{- end -}} diff --git a/layouts/partials/search.html b/layouts/partials/search.html new file mode 100644 index 0000000..b7d7f3f --- /dev/null +++ b/layouts/partials/search.html @@ -0,0 +1,57 @@ +<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.0.0/dist/algoliasearch-lite.umd.js" integrity="sha256-MfeKq2Aw9VAkaE9Caes2NOxQf6vUa8Av0JqcUXUGkd0=" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script> +<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> + +<div id="searchbox"></div> +<div id="stats"></div> +<div id="hits"></div> +<div id="pagination"></div> + +<script> +var search = instantsearch({ + indexName: '{{ .Site.Params.algolia_indexName }}', + searchClient: algoliasearch( + '{{ .Site.Params.algolia_appId }}', + '{{ .Site.Params.algolia_apiKey }}' + ), + routing: true, +}); + +const renderHits = (renderOptions, isFirstRender) => { + const { hits } = renderOptions; + + document.querySelector('#hits').innerHTML = ` + ${hits + .map( + item => + `<div class="ais-Hits-item"><h3><a href="${ item.permalink }">${ item.title }</a></h3><p><span class="lastmod">${ dayjs(item.lastmod).format("YYYY/MM/DD") }</span> - ${ item.description ? item.description : item.content.length > 200 ? item.content.substring( 0, 200 ) + '...' : item.content }</p></div>` + ) + .join('')} + `; +}; + +const customHits = instantsearch.connectors.connectHits( renderHits ); + +search.addWidgets([ + instantsearch.widgets.searchBox({ + container: '#searchbox', + showReset: false, + }), + + instantsearch.widgets.stats({ + container: '#stats', + }), + + customHits({ + container: document.querySelector('#hits'), + }), + + instantsearch.widgets.pagination({ + container: '#pagination', + maxPages: 20, + }) +]); + +search.start(); + +</script> diff --git a/layouts/shortcodes/search.html b/layouts/shortcodes/search.html new file mode 100644 index 0000000..4b3c460 --- /dev/null +++ b/layouts/shortcodes/search.html @@ -0,0 +1,4 @@ +{{- .Inner -}} +{{ if and .Site.Params.algolia_search_enable .Site.Params.algolia_indexName .Site.Params.algolia_appId .Site.Params.algolia_apiKey }} +{{- partial "search.html" . -}} +{{ end }} diff --git a/src/scss/_component.scss b/src/scss/_component.scss index 65597f3..8cafea2 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -190,3 +190,44 @@ figure > figcaption h4 { } } + +.ais-SearchBox { + .ais-SearchBox-input { + width: 70%; + } + button { + margin-left: .2rem; + padding: .4rem; + } +} +.ais-Stats { + font-size: 80%; + color: #70757a; +} +.ais-Hits-item { + @extend .stack; + + h3 { + font-size: 140%; + font-weight: normal; + } + p { + @extend .stack-unset; + color: #3C4043; + } + .lastmod { + font-size: 90%; + color: #70757a; + } +} + +.ais-Pagination { + margin-top: 1em; +} +.ais-Pagination-list { + @extend ul.no-style; + @include grid($flex-wrap: wrap, $justify-content: center); +} +.ais-Pagination-item { + padding: .6rem; +} diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss index 669318c..4b5b54c 100644 --- a/src/scss/foundation/_element.scss +++ b/src/scss/foundation/_element.scss @@ -117,10 +117,17 @@ ul { } ul { - &.inline li { - display: inline; - list-style: disc; - padding-right: 2rem; + &.no-style { + list-style: none; + padding-left: 0; + } + &.inline { + list-style: none; + padding-left: 0; + li { + display: inline; + padding-right: 2rem; + } } } |