Replaced website search with Google, similar to hyperscript.org. Removed non-working Algolia, docsearch. Issue: #1328 (#1342)

gnat · web-flow · commit 12e62ce0f01f · 2023-04-11T09:34:52.000-06:00
diff --git a/www/_includes/layout.njk b/www/_includes/layout.njk
@@ -17,9 +17,6 @@
             Prism.highlightAllUnder(content);
         })
     </script>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-
 </head>
 <body hx-ext="class-tools, preload">
 
@@ -55,12 +52,11 @@
                     <div>
                         <a href="/essays/">essays</a>
                     </div>
-                    <div>
-                        <input _="on keyup[key is 'Escape'] or click elsewhere
-                                    blur() then set my.value to ''
-                                  on keyup[key is '/'] from <body/>
-                                    focus()"
-                                placeholder="&#128269;" type="text" id="search"/>
+                    <div hx-disable>
+                        <form action="https://google.com/search">
+                            <input type="hidden" name="q" value="site:htmx.org">
+                            <label><span style="display:none;">Search</span><input type="text" name="q" placeholder="🔍️" class="search-box"></label>
+                        </form>
                     </div>
                 </div>
                 <div class="github-stars">
@@ -117,13 +113,5 @@
   </div>
 </footer>
 
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script type="text/javascript"> docsearch({
-    apiKey: '47070108e6ce8dfee6beee94b83bee7d',
-    indexName: 'htmx',
-    inputSelector: '#search',
-    debug: false // Set debug to true if you want to inspect the dropdown
-});
-</script>
 </body>
 </html>
diff --git a/www/css/site.css b/www/css/site.css
@@ -407,58 +407,55 @@ h1,h2,h3,h4{
 
 
 .logo-wrapper {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 table td:first-child code {
-  display: block;
-  background: none;
+    display: block;
+    background: none;
 }
 
-
-#search {
-  transition: all 0.3s ease-out;
-  width: 3em;
-  padding: 6px 8px;
-  border: 1px solid #eee;
-  background-color: inherit;
-  border-radius: 10px;
-  margin-right: 6px;
-  position: relative;
-  vertical-align: top;
+.search-box {
+    transition: all .2s ease-in-out;
+    width: 2.5rem;
+    padding: 4px 6px;
+    border: 2px solid #eee;
+    border-radius: 10px;
+    margin-right: 10px;
+    outline: 0;
 }
 
-
-#search:hover, #search:not(:placeholder-shown) {
-  border: 1px solid rgb(204, 204, 204);
-  background-color: white;
+.search-box::placeholder {
+    text-align: right;
 }
 
+.search-box:hover, .search-box:not(:placeholder-shown) {
+    border: 2px solid var(--midBlue);
+}
 
-#search:focus, #search:not(:placeholder-shown) {
-  width: 150px;
-  border-radius: 4px;
+.search-box:active, .search-box:focus, .search-box:not(:placeholder-shown) {
+    width: 10rem;
 }
 
 footer {
-  margin-top: 2em;
-  padding-top: 2em;
-  padding-bottom: 5em;
-  background-color: #f6f6f6;
+    margin-top: 2em;
+    padding-top: 2em;
+    padding-bottom: 5em;
+    background-color: #f6f6f6;
 }
 
 footer .footer-menu {
-  text-align: right;
+    text-align: right;
 }
 
 @media(max-width:45rem) {
-  footer .footer-haiku {
-    margin-bottom: 3em;
-  }
+    footer .footer-haiku {
+        margin-bottom: 3em;
+    }
 
-  footer .footer-menu {
-    padding-top: 3em;
-    border-top: 1px solid #eee;
-    text-align: left;
-  }
+    footer .footer-menu {
+        padding-top: 3em;
+        border-top: 1px solid #eee;
+        text-align: left;
+    }
 }
