feat: Updates for search integration.

Sources/Docs/Templates/BaseLayout.swift

@@ -24,7 +24,7 @@ func baseLayout(
       body(class: "text-white text-lg pb-5 font-avenir \(section.rawValue)") {
         siteHeader(section)
 
-        div(class: "container") {
+        div(class: "container mb-auto") {
           children()
         }
 
@@ -46,24 +46,28 @@ private func siteHeader(_ section: Section) -> Node {
         }
       }
     }
-    nav(class: "menu") {
-      ul(class: "flex flex-wrap gap-x-2 lg:gap-x-5") {
-        li {
-          a(class: section == .articles ? "active" : "", href: "/articles/") { "Articles" }
-        }
-        li {
-          a(href: "https://uptime.housh.dev/status/housh-dev", rel: "nofollow", target: "_blank") { "Server-Monitor" }
-        }
-        li {
-          a(class: section == .about ? "active" : "", href: "/about.html") { "About" }
+    nav(class: "menu flex justify-between") {
+      div(class: "pt-6") {
+        ul(class: "flex flex-wrap gap-x-2 lg:gap-x-5") {
+          li {
+            a(class: section == .articles ? "active" : "", href: "/articles/") { "Articles" }
+          }
+          li {
+            a(href: "https://uptime.housh.dev/status/housh-dev", rel: "nofollow", target: "_blank") { "Server-Monitor" }
+          }
+          li {
+            a(class: section == .about ? "active" : "", href: "/about.html") { "About" }
+          }
         }
       }
+
+      div(class: "font-avenir w-2/3", id: "search") {}
     }
   }
 }
 
 private func footer(_ rssLink: String) -> Node {
-  div(class: "site-footer text-slate-400 border-t border-light text-center pt-2 text-sm") {
+  div(class: "text-slate-400 border-t border-light text-center pt-2 text-sm") {
     div {
       "Copyright © Michael Housh \(Date().description.prefix(4))."
     }
@@ -124,7 +128,6 @@ private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible)
     <meta name="theme-color" content="#ffffff">
     """)
     link(href: "/static/output.css", rel: "stylesheet")
-    link(href: "/static/style.css", rel: "stylesheet")
     link(href: "/articles/feed.xml", rel: "alternate", title: SiteMetadata.name, type: "application/rss+xml")
     extraHeader
     // script(src: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js")
@@ -138,5 +141,6 @@ private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible)
         });
     </script>
     """)
+    link(href: "/static/style.css", rel: "stylesheet")
   }
 }

Sources/Docs/Templates/RenderPage.swift

@@ -27,7 +27,7 @@ func renderPage(context: ItemRenderingContext<PageMetadata>) -> Node {
 
 func renderHome(body: String) -> Node {
   div {
-    div(class: "font-avenir", id: "search") {}
+    // div(class: "font-avenir mt-8", id: "search") {}
     div(class: "my-24 uppercase font-avenir text-[40px] leading-[1.25] font-thin text-center [&>h1>strong]:font-bold") {
       Node.raw(body)
     }

content/static/main.js

@@ -1,24 +0,0 @@
-const documents = null;
-
-var loadDocuments = function () {
-  fetch("/static/search.json")
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error("Failed to load search index.");
-      }
-      return response.json();
-    })
-    .then((response) => (this.documents = response))
-    .catch((error) => console.error(error));
-};
-
-let miniSearch = new MiniSearch({
-  fields: ["title", "body"],
-  storeFields: ["title", "url"],
-});
-
-loadDocuments();
-
-console.log(documents);
-
-miniSearch.addAll(documents);

content/static/style.css

@@ -1,5 +1,32 @@
+:root {
+  --pagefind-ui-background: #0e172b;
+  --pagefind-ui-text: white;
+  /* --pagefind-ui-tag: #fd9a00; */
+  /* --pagefind-ui-primary: #fd9a00; */
+  --pagefind-ui-border: #fd9a00;
+}
+
 body {
-  font-family: Helvetica;
+  font-family: Avenir;
+}
+
+#search {
+  position: relative;
+  top: 0;
+  right: 0;
+}
+
+#search input:focus {
+  outline: none;
+}
+
+#search .pagefind-ui__drawer {
+  background: #3c3c3c;
+  border: 2px solid #fd9a00;
+}
+
+#search .pagefind-ui__message {
+  padding-left: 20px;
 }
 
 * {

justfile

@@ -10,7 +10,11 @@ default:
 # Run the development server.
 [group('dev')]
 run:
-  @swift run watch content Sources deploy
+  #!/usr/bin/env zsh
+  touch .build/browser-dev-sync
+  browser-sync start -p localhost:1414 --watch --files '.build/browser-dev-sync' &
+  watchexec -w Sources -e .swift -r 'swift run && touch .build/browser-dev-sync' &
+  watchexec -w .build/browser-dev-sync --ignore-nothing -r 'npx -y pagefind --site deploy --serve'
 
 # Create a new article with given name and tags.
 new-article name *tags: