migrate from lunr to pagefind for searching

This commit is contained in:
Wouter Groeneveld 2022-07-25 15:05:33 +02:00
parent 640cb0ac1b
commit dee6b047aa
11 changed files with 80 additions and 20 deletions

2
.gitignore vendored
View File

@ -5,6 +5,8 @@ docs/
resources/_gen/
node_modules/
static/_pagefind
.yarn/*
!.yarn/patches
!.yarn/plugins

View File

@ -40,11 +40,11 @@ paginate = 20
# Nav links in the side bar
[[params.navlinks]]
name = "Appendix"
url = "tags/"
url = "/tags/"
[[params.navlinks]]
name = "About the Codex"
url = "about/"
url = "/about/"
[[params.navlinks]]
name = "RSS Feed"

View File

@ -3,6 +3,8 @@ title: "Dexter Stardust: Adventures In Outer Space"
date: 2022-07-25
score: 4
howlongtobeat_hrs: 6
howlongtobeat_id: -1
game_name: "Dexter Stardust"
game_genre: "Adventure"
image: "/games/switch/dexter-stardust/dexter.jpg"
game_release_year: 2022

View File

@ -6,3 +6,18 @@ aliases:
The appendix [by platform](#byplatform), [by game/tag](#bytag), or by [by article](#byarticle).<br/>
See also: browse by [all games](/games) | [per platform](/platforms) | [the appendix](/tags).
### Dig Through the Codex
Simply type to begin searching!
<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", resetStyles: false });
});
</script>
<noscript>
... Sorry, search functionality requires JavaScript to be enabled.
</noscript>

View File

@ -8,7 +8,8 @@
},
"scripts": {
"precommit": "node hooks/precommit.js",
"postdeploy": "node hooks/postdeploy.js"
"postdeploy": "node hooks/postdeploy.js",
"search": "echo 'executing Hugo+Pagefind (locally)...' && /opt/homebrew/bin/hugo && /Users/wgroeneveld/.cargo/bin/pagefind --source docs --bundle-dir ../static/_pagefind"
},
"repository": {
"type": "git",

View File

@ -0,0 +1,41 @@
#search
input
width: 100%
padding: 9px 4px 9px 40px
border: 1px solid var(--accent)
border-radius: 5px
background: #efefff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center
ol
border-bottom: 1px solid lightgray
padding-top: 1rem
.pagefind-ui__message
padding-top: 1rem
font-weight: bold
.pagefind-ui__result
list-style-type: none
display: flex
align-items: flex-start
gap: 40px
padding: 30px 0 40px
border-top: 1px solid lightgray
&-thumb
width: 40%
max-width: 120px
margin-top: 10px
aspect-ratio: 3 / 2
position: relative
img
display: block
position: absolute
font-size: 0
width: auto
height: auto
max-width: 100%
max-height: 200%

View File

@ -5,3 +5,4 @@
@import 'toot'
@import 'icons'
@import 'grid'
@import 'search'

View File

@ -1,6 +1,11 @@
{{ $url := .Destination }}
<figure>
<a href="{{ .Destination | safeURL }}" class="lbox">
<img src="{{ .Destination | safeURL }}" loading="lazy" class="img-responsive"{{ with .Text }} alt="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}" alt="{{ . }}"{{ end }}>
{{ if or (hasPrefix $url "/") (hasPrefix $url "https://") (hasPrefix $url "http://") }}
{{ else }}
{{ $url = (printf "%s%s" .Page.Permalink $url) }}
{{ end }}
<a href="{{ $url | absURL }}" class="lbox">
<img src="{{ $url | absURL }}" loading="lazy" class="img-responsive"{{ with .Text }} alt="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}" alt="{{ . }}"{{ end }}>
</a>
{{ with .Title }}
<figcaption>{{ . }}</figcaption>

View File

@ -51,7 +51,6 @@
{{ $content := .Content }}
<!-- relative images/URLs do not work in some feed readers. Thanks, Peter. See render-image.html -->
{{ $content = replaceRE `a href="(#.*?)"` (printf "%s%s%s" "a href=\"" .Permalink "$1\"") $content }}
{{ $content = replaceRE `<img src="/(.*?)"` (printf "%s%s%s" "<img src=\"" $baseurl "$1\"") $content }}
{{ $content = replaceRE `a href="/(.*?)"` (printf "%s%s%s" "a href=\"" $baseurl "$1\"") $content }}
<description>
{{ `<![CDATA[ ` | safeHTML }}

View File

@ -1,13 +1,13 @@
{{ define "main" }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column">
<div class="col-xs-12 col-sm-8 col-md-9 content-column" data-pagefind-body>
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<article class="h-entry">
<header>
<h1 class="p-name">{{ .Title }}</h1>
<h1 class="p-name" data-pagefind-meta="title">{{ .Title }}</h1>
{{ if isset $.Params "date" }}
<span class="metatitle">
{{ $createdate := .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}

View File

@ -1,5 +1,3 @@
{{ $url := .Site.BaseURL }}
<nav class="sidebar col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
<div class="sidebar-content sidebar-scrolling">
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
@ -9,18 +7,18 @@
{{ $thumb = .Params.image }}
{{ else }}
{{ if .Params.howlongtobeat_id }}
{{ $thumb = printf "%s%d%s" "img/hltb/" .Params.howlongtobeat_id ".jpg" }}
{{ $thumb = printf "%s%d%s" "/img/hltb/" .Params.howlongtobeat_id ".jpg" }}
{{ end }}
{{ end }}
{{ if ne $thumb "" }}
<div class="sidebar-game-info">
<p style="position: relative;">
<img src="{{ $url }}{{ $thumb }}" alt="game cover image" alt="game cover" class="img-responsive img-inactive" style="border: 1px solid black"/>
<img src="{{ $thumb }}" alt="game cover image" alt="game cover" class="img-responsive img-inactive" style="border: 1px solid black"/>
{{ if ne .CurrentSection.Params.platform .Params.platform }}
{{ $platform := .CurrentSection.Title }}
{{ with .CurrentSection.Params.platform }}
<img src="{{ $url }}img/{{ lower . }}.jpg" alt="{{ $platform }}" alt="platform" class="sidebar-game-platform img-responsive"/>
<img src="/img/{{ lower . }}.jpg" alt="{{ $platform }}" alt="platform" class="sidebar-game-platform img-responsive"/>
&nbsp;Played on: <a href="/games/{{ lower . }}">{{ $platform }}</a><br/>
{{ end }}
{{ end }}
@ -38,13 +36,9 @@
{{ with .Params.howlongtobeat_id }}
&nbsp;<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" rel="noopener" class="external">How long to beat</a>
{{ end }}
{{ if .Params.howlongtobeat_hrs }}
{{ if not .Params.howlongtobeat_id }}
How long to beat
{{ end }}
: <code>{{ .Params.howlongtobeat_hrs }}</code> hr{{ if gt .Params.howlongtobeat_hrs 1}}s{{ end }}<br/>
{{ with .Params.howlongtobeat_hrs }}
: <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}<br/>
{{ end }}
{{ $name := .Params.game_name }}
</p>
</div>
{{ end }}
@ -118,7 +112,7 @@
</div>
<ul class="sidebar-menu">
{{ range .Site.Params.navlinks }}
<li><a href="{{ $url }}{{ .url }}">{{ .name }}</a></li>
<li><a href="{{ .url }}">{{ .name }}</a></li>
{{ end }}
</ul>