End of June features release

Replacing Flask to FastAPI on stuff

Added nav indicators on headings

Detect all JavaScript files into TypeScript

.gitattributes

@@ -0,0 +1 @@
+*.js linguist-language=TypeScript

README.md

@@ -8,7 +8,7 @@
   <img src="https://img.shields.io/github/issues/OpenFurs/searchpets?style=flat" alt="Searchpets' open issues" />
 </p>
 <p align="center">
-Searchpets is an open source search engine to find characters and texts from comics (coming soon) from <i>Housepets!</i> written in Next.js and Flask.
+Searchpets is an open source search engine to find characters and texts from comics (coming soon) from <i>Housepets!</i> written in Next.js and FastAPI.
 </p>
 <p align="center">
 This project was taken inspiration from this <a href="https://www.housepetscomic.com/forums/viewtopic.php?f=13&t=5434&p=938783&hilit=search+engine#p938783">forum post</a>.

app/src/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
         <div className="flex justify-center text-center sm:text-inherit sm:justify-between flex-col sm:flex-row">
           <section className="text-neutral-400 w-full sm:w-[50%] text-sm text-center sm:text-left">
             <p>
-              A full stack web app created with Next.js and Flask by{" "}
+              A full stack web app created with Next.js and FastAPI by{" "}
               <Link href="https://twitter.com/skepfuskyjs" passHref>
                 <a className="font-bold text-white styled-link">
                   <FontAwesomeIcon icon={faTwitter} />
@@ -49,7 +49,7 @@ export default function Footer() {
                   size="sm"
                   className="translate-y-0.5"
                 />
-                <span className="whitespace-nowrap">Housepets Website</span>
+                <span className="whitespace-nowrap">Official Housepets Website</span>
               </a>
             </Link>
             <Link href="https://github.com/OpenFurs/searchpets" passHref>

app/src/components/Header.tsx

@@ -1,11 +1,24 @@
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { FontAwesomeIcon as FaIcon } from "@fortawesome/react-fontawesome"
-import { faInfoCircle, faList, faSearch } from "@fortawesome/free-solid-svg-icons"
+import {
+  faInfoCircle,
+  faList,
+  faSearch,
+} from "@fortawesome/free-solid-svg-icons"
 
 export default function Header() {
   const router = useRouter()
 
+  const [navIdn, setNavIdn] = useState("translate-x-8")
+
+  useEffect(() => {
+    if (router.pathname === "/") setNavIdn("translate-x-9")
+    if (router.pathname === "/characters") setNavIdn("translate-x-[10.75rem]")
+    if (router.pathname === "/about") setNavIdn("translate-x-[19rem]")
+  }, [router.pathname])
+
   return (
     <header>
       <div className="content-wrapper flex justify-center">
@@ -17,6 +30,7 @@ export default function Header() {
           </Link>
         </div>
         <nav className="header-nav">
+          <div className={`nav-indicator ${navIdn}`}></div>
           <Link href="/" passHref>
             <a className={router.pathname == "/" ? "active" : ""}>
               <FaIcon icon={faSearch} size="sm" className="mr-2" />
@@ -32,7 +46,7 @@ export default function Header() {
           <Link href="/about" passHref>
             <a className={router.pathname == "/about" ? "active" : ""}>
               <FaIcon icon={faInfoCircle} size="sm" className="mr-2" />
-              About this project
+              About
             </a>
           </Link>
         </nav>

app/src/components/HeaderHero.tsx → app/src/components/layouts/HeaderHero.tsx

@@ -1,9 +1,17 @@
+import { useEffect, useState } from "react"
+
 interface IHeaderHeroProps {
   characterCount: number
   comicCount: number
 }
 
-export default function HeaderHero({ characterCount, comicCount}: IHeaderHeroProps) {
+export default function HeaderHero({
+  characterCount,
+  comicCount,
+}: IHeaderHeroProps) {
+
+
+
   return (
     <div className="hero-header-container">
       <h1 className="hero-header">
@@ -24,5 +32,5 @@ export default function HeaderHero({ characterCount, comicCount}: IHeaderHeroPro
         characters from the entire <em>Housepets!</em> comic catalog!
       </h1>
     </div>
-  );
-};
+  )
+}

app/src/pages/index.tsx

@@ -8,7 +8,7 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"
 import { ComicItemLoading } from "../components/ComicItem"
 import BaseHead from "../components/BaseHead"
 import Container from "../components/Container"
-import HeaderHero from "../components/HeaderHero"
+import HeaderHero from "../components/layouts/HeaderHero"
 import YearPickerItem from "../components/YearPickerItem"
 import BackToTopButton from "../components/BackToTop"
 
@@ -150,36 +150,12 @@ export default function Home({ comicCount, charCount }) {
       heroMargin.style.display = "none"
       return
     }
+
     resultText.classList.add("hidden")
     heroMargin.style.marginTop = "12vh"
     heroMargin.style.display = "flex"
   }, [comics, years])
 
-  useEffect(() => {
-    window.onscroll = () => {
-      const heroText = document.querySelector(".hero-header")
-      const searchBox = document.querySelector(".search-box-wrapper")
-
-      if (heroText.clientHeight === 72) {
-        window.pageYOffset > 327
-          ? searchBox.classList.add("lock")
-          : searchBox.classList.remove("lock")
-      }
-
-      if (heroText.clientHeight === 108) {
-        window.pageYOffset > 390
-          ? searchBox.classList.add("lock")
-          : searchBox.classList.remove("lock")
-      }
-
-      if (heroText.clientHeight === 144) {
-        window.pageYOffset > 408
-          ? searchBox.classList.add("lock")
-          : searchBox.classList.remove("lock")
-      }
-    }
-  }, [])
-
   const title = "Search characters and texts from Housepets!"
   let description = `Search through ${comicCount} pages and ${charCount} characters from the entire Housepets! comic catalog!`
 

app/src/styles/partials/_layouts.scss

@@ -47,7 +47,8 @@ footer {
 
 /*** Header stuff ***/
 .header-nav {
-  @apply flex text-lg gap-x-1 flex-col md:flex-row;
+  @apply flex text-lg gap-x-1 flex-col md:flex-row relative;
+
   a {
     @apply px-3 py-2 rounded-md transition-colors duration-100;
 
@@ -58,7 +59,11 @@ footer {
 }
 
 .active {
-  @apply text-blue-400;
+  @apply text-blue-400 font-bold;
+}
+
+.nav-indicator {
+  @apply h-[3px] w-12 rounded-lg bg-blue-400 absolute -bottom-2 transition-transform duration-300;
 }
 
 /*********
@@ -116,7 +121,7 @@ footer {
 
 @supports (backdrop-filter: blur(10px)) {
   .search-box-wrapper.lock {
-    backdrop-filter: blur(10px);
+    @apply backdrop-blur;
     background-color: rgba(60, 60, 60, 0.44);
   }
 }