Merge branch 'main' into feature/new-color-scheme

Author: Rikthepixel

src/components/controls/Input.tsx

@@ -7,8 +7,8 @@ import { RequiredKeys } from "@/types/utility";
 export const style = cva("w-full rounded-full py-2 px-3 border-2", {
   variants: {
     color: {
-      primary: "border-primary bg-white",
-      secondary: "border-secondary bg-white"
+      primary: "border-primary bg-transparent placeholder:text-primary/75",
+      secondary: "border-secondary bg-transparent placeholder:text-secondary/75"
     },
   },
   defaultVariants: {

src/components/layout/Header.tsx

@@ -23,7 +23,7 @@ const Header = () => {
   });
 
   return (
-    <header className="relative flex items-center w-full gap-4 p-4 transition-all md:px-8 md:gap-12">
+    <header className="relative flex items-center w-full gap-4 p-4 transition-all md:px-8 md:gap-12 border-b border-black/5">
       <Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
         <img
           className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"

src/components/pages/blog/ArticleBrief.tsx

@@ -12,7 +12,7 @@ import IArticle from "@/assets/state/articles/article";
 import makeTagUrl from "./utils/makeTagUrl";
 import { readtimeFormatter } from "@/utils/readtime";
 
-const listAnim = {
+const LIST_ANIM = {
   in: {
     opacity: 0,
     scale: 0.5,
@@ -21,14 +21,14 @@ const listAnim = {
     opacity: 1,
     scale: 1,
     transition: {
-      duration: 0.35
+      duration: 0.25
     }
   },
   exit: {
     opacity: 0,
     scale: 0.5,
     transition: {
-      duration: 0.35
+      duration: 0.25
     }
   }
 } as Variants;
@@ -51,7 +51,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
   return (
     <motion.li
       className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-lg motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 bg-primary-300"
-      variants={listAnim}
+      variants={LIST_ANIM}
       initial="in"
       animate="anim"
       exit="exit"

src/pages/_app.tsx

@@ -84,7 +84,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
         <AnimatePresence mode="wait" onExitComplete={onAnimFinished}>
           <motion.div
             key={router.pathname}
-            className="flex flex-col items-center flex-1 w-full px-8"
+            className="flex flex-col items-center flex-1 w-full p-8 pb-0"
             initial="initial"
             animate="animate"
             exit="exit"

src/pages/blog/index.tsx

@@ -3,7 +3,7 @@ import { GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import Head from "next/head";
 import TagIcon from "@heroicons/react/24/solid/TagIcon";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, Variants } from "framer-motion";
 import { useForm, useWatch } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -29,16 +29,16 @@ interface BlogPageProps {
 
 const SORT_OPTIONS = [
   {
-    "direction": "new",
-    "name": "Newest",
-    "func": (a: IArticleBrief, b: IArticleBrief) => {
+    direction: 1,
+    name: "Newest",
+    func: (a: IArticleBrief, b: IArticleBrief) => {
       return new Date(b.date).getTime() - new Date(a.date).getTime();
     }
   },
   {
-    "direction": "old",
-    "name": "Oldest",
-    "func": (a: IArticleBrief, b: IArticleBrief) => {
+    direction: 2,
+    name: "Oldest",
+    func: (a: IArticleBrief, b: IArticleBrief) => {
       return new Date(a.date).getTime() - new Date(b.date).getTime();
     }
   }
@@ -47,12 +47,30 @@ const SORT_OPTIONS = [
 const filterSchema = z.object({
   search: z.string(),
   sort: z.object({
-    direction: z.union([z.literal("new"), z.literal("old")]),
+    direction: z.union([z.literal(1), z.literal(2)]),
     name: z.string(),
     func: z.function(z.tuple([z.object({}), z.object({})]), z.number())
   })
 });
 
+const NO_RESULTS_ANIM = {
+  in: {
+    opacity: 0
+  },
+  anim: {
+    opacity: 1,
+    transition: {
+      duration: 0.25
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.25
+    }
+  }
+} as Variants;
+
 const filterSchemaResolver = zodResolver(filterSchema);
 
 type FilterSchema = z.infer<typeof filterSchema>;
@@ -99,7 +117,7 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
         <Heading.H1 id="blog" className="text-center text-secondary">
           Blog
         </Heading.H1>
-        {computedArticles.length > 0 && <>
+        {articles.length > 0 && <>
           <div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2 items-end">
             <div>
               <Label htmlFor="search-input" className="text-secondary">
@@ -149,13 +167,25 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
               </motion.div>}
             </AnimatePresence>
           </div>
-          <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" aria-label="blog articles">
+          <AnimatePresence>
+            {computedArticles.length <= 0 && <motion.p
+              role="note"
+              className="w-full text-2xl font-semibold text-center"
+              variants={NO_RESULTS_ANIM}
+              initial="in"
+              animate="anim"
+              exit="exit"
+            >
+              There are no blog posts that fit this criteria
+            </motion.p>}
+          </AnimatePresence>
+          <ul className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" aria-label="blog articles">
             <AnimatePresence>
               {computedArticles.map((brief, i) => <ArticleBrief key={brief.url} {...brief} imgLoading={i > 3 ? "lazy" : "eager"} />)}
             </AnimatePresence>
           </ul>
         </>}
-        {computedArticles.length < 1 && <p role="note" className="text-3xl font-semibold text-center">
+        {articles.length <= 0 && <p role="note" className="text-2xl font-semibold text-center">
           There are no blog posts yet! Stay tuned!
         </p>}
       </main>