building it out

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

src/components/article.astro

@@ -0,0 +1,19 @@
+---
+import type { Item } from "rss-parser";
+
+interface Props {
+    article: Item; // Accept an array of Items
+}
+
+const { article } = Astro.props;
+---
+
+<div class="article">
+    <h1>{article}</h1>
+</div>
+
+<style>
+    .article {
+        color: white;
+    }
+</style>

src/components/nav.astro

@@ -1,26 +1,18 @@
 ---
-const catagories = {
-    All: "/",
-    Tech: "tech",
-    "USA News": "usa-news",
-    "World News": "world-news",
-};
-
-let { cat } = Astro.params;
-
-cat = !cat ? "/" : cat;
-
-console.log(catagories["USA News"]);
-console.log(cat);
+const { cat, articles } = Astro.props;
 ---
 
 <div class="container">
     <div class="navbar">
         {
-            Object.keys(catagories).map((c) => (
+            Object.keys(articles).map((c) => (
                 <a
-                    class={cat == catagories[c] ? "selected" : ""}
-                    href={catagories[c]}
+                    class={
+                        cat == articles[c as keyof typeof articles].path
+                            ? "selected"
+                            : ""
+                    }
+                    href={articles[c as keyof typeof articles].path}
                 >
                     {c}
                 </a>

src/components/sidebar.astro

@@ -0,0 +1,53 @@
+---
+const { catagory, articles, parser } = Astro.props;
+---
+
+<div class="container">
+    <div class="sidebar">
+        {
+            articles[catagory as keyof typeof articles]!.feeds.map(
+                async (feed: string) => (
+                    <a>{(await parser.parseURL(feed)).title}</a>
+                ),
+            )
+        }
+    </div>
+</div>
+
+<style>
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        gap: 30px;
+
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    .container {
+        position: absolute;
+
+        top: 25%;
+
+        left: 2%;
+
+        height: fit-content;
+        width: 15%;
+
+        border: 2px solid #ccc;
+        border-radius: 5px;
+    }
+
+    a {
+        font-size: 20px;
+
+        max-width: 80%;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

src/feeds.js

@@ -0,0 +1,32 @@
+let articles = {
+  All: {
+    path: "/",
+    feeds: [],
+  },
+  Tech: {
+    feeds: ["https://techcrunch.com/feed/"],
+    path: "tech",
+  },
+  "USA News": {
+    feeds: [
+      "https://feeds.nbcnews.com/nbcnews/public/news",
+      "https://abcnews.go.com/abcnews/topstories",
+      "https://www.cbsnews.com/latest/rss/main",
+    ],
+    path: "usa-news",
+  },
+  "World News": {
+    feeds: [
+      "https://feeds.nbcnews.com/nbcnews/public/news",
+      "https://www.cnbc.com/id/100727362/device/rss/rss.html",
+    ],
+    path: "world-news",
+  },
+};
+
+Object.keys(articles).forEach((catagory) => {
+  if (catagory == "All") return;
+  articles.All.feeds = articles.All.feeds.concat(articles[catagory].feeds);
+});
+
+export default articles;

src/pages/[...cat].astro

@@ -1,6 +1,40 @@
 ---
+import articles from "feeds.js";
+
 import Nav from "@components/nav.astro";
+import Sidebar from "@components/sidebar.astro";
 import Layout from "@layouts/layout.astro";
+import Article from "@components/article.astro";
+
+import Parser from "rss-parser";
+
+let parser = new Parser();
+
+let { cat } = Astro.params;
+
+cat = !cat ? "/" : cat;
+
+const catagory: string | undefined = Object.keys(articles).find(
+    (catagory) => articles[catagory as keyof typeof articles].path == cat,
+);
+
+const feedList = articles[catagory as keyof typeof articles].feeds;
+
+console.log(feedList);
 ---
 
-<Layout> <Nav /> </Layout>
+<Layout>
+    <Nav {cat} {articles} />
+    <Sidebar {catagory} {articles} {parser} />
+
+    {
+        feedList.map(async (feed) =>
+            (await parser.parseURL(feed)).items.forEach((item) => {
+                {
+                    console.log(item.title);
+                }
+                <Article article={item} />;
+            }),
+        )
+    }
+</Layout>