Add search functionality

components/button-icon.tsx

@@ -3,15 +3,23 @@ interface Props {
   fill: string;
   id?: string;
   classList?: string[];
+  dimensions: [height: number, width: number];
 }
 
-export default function ButtonIcon({ path, fill, id, classList }: Props) {
+export default function ButtonIcon({
+  path,
+  fill,
+  id,
+  classList,
+  dimensions,
+}: Props) {
   return (
     <svg
       id={id}
       xmlns="http://www.w3.org/2000/svg"
-      width="17"
-      height="17"
+      width={dimensions[1]}
+      height={dimensions[0]}
+      viewBox={`0 0 ${dimensions[1]} ${dimensions[0]}`}
       fill={fill}
       className={`inline ${classList?.join(" ")}`}
     >

components/layout.tsx

@@ -16,7 +16,7 @@ export default function Layout({ children }: Props) {
         description="Blogging about software and technology from a software engineer's perspective."
         image={`${process.env.NEXT_PUBLIC_ORIGIN}/static/card-logo.png`}
       />
-      <div className="flex flex-col bg-gray-50 dark:bg-stone-800 dark:text-white">
+      <div className="flex flex-col w-screen h-screen overflow-auto bg-gray-50 dark:bg-stone-800 dark:text-white">
         <Nav />
         <main className="w-full pt-8 max-w-screen-lg mx-auto px-10 md:px-28 grow dark:bg-stone-800 dark:text-white">
           {children}

components/nav-body.tsx

@@ -1,6 +1,7 @@
-import { NavigationLink } from "./nav"
+import { NavigationLink } from "./nav";
 import NavLink from "./nav-link";
 import ThemeIcon from "./theme-icon";
+import NavSearch from "./nav-search";
 
 interface Props {
   navLinks: NavigationLink[];
@@ -9,7 +10,7 @@ interface Props {
 export default function NavBody({ navLinks }: Props) {
   return (
     <>
-      <div className="flex-1 justify-between hidden sm:flex sm:ml-10">
+      <div className="shrink-1 justify-between hidden md:flex sm:ml-10">
         <div className="flex flex-none space-x-4">
           {navLinks.map((link: NavigationLink) => {
             return (
@@ -18,6 +19,9 @@ export default function NavBody({ navLinks }: Props) {
           })}
         </div>
       </div>
+      <div className="flex-1 grow md:flex hidden md:justify-end px-4">
+        <NavSearch />
+      </div>
       <div className="mt-1 mr-5 flex flex-0">
         <ThemeIcon />
       </div>

components/nav-hamburger.tsx

@@ -5,10 +5,10 @@ interface Props {
 
 export default function NavHamburger({ isMenuOpen, handleClick }: Props) {
   return (
-    <div className="flex items-center sm:hidden">
+    <div className="flex items-center md:hidden">
       <button
         onClick={handleClick}
-        className="inline-flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset dark:focus:ring-stone-800 focus:ring-white"
+        className="inline-flex items-center justify-center p-2 rounded-md focus:outline-none hover:ring-2 hover:ring-stone-400 transition-all"
         aria-expanded="false"
       >
         <span className="sr-only">Open main menu</span>

components/nav-logo.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function NavLogo() {
   return (
-    <div className="shrink-0 hidden sm:flex sm:items-center">
+    <div className="shrink-0 md:flex md:items-center">
       <Link href="/">
         <a className="dark:text-blue-300 dark:hover:text-blue-100 hover:text-blue-700 text-blue-500 cursor-pointer text-2xl font-mono font-bold flex items-center flex-none px-2">
           &lt;Aaron Bos&#47;&gt;

components/nav-mobile-menu.tsx

@@ -1,16 +1,20 @@
 import NavMobileLink from "./nav-mobile-link";
 import { NavigationLink } from "./nav";
+import { MaxSearchLength } from "../constants";
+import { useRouter } from "next/router";
 
 interface Props {
   isMenuOpen: boolean;
   navLinks: NavigationLink[];
 }
 
 export default function NavMobileMenu({ isMenuOpen, navLinks }: Props) {
+  const router = useRouter();
+
   return (
     <div
       id="mobileMenu"
-      className={`${isMenuOpen ? "block" : "hidden"} sm:hidden`}
+      className={`${isMenuOpen ? "block" : "hidden"} md:hidden`}
     >
       <div className="px-2 pt-2 pb-3 space-y-1">
         {navLinks.map((link) => {
@@ -22,6 +26,26 @@ export default function NavMobileMenu({ isMenuOpen, navLinks }: Props) {
             />
           );
         })}
+        <input
+          maxLength={MaxSearchLength}
+          className="block mx-auto w-full dark:bg-stone-800 dark:text-white rounded-md dark:focus:ring-stone-400 dark:focus:ring-2 dark:focus:border-0"
+          type="search"
+          placeholder="Search posts"
+          onKeyUp={(e) => {
+            if (e.key === "Enter") {
+              const query = (e.target as HTMLInputElement).value;
+
+              router.push({
+                pathname: "/search",
+                query: {
+                  q: encodeURIComponent(
+                    query.substring(0, MaxSearchLength - 1)
+                  ),
+                },
+              });
+            }
+          }}
+        />
       </div>
     </div>
   );

components/nav-search.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+import { MaxSearchLength } from "../constants";
+
+export default function NavSearch() {
+  const router = useRouter();
+
+  return (
+    <input
+      maxLength={MaxSearchLength}
+      className="lg:w-1/2 md:w-3/4 dark:bg-stone-800 dark:text-white rounded-md dark:focus:ring-stone-400 dark:focus:ring-2 dark:focus:border-0"
+      type="search"
+      placeholder="Search posts"
+      onKeyUp={(e) => {
+        if (e.key === "Enter") {
+          const query = (e.target as HTMLInputElement).value;
+
+          router.push({
+            pathname: "/search",
+            query: {
+              q: encodeURIComponent(
+                query.trim().substring(0, MaxSearchLength - 1)
+              ),
+            },
+          });
+        }
+      }}
+    />
+  );
+}

components/nav.tsx

@@ -20,14 +20,16 @@ export default function Nav() {
 
   return (
     <nav className="border-b border-b-gray-200 dark:border-b-zinc-700">
-      <div className="max-w-6xl mx-auto px-2 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto px-2 sm:px-6 md:px-8">
         <div className="relative flex items-center justify-between h-16">
           <NavHamburger
             isMenuOpen={menuState}
             handleClick={() => setMenuState(!menuState)}
           />
-          <div className="flex-1 flex justify-end sm:items-stretch sm:justify-start">
+          <div className="flex md:justify-center md:items-stretch">
             <NavLogo />
+          </div>
+          <div className="md:flex-1 flex justify-end md:justify-start">
             <NavBody navLinks={navLinks} />
           </div>
         </div>

components/reaction-row.tsx

@@ -97,11 +97,19 @@ export default function ReactionRow({ postSlug, url }: Props) {
         <AnchorButton
           href={`https://twitter.com/intent/tweet?url=${encodeURI(url)}`}
         >
-          <ButtonIcon fill="rgb(29,155,240)" path={icons.twitter} />
+          <ButtonIcon
+            fill="rgb(29,155,240)"
+            path={icons.twitter}
+            dimensions={[17, 17]}
+          />
           <span className="text-sm ml-2">Share</span>
         </AnchorButton>
         <AnchorButton href="https://aaronbos.dev/feed.xml">
-          <ButtonIcon fill="currentColor" path={icons.bell} />
+          <ButtonIcon
+            fill="currentColor"
+            path={icons.bell}
+            dimensions={[17, 17]}
+          />
           <span className="text-sm ml-2">Subscribe</span>
         </AnchorButton>
         <button
@@ -114,12 +122,14 @@ export default function ReactionRow({ postSlug, url }: Props) {
             id="clip"
             fill="currentColor"
             path={icons.emptyClipboard}
+            dimensions={[17, 17]}
           />
           <ButtonIcon
             id="clipped"
             fill="currentColor"
             path={icons.copiedClipboard}
             classList={["hidden"]}
+            dimensions={[17, 17]}
           />{" "}
           <span id="clip-text" className="text-sm ml-1">
             Copy link

components/recent-posts.tsx

@@ -2,12 +2,15 @@ import PostPreview from "./post-preview";
 import { BlogPost } from "../lib/posts";
 
 interface Props {
-  recentPosts: Pick<BlogPost, "id" | "slug" | "description" | "date" | "metadata" | "title">[];
+  recentPosts: Pick<
+    BlogPost,
+    "id" | "slug" | "description" | "date" | "metadata" | "title"
+  >[];
 }
 
 export default function RecentPosts({ recentPosts }: Props) {
   return (
-    <div className="my-3">
+    <div className="dark:bg-stone-800 bg-gray-50 my-3">
       <h3 className="pt-6 text-xl font-semibold pb-3">Recent Posts</h3>
       <hr />
       {recentPosts.map((post) => {

constants.ts

@@ -0,0 +1,2 @@
+export const BlogIndex: string = "aaronbos_blog_index";
+export const MaxSearchLength: number = 128;

lib/request-handlers/search-request.ts

@@ -0,0 +1,30 @@
+import algoliasearch from "algoliasearch";
+import { BlogIndex } from "../../constants";
+import { ApiResponse, SearchHit } from "../../types/api/types";
+
+export async function handleGet(
+  query: string
+): Promise<ApiResponse<SearchHit[]>> {
+  const client = algoliasearch(
+    process.env.ALGOLIA_APP_ID!,
+    process.env.ALGOLIA_SEARCH_API_KEY!
+  );
+
+  const index = client.initIndex(BlogIndex);
+  const rawResults = (await index.search<SearchHit>(query)).hits;
+  return {
+    // Unfortunately need to map here to make sure the entire content isn't sent in the response
+    data: rawResults.map((h) => {
+      return {
+        objectID: h.objectID,
+        title: h.title,
+        description: h.description,
+        date: h.date,
+        metadata: h.metadata,
+        slug: h.slug,
+      };
+    }),
+    isSuccess: true,
+    message: "",
+  };
+}