add a shrimple rss aggregator

Author: DethRaid

README.md

@@ -5,6 +5,7 @@ The Graphics Programming Blog - A collection of technical articles, project post
 ## Things which work
 - You can create articles and project posts
 - LaTeX/KaTeX works
+- Blog feed aggregator
 
 ## Things which don't work yet
 - Search
@@ -54,7 +55,45 @@ The Graphics Programming Blog - A collection of technical articles, project post
   ```bash
   cd blog
   npm i
-  npm run start 
+  npm run start
   ```
 
 - `http://localhost:3000` should open automatically
+
+## Adding a blog feed
+
+This site can aggregate blogs from around the web! Here's how to get in on that:
+
+- fork the repo and clone your fork
+- add your blog's RSS feed to the `plugins.data` field of `docusaurus.config.ts`
+
+  ```typescript
+    plugins: [
+      [
+         '@1password/docusaurus-plugin-stored-data',
+        {
+          data: {
+            "Froyok Dev Blog": "https://www.froyok.fr/rss.xml",
+            your blog goes here! example:
+            "the flyswatter weekly": "https://example.com/flyswatter/rss.xml"
+          }
+        }
+      ],
+    ],
+  ```
+
+- add your blog to the `dataSources` field in `src/components/HomepageFeatures/index.tsx`:
+
+  ```typescript
+  const FeedItems = () => {
+  const dataSources = [
+    useStoredFeed("Froyok Dev Blog"),
+    useStoredFeed("the flywratter weekly"),
+  ];
+  ```
+
+- and that's it! make a pull request and your RSS feed will be automatically added to the blog feed!
+
+### WARNING
+
+The blog aggregator ONLY supports RSS. Atom feeds are unsupported

docusaurus.config.ts

@@ -32,6 +32,14 @@ const config: Config = {
         languages: ["en"], // language codes
       },
     ],
+    [
+       '@1password/docusaurus-plugin-stored-data',
+      {
+        data: {
+          "Froyok Dev Blog": "https://www.froyok.fr/rss.xml",
+        }
+      }
+    ],
   ],
 
   // Even if you don't use internationalization, you can use this field to set

package-lock.json

@@ -15,6 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@1password/docusaurus-plugin-stored-data": "^1.0.0",
     "@docusaurus/core": "3.5.2",
     "@docusaurus/preset-classic": "3.5.2",
     "@mdx-js/react": "^3.0.0",

package.json

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import useStoredFeed from "@theme/useStoredFeed";
 
 type FeatureItem = {
   title: string;
@@ -25,6 +26,43 @@ function Feature({title, Svg, description}: FeatureItem) {
   );
 }
 
+interface BlogItem {
+  source: string;
+  guid: string;
+  title: string;
+  pubDate: Date;
+  link: string;
+}
+
+const FeedItems = () => {
+  const dataSources = [
+    useStoredFeed("Froyok Dev Blog"),
+  ];
+
+  const feedData: BlogItem[] = [];
+  
+  // merge the feeds into one
+  dataSources.forEach((source) => source.item.forEach(({guid, title, pubDate, link}) => feedData.push({
+    source: source.title,
+    guid,
+    title,
+    pubDate: new Date(Date.parse(pubDate)),
+    link
+  })));
+
+  // sort by date
+  feedData.sort((itema: BlogItem, itemb: BlogItem) => (itema.pubDate < itemb.pubDate ? 1 : -1));
+
+  // render
+  return (
+    <ul>
+      {feedData.slice(0, 9).map((item: BlogItem) => (
+        <li key={item.guid}><a href={item.link}>{item.source}: {item.title} ({item.pubDate.toLocaleDateString()})</a></li>
+      ))}
+    </ul>
+  );
+};
+
 export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
@@ -34,6 +72,12 @@ export default function HomepageFeatures(): JSX.Element {
             <Feature key={idx} {...props} />
           ))}
         </div>
+        <div className="row">
+          <h2>The latest news from around the swamp:</h2>
+          <p>
+            <FeedItems />
+          </p>
+        </div>
       </div>
     </section>
   );