[home] blog posts

Author: paulgirard

package-lock.json

@@ -13,7 +13,6 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/markdown-remark": "^6.3.7",
     "@astrojs/react": "^4.4.0",
-    "@astropub/md": "^1.0.0",
     "@cospired/i18n-iso-languages": "^4.2.0",
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/ph": "^1.2.2",
@@ -26,6 +25,7 @@
     "marked": "^16.3.0",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
+    "rss-parser": "^3.13.0",
     "sass": "^1.93.2",
     "typescript": "^5.9.2"
   },

package.json

@@ -0,0 +1,38 @@
+---
+import { identity } from "lodash-es";
+import Parser from "rss-parser";
+
+const feedUrl = "https://gephi.wordpress.com/feed/";
+
+const parser = new Parser<{ [key: string]: any }, { "media:thumbnail"?: { $: { url: string } } }>({
+  timeout: 2000,
+  customFields: {
+    item: ["media:thumbnail"],
+  },
+});
+const feed = await parser.parseURL(feedUrl);
+
+const dateFormatter = new Intl.DateTimeFormat("en-EN", { dateStyle: "long" });
+---
+
+<section class="blog-posts">
+  <h2>Latest posts on Gephi's blog</h2>
+  <div class="d-flex flex-wrap gap-4 w-100">
+    {
+      feed.items.slice(0, 4).map((item) => (
+        <article class="blog-post">
+          {" "}
+          {item["media:thumbnail"] && <img src={item["media:thumbnail"]?.$.url} />}
+          <a href={item.link}>
+            <h4>{item.title}</h4>
+          </a>
+          <div>{item.contentSnippet}</div>
+          <div class="text-end text-muted">
+            by{" "}
+            {[item.creator, item.pubDate && dateFormatter.format(new Date(item.pubDate))].filter(identity).join(" on ")}
+          </div>
+        </article>
+      ))
+    }
+  </div>
+</section>

src/components/BlogRSS.astro

@@ -2,6 +2,7 @@
 import { Image } from "astro:assets";
 
 import { Icon } from "astro-icon/components";
+import BlogRSS from "../components/BlogRSS.astro";
 import DownloadGephiDesktop from "../components/DownloadGephiDesktop.astro";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -226,5 +227,8 @@ import Layout from "../layouts/Layout.astro";
         </div>
       </section>
     </section>
+    <section>
+      <BlogRSS />
+    </section>
   </main>
 </Layout>

src/pages/index.astro

@@ -245,3 +245,28 @@ a.no-decoration {
   text-decoration: none;
   color: inherit;
 }
+
+.blog-posts {
+  .blog-post {
+    width: calc(50% - 1.5rem / 2);
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+
+    @extend .p-4;
+    @extend .shadow;
+    background: #fffffff6;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    row-gap: 0.5rem;
+    img {
+      max-width: 100%;
+      max-height: 50%;
+      object-fit: contain;
+    }
+  }
+}