Initial Search Support

Dockerfile

@@ -1,4 +1,5 @@
-FROM registry.gitlab.com/pages/hugo/hugo_extended:0.105.0 AS builder
+ARG HUGO_VERSION=0.105.0
+FROM registry.gitlab.com/pages/hugo/hugo_extended:${HUGO_VERSION} AS builder
 # this defaults to an empty variable
 ARG BASE_URL
 WORKDIR /site
@@ -12,7 +13,16 @@ RUN set -x && ( [ -z "${BASE_URL}" ] || [ "${BASE_URL}" == "PROD" ] ) \
     && hugo --gc \
     || ( [ "${BASE_URL}" == 'TESTS_WEB' ] && hugo --gc --baseURL "/" || exit 1 )
 
+
+FROM python:3.12-slim AS indexer
+ARG PAGEFIND_VERSION=1.3.0
+WORKDIR /site
+COPY --from=builder /site/public /site/public
+RUN pip install --no-cache-dir pagefind[extended]==${PAGEFIND_VERSION} && \
+    python3 -m pagefind --site public
+
+
 FROM nginx:alpine
 RUN rm -rf /usr/share/nginx/html/*
 RUN sed -i 's/#error_page/error_page/' /etc/nginx/conf.d/default.conf
-COPY --from=builder /site/public /usr/share/nginx/html
+COPY --from=indexer /site/public /usr/share/nginx/html

Dockerfile.dev

@@ -1,4 +1,5 @@
 ARG HUGO_VERSION=0.105.0
 FROM registry.gitlab.com/pages/hugo/hugo_extended:${HUGO_VERSION}
+
 CMD [ "serve", "-D", "--bind", "0.0.0.0" ]
-ENTRYPOINT [ "hugo" ]
+ENTRYPOINT [ "hugo" ]

config.toml

@@ -179,6 +179,12 @@ paginate = 12
     url = "/contact/"
     weight =110
 
+[[Menu.Main]]
+    name = "Search"
+    identifier = "search"
+    url = "/search/"
+    weight =120
+
 # Footer Menu (left)
 [[Menu.FooterLeft]]
     name = "PeerTube"

content/search/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Search"
+description = "Search the Jupiter Broadcasting site"
+date = "2023-01-15T00:10:01-05:00"
+draft = false
++++

test/conftest.py

@@ -160,6 +160,8 @@ def expect_nav_items() -> List[Dict[str,str]]:
         {'title': 'Archive', 'href': '/archive/'},
         # failing on tests here: https://github.com/JupiterBroadcasting/jupiterbroadcasting.com/runs/8254156209?check_suite_focus=true#step:9:26
         {'title': 'Contact', 'href': '/contact/'},
+        {'title': 'Search', 'href': '/search/'},
+
     ]
 
 @fixture

themes/jb/assets/css/_elements.sass

@@ -1 +1,2 @@
-@import "elements/tag.sass"
+@import "elements/tag.sass"
+@import "elements/search.sass"

themes/jb/assets/css/elements/search.sass

@@ -0,0 +1,15 @@
+#search
+    --pagefind-ui-scale: 1
+    --pagefind-ui-primary: $jb-dark
+    --pagefind-ui-text: $text
+    --pagefind-ui-background: $jb-grey
+    // --pagefind-ui-border: #eeeeee
+    // --pagefind-ui-tag: #eeeeee
+    // --pagefind-ui-border-width: 2px
+    // --pagefind-ui-border-radius: 8px
+    // --pagefind-ui-image-border-radius: 8px
+    // --pagefind-ui-image-box-ratio: 3 / 2
+    // --pagefind-ui-font: sans-serif
+
+    // input
+    //     color: $jb-grey-dark

themes/jb/layouts/episode/single.html

@@ -4,7 +4,7 @@
   {{ else }}
     {{ .Scratch.Set "fullTitle" (print .Params.episode ": " .CurrentSection.Title) }}
   {{ end }}
-  <div class="container p-4">
+  <div class="container p-4" data-pagefind-body>
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li><a href="{{ .Section | safeURL | absURL }}/">Shows</a></li>
@@ -16,7 +16,7 @@
       <div class="columns">
         <div class="column is-8">
           <h1 style="display: inline">{{ .Scratch.Get "fullTitle" }}</h1>
-          <h6 style="font-style: italic">{{ .Date.Day }}  {{ .Date.Month }} {{ .Date.Year }}</h6>
+          <h6 style="font-style: italic" data-pagefind-sort="date">{{ .Date.Day }}  {{ .Date.Month }} {{ .Date.Year }}</h6>
           <br />
           <p>{{ .Description }} </p>
           </div>

themes/jb/layouts/partials/people/horizontal.html

@@ -2,14 +2,14 @@
   <div class="columns section">
     <div class="column is-one-third px-0 pt-0 pb-1 columns mb-0">
       <div class="card-image">
-        <image class="image" src="{{ .Params.avatar }}"></image>
+        <image data-pagefind-meta="image[src], image_alt[alt]" class="image" src="{{ .Params.avatar }}"></image>
       </div>
     </div>
     <div class="column is-two-thirds-tablet pl-0">
       <div class="card-stacked">
         <div class="card-content">
           <div class="media-content">
-            <p class="title is-4">{{ .Title }}</p>
+            <p data-pagefind-meta="title" class="title is-4">{{ .Title }}</p>
             <p class="subtitle is-6">@{{ .Params.username }}</p>
           </div>
 

themes/jb/layouts/search/list.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+    <div class="container">
+        <h1 class="title is-3">{{.Title }}</h1>
+
+        <div class="hero mb-5">
+            <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+            <script src="/pagefind/pagefind-ui.js"></script>
+            <div id="search"></div>
+            <script>
+                window.addEventListener('DOMContentLoaded', (event) => {
+                    new PagefindUI({
+                        element: "#search",
+                        showSubResults: true,
+                        sort: {
+                            date: "desc"
+                        }
+                    });
+                });
+            </script>
+        </div>
+    </div>
+{{ end }}

themes/jb/layouts/show/list.html

@@ -31,17 +31,17 @@
     </div>
   </section>
 {{ else }}
-<div class="container p-4">
+<div class="container p-4" data-pagefind-body>
   <h1 class="title">{{.Title}}</h1>
 </div>
 <div class="container p-4">
   <div class="columns">
     {{ if isset .Params "hosts" }}
-      <div class="column is-half">
+      <div class="column is-half" data-pagefind-body>
         {{.Content}}
         {{ partial "show/links.html" . }}
       </div>
-      <div class="column is-half host-list">
+      <div class="column is-half host-list" data-pagefind-body>
         <h2 class="subtitle has-text-centered-mobile">Your Hosts</h2>
         <div class="columns is-multiline">
         {{ $currentPeopleSlice := where $peoplePages "Params.username" "in" .Params.hosts }}
@@ -53,7 +53,7 @@ <h2 class="subtitle has-text-centered-mobile">Your Hosts</h2>
         </div>
       </div>
     {{else}}
-        <div class="column is-full">
+        <div class="column is-full" data-pagefind-body>
           {{.Content}}
         </div>
     {{end}}

themes/jb/layouts/sponsors/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
     <section class="spnosor-list px-4 mb-5">
         <div class="container">
-            <div class="column is-full content">
+            <div class="column is-full content" data-pagefind-body>
                 <h1 class="title">Sponsors</h1>
                 <h4>We have many sponsors we love who support each show, and we hope you'll enjoy them too:</h4>
                 {{- $sponsor_pages := where site.Pages "Section" "sponsors" -}}

themes/jb/layouts/taxonomy/guest.html

@@ -1,65 +1,67 @@
 {{ define "main" }}
-<div class="container">
+<div class="container" data-pagefind-body>
   <div class="section">
-  <div class="columns">
-    <div class="column is-two-thirds">
-      {{ $current_page_type := .Data.Singular }}
-      {{
-        $person := index (
-          where (
-            where site.RegularPages "Section" "people"
-          ) ".Params.username" .Title
-        ) 0
-      }}
-      {{ $name := $person.Title }}
-      <h2 class="title is-3"> {{ $current_page_type | title }} - {{ $name }}</h2>
-      {{ partial "people/horizontal.html" $person }}
-    </div>
+    <div class="columns">
+      <div class="column is-two-thirds">
+        {{ $current_page_type := .Data.Singular }}
+        {{
+          $person := index (
+            where (
+              where site.RegularPages "Section" "people"
+            ) ".Params.username" .Title
+          ) 0
+        }}
+        {{ $name := $person.Title }}
+        <h2 class="title is-3"> {{ $current_page_type | title }} - {{ $name }}</h2>
+        {{ partial "people/horizontal.html" $person }}
+      </div>
 
-    <div class="column is-one-thirds">
-      <h2 class="title is-3">Shows with {{ $name }}</h2>
-      {{ $initialSections := where .Pages ".Kind" "section"}}
-      <!-- If it's empty, it's a guest page...so lookup a different way -->
-      {{ if eq 0 ($initialSections | len) }}
-        {{ range .Pages.GroupByParam "show_name" }}
-          {{
-            $initialSections = $initialSections | append (
-              where (
-                where site.Pages ".Kind" "section"
-              ) ".Title" .Key
-            )
-          }}
+      <div class="column is-one-thirds">
+        <h2 class="title is-3">Shows with {{ $name }}</h2>
+        {{ $initialSections := where .Pages ".Kind" "section"}}
+        <!-- If it's empty, it's a guest page...so lookup a different way -->
+        {{ if eq 0 ($initialSections | len) }}
+          {{ range .Pages.GroupByParam "show_name" }}
+            {{
+              $initialSections = $initialSections | append (
+                where (
+                  where site.Pages ".Kind" "section"
+                ) ".Title" .Key
+              )
+            }}
+          {{ end }}
         {{ end }}
-      {{ end }}
-      <div class="columns is-multiline">
-        {{ range $initialSections }}
-        <div class="column is-half">
-          <div class="card">
-            <div class="card-image">
-              <a href="{{ .Permalink}}">
-                <figure class="image is-fullwidth">
-                  <img src="{{ .Params.header_image}}" alt="{{ .LinkTitle }} ">
-                </figure>
-              </a>
+        <div class="columns is-multiline">
+          {{ range $initialSections }}
+          <div class="column is-half">
+            <div class="card">
+              <div class="card-image">
+                <a href="{{ .Permalink}}">
+                  <figure class="image is-fullwidth">
+                    <img src="{{ .Params.header_image}}" alt="{{ .LinkTitle }} ">
+                  </figure>
+                </a>
+              </div>
             </div>
           </div>
+          {{ end }}
         </div>
-        {{ end }}
       </div>
     </div>
   </div>
-</div>
 
-  <h2 class="title is-3 px-5">Latest Episodes with {{ $name }}</h2>
-  <div class="section">
-  <div class="columns is-multiline">
-    {{ range .RegularPages }}
-    <div class="column is-6 is-4-fullhd is-4-desktop is-12-mobile" style="display: flex;">
-      {{ partial "episode/preview.html" . }}
-    </div>
+  <div class="section px-0" data-pagefind-ignore>
+    <h2 class="title is-3 px-5">Latest Episodes with {{ $name }}</h2>
+    <div class="section">
+      <div class="columns is-multiline">
+      {{ range .RegularPages }}
+      <div class="column is-6 is-4-fullhd is-4-desktop is-12-mobile" style="display: flex;">
+        {{ partial "episode/preview.html" . }}
+      </div>
 
-    {{ end }}
+      {{ end }}
+      </div>
+    </div>
   </div>
 </div>
-</div>
 {{end}}