Added search toolbar functionalities

Author: sergiojunior13

lib/posts.ts

@@ -4,24 +4,23 @@ import matter from "gray-matter";
 
 const postsDirectory = path.join(process.cwd(), "posts");
 
-export function getAllPostsNames() {
-  return fs
-    .readdirSync(postsDirectory)
-    .map(
-      postName =>
-        `${process.env.NEXT_PUBLIC_URL}blog/${postName.replace(/\.md$/, "")}/`
-    );
-}
-
-function getAllPostsData() {
+export function getAllPostsData() {
   const postNames = fs.readdirSync(postsDirectory);
   const allPostsData = postNames.map(postName => {
     const fullPath = path.join(postsDirectory, postName);
     const id = postName.replace(/\.md$/, "");
 
+    const postURL = `${process.env.NEXT_PUBLIC_URL}blog/${id}/`;
     const postContent = fs.readFileSync(fullPath, "utf8");
 
-    return { id, ...matter(postContent) };
+    return {
+      postURL,
+      id,
+      ...matter(postContent, {
+        excerpt: true,
+        excerpt_separator: "<!-- end -->",
+      }),
+    };
   });
 
   return allPostsData;
@@ -31,23 +30,21 @@ export function getPostData(id: string) {
   const postPath = path.join(postsDirectory, id + ".md");
 
   try {
-    const postData = fs.readFileSync(postPath, "utf8");
+    const postData = fs
+      .readFileSync(postPath, "utf8")
+      .replace("<!-- end -->", "");
     return matter(postData);
   } catch (error) {
     return false;
   }
 }
 
 export function getPostsPreview() {
-  return getAllPostsData()
-    .map(postData => {
-      return { id: postData.id, data: postData.data };
-    })
-    .sort((a, b) => {
-      if (a.data.date < b.data.date) {
-        return 1;
-      } else {
-        return -1;
-      }
-    });
+  return getAllPostsData().map(postData => {
+    return {
+      id: postData.id,
+      data: postData.data,
+      excerpt: postData.excerpt,
+    };
+  });
 }

pages/blog/blog-sitemap.xml/index.tsx

@@ -1,22 +1,25 @@
 import { GetServerSidePropsContext } from "next";
 import { getServerSideSitemapLegacy } from "next-sitemap";
-import { getAllPostsNames } from "../../../lib/posts";
+import { getAllPostsData } from "../../../lib/posts";
 
 export default function GenerateSitemap() {}
 
 export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const postsURL = getAllPostsNames();
+  const postsData = getAllPostsData();
+  const postsURLAndDate = postsData.map(postData => {
+    return { postURL: postData.postURL, date: postData.data.date };
+  });
 
   fetch(
     "https://www.google.com/ping?sitemap=https://tools-css.vercel.app/blog/blog-sitemap.xml"
   );
 
   return getServerSideSitemapLegacy(
     ctx,
-    postsURL.map(postURL => {
+    postsURLAndDate.map(({ date, postURL }) => {
       return {
         loc: postURL,
-        lastmod: new Date().toISOString(),
+        lastmod: new Date(date).toISOString(),
         changefreq: "monthly",
         priority: 0.8,
       };

pages/blog/index.tsx

@@ -3,11 +3,14 @@ import PostPreview from "../../src/components/blog/PostPreview";
 import ColorText from "../../src/components/ColorText";
 import SearchToolbar from "../../src/components/SearchToolbar";
 import { getPostsPreview } from "../../lib/posts";
-import path from "path";
+import Image from "next/image";
+import { useState } from "react";
 
 const url = process.env.NEXT_PUBLIC_URL;
 
 export default function Blog({ postsData }: { postsData: postsDataProps }) {
+  const [filteredPosts, setFilteredPosts] = useState(postsData);
+
   return (
     <main className="bg-zinc-800">
       <NextSeo
@@ -25,33 +28,51 @@ export default function Blog({ postsData }: { postsData: postsDataProps }) {
       />
       <div
         id="home"
-        className="h-[70vh] md:h-[50vh] flex flex-col items-center justify-center text-center p-5 bg-background bg-opacity-5 bg-zinc-700"
+        className="relative h-[70vh] md:h-[50vh] flex flex-col items-center justify-center text-center p-5 bg-zinc-950"
       >
         <ColorText
           Variant="span"
-          className="text-base font-semibold tracking-widest uppercase"
+          className="text-base font-semibold tracking-widest uppercase z-10"
         >
           Blog
         </ColorText>
-        <h1 className="text-4xl font-extrabold uppercase text-zinc-50">
+        <h1 className="text-4xl font-extrabold uppercase text-zinc-50 z-10">
           Find the best tips for better designs
         </h1>
+
+        <div className="opacity-50">
+          <Image
+            src="/background.jpg"
+            fill
+            alt="background img"
+            className="object-cover pointer-events-none"
+          />
+        </div>
       </div>
       <div className="flex justify-center py-10 p-5 bg-zinc-900">
         <div className="max-w-4xl flex flex-col items-center gap-20 justify-center">
-          <SearchToolbar />
+          <SearchToolbar
+            postsData={postsData}
+            setFilteredPosts={setFilteredPosts}
+          />
           <div className="flex w-full">
-            <TimeLine />
-            <div className="flex flex-col gap-3">
-              {postsData.map(({ data, id }) => (
-                <PostPreview
-                  title={data.title}
-                  date={data.date}
-                  excerpt={data.excerpt}
-                  slug={id}
-                  key={id}
-                />
-              ))}
+            {filteredPosts.length > 0 && <TimeLine />}
+            <div className="flex flex-col gap-3 w-full">
+              {filteredPosts.length > 0 ? (
+                filteredPosts.map(({ data, id, excerpt }) => (
+                  <PostPreview
+                    title={data.title}
+                    date={data.date}
+                    excerpt={excerpt}
+                    slug={id}
+                    key={id}
+                  />
+                ))
+              ) : (
+                <span className="text-center text-zinc-50 text-lg font-medium">
+                  No results was found :(
+                </span>
+              )}
             </div>
           </div>
         </div>
@@ -61,16 +82,17 @@ export default function Blog({ postsData }: { postsData: postsDataProps }) {
 }
 
 function TimeLine() {
-  return <div className="h-full w-2 rounded-lg bg-zinc-700 md:mr-10 mr-3" />;
+  return <div className="h-full w-1 rounded-lg bg-zinc-700 md:mr-10 mr-3" />;
 }
 
-type postsDataProps = {
+export type postsDataProps = {
   id: string;
   data: {
     date: string;
     title: string;
-    excerpt: string;
+    tags: string[];
   };
+  excerpt: string;
 }[];
 
 export async function getStaticProps() {

pages/index.tsx

@@ -2,27 +2,39 @@ import { links } from "../src/components/Header";
 import ColorText from "../src/components/ColorText";
 import Link from "next/link";
 import { CaretDown } from "phosphor-react";
+import Image from "next/image";
 
 function App() {
   return (
     <main className="bg-zinc-800">
       <div
         id="home"
-        className="h-[100vh] flex flex-col items-center justify-center p-5 bg-background bg-opacity-5 bg-zinc-700"
+        className="relative h-[100vh] flex flex-col items-center justify-center p-5 bg-zinc-950"
       >
-        <h1 className="font-bold text-[2.35rem] text-center leading-tight text-zinc-50 mt-auto">
+        <h1 className="font-bold text-[2.35rem] text-center leading-tight text-zinc-50 mt-auto z-10">
           Elevate your website design with powerful{" "}
           <ColorText
             Variant="span"
-            className="bg-clip-text bg-orange-fade text-transparent"
+            className="bg-clip-text bg-orange-fade text-transparent z-10"
           >
             CSS tools
           </ColorText>
           .
         </h1>
-        <a className="mt-auto animate-bounce text-orange-600" href="#tools">
+        <a
+          className="mt-auto animate-bounce text-orange-600 z-10"
+          href="#tools"
+        >
           <CaretDown size={32} />
         </a>
+        <div className="opacity-30">
+          <Image
+            src="/background.jpg"
+            fill
+            alt="background img"
+            className="object-cover pointer-events-none"
+          />
+        </div>
       </div>
       <div id="tools" className="p-10 flex flex-col items-center">
         <ColorText

posts/how-to-center-a-div.md

@@ -1,10 +1,14 @@
 ---
 title: "3 Ways To Center A Div"
 date: "2023-04-13"
-excerpt: "Centering a div element in CSS can sometimes be a challenging task, but fear not! There are several methods you can use to achieve this. In this article, we will explore three popular ways to center a div using English terms."
+tags:
+  - centering
+  - layout
 ---
 
-Centering a div element in CSS can sometimes be a challenging task, but fear not! There are several methods you can use to achieve this. In this article, we will explore three popular ways to center a div using English terms.
+Centering a div element in CSS can sometimes be a challenging task, but fear not! There are several methods you can use to achieve this. In this article, we will explore using English terms.
+
+<!-- end -->
 
 ## Method 1: Margin Auto
 

posts/teste-1.md

@@ -1,13 +1,16 @@
 ---
 date: "2023-04-14"
-title: "Test 1243564574745 odjfvofnv fnvi dfiob ogvnb fgvnb"
-excerpt: "CSS (Cascading Style Sheets) is a styling language used for web development to define the layout, appearance, and design of web pages. It works in conjunction with HTML (Hypertext Markup Language) to create visually appealing and user-friendly websites."
+title: "Introduction to CSS"
+tags:
+  - typography
+  - colors
+  - layout
 ---
 
-# Introduction to CSS
-
 CSS (Cascading Style Sheets) is a styling language used for web development to define the layout, appearance, and design of web pages. It works in conjunction with HTML (Hypertext Markup Language) to create visually appealing and user-friendly websites.
 
+<!-- end -->
+
 ## Benefits of CSS
 
 - Separation of Concerns: CSS allows developers to separate the content (HTML) from the presentation (CSS) and behavior (JavaScript), making it easier to manage and maintain web pages.

src/components/AxisBox.tsx

@@ -1,5 +1,4 @@
-import Draggable, { DraggableData } from "react-draggable";
-import ColorText from "./ColorText";
+import Draggable from "react-draggable";
 import InputText from "./InputText";
 
 interface AxisBoxProps {

src/components/Header.tsx

@@ -48,7 +48,7 @@ export default function Header() {
         (usePathname() === "/" || usePathname() === "/blog/"
           ? "absolute top-0 "
           : "relative ") +
-        "w-full flex flex-col justify-center items-center md:justify-start gap-5 p-6 md:flex-row"
+        "w-full flex flex-col justify-center items-center z-20 md:justify-start gap-5 p-6 md:flex-row"
       }
     >
       <Link href="/">