feat: add search input, post views and scroolreveal

JefferMarcelino · Apr 9, 2024 · 294c686 · 294c686
1 parent f56b7b3
commit 294c686
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 10 deletions.
diff --git a/src/server.ts b/src/server.ts
@@ -28,11 +28,35 @@ const prisma = new PrismaClient();
 
 app.get("/", async (request, reply) => {
   try {
-    const posts = await prisma.post.findMany({
-      orderBy: {
-        createdAt: "desc"
-      }
-    });
+    const { s: searchTerm} = request.query as { s: string};
+
+    let posts: {
+      id: string;
+      title: string;
+      content: string;
+      createdAt: Date;
+      views: number;
+    }[];
+
+    if (searchTerm) {
+      posts = await prisma.post.findMany({
+        where: {
+          title: {
+            contains: searchTerm,
+            mode: "insensitive"
+          }
+        },
+        orderBy: {
+          createdAt: "desc"
+        }
+      });
+    } else {
+      posts = await prisma.post.findMany({
+        orderBy: {
+          createdAt: "desc"
+        }
+      });
+    };
 
     reply.type("text/html").code(200);
     return reply.view("index.ejs", { posts: posts.map(item => {
@@ -61,7 +85,18 @@ app.get("/post/:postId", async (request, reply) => {
     if (!post) {
       reply.code(404);
       return "Post not found";
-    }
+    };
+
+    await prisma.post.update({
+      where: {
+        id: postId
+      },
+      data: {
+        views: {
+          increment: 1
+        }
+      }
+    });
 
     const formattedCreatedAt = dayjs(post.createdAt).format("MMMM D, YYYY HH:mm");
 

diff --git a/src/templates/index.ejs b/src/templates/index.ejs
@@ -43,7 +43,7 @@
       color: white;
       padding: 20px;
       font-size: 1.2rem;
-      margin-bottom: 50px;
+      margin-bottom: 20px;
     }
 
     header .top {
@@ -80,6 +80,7 @@
       color: white;
       font-family: Inter;
       font-size: 14px;
+      width: 100%;
     }
 
     header .input input::placeholder {
@@ -108,6 +109,18 @@
       margin-bottom: .5rem;
     }
 
+    main .container-post div.top div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: .2rem;
+    }
+
+    main .container-post div.top div img {
+      max-width: 18px;
+      width: 100%;
+    }
+
     main .container-post h3 {
       color: var(--title);
       font-size: 18px;
@@ -126,6 +139,18 @@
       max-width: 730px;
       margin: auto;
     }
+
+    #search-message {
+      margin: 20px 0;
+      font-size: 2rem;
+      font-weight: bold;
+    }
+
+    @media screen and (max-width: 767px) {
+      #search-message {
+        font-size: 1.5rem;
+      }
+    } 
   </style>
 </head>
 
@@ -136,17 +161,28 @@
       <span>Blog</span>
     </div>
 
+    <form id="search-form" class="input" action="/" method="get">
+      <img src="https://github.com/JefferMarcelino/codelandia-challenges/blob/main/challenge1/images/search.png?raw=true" alt="Search">
+      <input id="search-input" type="text" name="s" placeholder="Search article">
+    </form>
+
     <p class="message">Powered by AI</p>
   </header>
 
   <main>
+    <p id="search-message"></p>
     <section>
       <% posts.forEach(post=> { %>
         <a class="container-post" href="/post/<%= post.id %>">
           <div class="top">
             <p class="date">
               <%= post.createdAt %>
             </p>
+
+            <div>
+              <img src="https://static.thenounproject.com/png/2040082-200.png" alt="Views icon">
+              <p><%= post.views %></p>
+            </div>
           </div>
 
           <h3 class="title">
@@ -161,6 +197,24 @@
   </main>
 
   <script src="https://unpkg.com/scrollreveal"></script>
+  <script>
+    const searchInput = document.getElementById("search-input");
+    const searchMessage = document.getElementById("search-message");
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchTerm = urlParams.get("s");
+
+    if (searchTerm) {
+      searchInput.value = searchTerm;
+      searchMessage.textContent = `Results for "${searchTerm}"`;
+    }
+
+    ScrollReveal().reveal('.container-post', {
+      duration: 1000,
+      delay: 200,
+      interval: 100
+    });
+  </script>
 </body>
 
 </html>
diff --git a/src/templates/post.ejs b/src/templates/post.ejs
@@ -55,6 +55,18 @@
       margin-bottom: .5rem;
     }
 
+    main .container-post div.top div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: .2rem;
+    }
+
+    main .container-post div.top div img {
+      max-width: 18px;
+      width: 100%;
+    }
+
     main .container-post p {
       font-size: 1rem;
       line-height: 26px;
@@ -66,6 +78,7 @@
     }
 
     main .container-post h1 {
+      font-size: 2.2rem;
       margin-bottom: 1rem;
     }
 
@@ -86,16 +99,28 @@
       list-style-position: inside;
     }
 
+    @media screen and (max-width: 767px) {
+      main .container-post h1 {
+        font-size: 1.5rem;
+      }
+    }
   </style>
 </head>
 
 <body>
   <main>
     <div class="container-post">
       <div>
-        <p class="date">
-          <%= post.createdAt %>
-        </p>
+        <div class="top">
+          <p class="date">
+            <%= post.createdAt %>
+          </p>
+
+          <div>
+            <img src="https://static.thenounproject.com/png/2040082-200.png" alt="Views icon">
+            <%= post.views %>
+          </div>
+        </div>
 
         <h1 class="title">
           <%= post.title %>