chore: pagefind component

src/assets/styles/widgets/forms.css

@@ -1,5 +1,6 @@
 input[type="text"],
 input[type="email"],
+input[type="search"],
 textarea {
   color: var(--black);
   background-color: var(--white);
@@ -18,6 +19,7 @@ textarea {
 
 input[type="text"]:focus,
 input[type="email"]:focus,
+input[type="search"],
 textarea:focus {
   border: 1px solid var(--blue-800);
 }
@@ -25,6 +27,7 @@ textarea:focus {
 @media (prefers-color-scheme: dark) {
   input[type="text"],
   input[type="email"],
+  input[type="search"],
   textarea {
     color: var(--white);
     background-color: var(--black);

src/pages/search.html

@@ -4,8 +4,6 @@ description: "Search through and find the posts on my site."
 layout: default
 permalink: /search.html
 ---
-
-<link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
 {% capture css %}
   {% render "../assets/styles/widgets/pagefind.css" %}
   {% render "../assets/styles/widgets/forms.css" %}
@@ -13,15 +11,13 @@ permalink: /search.html
 <style>
   {{ css | cssmin }}
 </style>
-<div id="search" class="search"></div>
-<script
-  src="https://coryd.dev/pagefind/pagefind-ui.js"
-  onload="new PagefindUI({ element: '#search', showImages: false, processTerm: (term) => {
-      try{
-        plausible('/Search', {props: {method: 'Text', term}});
-      } catch(e){};
-      return term;
-    }
-  });"
-></script>
+<pagefind-search _show_images="false">
+  <form action="https://duckduckgo.com/" method="get" style="min-height: 3.2em;">
+	<label>
+    <input placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
+	</label>
+	<input type="hidden" placeholder="Search" name="sites" value="coryd.dev">
+  </form>
+</pagefind-search>
 {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+<script type="module" src="/assets/scripts/pagefind-search.js" defer></script>