Search page filtering & styles

assets/scss/_single.scss

@@ -105,10 +105,6 @@
     .permalink a {
       text-decoration: none;
     }
-
-    .author {
-      display: none;
-    }
   }
 
   &-audio {

content/LICENSE.md

@@ -1,4 +1,5 @@
 ---
+type: timeless
 _build:
   list: never
 ---

content/photos/2d5ajyvagneg3uqplx4ndariey/index.md

@@ -10,6 +10,4 @@ tags:
 ---
 An unusual shot of the bridge for sure, but the Fort underneath, run by the National Parks service, was surprisingly fun to walk around — and what views\!
 
-
-
 [differentperspective](/tags/differentperspective) [patterns](/tags/patterns)

content/photos/5grhpqi7jiuf6ybqgf22nx7ioy/index.md

@@ -10,6 +10,4 @@ tags:
 ---
 New thing Tuesday\! Bollywood casting call with some of my favourite swing dancers. 💃🕺 "We need to make you look as young as possible", they said. So bye bye beard, hello face\!
 
-
+Also, apparently everyone gets the same, white people, makeup. 😳
-
-Also, apparently everyone gets the same, white people, makeup. 😅

content/photos/7bpir6psb6hkp4k2vx4c5kxyje/index.md

@@ -1,5 +1,5 @@
 ---
-title: '#sloMoBro /a @chrismhs'
+title: '#sloMoBro / Chris'
 media:
 - media-0.mp4
 date: "2014-03-30T13:44:37Z"
@@ -8,4 +8,4 @@ tags:
 - sloMoBro
 - chris
 ---
-[sloMoBro](/tags/slomobro) /a [Chris](/tags/chris)
+[sloMoBro](/tags/slomobro) / [Chris](/tags/chris)

content/photos/adk64i3zlziwm2tl2o2tyr4nkq/index.md

@@ -1,5 +1,5 @@
 ---
-title: '@chrismhs has organised an epic series of…'
+title: Chris has organised an epic series of…'
 media:
 - media-0.webp
 date: "2022-05-25T02:07:27Z"
@@ -9,6 +9,4 @@ tags:
 ---
 [Chris](/tags/chris) has organised an epic series of supremely fun and spectacularly beautiful adventures for us while we're here in BC.
 
-
-
 Today's was whale watching, and we got to see three humpbacks, one of which was fishing \(not just filter feeding\)\! A perfect way to spend our first \(\!\) cloudy day 🐳

content/photos/d6s24myz7eblycrlkctivlhrrm/index.md

@@ -1,5 +1,5 @@
 ---
-title: An awesome photo my bro @chrismhs took when I…
+title: An awesome photo my bro Chris took when I…
 media:
 - media-0.jpg
 date: "2018-01-15T22:28:11Z"

content/photos/fgxlrg4ruqommzrduxusemzbvq/index.md

@@ -1,5 +1,5 @@
 ---
-title: Adeventure Time with @chrismhs
+title: Adventure Time with Chris
 media:
 - media-0.jpg
 date: "2014-05-22T10:54:05Z"
@@ -7,4 +7,4 @@ draft: false
 tags:
 - chris
 ---
-Adeventure Time with [Chris](/tags/chris)
+Adventure Time with [Chris](/tags/chris)

content/photos/i3n7qp2ecla3zuryztj5kw4f4m/index.md

@@ -1,5 +1,5 @@
 ---
-title: Nerding it up with @chrismhs tonight!
+title: Nerding it up with Chris tonight!
 media:
 - media-0.jpg
 date: "2017-10-24T18:20:17Z"

content/photos/lmpwfyv526ualuhzp4smt3wbui/index.md

@@ -1,5 +1,5 @@
 ---
-title: '@chrismhs cooks a mean trout. Literally; look at…'
+title: 'Chris cooks a mean trout. Literally; look at…'
 media:
 - media-0.jpg
 date: "2014-04-08T19:54:05Z"

content/photos/s63pc4m5gq3l7bokhnng34t6eq/index.md

@@ -1,5 +1,5 @@
 ---
-title: That time when @chrismhs was accidentally in…
+title: That time when Chris was accidentally in…
 media:
 - media-0.jpg
 date: "2019-06-13T19:46:11Z"

content/photos/ysycqbih3vwcyrwvehneyazqou/index.md

@@ -1,5 +1,5 @@
 ---
-title: Building things with @chrismhs is the best.
+title: Building things with Chris is the best.
 media:
 - media-0.mp4
 date: "2017-02-05T18:44:39Z"

content/search.md

@@ -6,18 +6,8 @@ _build:
   list: never
 ---
 
-I quite enjoy this site _not_ having search, as it means I (and others!) need to explore it to find what's there. Having said that, I do find myself in need of finding something I _know_ is there, but which I can't put my finger on…
+I quite enjoy this site _not_ having search, as it means folks need to explore it to find what's there — curiosity being something I'd love to inspire in people. Having said that, I do find myself in need of finding things I _know_ are in here, but which I can't put my finger on…
 
 Sigh, it's time for search; but I'm sneaking this away where it's not too visible, so you'll have to have previously found this to know you can put `/search` into your browser to use it 😉
 
-<link href="/search/pagefind-ui.css" rel="stylesheet">
+{{< sitesearch >}}
-<script src="/search/pagefind-ui.js" type="text/javascript"></script>
-<div id="search"></div>
-<script>
-    window.addEventListener('DOMContentLoaded', (event) => {
-        new PagefindUI({
-          element: "#search",
-          showEmptyFilters: false,
-        });
-    });
-</script>

layouts/_default/list.html

@@ -10,7 +10,7 @@
         </h1>
 
         {{ if .Content }}
-            <div class="content" data-pagefind-body>{{ .Content }}</div>
+            <div class="content" data-pagefind-body data-pagefind-filter="type:{{.Type | title}}">{{ .Content }}</div>
         {{ end }}
 
         {{ range $paginator.Pages.GroupByDate "2006" }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <main class="post h-entry">
+  <main class="post h-entry"{{ if eq .Type "site-infra" }} data-pagefind-ignore="all"{{ end }}>
 
     <div class="post-info">
       {{ $dateType := "published" }}
@@ -29,7 +29,7 @@
         </svg>
         {{ i18n "readingTime" .Page.ReadingTime }}
       </p>
-      <p class="author h-card" aria-hidden="true">
+      <p class="author h-card hidden" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
         <a href="{{ .Site.BaseURL | absURL }}" rel="author" class="p-author u-url">{{ .Site.Author.name }}</a>
       </p>
@@ -120,7 +120,7 @@
               <line x1="8" y1="2" x2="8" y2="6"></line>
               <line x1="3" y1="10" x2="21" y2="10"></line>
             </svg>
-            <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" $date }}" class="dt-{{ $dateType }}" title="{{ $dateType | title }} on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" $date }}">
+            <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" $date }}" class="dt-{{ $dateType }}" title="{{ $dateType | title }} on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" $date }}" data-pagefind-sort="date">
               {{ if .Site.Params.dateformNumTime }}
                 {{ dateFormat .Site.Params.dateformNumTime $date }}
               {{ else }}

layouts/partials/about-me.html

@@ -1,4 +1,4 @@
-<div class="about-me">
+<div class="about-me" data-pagefind-body>
   <div class="h-card vcard no-emoji">
     <a href="https://byjp.me" rel="me" class="u-uid u-url"><img class="profile u-photo" src="profile-512.jpg" alt="A photo of me smiling, with short brown hair, a beard and glasses." width="48" height="48"/></a>
     <span class="p-note">Hello! I'm <em class="p-name fn always-accented"><span class="p-nickname">JP</span> <span class="p-family-name">Hastings-Spital</span></em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card no-emoji">I'm <span clas="p-job-title">principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="p-org u-url" rel="noopener">Deliveroo</a></span>.</span>

layouts/partials/imgorvid.html

@@ -1,11 +1,11 @@
 <figure>
-  {{ if hasSuffix . ".mp4" }}
+  {{ if hasSuffix .src ".mp4" }}
       <video controls loop>
-          <source src="{{.}}" type="video/mp4">
+          <source src="{{.src}}" type="video/mp4">
-          <img src="{{ . }}.jpg" />
+          <img {{ if .searchmeta | default true }}data-pagefind-meta="image[src]" {{end}}src="{{ .src }}.jpg" />
-          (Your browser can't play videos. <a href="{{.}}">Download instead</a>.)
+          (Your browser can't play videos. <a href="{{.src}}">Download instead</a>.)
       </video>
   {{ else }}
-      <img src="{{ . }}" />
+      <img {{ if .searchmeta | default true }}data-pagefind-meta="image[src]" {{end}}src="{{ .src }}" />
   {{ end }}
 </figure>

layouts/partials/memex-footer.html

@@ -19,7 +19,7 @@
       <line x1="8" y1="2" x2="8" y2="6"></line>
       <line x1="3" y1="10" x2="21" y2="10"></line>
     </svg>
-    <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Lastmod }}" class="dt-updated" title="last updated on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Lastmod }}">
+    <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Lastmod }}" class="dt-updated" title="last updated on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Lastmod }}" data-pagefind-sort="date">
       {{ if .Site.Params.dateformNumTime }}
         {{ dateFormat .Site.Params.dateformNumTime .Lastmod }}
       {{ else }}

