madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
gitpush
+250
-4
+26
.well-known/did.json
+26
.well-known/did.json
···
1
+
{
2
+
"@context": [
3
+
"https://www.w3.org/ns/did/v1",
4
+
"https://w3id.org/security/multikey/v1",
5
+
"https://w3id.org/security/suites/secp256k1-2019/v1"
6
+
],
7
+
"id": "did:web:madebydanny.uk",
8
+
"alsoKnownAs": [
9
+
"at://danielweb.pds.madebydanny.uk"
10
+
],
11
+
"verificationMethod": [
12
+
{
13
+
"id": "did:web:madebydanny.uk#atproto",
14
+
"type": "Multikey",
15
+
"controller": "did:web:madebydanny.uk",
16
+
"publicKeyMultibase": "zQ3shvF4JzcPv6uPugqPSoFUfYkUvJTyWcsjVtTJLRVPLVXSV"
17
+
}
18
+
],
19
+
"service": [
20
+
{
21
+
"id": "#atproto_pds",
22
+
"type": "AtprotoPersonalDataServer",
23
+
"serviceEndpoint": "https://pds.madebydanny.uk"
24
+
}
25
+
]
26
+
}
+2
css/style.css
+2
css/style.css
+222
-4
index.html
+222
-4
index.html
···
6
6
<title>madebydanny.uk</title>
7
7
<link rel="icon" id="favicon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp">
8
8
<meta name="description" id="meta-description" content="Posting everything into the endless jet stream of posts">
9
-
<!--Social SEO-->
9
+
10
10
<meta property="og:title" content="madebydanny.uk">
11
11
<meta property="og:description" id="og-description" content="Posting everything into the endless jet stream of posts">
12
12
<meta property="og:type" content="website">
13
13
<meta property="og:url" content="https://madebydanny.uk/">
14
14
<meta property="og:image" id="og-image" content="/media/ogimg.png">
15
-
<link rel="stylesheet" href="/css/style.css">
15
+
<style>
16
+
/* --- THEME VARIABLES --- */
17
+
:root {
18
+
--bsky-card-bg: #4a2b32;
19
+
--bsky-post-bg: #1e1e1e;
20
+
--bsky-text-color: #ffffff;
21
+
--bsky-subtext-color: #dcbaba;
22
+
--bsky-link-color: #ffcccc;
23
+
--bsky-border: rgba(255,255,255,0.1);
24
+
}
25
+
26
+
body {
27
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
28
+
background-color: #121212;
29
+
color: white;
30
+
padding: 20px;
31
+
line-height: 1.5;
32
+
}
33
+
34
+
/* --- CARD STYLING --- */
35
+
#music-status-card, #latest-post-card {
36
+
background-color: var(--bsky-card-bg);
37
+
color: var(--bsky-text-color);
38
+
border-radius: 12px;
39
+
padding: 16px;
40
+
margin: 20px 0;
41
+
display: none;
42
+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
43
+
max-width: 500px;
44
+
}
45
+
46
+
#latest-post-card {
47
+
background-color: #262626;
48
+
border: 1px solid var(--bsky-border);
49
+
}
50
+
51
+
.bsky-header {
52
+
font-size: 0.75rem;
53
+
text-transform: uppercase;
54
+
letter-spacing: 0.05em;
55
+
color: var(--bsky-subtext-color);
56
+
margin-bottom: 12px;
57
+
display: flex;
58
+
justify-content: space-between;
59
+
align-items: center;
60
+
}
61
+
62
+
.bsky-header a {
63
+
color: var(--bsky-subtext-color);
64
+
text-decoration: none;
65
+
}
66
+
67
+
.bsky-content-body {
68
+
margin-bottom: 12px;
69
+
word-wrap: break-word;
70
+
}
71
+
72
+
/* --- POST IMAGE STYLING --- */
73
+
.post-image {
74
+
width: 100%;
75
+
border-radius: 8px;
76
+
margin-top: 10px;
77
+
border: 1px solid var(--bsky-border);
78
+
display: block;
79
+
}
80
+
81
+
.bsky-trackname {
82
+
font-weight: 700;
83
+
font-size: 1.1rem;
84
+
display: block;
85
+
color: var(--bsky-text-color);
86
+
text-decoration: none;
87
+
margin-bottom: 2px;
88
+
}
89
+
90
+
.bsky-artist {
91
+
color: var(--bsky-subtext-color);
92
+
font-size: 0.95rem;
93
+
}
94
+
95
+
.bsky-footer {
96
+
border-top: 1px solid var(--bsky-border);
97
+
padding-top: 10px;
98
+
margin-top: 12px;
99
+
font-size: 0.8rem;
100
+
color: var(--bsky-subtext-color);
101
+
display: flex;
102
+
align-items: center;
103
+
}
104
+
105
+
a { color: var(--bsky-link-color); }
106
+
107
+
.error-msg {
108
+
color: #ff6b6b;
109
+
font-size: 0.9rem;
110
+
}
111
+
</style>
16
112
</head>
17
113
<body>
18
114
<h1>Hi, I'm Daniel Morrisey</h1>
19
-
<p>I like to lisiten to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky.</p>
115
+
<p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky.</p>
116
+
117
+
<div id="music-status-card">
118
+
<div class="bsky-header">
119
+
<span>Recently played</span>
120
+
<span id="music-link-icon"></span>
121
+
</div>
122
+
<div id="music-ui-content" class="bsky-content-body"></div>
123
+
<div class="bsky-footer">
124
+
<span>teal.fm via piper</span>
125
+
</div>
126
+
</div>
127
+
128
+
<div id="latest-post-card">
129
+
<div class="bsky-header">
130
+
<span>Latest from Bluesky</span>
131
+
<span id="post-link-icon"></span>
132
+
</div>
133
+
<div id="post-content" class="bsky-content-body">
134
+
Loading latest post...
135
+
</div>
136
+
<div id="post-media"></div>
137
+
<div class="bsky-footer" id="post-date"></div>
138
+
</div>
139
+
20
140
<p><b>Social Links:</b></p>
21
141
<ul>
22
-
<li><a href="/followonbsky.html?did=madebydanny.uk" >Bluesky</a></li>
142
+
<li><a href="/followonbsky.html?did=madebydanny.uk">Bluesky</a></li>
23
143
<li><a href="https://instagram.com/madebydanny.uk" target="_blank">Instagram</a></li>
24
144
<li><a href="https://tangled.org/madebydannyuk" target="_blank">Tangled</a></li>
25
145
<li><a href="https://threads.net/@madebydanny.uk" target="_blank">Threads</a></li>
···
27
147
</ul>
28
148
<hr>
29
149
<p>© 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=madebydanny.uk">@madebydanny.uk</a></p>
150
+
151
+
<script>
152
+
const BLUESKY_DID = 'did:plc:4qjpcixqrc3b2qmbce76sm7k';
153
+
const MUSIC_DID = 'did:plc:l37td5yhxl2irrzrgvei4qay';
154
+
155
+
async function fetchMusicStatus() {
156
+
const url = `https://pds.madebydanny.uk/xrpc/com.atproto.repo.getRecord?repo=${MUSIC_DID}&collection=fm.teal.alpha.actor.status&rkey=self`;
157
+
try {
158
+
const response = await fetch(url);
159
+
if (!response.ok) {
160
+
console.error('Music API error:', response.status, response.statusText);
161
+
throw new Error('Network response was not ok');
162
+
}
163
+
const data = await response.json();
164
+
console.log('Music data:', data);
165
+
166
+
if (data && data.value && data.value.item) {
167
+
const item = data.value.item;
168
+
const artists = item.artists.map(a => a.artistName).join(', ');
169
+
const trackUrl = item.originUrl || '#';
170
+
171
+
document.getElementById('music-link-icon').innerHTML = `<a href="${trackUrl}" target="_blank">↗</a>`;
172
+
document.getElementById('music-ui-content').innerHTML = `
173
+
<a href="${trackUrl}" target="_blank" class="bsky-trackname">${item.trackName}</a>
174
+
<div class="bsky-artist">by ${artists}</div>
175
+
`;
176
+
document.getElementById('music-status-card').style.display = 'block';
177
+
} else {
178
+
console.warn('No music data found');
179
+
}
180
+
} catch (error) {
181
+
console.error('Error fetching music:', error);
182
+
// Show card anyway with error message
183
+
document.getElementById('music-ui-content').innerHTML = '<span class="error-msg">No recent music activity</span>';
184
+
document.getElementById('music-status-card').style.display = 'block';
185
+
}
186
+
}
187
+
188
+
async function fetchLatestPost() {
189
+
const url = `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${BLUESKY_DID}&limit=1`;
190
+
try {
191
+
console.log('Fetching post from:', url);
192
+
const response = await fetch(url);
193
+
194
+
if (!response.ok) {
195
+
console.error('Post API error:', response.status, response.statusText);
196
+
const errorText = await response.text();
197
+
console.error('Error response:', errorText);
198
+
throw new Error(`HTTP ${response.status}`);
199
+
}
200
+
201
+
const data = await response.json();
202
+
console.log('Post data:', data);
203
+
204
+
if (data.feed && data.feed.length > 0) {
205
+
const latest = data.feed[0].post;
206
+
const record = latest.record;
207
+
const rkey = latest.uri.split('/').pop();
208
+
const postUrl = `https://bsky.app/profile/madebydanny.uk/post/${rkey}`;
209
+
210
+
// Set Text and Date
211
+
document.getElementById('post-content').innerText = record.text || "";
212
+
document.getElementById('post-date').innerText = new Date(record.createdAt).toLocaleString();
213
+
document.getElementById('post-link-icon').innerHTML = `<a href="${postUrl}" target="_blank">↗</a>`;
214
+
215
+
// Handle Images (Embeds)
216
+
const mediaContainer = document.getElementById('post-media');
217
+
mediaContainer.innerHTML = ''; // Clear previous
218
+
219
+
if (record.embed && record.embed.$type === 'app.bsky.embed.images') {
220
+
record.embed.images.forEach(img => {
221
+
const imgRef = img.image.ref.$link;
222
+
const imgSrc = `https://cdn.bsky.app/img/feed_fullsize/plain/${BLUESKY_DID}/${imgRef}@jpeg`;
223
+
224
+
const imgElement = document.createElement('img');
225
+
imgElement.src = imgSrc;
226
+
imgElement.alt = img.alt || "Bluesky post image";
227
+
imgElement.className = 'post-image';
228
+
mediaContainer.appendChild(imgElement);
229
+
});
230
+
}
231
+
232
+
document.getElementById('latest-post-card').style.display = 'block';
233
+
} else {
234
+
console.warn('No posts found in feed');
235
+
document.getElementById('post-content').innerHTML = '<span class="error-msg">No posts found</span>';
236
+
document.getElementById('latest-post-card').style.display = 'block';
237
+
}
238
+
} catch (error) {
239
+
console.error('Error fetching post:', error);
240
+
document.getElementById('post-content').innerHTML = `<span class="error-msg">Error loading post: ${error.message}</span>`;
241
+
document.getElementById('latest-post-card').style.display = 'block';
242
+
}
243
+
}
244
+
245
+
fetchMusicStatus();
246
+
fetchLatestPost();
247
+
</script>
30
248
</body>
31
249
</html>
js/script.js
js/script.js
This is a binary file and will not be displayed.