Added RSS feed.

assets/scripts/rss.js

@@ -0,0 +1,41 @@
+async function fetchRSSFeed(url) {
+    try {
+        const response = await fetch(url);
+        const data = await response.text();
+        return data;
+    } catch (error) {
+        console.error("Failed to fetch RSS feed:", error);
+        return null;
+    }
+}
+
+function parseRSSFeed(feedXML) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(feedXML, "text/xml");
+    const items = xmlDoc.querySelectorAll("item");
+    let html = "<ul>";
+
+    for (let i = 0; i < Math.min(items.length, 5); i++) {
+        const title = items[i].querySelector("title").textContent;
+        const link = items[i].querySelector("link").textContent;
+        html += `<a href="${link}" target="_blank">${title}</a><br><br>`;
+
+    };
+
+    html += "</ul>";
+    return html;
+}
+
+async function displayRSSFeed() {
+    const url = "https://tldr.tech/api/rss/tech"; //https://www.nist.gov/news-events/cybersecurity/rss.xml
+    const rssData = await fetchRSSFeed(url);
+
+    if (rssData) {
+        const feedHTML = parseRSSFeed(rssData);
+        document.getElementById("rss-feed").innerHTML = feedHTML;
+    } else {
+        document.getElementById("rss-feed").innerHTML = "Failed to load RSS feed.";
+    }
+}
+
+displayRSSFeed();

assets/style/style.css

@@ -35,7 +35,9 @@ body {
     background-attachment: scroll;
     z-index: 1;
 }
-
+ul {
+    padding-inline-start: 5px;
+}
 .email-link {
     position: absolute;
     top: 10px; /* Adjust the position as needed */

changelog.md

@@ -4,6 +4,9 @@ All notable changes to this site will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the versioning is consistent with [Semantic Versioning](https://semver.org/).
 
+## [0.3.0] - 2024-03-12
+### Added
+- RSS Feed to tl;dr tech news.
 
 ## [0.2.0] - 2024-03-12
 ### Added

homenetwork.html

@@ -72,16 +72,41 @@
                     </div>
 
                 </main>
+
                 <aside>
-                    <div class="sidebar-title">&nbsp; Navigation</div>
+                    <div class="sidebar-container">
-                    <nav id="nav">
+                    <div class="sidebar-title">Quick links</div>
-                        <ul>
+                        <nav id="nav"> 
-                            <li>
+                            <ul>
-                                <a href="./index.html">Home</a>
+                                <li>
-                            </li>
+                                    <a href="index.html">Home</a>
-                        </ul>
+                                </li>
-                    </nav>
+                            </ul>
+                            <ul>
+                                <li>
+                                    <a href="https://github.com/alexbazzi" target="_blank"><span class="fa-brands fa-github"></span>GitHub</a>
+                                </li>
+                            </ul>
+                            <ul>
+                                <li>
+                                    <a href="https://linkedin.com/in/alexbazzi" target="_blank"><span class="fa-brands fa-linkedin"></span>LinkedIn</a>
+                                </li>
+                            </ul>
+                            <a target='_blank' rel='noreferrer noopener'
+                                href='mailto:x@xbazzi.com'>
+                            <img style="height: 40px; margin: 10px;" src="assets/img/email.gif">
+                            </a>
+                        </nav>
+                    </div>
+
+                    <div class="sidebar-container">
+                        <div class="sidebar-title">RSS feeds</div>
+                        <div id="rss-feed">Loading...</div>
+                        <script src="assets/scripts/rss.js" crossorigin="anonymous"></script>
+
+                    </div>
                 </aside>
+
             </div>
             <footer id="footer"></footer>
         </div>

index.html

@@ -9,7 +9,8 @@
         <link rel="stylesheet" href="assets/style/style.css">
         <!-- <script src="assets/scripts/load.js"></script> -->
         <!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> -->
-        <script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>       <link rel="icon" href="/assets/images/fav.gif" type="image/gif">
+        <script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>       
+        <link rel="icon" href="/assets/images/fav.gif" type="image/gif">
     </head>
 
     <body>
@@ -34,8 +35,9 @@
                             <p class="update">12/05/2023: Finished the home datacenter project.</p>
                         </div>
 
-                        <div class="title"><span class="fa-solid fa-lightbulb"></span>  projects </div>
+        
-                        <div class="content flex">
+                            <div class="title"><span class="fa-solid fa-lightbulb"></span>  projects </div>
+                            <div class="content flex">
                             <a href="./homenetwork.html"><img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image"></a>
                             <p class="blog"><a href='./homenetwork.html'>
                                 Home datacenter
@@ -75,6 +77,13 @@
                             </a>
                         </nav>
                     </div>
+
+                    <div class="sidebar-container">
+                        <div class="sidebar-title">RSS feeds</div>
+                        <div id="rss-feed">Loading...</div>
+                        <script src="assets/scripts/rss.js" crossorigin="anonymous"></script>
+
+                    </div>
                 </aside>
             </div>
             <footer id="footer">