feat(blog): use hive feed for showing blog posts (#1863)

* f

* ff

* come on it worked with bun

* so prettier

Author: n1ru4l

pnpm-lock.yaml

@@ -0,0 +1 @@
+hive-blog-feed.json

website/lib/.gitignore

@@ -1,12 +1,13 @@
 import { format } from 'date-fns';
 import { asArray } from './as-array';
+import externalFeed from './hive-blog-feed.json';
 import { sortByDateDesc } from './sort-by-date';
 // eslint-disable-next-line import/no-useless-path-segments -- this will exist when we do `next build`
 import { pageMap } from '.next/static/chunks/nextra-page-map-.mjs';
 
 const blogFolder = pageMap.find(item => item.name === 'blog' && item.children).children;
 
-export const allBlogs = blogFolder
+const allInternalBlogs = blogFolder
   .filter(item => !item.data && item.route !== '/blog/tag')
   .map(blog => {
     if (blog.children) {
@@ -51,6 +52,21 @@ export const allBlogs = blogFolder
       thumbnail,
       canonical,
       updateDate: updateDate ? format(new Date(updateDate), 'y-MM-dd') : undefined,
+      isHive: false,
     };
-  })
-  .sort(sortByDateDesc);
+  });
+
+const allExternalBlogs = externalFeed.items.map(item => ({
+  title: item.title,
+  description: item.content,
+  tags: item.categories,
+  authors: [item.creator],
+  link: item.link,
+  image: null,
+  date: format(new Date(item.isoDate), 'y-MM-dd'),
+  thumbnail: null,
+  canonical: item.link,
+  updateDate: format(new Date(item.isoDate), 'y-MM-dd'),
+}));
+
+export const allBlogs = [...allInternalBlogs, ...allExternalBlogs].sort(sortByDateDesc);

website/lib/all-blogs.ts

@@ -0,0 +1,17 @@
+import * as fs from 'node:fs';
+import RSSParser from 'rss-parser';
+
+const parser = new RSSParser();
+
+await parser
+  .parseURL('https://the-guild.dev/graphql/hive/blog/feed.xml')
+  .then(feed =>
+    fs.writeFileSync(
+      import.meta.dirname + '/lib/hive-blog-feed.json',
+      JSON.stringify(feed, null, 2),
+    ),
+  )
+  .catch(err => {
+    console.log(err);
+    process.exit(1);
+  });

website/load-hive-feed.ts

@@ -6,10 +6,11 @@
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true pnpm build",
-    "build": "pnpm check-links && next build && next-sitemap",
+    "build": "pnpm load-hive-feed && pnpm check-links && next build && next-sitemap",
     "check-links": "tsx check-links.ts",
     "dev": "next",
     "export": "tsx rss-generator.ts",
+    "load-hive-feed": "tsx load-hive-feed.ts",
     "start": "next start"
   },
   "dependencies": {
@@ -33,6 +34,7 @@
     "react-dom": "18.3.1",
     "react-hot-toast": "2.5.2",
     "rss": "1.2.2",
+    "rss-parser": "3.13.0",
     "tailwind-merge": "^3.3.1",
     "yup": "1.6.1"
   },

website/package.json

@@ -36,11 +36,6 @@ export const BlogCardList = ({
           lg:[:is(&:hover,&:focus)>img]:h-36
           "
         >
-          <img
-            src={article.thumbnail ?? article.image}
-            alt="Article logo"
-            className="h-40 w-full object-cover transition-all duration-500"
-          />
           <div className="flex grow flex-col p-5">
             <Heading size="md" className="line-clamp-3 [hyphens:auto]">
               {article.title}
@@ -53,7 +48,7 @@ export const BlogCardList = ({
             </Description>
             <div className="mt-auto text-xs">
               <span className="font-bold dark:text-[#C4C4C4]">
-                {AUTHORS[article.authors[0]].name}
+                {AUTHORS[article.authors[0]]?.name ?? article.authors[0]}
               </span>
               <span className="before:content-['_•_'] dark:text-gray-500">
                 {format(new Date(article.date), 'LLL do y')}