madebydanny.uk written in html, css, and a lot of JavaScript I don't understand madebydanny.uk
html css javascript
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

added new text bite

+252 -64
+1 -1
index.html
··· 157 157 158 158 <!-- RSS Feed(s)--> 159 159 <section> 160 - <h2 class="text-2xl font-bold text-gray-900 mb-4">Text Bites <i class="fa-solid fa-arrow-trend-up"></i></h2> 160 + <h2 class="text-2xl font-bold text-gray-900 mb-4">Text Bites <i class="fa-solid fa-book text-lg"></i></h2> 161 161 <div class="articles" id="textbites"></div> 162 162 </section> 163 163
+60 -45
rssloader/textbites.js
··· 1 + async function loadArticles() { 2 + const RSS_URL = "/textbites/feed.xml"; // your local file 3 + try { 4 + const response = await fetch(RSS_URL); 5 + const text = await response.text(); 6 + const parser = new DOMParser(); 7 + const xml = parser.parseFromString(text, "text/xml"); 1 8 2 - async function loadArticles() { 3 - const RSS_URL = "https://danielmorrisey.com/textbites/feed.xml"; 4 - try { 5 - // fetch RSS feed via CORS proxy 6 - const response = await fetch("https://corsproxy.io/?" + encodeURIComponent(RSS_URL)); 7 - const text = await response.text(); 8 - const parser = new DOMParser(); 9 - const xml = parser.parseFromString(text, "text/xml"); 9 + const items = [...xml.querySelectorAll("item")].slice(0, 3); 10 + const container = document.getElementById("textbites"); 11 + container.innerHTML = ""; 12 + 13 + items.forEach(item => { 14 + const title = item.querySelector("title")?.textContent || "Untitled"; 15 + const link = item.querySelector("link")?.textContent || "#"; 16 + const description = item.querySelector("description")?.textContent || ""; 17 + let image = ""; 10 18 11 - const items = [...xml.querySelectorAll("item")].slice(0, 3); 12 - const container = document.getElementById("textbites"); 13 - container.innerHTML = ""; 19 + // 1. Try <img> inside description 20 + const imgMatch = description.match(/<img[^>]+src="([^">]+)"/); 21 + if (imgMatch) { 22 + image = imgMatch[1]; 23 + } 14 24 15 - items.forEach(item => { 16 - const title = item.querySelector("title")?.textContent || "Untitled"; 17 - const link = item.querySelector("link")?.textContent || "#"; 18 - const description = item.querySelector("description")?.textContent || ""; 19 - let image = ""; 25 + // 2. Try <content:encoded> 26 + const encoded = item.querySelector("content\\:encoded")?.textContent; 27 + if (!image && encoded) { 28 + const encodedMatch = encoded.match(/<img[^>]+src="([^">]+)"/); 29 + if (encodedMatch) { 30 + image = encodedMatch[1]; 31 + } 32 + } 20 33 21 - // Try to find an image 22 - const encoded = item.querySelector("content\\:encoded")?.textContent; 23 - if (encoded && encoded.match(/<img[^>]+src="([^">]+)"/)) { 24 - image = encoded.match(/<img[^>]+src="([^">]+)"/)[1]; 25 - } 26 - const enclosure = item.querySelector("enclosure"); 27 - if (!image && enclosure) { 28 - image = enclosure.getAttribute("url"); 29 - } 34 + // 3. Try <enclosure> 35 + const enclosure = item.querySelector("enclosure"); 36 + if (!image && enclosure) { 37 + image = enclosure.getAttribute("url"); 38 + } 30 39 31 - // Build card 32 - const card = document.createElement("div"); 33 - card.className = "card"; 34 - card.innerHTML = ` 35 - <a href="${link}" target="_blank"> 36 - <img src="${image || 'https://placehold.co/600x400?text=No+Image'}" alt="${title}"> 37 - </a> 38 - <div class="card-content"> 39 - <a href="${link}" target="_blank"> 40 - <h3>${title}</h3> 41 - <p>${description.replace(/(<([^>]+)>)/gi, "").substring(0, 100)}...</p> 42 - </a> 43 - </div> 44 - `; 45 - container.appendChild(card); 46 - }); 47 - } catch (err) { 48 - console.error("Error loading RSS feed:", err); 40 + // 4. Try <media:content> 41 + const media = item.querySelector("media\\:content"); 42 + if (!image && media) { 43 + image = media.getAttribute("url"); 49 44 } 50 - } 51 45 52 - loadArticles(); 46 + // Build card 47 + const card = document.createElement("div"); 48 + card.className = "card"; 49 + card.innerHTML = ` 50 + <a href="${link}" target="_blank"> 51 + <img src="${image || 'https://placehold.co/300x200?text=No+Image'}" alt="${title}"> 52 + </a> 53 + <div class="card-content"> 54 + <a href="${link}" target="_blank"> 55 + <h3>${title}</h3> 56 + <p>${description.replace(/(<([^>]+)>)/gi, "").substring(0, 100)}...</p> 57 + </a> 58 + </div> 59 + `; 60 + container.appendChild(card); 61 + }); 62 + } catch (err) { 63 + console.error("Error loading RSS feed:", err); 64 + } 65 + } 66 + 67 + loadArticles();
+43 -16
textbites/feed.xml
··· 18 18 </image> 19 19 20 20 <item> 21 + <title>MBD Status now uses Better Stack</title> 22 + <link>https://danielmorrisey.com/textbites/mbdstatus.html</link> 23 + <description><![CDATA[ 24 + <p>Faster alerts, higher uptime, and better everything</p> 25 + <img src="https://public-danielmorrisey-com.danielmorrisey.com/media/bafkreibhgywir5ta2fc2eml25afs7axlthdilurni7xks6asjmyf7awkjm.jpg" alt="Mac Mini on desk" width="600"/> 26 + ]]></description> 27 + <pubDate>Mon, 18 Aug 2024 12:00:00 GMT</pubDate> 28 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/mbdstatus.html</guid> 29 + <media:content url="https://public-danielmorrisey-com.danielmorrisey.com/media/bafkreibhgywir5ta2fc2eml25afs7axlthdilurni7xks6asjmyf7awkjm.jpg" medium="image" type="image/jpeg" /> 30 + </item> 31 + 32 + <item> 21 33 <title>Mac mini update, 2 weeks later</title> 22 - <link>https://danielmorrisey.com/extbites/macminiupdateaug15.html</link> 23 - <description><![CDATA[I still can’t believe it’s 5’ x 5’ and yet so powerful]]></description> 24 - <pubDate>Fri, 16 Aug 2024 12:00:00 GMT</pubDate> 25 - <guid isPermaLink="true">https://danielmorrisey.com/extbites/macminiupdateaug15.html</guid> 34 + <link>https://danielmorrisey.com/textbites/macminiupdateaug15.html</link> 35 + <description><![CDATA[ 36 + <p>I still can’t believe it’s 5’ x 5’ and yet so powerful</p> 37 + <img src="https://public-danielmorrisey-com.danielmorrisey.com/media/mac-mini-m4-desk1.jpeg.webp" alt="Mac Mini on desk" width="600"/> 38 + ]]></description> 39 + <pubDate>Fri, 15 Aug 2024 12:00:00 GMT</pubDate> 40 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/macminiupdateaug15.html</guid> 26 41 <media:content url="https://public-danielmorrisey-com.danielmorrisey.com/media/mac-mini-m4-desk1.jpeg.webp" medium="image" type="image/jpeg" /> 27 42 </item> 28 43 29 44 <item> 30 45 <title>I got a Mac Mini</title> 31 - <link>https://danielmorrisey.com/igotamacmini.html</link> 32 - <description><![CDATA[It might be mini, but it sure is fast!]]></description> 46 + <link>https://danielmorrisey.com/textbites/igotamacmini.html</link> 47 + <description><![CDATA[ 48 + <p>It might be mini, but it sure is fast!</p> 49 + <img src="https://public-danielmorrisey-com.danielmorrisey.com/media/Screenshot%202025-08-05%20at%201.13.08%E2%80%AFPM.png" alt="Mac Mini Screenshot" width="600"/> 50 + ]]></description> 33 51 <pubDate>Tue, 05 Aug 2024 12:00:00 GMT</pubDate> 34 - <guid isPermaLink="true">https://danielmorrisey.com/igotamacmini.html</guid> 52 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/igotamacmini.html</guid> 35 53 <media:content url="https://public-danielmorrisey-com.danielmorrisey.com/media/Screenshot%202025-08-05%20at%201.13.08%E2%80%AFPM.png" medium="image" type="image/jpeg" /> 36 54 </item> 37 55 38 56 <item> 39 57 <title>I need a Bluesky version of mastodon’s deck layout</title> 40 - <link>https://danielmorrisey.com/blueskydeck.html</link> 41 - <description><![CDATA[Just like Mastodon, Threads also has a “deck” layout for desktop users. And my 3 main social media platforms I use are Bluesky, Mastodon, and Threads. Having a Bluesky Deck layout for desktop would be nice to have.]]></description> 58 + <link>https://danielmorrisey.com/textbites/blueskydeck.html</link> 59 + <description><![CDATA[ 60 + <p>Just like Mastodon, Threads also has a “deck” layout for desktop users. And my 3 main social media platforms I use are Bluesky, Mastodon, and Threads. Having a Bluesky Deck layout for desktop would be nice to have.</p> 61 + <img src="https://placehold.co/600x400?text=No+Image" alt="Placeholder image" width="600"/> 62 + ]]></description> 42 63 <pubDate>Sun, 03 Aug 2024 12:00:00 GMT</pubDate> 43 - <guid isPermaLink="true">https://danielmorrisey.com/blueskydeck.html</guid> 64 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/blueskydeck.html</guid> 44 65 <media:content url="https://placehold.co/600x400?text=No+Image" medium="image" type="image/jpeg" /> 45 66 </item> 46 67 47 68 <item> 48 69 <title>The Power of Hashtags</title> 49 - <link>https://danielmorrisey.com/thepowerofhashtags.html</link> 50 - <description><![CDATA[All it takes is one # to reach an audience of 100+]]></description> 70 + <link>https://danielmorrisey.com/textbites/hepowerofhashtags.html</link> 71 + <description><![CDATA[ 72 + <p>All it takes is one # to reach an audience of 100+</p> 73 + <img src="https://placehold.co/600x400?text=No+Image" alt="Placeholder image" width="600"/> 74 + ]]></description> 51 75 <pubDate>Sun, 03 Aug 2024 12:00:00 GMT</pubDate> 52 - <guid isPermaLink="true">https://danielmorrisey.com/thepowerofhashtags.html</guid> 76 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/thepowerofhashtags.html</guid> 53 77 <media:content url="https://placehold.co/600x400?text=No+Image" medium="image" type="image/jpeg" /> 54 78 </item> 55 79 56 80 <item> 57 81 <title>MBD is working on MBDIO</title> 58 - <link>https://danielmorrisey.com/mbdio.html</link> 59 - <description><![CDATA[MBD is working on a new tool called MBDIO, it's a simple, easy & fast link shortener that will allow you to shorten links and share them.]]></description> 82 + <link>https://danielmorrisey.com/textbites/mbdio.html</link> 83 + <description><![CDATA[ 84 + <p>MBD is working on a new tool called MBDIO, it's a simple, easy & fast link shortener that will allow you to shorten links and share them.</p> 85 + <img src="https://placehold.co/600x400?text=No+Image" alt="Placeholder image" width="600"/> 86 + ]]></description> 60 87 <pubDate>Sat, 02 Aug 2024 12:00:00 GMT</pubDate> 61 - <guid isPermaLink="true">https://danielmorrisey.com/mbdio.html</guid> 88 + <guid isPermaLink="true">https://danielmorrisey.com/textbites/mbdio.html</guid> 62 89 <media:content url="https://placehold.co/600x400?text=No+Image" medium="image" type="image/jpeg" /> 63 90 </item> 64 91
+14 -2
textbites/index.html
··· 69 69 <br> 70 70 <!-- Text Bites List Container --> 71 71 <div id="projectsList" class="space-y-6"> 72 + <!-- mbdstatus.html --> 73 + <div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md"> 74 + <h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">MBD Status now uses Better Stack</h4> 75 + <div class="text-sm text-gray-500 mb-4"> 76 + <span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Mon Aug 18</span> 77 + <span><i class="fa-solid fa-clock"></i> 45 Sec Read</span> 78 + </div> 79 + <p class="mt-2 text-gray-700 leading-relaxed textbite-description"> 80 + Faster alerts, higher uptime, and better everything 81 + </p> 82 + <a href="mbdstatus.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a> 83 + </div> 72 84 <!-- macminiupdateaug15.html --> 73 85 <div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md"> 74 86 <h4 class="text-xl font-semibold mb-2 text-gray-900 textbite-title">Mac mini update, 2 weeks later</h4> 75 87 <div class="text-sm text-gray-500 mb-4"> 76 - <span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Fri Aug 16</span> 88 + <span class="mr-3"><i class="fa-solid fa-calendar-alt"></i> Fri Aug 15</span> 77 89 <span><i class="fa-solid fa-clock"></i> 1 Min Read</span> 78 90 </div> 79 91 <p class="mt-2 text-gray-700 leading-relaxed textbite-description"> 80 92 I still can’t believe it’s 5’ x 5’ and yet so powerful 81 93 </p> 82 - <a class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300" href="https://raindrop.madebydanny.uk/?add=1&link=https://daniemorrisey.com/extbites/macminiupdateaug15.html&title=Daniel Morrisey - Mac mini Update, 2 weeks later"><i class="fa-solid fa-bookmark"></i></a> <a href="macminiupdateaug15.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a> 94 + <a href="macminiupdateaug15.html" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">Read More...</a> 83 95 </div> 84 96 <!-- igotamacmini.html --> 85 97 <div class="textbite-card bg-gray-50 p-6 rounded-2xl shadow-md">
+134
textbites/mbdstatus.html
··· 1 + <!DOCTYPE html> 2 + <html lang="en"> 3 + <head> 4 + <meta charset="UTF-8"> 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <title>MBD Status now uses Better Stack - Daniel Morrisey</title> 7 + 8 + <meta name="description" content="Faster alerts, higher uptime, and better everything"/> 9 + <meta name="keywords" content="Danile Morrisey, Danny Morrisey, MBD, Made by Danny, Made by Danny UK"/> 10 + <meta name="author" content="Daniel Morrisey"/> 11 + 12 + <meta property="og:type" content="website"/> 13 + <meta property="og:url" content="https://danielmorrisey.com/"/> 14 + <meta property="og:title" content="MBD Status now uses Better Stack - Daniel Morrisey"/> 15 + <meta property="og:description" content="Faster alerts, higher uptime, and better everything"/> 16 + <meta property="og:image" content="https://public-danielmorrisey-com.danielmorrisey.com/media/bafkreibhgywir5ta2fc2eml25afs7axlthdilurni7xks6asjmyf7awkjm.jpg"/> 17 + 18 + <!-- Google Fonts for a clean font --> 19 + <link rel="preconnect" href="https://fonts.googleapis.com"> 20 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 21 + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> 22 + 23 + <!-- Status Banner --> 24 + <script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="223534" async="async" type="text/javascript"></script> 25 + 26 + <!-- Tailwind CSS CDN --> 27 + <script src="https://cdn.tailwindcss.com"></script> 28 + 29 + <!-- Font Awesome CDN --> 30 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" xintegrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 31 + 32 + <style> 33 + body { 34 + font-family: 'Inter', sans-serif; 35 + } 36 + </style> 37 + </head> 38 + <body class="bg-gray-100 text-gray-800 antialiased leading-relaxed"> 39 + 40 + <!-- Main Container --> 41 + <div class="min-h-screen flex items-center justify-center p-4"> 42 + 43 + <!-- Card-like container for the content --> 44 + <div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 w-full max-w-4xl"> 45 + 46 + <!-- Header Section --> 47 + <header class="flex flex-col items-center mb-8 text-center"> 48 + <a href="/index.html" class="flex flex-col items-center"> 49 + <img src="https://public-danielmorrisey-com.danielmorrisey.com/media/icon.jpg" alt="Profile Picture" class="w-24 h-24 mb-4 rounded-full shadow-lg"/> 50 + <h1 class="text-3xl font-bold text-gray-900">MBD Status now uses Better Stack</h1> 51 + <p class="text-lg text-gray-600 font-medium mt-1">Updates from Daniel Morrisey</p> 52 + </a> 53 + </header> 54 + 55 + <hr class="border-gray-200 my-8"> 56 + 57 + <!-- Post Content --> 58 + <article class="prose max-w-none prose-indigo"> 59 + <h1 class="text-3xl font-bold text-gray-900 mt-0">MBD Status now uses Better Stack</h1> 60 + <h3 class="text-xl font-medium text-gray-700">Faster alerts, higher uptime, and better everything</h3> 61 + <p>Before I made the switch to Better Stack, MBD Status was powered by a Uptime Kuma Docker container in my house. This is an issue. 62 + <br><br> 63 + Services like Better Stack and Uptime Robot have servers across the globe with fast internet and backup power supplies. 64 + <br><br> 65 + Unlike me, this Raspberry Pi is connected over Ethernet and is plugged in via a USB brick. 66 + <br><br> 67 + Resulting in inaccurate uptime, constant downtime, and higher ping. 68 + <br><br> 69 + Better Stack has servers everywhere, back up power and faster internet but what makes it easier is the fact that I don’t have to mange it, no need to update docker. 70 + <br><br> 71 + It also has a awesome simple UI interface that lets me add monitors and customize my status page. 72 + <br><br> 73 + <img src="https://public-danielmorrisey-com.danielmorrisey.com/media/Screenshot%202025-08-18%20at%2017.47.14.png" alt="Mac Mini" class="w-full rounded-2xl shadow-lg my-6"> 74 + <i class="block text-center text-gray-500">status.madebydanny.uk</i> 75 + <br><br> 76 + </p> 77 + </article> 78 + 79 + <!-- Comments Section --> 80 + <div class="mt-8 pt-4 border-t border-gray-200"> 81 + <h3 class="text-xl font-semibold mb-4"><i class="fa-solid fa-comments"></i> Comments</h3> 82 + <div class="mb-4"> 83 + <code class="rounded-lg border bg-gray-100 px-2 py-1 text-sm block md:inline-block"> 84 + <a href="https://github.com/therealfuntimeswithdanny/giscuscomments" class="text-indigo-600 hover:text-indigo-800 transition-colors"> 85 + <i class="fa-brands fa-github"></i>therealfuntimeswithdanny/giscuscomments 86 + </a> 87 + </code> 88 + </div> 89 + <!-- Giscus comments script --> 90 + <script src="https://giscus.app/client.js" 91 + data-repo="therealfuntimeswithdanny/giscuscomments" 92 + data-repo-id="R_kgDOPXUWOA" 93 + data-category="Announcements" 94 + data-category-id="DIC_kwDOPXUWOM4CttzC" 95 + data-mapping="og:title" 96 + data-strict="0" 97 + data-reactions-enabled="1" 98 + data-emit-metadata="0" 99 + data-input-position="top" 100 + data-theme="light_tritanopia" 101 + data-lang="en" 102 + data-loading="lazy" 103 + crossorigin="anonymous" 104 + async> 105 + </script> 106 + </div> 107 + 108 + <footer class="mt-12 pt-4 text-center text-gray-500 border-t border-gray-200"> 109 + <div class="flex justify-center space-x-6 mb-4 text-lg"> 110 + <a href="javascript:history.back()" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i> Back</a> 111 + <a href="/index.html" class="text-gray-600 hover:text-indigo-600 transition duration-300"><i class="fa-solid fa-house"></i> Home</a> 112 + </div> 113 + <!-- Centered Iframe --> 114 + <div class="flex justify-center mt-8"> 115 + <iframe src="https://status.madebydanny.uk/badge?theme=light" width="200" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe> 116 + </div> 117 + <p> 118 + &copy; 2024-<span id="currentYear"></span> 119 + <a href="https://madebydanny.uk" class="hover:text-indigo-600 transition duration-300 font-medium">Made by Danny UK</a> 120 + </p> 121 + <p class="text-sm mt-1"> 122 + by Daniel Morrisey 123 + </p> 124 + </footer> 125 + 126 + </div> 127 + </div> 128 + 129 + <script> 130 + // Set the current year for the copyright notice 131 + document.getElementById('currentYear').textContent = new Date().getFullYear(); 132 + </script> 133 + </body> 134 + </html>