madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
added new text bite
+252
-64
+1
-1
index.html
+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
+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
+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
+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
+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
+
© 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>