search: init Search feature (#105)
* based on https://gist.github.com/cmod/5410eae147e4318164258742dd053993 * modified working for PaperMod * fetches current lang index.json for search * add fuse.js v6.4.3 LICENSE: Apache License 2.0 * bundled fastsearch and fusejs as search.js Co-authored-by: Craig Mod <stuff@craigmod.com>
This commit is contained in:
Aditya Telange
GitHub
parent
c76233b350
commit
4a4408573e
|
|
@ -0,0 +1,40 @@
|
||||||
|
.searchbox input {
|
||||||
|
padding: 4px 10px;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: bold;
|
||||||
|
border: 2px solid var(--tertiary);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbox input:focus {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchResults li {
|
||||||
|
list-style: none;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px 0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchResults {
|
||||||
|
margin: 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchResults li:active {
|
||||||
|
transition: transform .1s;
|
||||||
|
transform: scale(.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchResults a {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
var fuse; // holds our search engine
|
||||||
|
|
||||||
|
// load our search index, only executed onload
|
||||||
|
function loadSearch() {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
var data = JSON.parse(xhr.responseText);
|
||||||
|
if (data) {
|
||||||
|
// fuse.js options; check fuse.js website for details
|
||||||
|
var options = {
|
||||||
|
isCaseSensitive: false,
|
||||||
|
shouldSort: true,
|
||||||
|
location: 0,
|
||||||
|
distance: 100,
|
||||||
|
threshold: 0.4,
|
||||||
|
minMatchCharLength: 0,
|
||||||
|
keys: [
|
||||||
|
'title',
|
||||||
|
'permalink',
|
||||||
|
'summary',
|
||||||
|
'content'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
fuse = new Fuse(data, options); // build the index from the json file
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(xhr.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.open('GET', "../index.json");
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
// execute search as each character is typed
|
||||||
|
document.getElementById("searchInput").onkeyup = function (e) {
|
||||||
|
// run a search query (for "term") every time a letter is typed
|
||||||
|
// in the search box
|
||||||
|
const results = fuse.search(this.value); // the actual query being run using fuse.js
|
||||||
|
|
||||||
|
if (results.length !== 0) {
|
||||||
|
// build our html if result exists
|
||||||
|
let resultSet = ''; // our results bucket
|
||||||
|
|
||||||
|
for (let item in results) {
|
||||||
|
resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink)
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("searchResults").innerHTML = resultSet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemGen(name, link) {
|
||||||
|
return `<li class="post-entry"><header class="entry-header">${name} »</header><a href="${link}" aria-label="${name}"></a></li>`
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,7 +6,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="
|
<body class="
|
||||||
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`)) -}}
|
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}}
|
||||||
{{- print "list" -}}
|
{{- print "list" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if eq $.Site.Params.defaultTheme `dark` -}}
|
{{- if eq $.Site.Params.defaultTheme `dark` -}}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{{- $.Scratch.Add "index" slice -}}
|
||||||
|
{{- range .Site.RegularPages -}}
|
||||||
|
{{- $.Scratch.Add "index" (dict "title" .Title "content" .Plain "permalink" .Permalink "summary" .Summary) -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- $.Scratch.Get "index" | jsonify -}}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{{- define "main" }}
|
||||||
|
|
||||||
|
<header class="page-header">
|
||||||
|
<h1>{{ .Title }}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||||
|
</svg>
|
||||||
|
</h1>
|
||||||
|
{{- if .Params.hideMeta }}{{ else }}
|
||||||
|
<div class="post-meta">
|
||||||
|
{{- if .IsTranslated -}}
|
||||||
|
<ul class="i18n_list">
|
||||||
|
{{- i18n "translations" | default "Translations"}}:
|
||||||
|
{{- range .Translations }}
|
||||||
|
<li>
|
||||||
|
<a href="{{ .Permalink }}">
|
||||||
|
{{- if (and $.Site.Params.displayFullLangName (.Language.LanguageName)) }}
|
||||||
|
{{- .Language.LanguageName | emojify | humanize -}}
|
||||||
|
{{- else }}
|
||||||
|
{{- .Lang | humanize -}}
|
||||||
|
{{- end -}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{- end }}
|
||||||
|
</ul>
|
||||||
|
{{- end }}
|
||||||
|
</div>
|
||||||
|
{{- end}}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="searchbox">
|
||||||
|
<input id="searchInput" autofocus placeholder="{{.Title}} ↵" aria-label="search">
|
||||||
|
<ul id="searchResults" aria-label="search results"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- end }}{{/* end main */}}
|
||||||
|
|
@ -29,6 +29,22 @@
|
||||||
{{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify -}}
|
{{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify -}}
|
||||||
<link href="{{ $stylesheet.Permalink }}" rel="preload stylesheet" as="style">
|
<link href="{{ $stylesheet.Permalink }}" rel="preload stylesheet" as="style">
|
||||||
{{- end}}
|
{{- end}}
|
||||||
|
<!-- Search -->
|
||||||
|
{{- if (eq .Layout `search`) -}}
|
||||||
|
<link rel="preload" as="fetch" href="../index.json" crossOrigin="anonymous">
|
||||||
|
{{- $fastsearch := resources.Get "js/fastsearch.js" }}
|
||||||
|
{{- $fusejs := resources.Get "js/fuse.js" }}
|
||||||
|
{{- if not .Site.Params.assets.disableFingerprinting }}
|
||||||
|
{{- $search := (slice $fusejs $fastsearch ) | resources.Concat "assets/js/search.js" | minify | fingerprint }}
|
||||||
|
<script defer src="{{ $search.Permalink }}" rel="preload" as="script" onload="loadSearch();"
|
||||||
|
integrity="{{ $search.Data.Integrity }}">
|
||||||
|
</script>
|
||||||
|
{{- else}}
|
||||||
|
{{ $search := (slice $fusejs $fastsearch ) | resources.Concat "assets/js/search.js" | minify }}
|
||||||
|
<script defer src="{{ $search.Permalink }}" rel="preload" as="script" onload="loadSearch();"></script>
|
||||||
|
{{- end}}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
<!-- Favicons -->
|
<!-- Favicons -->
|
||||||
<link rel="icon" href="{{- .Site.Params.assets.favicon | default "favicon.ico" | absURL -}}">
|
<link rel="icon" href="{{- .Site.Params.assets.favicon | default "favicon.ico" | absURL -}}">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="
|
<link rel="icon" type="image/png" sizes="16x16" href="
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue