feat: add published date to blog list (#640)

tattle-made · Dec 23, 2024 · 272f9dc · 272f9dc
1 parent 3c85953
commit 272f9dc
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/uli-website/src/pages/blog/index.jsx b/uli-website/src/pages/blog/index.jsx
@@ -1,12 +1,18 @@
 import React from "react";
-import { Box, Heading, Text, Anchor, Paragraph } from "grommet";
+import { Box, Heading, Text, Paragraph } from "grommet";
 import { graphql } from "gatsby";
 import AppShell from "../../components/molecules/AppShell";
 import { NavLink } from "../../components/atoms/UliCore";
 
 const BlogIndex = ({ data }) => {
   const blogs = data.allMdx.nodes;
-  console.log(blogs);
+
+  // Function to convert timestamp to readable date
+  const formatDate = (timestamp) => {
+    const date = new Date(parseInt(timestamp)); // Timestamp ko date mein convert kar rahe hain
+    return date.toLocaleDateString(); // Date ko readable format mein dikhana
+  };
+
   return (
     <AppShell>
       <Box align="center" margin={"large"}>
@@ -15,12 +21,18 @@ const BlogIndex = ({ data }) => {
           <Box>
             {blogs.map((blog) => {
               return (
-                <Box>
+                <Box key={blog.fields.slug} margin={{ bottom: "medium" }}>
                   <NavLink to={`${blog.fields.slug}`}>
-                    <Paragraph fill>
+                    <Paragraph fill margin="none">
                       <Text size={"xlarge"}>{blog.frontmatter.name}</Text>,
-                      <Text>{" " + blog.frontmatter.author}</Text>
+                      <Text> {blog.frontmatter.author}</Text>
                     </Paragraph>
+                    {/* Publish date ko yahan display kiya gaya hai */}
+                    <Text size="small"
+                      color="grey"
+                      margin={{ top: "xxsmall" }}>
+                      Published on: {formatDate(blog.frontmatter.date)}
+                    </Text>
                   </NavLink>
                 </Box>
               );