Improve 404 Google search UX

Author: csswizardry

404.md

@@ -12,28 +12,78 @@ things you can do from here:
 
 {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
 
+<style>
+  .c-input-text--404 {
+    width: 100%;
+  }
+
+  .c-404-search {
+    margin-bottom: 24px;
+  }
+</style>
+
+<form action="https://www.google.com/search" method="get" class="c-404-search" id="js404Search">
+  <p>
+    <label for="js404SearchTerms">Can’t find what you’re looking for? Search CSS Wizardry with Google.</label>
+    <input type="text" class="c-input-text  c-input-text--404" id="js404SearchTerms" name="q" placeholder="your search terms" autocomplete="off" autofocus>
+    <input type="hidden" name="as_sitesearch" value="csswizardry.com">
+  </p>
+
+  <p>
+    <input type="submit" value="Search CSS Wizardry via Google" class="btn">
+  </p>
+</form>
+
 1. [Head back to the home page](/)
-2. [Search Google for what you were looking for](https://www.google.com/search?q=site%3Acsswizardry.com+YOUR+SEARCH+TERM)
-3. [Browse the blog](/blog/)
-4. Read [<cite>{{ site.posts[random].title }}</cite>]({{ site.posts[random].url }}) <small>({{ site.posts[random].date | date: "%Y" }})</small>
+2. [Browse the blog](/blog/)
+3. Read [<cite>{{ site.posts[random].title }}</cite>]({{ site.posts[random].url }}) <small>({{ site.posts[random].date | date: "%Y" }})</small>
 
 <script>
 (() => {
 
-  // Let’s try guess what they might have been looking for…
+  const termsInput = document.getElementById('js404SearchTerms');
+
+  if (!termsInput) return;
+
+  const safeDecode = (value) => {
+    try {
+      return decodeURIComponent(value);
+    } catch (_) {
+      return value;
+    }
+  };
+
+  const normalisePathname = (pathname) => {
+    const segments = pathname
+      .split('/')
+      .filter(Boolean)
+      .map(safeDecode)
+      .map((segment) => segment.replace(/\.[a-z0-9]+$/i, ''));
+
+    if (
+      segments.length >= 2 &&
+      /^(?:19|20)\d{2}$/.test(segments[0]) &&
+      /^(?:0?[1-9]|1[0-2])$/.test(segments[1])
+    ) {
+      segments.splice(0, 2);
 
-  // Get the current URL
-  const url = new URL(window.location.href);
+      if (segments[0] && /^(?:0?[1-9]|[12]\d|3[01])$/.test(segments[0])) {
+        segments.shift();
+      }
+    }
 
-  // Grab the 404ing path
-  const pathname = url.pathname;
+    return segments
+      .join(' ')
+      .replace(/[%+]/g, ' ')
+      .replace(/[-_]+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  };
 
-  // Replace any URL-like characters with spaces
-  const formattedPath = pathname.replace(/[-_\/]+/g, ' ').trim();
+  // Ignore query strings entirely: on this site they don’t change the content.
+  const guessedTerms = normalisePathname(window.location.pathname);
 
-  // Rewrite the Google link above
-  const anchor = document.querySelector('a[href*="google"]');
-  anchor.href = `https://www.google.com/search?q=site%3A${url.hostname}+${encodeURIComponent(formattedPath)}`;
+  termsInput.value = guessedTerms;
 
 })();
 </script>