Add Shipping log section with the last 3 posts from the blog

packages/backend/index.js

@@ -14,6 +14,7 @@ const ensRoutes = require("./routes/ens");
 const apiRoutes = require("./routes/api");
 const cohortRoutes = require("./routes/cohorts");
 const notificationsRoutes = require("./routes/notifications");
+const blogRoutes = require("./routes/blog");
 
 const app = express();
 
@@ -31,6 +32,7 @@ app.use("/ens", ensRoutes);
 app.use("/api", apiRoutes);
 app.use("/cohorts", cohortRoutes);
 app.use("/notifications", notificationsRoutes);
+app.use("/blog", blogRoutes);
 
 app.get("/sign-message", async (req, res) => {
   const messageId = req.query.messageId;

packages/backend/routes/blog.js

@@ -0,0 +1,40 @@
+const express = require("express");
+const axios = require("axios");
+const xml2js = require("xml2js");
+
+const router = express.Router();
+
+router.get("/posts", async (req, res) => {
+  try {
+    const response = await axios.get("https://buidlguidl.substack.com/feed");
+    const xml = response.data;
+    const parser = new xml2js.Parser();
+
+    parser.parseString(xml, (err, result) => {
+      if (err) {
+        console.error("Failed to parse blog feed:", err);
+        res.status(500).json({ error: "Failed to parse blog feed" });
+      } else {
+        const posts = result.rss.channel[0].item.map(item => {
+          const date = new Date(item.pubDate[0]);
+          const formattedDate = `${date.toLocaleString('default', { month: 'short' }).toUpperCase()} ${date.getDate()}`;
+
+          return {
+            title: item.title[0],
+            description: item.description[0],
+            link: item.link[0],
+            pubDate: formattedDate,
+            imageUrl: item.enclosure ? item.enclosure[0].$.url : null
+          };
+        });
+
+        res.status(200).json(posts.slice(0, 3)); // Return the last 3 posts
+      }
+    });
+  } catch (error) {
+    console.error("Error fetching blog posts:", error);
+    res.status(500).json({ error: "Internal Server Error" });
+  }
+});
+
+module.exports = router;

packages/react-app/components/home/BlogSection.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Container, VStack, Box, Heading, Text, Image, Link, Flex } from '@chakra-ui/react';
+import useCustomColorModes from "../../hooks/useCustomColorModes";
+
+const BlogSection = ({ posts }) => {
+  const { baseColor, secondaryFontColor } = useCustomColorModes();
+
+  if (!posts || posts.length === 0) {
+    return null;
+  }
+
+  return (
+    <Container maxW="container.lg" mb="50px">
+      <Heading fontWeight="500" mb={8} mt={20}>
+        Shipping Log
+      </Heading>
+
+      {posts.map((post, index) => (
+        <Link key={index} href={post.link} isExternal>
+          <Box bg="transparent" w="full" mb={4}>
+            <Box bg={baseColor} rounded="md" shadow="md" w="full">
+              <Flex alignItems="stretch" justifyContent="space-between" w="full">
+                <VStack align="start" spacing={4} flex="1" p={6}>
+                  <Heading as="h3" size="md">{post.title}</Heading>
+                  <Text fontSize="sm" noOfLines={3}>{post.description}</Text>
+                  <Text color={secondaryFontColor} fontSize="sm">{post.pubDate}</Text>
+                </VStack>
+                <Image display={{ base: "none", md: "block" }} maxW="200px" src={post.imageUrl} alt={post.title} objectFit="cover" />
+              </Flex>
+            </Box>
+          </Box>
+        </Link>
+      ))}
+    </Container>
+  );
+};
+
+export default BlogSection;

packages/react-app/data/api/blog.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { SERVER_URL as serverUrl } from "../../constants";
+
+export const fetchRecentPosts = async () => {
+  try {
+    const response = await axios.get(`${serverUrl}/blog/posts`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching recent posts:", error);
+    return [];
+  }
+};

packages/react-app/pages/index.jsx

@@ -7,10 +7,12 @@ import { getStats } from "../data/api/builder";
 import HeroSection from "../components/home/HeroSection";
 import ActivitySection from "../components/home/ActivitySection";
 import { getAllEvents } from "../data/api";
+import BlogSection from "../components/home/BlogSection";
+import { fetchRecentPosts } from "../data/api/blog";
 const buildersToShow = ["fullstack", "frontend", "damageDealer", "advisor", "artist", "support"];
 
 /* eslint-disable jsx-a11y/accessible-emoji */
-export default function Index({ bgStats, events }) {
+export default function Index({ bgStats, events, posts }) {
   const [builders, setBuilders] = useState([]);
   const [isLoadingBuilders, setIsLoadingBuilders] = useState(false);
 
@@ -48,6 +50,8 @@ export default function Index({ bgStats, events }) {
 
       <ActivitySection events={events} />
 
+      <BlogSection posts={posts} />
+
       {/* Footer */}
       <Container maxW="container.md" centerContent>
         <Box mt="128px" mb="25px">
@@ -64,6 +68,7 @@ export default function Index({ bgStats, events }) {
 export async function getStaticProps() {
   const stats = await getStats();
   const events = await getAllEvents(null, 10);
+  const posts = await fetchRecentPosts();
 
   return {
     props: {
@@ -76,6 +81,7 @@ export async function getStaticProps() {
         streamedEthIncrementMonth: stats?.streamedEthIncrementMonth,
       },
       events,
+      posts,
     },
     // ToDo. Maybe a 15 min refresh? or load events in the frontend?
     // 6 hours refresh.