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) {
@@ -146,17 +146,29 @@ function renderCategoriesWidget(blogPosts) {
`;
}
-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 `
`;
}
+
+
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));