Skip to content

Commit

Permalink
Added dynamic rendering of recent blog post along with date
Browse files Browse the repository at this point in the history
  • Loading branch information
Sawan-Kushwah committed Nov 3, 2024
1 parent e0df45c commit 03e6ecb
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 18 deletions.
22 changes: 17 additions & 5 deletions frontend/src/pages/Blogs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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',
Expand Down
73 changes: 60 additions & 13 deletions frontend/src/styles/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -624,6 +624,14 @@ video {
top: 0.75rem;
}

.bottom-full {
bottom: 100%;
}

.left-0 {
left: 0px;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -694,6 +702,10 @@ video {
margin-top: 2rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -895,6 +923,12 @@ video {
overflow: hidden;
}

.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.whitespace-nowrap {
white-space: nowrap;
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand Down

0 comments on commit 03e6ecb

Please sign in to comment.