From 7c1feab986be70cc4f04aee6351451690186e451 Mon Sep 17 00:00:00 2001
From: Reed Nelson <reed.nelson.d@gmail.com>
Date: Sun, 14 Jan 2024 00:56:51 -0600
Subject: [PATCH] clean doc styling

---
 src/layouts/Search.tsx                   | 181 -----------------------
 src/layouts/components/DocBrowser.astro  |  14 +-
 src/layouts/components/DocContents.astro |  50 +++----
 src/layouts/components/Header.astro      |  85 +----------
 src/layouts/components/SearchBar.astro   |  86 +++++++++++
 5 files changed, 121 insertions(+), 295 deletions(-)
 delete mode 100755 src/layouts/Search.tsx
 create mode 100644 src/layouts/components/SearchBar.astro

diff --git a/src/layouts/Search.tsx b/src/layouts/Search.tsx
deleted file mode 100755
index 858393f..0000000
--- a/src/layouts/Search.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import config from "@/config/config.json";
-import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
-import Fuse from "fuse.js";
-import React, { useEffect, useRef, useState } from "react";
-import {
-  FaRegFolder,
-  FaRegUserCircle,
-  FaSearch,
-} from "react-icons/fa/index.js";
-
-const { summary_length, blog_folder } = config.settings;
-
-export type SearchItem = {
-  slug: string;
-  data: any;
-  content: any;
-};
-
-interface Props {
-  searchList: SearchItem[];
-}
-
-interface SearchResult {
-  item: SearchItem;
-  refIndex: number;
-}
-
-const Search = ({ searchList }: Props) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [inputVal, setInputVal] = useState("");
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-
-  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
-    setInputVal(e.currentTarget.value);
-  };
-
-  const fuse = new Fuse(searchList, {
-    keys: ["data.title", "data.categories", "data.tags"],
-    includeMatches: true,
-    minMatchCharLength: 3,
-    threshold: 0.5,
-  });
-
-  useEffect(() => {
-    const searchUrl = new URLSearchParams(window.location.search);
-    const searchStr = searchUrl.get("q");
-    if (searchStr) setInputVal(searchStr);
-
-    setTimeout(function () {
-      inputRef.current!.selectionStart = inputRef.current!.selectionEnd =
-        searchStr?.length || 0;
-    }, 50);
-  }, []);
-
-  useEffect(() => {
-    let inputResult = inputVal.length > 2 ? fuse.search(inputVal) : [];
-    setSearchResults(inputResult);
-
-    if (inputVal.length > 0) {
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set("q", inputVal);
-      const newRelativePathQuery =
-        window.location.pathname + "?" + searchParams.toString();
-      history.pushState(null, "", newRelativePathQuery);
-    } else {
-      history.pushState(null, "", window.location.pathname);
-    }
-  }, [inputVal]);
-
-  return (
-    <section className="section-sm">
-      <div className="container">
-        <div className="row mb-10 justify-center">
-          <div className="lg:col-8">
-            <div className="flex flex-nowrap">
-              <input
-                className="form-input rounded-r-none"
-                placeholder="Search posts"
-                type="search"
-                name="search"
-                value={inputVal}
-                onChange={handleChange}
-                autoComplete="off"
-                autoFocus
-                ref={inputRef}
-              />
-              <button className="btn btn-primary rounded-l-none" type="submit">
-                <FaSearch />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* {inputVal.length > 1 && (
-          <div className="mt-8">
-            Found {searchResults?.length}
-            {searchResults?.length && searchResults?.length === 1
-              ? " result"
-              : " results"}{" "}
-            for '{inputVal}'
-          </div>
-        )} */}
-        <div className="row">
-          {searchResults?.length < 1 ? (
-            <div className="mx-auto pt-5 text-center">
-              <img
-                className="mx-auto mb-6"
-                src="/images/no-search-found.png"
-                alt="no-search-found"
-              />
-              <h1 className="h2 mb-4">
-                {inputVal.length < 1 ? "Search Post Here" : "No Search Found!"}
-              </h1>
-              <p>
-                {inputVal.length < 1
-                  ? "Search for posts by title, category, or tag."
-                  : "We couldn't find what you searched for. Try searching again."}
-              </p>
-            </div>
-          ) : (
-            searchResults?.map(({ item }, index) => (
-              <div className="mb-12 md:col-6 lg:col-4" key={`search-${index}`}>
-                <div className="bg-body dark:bg-darkmode-body">
-                  {item.data.image && (
-                    <img
-                      className="mb-6 w-full rounded"
-                      src={item.data.image}
-                      alt={item.data.title}
-                      width={445}
-                      height={230}
-                    />
-                  )}
-                  <h4 className="mb-3">
-                    <a href={`/${blog_folder}/${item.slug}`}>
-                      {item.data.title}
-                    </a>
-                  </h4>
-                  <ul className="mb-4">
-                    <li className="mr-4 inline-block">
-                      <a href={`/authors/${slugify(item.data.author)}`}>
-                        <FaRegUserCircle
-                          className={"-mt-1 mr-2 inline-block"}
-                        />
-                        {humanize(item.data.author)}
-                      </a>
-                    </li>
-                    <li className="mr-4 inline-block">
-                      <FaRegFolder className={"-mt-1 mr-2 inline-block"} />
-                      {item.data.categories.map(
-                        (category: string, index: number) => (
-                          <a
-                            href={`/blog/categories/${slugify(category)}`}
-                            key={category}
-                          >
-                            {humanize(category)}
-                            {index !== item.data.categories.length - 1 && ", "}
-                          </a>
-                        ),
-                      )}
-                    </li>
-                  </ul>
-                  <p className="mb-6">
-                    {plainify(item.content?.slice(0, Number(summary_length)))}
-                  </p>
-                  <a
-                    className="btn btn-outline-primary btn-sm"
-                    href={`/${blog_folder}/${item.slug}`}
-                  >
-                    read more
-                  </a>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Search;
diff --git a/src/layouts/components/DocBrowser.astro b/src/layouts/components/DocBrowser.astro
index c6d71d3..48591bb 100644
--- a/src/layouts/components/DocBrowser.astro
+++ b/src/layouts/components/DocBrowser.astro
@@ -12,10 +12,10 @@ const isCurrentPage = (item) => {
 
 const getLinkClasses = (link) => {
   const baseClasses =
-    "block py-2 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
+    "text-xl block py-1 px-2 my-1 rounded hover:bg-theme-light dark:hover:bg-darkmode-theme-light";
 
   if (isCurrentPage(link)) {
-    return baseClasses + " border-slate-500 text-slate-900";
+    return baseClasses + "rounded bg-theme-light dark:bg-darkmode-theme-light";
   } else {
     return baseClasses;
   }
@@ -31,15 +31,17 @@ const { main }: { main: doc_data[] } = docs;
 ---
 
 <nav aria-labelledby="grid-left" class="w-64 border-r">
-  <div class="px-4 py-16">
+  <div class="mx-4 my-16">
     <ul>
       {
         main.map((item) =>
           item.header ? (
-            <h3 class="font-semibold text-slate-700">{item.text}</h3>
+            <h3 class="mt-4">{item.text}</h3>
           ) : (
-            <li class={getLinkClasses(item)}>
-              <a href={item.link}>{item.text}</a>
+            <li>
+              <a class={getLinkClasses(item)} href={item.link}>
+                {item.text}
+              </a>
             </li>
           ),
         )
diff --git a/src/layouts/components/DocContents.astro b/src/layouts/components/DocContents.astro
index 591a4cc..9cc0634 100644
--- a/src/layouts/components/DocContents.astro
+++ b/src/layouts/components/DocContents.astro
@@ -3,31 +3,29 @@ const { headings } = Astro.props;
 ---
 
 <nav aria-labelledby="grid-right">
-  <div class="px-4 py-16">
-<h3 class="dark:text-white mb-4">On This Page</h3>
-{
-	headings && headings.map((heading) => {
-		let className = `peer border-l-2 border-l-zinc-400 dark:border-l-zinc-700 `;
-		const sizeAndIndent = {
-			1: `pl-0 text-3xl`,
-			2: `pl-2 text-2xl`,
-			3: `pl-4 text-xl`,
-			4: `pl-6 text-lg`,
-			5: `pl-8 text-base`,
-			6: `pl-10 text-sm`,
-		};
-		className += sizeAndIndent[heading.depth] || "";
-		return (
-			<p class={className}>
-				<a
-					href={`#${heading.slug}`}
-					class="block py-1 text-zinc-600 dark:text-zinc-400 hover:text-green-600 dark:hover:text-zinc-300 transition-colors"
-				>
-					{heading.text}
-				</a>
-			</p>
-		);
-	})
-}
+  <div class="mx-4 my-16">
+    <h3 class="my-4">On This Page</h3>
+    {
+      headings &&
+        headings.map((heading) => {
+          let className = ``;
+          const sizeAndIndent = {
+            1: `pl-0 text-2xl`,
+            2: `pl-2 text-xl`,
+            3: `pl-4 text-lg`,
+            4: `pl-6 text-base`,
+            5: `pl-8 text-sm`,
+            6: `pl-10 text-xs`,
+          };
+          className += sizeAndIndent[heading.depth] || "";
+          return (
+            <p class={className}>
+              <a href={`#${heading.slug}`} class="block py-1">
+                {heading.text}
+              </a>
+            </p>
+          );
+        })
+    }
   </div>
 </nav>
diff --git a/src/layouts/components/Header.astro b/src/layouts/components/Header.astro
index 167359b..27e970f 100644
--- a/src/layouts/components/Header.astro
+++ b/src/layouts/components/Header.astro
@@ -2,6 +2,7 @@
 import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
 import config from "@/config/config.json";
 import menu from "@/config/menu.json";
+import SearchBar from "@/components/SearchBar.astro";
 import { IoSearch, IoClose } from "react-icons/io5/index.js";
 
 export interface ChildNavigationLink {
@@ -99,96 +100,16 @@ const { pathname } = Astro.url;
         ))
       }
     </ul>
-    <div class="order-1 ml-auto flex items-center lg:order-2 lg:ml-0">
+    <div class="order-1 ml-auto flex items-center lg:order-2 lg:ml-2">
       <div class="mr-4 flex items-center">
         <ThemeSwitcher />
       </div>
       
       {
         settings.search && (
-          // <a
-          //   class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
-          //   href="/search"
-          //   aria-label="search"
-          // >
-          //   <IoSearch />
-          // </a>
-          <>
-
-            <div class="lg:hidden border-border text-xl text-dark hover:text-primary dark:text-white flex items-center hover:rotate-12 transition-all duration-300">
-              <button id="mobile-search" aria-label="Search">
-                <IoSearch />
-              </button>
-            </div>
-            
-
-            <span class="z-20 bg-theme-light dark:bg-darkmode-theme-light rounded-md max-lg:!mx-[10%] max-lg:absolute max-lg:left-0 max-lg:w-[80%] max-lg:rounded-md hidden lg:flex lg:space-x-4 flex-row-reverse py-2 px-2">
-              
-              <div
-                id="mobile-search-close"
-                class="cursor-pointer lg:hidden lg:mr-1 flex items-center text-xl text-dark hover:text-primary dark:text-white hover:rotate-12 transition-all duration-300"
-              >
-                <IoClose />
-              </div>
-
-              <input
-                id="search"
-                type="text"
-                class="max-lg:text-lg bg-transparent border-transparent w-full lg:w-60 focus:outline-none p-0 m-0"
-                placeholder="Search..."
-              />
-              
-              <div class="text-xl m-0 p-0 text-dark hover:text-primary dark:border-darkmode-border dark:text-white flex items-center">
-                <IoSearch />
-              </div>
-
-              <div
-                id="results"
-                class="peer-placeholder-shown:hidden empty:hidden focus:block absolute top-16 max-lg:-mr-2 w-full lg:w-72  rounded-lg overflow-y-auto max-h-96 lg:max-h-72"
-              />
-            </span>
-          </>
+          <SearchBar />
         )
       }
     </div>
   </nav>
 </header>
-
-<script is:inline>
-  document.querySelector("#mobile-search")?.addEventListener("click", () => {
-    document.querySelector("#search")?.parentElement.classList.toggle("hidden");
-    document.querySelector("#search")?.parentElement.classList.toggle("flex");
-  });
-
-  document
-    .querySelector("#mobile-search-close")
-    ?.addEventListener("click", () => {
-      document.querySelector("#search")?.parentElement.classList.add("hidden");
-      document.querySelector("#search")?.parentElement.classList.remove("flex");
-    });
-
-  document.querySelector("#search")?.addEventListener("input", async (e) => {
-    // only load the pagefind script once
-    if (e.target.dataset.loaded !== "true") {
-      e.target.dataset.loaded = "true";
-      // load the pagefind script
-      window.pagefind = await import("/pagefind/pagefind.js");
-    }
-
-    // search the index using the input value
-    const search = await window.pagefind.search(e.target.value);
-
-    // clear the old results
-    document.querySelector("#results").innerHTML = "";
-
-    // add the new results
-    for (const result of search.results) {
-      const data = await result.data();
-      document.querySelector("#results").innerHTML += `
-        <a href="${data.url}" class="block px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
-          <h3 class="font-bold">${data.meta.title}</h3>
-          <p>${data.excerpt}</p>
-        </a>`;
-    }
-  });
-</script>
diff --git a/src/layouts/components/SearchBar.astro b/src/layouts/components/SearchBar.astro
new file mode 100644
index 0000000..8015c60
--- /dev/null
+++ b/src/layouts/components/SearchBar.astro
@@ -0,0 +1,86 @@
+---
+import { IoSearch, IoClose } from "react-icons/io5/index.js";
+---
+
+<div>
+  <div
+    class="lg:hidden border-border text-xl flex items-center hover:rotate-12 transition-all duration-300"
+  >
+    <button id="mobile-search" aria-label="Search">
+      <IoSearch />
+    </button>
+  </div>
+
+  <span
+    class="z-20 bg-theme-light dark:bg-darkmode-theme-light rounded-md max-lg:!mx-[10%] max-lg:absolute max-lg:left-0 max-lg:w-[80%] max-lg:rounded-md hidden lg:flex lg:space-x-4 flex-row-reverse py-2 px-1"
+  >
+    <div
+      id="mobile-search-close"
+      class="cursor-pointer lg:hidden lg:mr-1 flex items-center text-xl hover:rotate-12 transition-all duration-300"
+    >
+      <IoClose />
+    </div>
+
+    <input
+      id="search"
+      type="text"
+      class=" bg-transparent border-hidden w-full lg:w-48 focus:outline-none p-0 !mx-0"
+      placeholder="Search..."
+    />
+
+    <div class="text-xl !mx-2 flex items-center">
+      <IoSearch />
+    </div>
+
+    <div
+      id="results"
+      class="peer-placeholder-shown:hidden empty:hidden focus:block absolute top-16 max-lg:-mr-2 w-full lg:w-72 rounded-lg overflow-y-auto max-h-96 lg:max-h-72"
+    >
+    </div>
+  </span>
+
+  <script is:inline>
+    document.querySelector("#mobile-search")?.addEventListener("click", () => {
+      document
+        .querySelector("#search")
+        ?.parentElement.classList.toggle("hidden");
+      document.querySelector("#search")?.parentElement.classList.toggle("flex");
+    });
+
+    document
+      .querySelector("#mobile-search-close")
+      ?.addEventListener("click", () => {
+        document
+          .querySelector("#search")
+          ?.parentElement.classList.add("hidden");
+        document
+          .querySelector("#search")
+          ?.parentElement.classList.remove("flex");
+      });
+
+    document.querySelector("#search")?.addEventListener("input", async (e) => {
+      // only load the pagefind script once
+      if (e.target.dataset.loaded !== "true") {
+        e.target.dataset.loaded = "true";
+        // load the pagefind script
+        window.pagefind = await import("/pagefind/pagefind.js");
+      }
+
+      // search the index using the input value
+      const search = await window.pagefind.search(e.target.value);
+
+      // clear the old results
+      document.querySelector("#results").innerHTML = "";
+
+      // add the new results
+      for (const result of search.results) {
+        const data = await result.data();
+        document.querySelector("#results").innerHTML += `
+        <a href="${data.url}" class="block px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
+          <h3 class="font-bold">${data.meta.title}</h3>
+          <p>${data.excerpt}</p>
+        </a>`;
+      }
+    });
+  </script>
+</div>