layouts/partials/tags.html

@@ -3,7 +3,7 @@
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
 
         {{ range . -}}
-            <span class="tag p-category"><a href="{{ "/tags/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
+            <span class="tag p-category"><a href="{{ "/tags/" | absLangURL }}{{ . | urlize }}/" data-pagefind-sort="tag">{{.}}</a></span>
         {{ end }}
     </p>
 {{ end }}

layouts/photos/single.html

@@ -1,10 +1,16 @@
 {{ define "main" }}
     <main class="post instagram">
         <article>
+            <h1 class="post-title p-name hidden" aria-hidden="true">{{ .Title | markdownify }}</h1>
+
+            {{ with .Summary }}
+                <div class="post-summary p-summary" aria-hidden="true">{{ . }}</div>
+            {{ end }}
+            
             <div class="post-content" data-pagefind-body data-pagefind-filter="type:Photos">
                 <div class="instagram-media">
-                    {{ range .Params.Media }}
+                    {{ range $i, $src := .Params.Media }}
-                        {{ partial "imgorvid.html" . }}
+                        {{ partial "imgorvid.html" (dict "src" (path.Join $.Page.RelPermalink $src | absURL) "searchmeta" (eq $i 0)) }}
                     {{ end }}
                 </div>
 
@@ -29,7 +35,7 @@
                   <line x1="8" y1="2" x2="8" y2="6"></line>
                   <line x1="3" y1="10" x2="21" y2="10"></line>
                 </svg>
-                <date datetime="{{ dateFormat .Site.Params.dateformHTML .Date }}">
+                <date datetime="{{ dateFormat .Site.Params.dateformHTML .Date }}" data-pagefind-sort="date">
                 {{ dateFormat .Site.Params.dateformNumTime .Date }}
                 </date>
               </p>

layouts/poetry/single.html

@@ -8,7 +8,7 @@
           <div class="post-summary p-summary" aria-hidden="true">{{ . }}</div>
         {{ end }}
 
-        <div class="post-content">
+        <div class="post-content" data-pagefind-body data-pagefind-filter="type:Poetry">
           {{ if eq .Params.align "monospace" }}
             <pre>{{.RawContent}}</pre>
           {{ else }}
@@ -18,7 +18,7 @@
     </article>
 
     <div class="post-info">
-      <p><date datetime="{{ dateFormat .Site.Params.dateformHTML .Date }}">{{ dateFormat .Site.Params.dateform .Date }}</date></p>
+      <p><date datetime="{{ dateFormat .Site.Params.dateformHTML .Date }}" data-pagefind-sort="date">{{ dateFormat .Site.Params.dateform .Date }}</date></p>
       <p><a href="../">back</a></p>
     </div>
 

layouts/shortcodes/sitesearch.html

@@ -0,0 +1,12 @@
+<link href="/search/pagefind-ui.css" rel="stylesheet" />
+<style>.pagefind-ui__drawer { flex-direction: row-reverse !important }</style>
+<script src="/search/pagefind-ui.js" type="text/javascript"></script>
+<div id="search"></div>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({
+          element: "#search",
+          showEmptyFilters: false,
+        });
+    });
+</script>