Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added dynamic rendering of recent blog post along with date #1652

Merged
merged 1 commit into from
Nov 3, 2024
Merged

Added dynamic rendering of recent blog post along with date #1652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions frontend/src/pages/Blogs.js
View file
Open in desktop
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
View file
Open in desktop
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
Loading