Merge pull request #37 from FokkoVeegens/20-solve-cors-issue-for-visu…

…al-studio-feeds

Solve CORS issues for Visual Studio feeds

.vscode/launch.json

@@ -10,8 +10,14 @@
                 "run",
                 "dev"
             ],
-            "port": 3000, // Default port for Vite development server
             "console": "integratedTerminal",
+            "env": {
+                "NO_COLOR": "1"
+            },
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bhttp://localhost:([0-9]+)\\b",
+            }
         }
     ]
 }

src/pages/Index.jsx

@@ -26,8 +26,8 @@ const Index = () => {
   }, []);
 
   useEffect(() => {
-    const fetchRSSItems = async () => {;
-
+    const fetchRSSItems = async () => {
+      const proxyUrl = 'https://corsproxy.io/?url=';
       const counts = {};
       let totalItems = 0;
       const uniqueItems = new Map();
@@ -36,8 +36,7 @@ const Index = () => {
         try {
           let response;
           if (feed.cors) {
-            // Todo: Use a proxy to avoid CORS issues
-            continue;
+            response = await fetch(proxyUrl + encodeURIComponent(feed.url)).then(res => res.text());
           } else {
             response = await fetch(feed.url).then(res => res.text());
           }
@@ -67,7 +66,9 @@ const Index = () => {
         }
       }
 
-      uniqueItems.forEach((value, title) => {
+      const sortedItems = Array.from(uniqueItems.entries()).sort((a, b) => new Date(b[1].pubDate) - new Date(a[1].pubDate));
+
+      sortedItems.forEach(([title, value]) => {
         const newsItem = document.createElement('div');
         newsItem.className = 'news-item';
         newsItem.innerHTML = `
@@ -148,8 +149,7 @@ const Index = () => {
         <div id="filter-buttons">
           <button className="filter-btn" onClick={unselectFiltersAndShowAll}>All ({totalItemCount})</button>
           {
-          feeds.filter(feed => !feed.cors)
-               .map(feed => (
+          feeds.map(feed => (
             <button
               key={feed.name}
               className="filter-btn"

src/styles.css

@@ -220,6 +220,8 @@ a {
 }
 
 .news-item {
+    flex: 1 1 100%; /* Adjust the width as needed */
+    box-sizing: border-box; /* Ensure padding and border are included in the width */
     max-width: 600px;
     margin: 10px;
     padding: 15px;

vite.config.mjs

@@ -20,6 +20,7 @@ export default defineConfig({
   base: basename,
   build: {
     outDir: 'dist',
+    sourcemap: true,
   },
   publicDir: 'public',
   define: {