From 03e6ecb0cd5fb414c73224b9b18e0bdb9ae81b67 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Mon, 4 Nov 2024 00:10:53 +0530
Subject: [PATCH] Added dynamic rendering of recent blog post along with date

---
 frontend/src/pages/Blogs.js    | 22 +++++++---
 frontend/src/styles/output.css | 73 ++++++++++++++++++++++++++++------
 2 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/Blogs.js b/frontend/src/pages/Blogs.js
index 69e97281..2de20541 100644
--- a/frontend/src/pages/Blogs.js
+++ b/frontend/src/pages/Blogs.js
@@ -40,7 +40,7 @@ export async function renderBlogs(container) {
                     <aside class="md:w-1/3">
                         ${renderSearchWidget()}
                         ${renderCategoriesWidget(blogPosts)} <!-- Pass blogPosts to categories widget -->
-                        ${renderRecentPostsWidget()}
+                        ${renderRecentPostsWidget(blogPosts)}
                     </aside>
                 </div>
             </div>
@@ -146,17 +146,29 @@ function renderCategoriesWidget(blogPosts) {
         </div>`;
 }
 
-function renderRecentPostsWidget() {
+function renderRecentPostsWidget(blogPosts) {
+    // Sort blog posts by createdAt date in ascending order
+    blogPosts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
     return `<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Recent Posts</h2>
             <ul class="space-y-2">
-                <li><a href="/blog/post-4" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">The Art of Conversation</a></li>
-                <li><a href="/blog/post-5" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Idioms Around the World</a></li>
-                <li><a href="/blog/post-6" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Effective Note-Taking Strategies</a></li>
+                ${blogPosts.map(post => {
+        const postDate = new Date(post.createdAt);
+        const formattedDate = `${monthNames[postDate.getMonth()]} ${postDate.getDate()}, ${postDate.getFullYear()}`;
+        return `<li class="flex justify-between items-center">
+                                <a href="/blog/${post._id}" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white w-[70%]">${post.title}</a>
+                                <span class="text-sm text-gray-500 dark:text-gray-400 w-1/4">${formattedDate}</span>
+                            </li>`;
+    }).join('')}
             </ul>
         </div>`;
 }
 
+
+
 function formatDate(date) {
     return new Date(date).toLocaleDateString('en-US', {
         year: 'numeric',
diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
index abf5b9b3..eea6e96d 100644
--- a/frontend/src/styles/output.css
+++ b/frontend/src/styles/output.css
@@ -624,6 +624,14 @@ video {
   top: 0.75rem;
 }
 
+.bottom-full {
+  bottom: 100%;
+}
+
+.left-0 {
+  left: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -694,6 +702,10 @@ video {
   margin-top: 2rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -795,10 +807,26 @@ video {
   width: 100%;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-\[70\%\] {
+  width: 70%;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
 
+.max-w-\[200px\] {
+  max-width: 200px;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -895,6 +923,12 @@ video {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1277,6 +1311,11 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .text-green-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
@@ -1332,9 +1371,8 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
+.opacity-0 {
+  opacity: 0;
 }
 
 .shadow-lg {
@@ -1383,6 +1421,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -1391,6 +1435,10 @@ video {
   transition-duration: 300ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1438,6 +1486,11 @@ body.dark-mode {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-indigo-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
@@ -1463,11 +1516,6 @@ body.dark-mode {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1567,6 +1615,10 @@ body.dark-mode {
   --tw-ring-offset-width: 2px;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 .dark\:border-gray-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1737,11 +1789,6 @@ body.dark-mode {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.dark\:hover\:bg-green-600:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
 .dark\:hover\:text-indigo-500:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(99 102 241 / var(--tw-text-opacity));