-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsingle-post-pyscript.html
615 lines (515 loc) · 21.4 KB
/
single-post-pyscript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="https://pyscript.net/releases/2024.4.1/core.js"></script>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.4.1/core.css">
<title>Single Post Embed via PyScript (Mastodon.py)</title>
<meta name="author" content="@[email protected]" />
<meta name="keywords"
content="mastodon, embed, pyscript, python, mastodon.py, api, fediverse, example" />
<meta name="description"
content="Example showing how to embed a single Mastodon post using PyScript and Mastodon.py to fetch and render data." />
<meta property="og:title" content="Mastodon Post Embed Example (PyScript/Mastodon.py)" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mastodon-embeds.glitch.me/single-post-pyscript.html" />
<meta property="og:image" content="https://mastodon-embeds.glitch.me/mastodon-logo.svg" />
<meta property="og:description"
content="Example showing how to embed a single Mastodon post using PyScript and Mastodon.py." />
<meta property="og:site_name" content="Mastodon Embed Examples" />
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<style>
.section.has-top-controls {
position: relative;
padding-top: 4rem;
}
.theme-toggle-button {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.theme-toggle-button .icon svg {
width: 1.1em;
height: 1.1em;
}
#mastodonpy-output {
min-height: 100px;
/* Placeholder height while loading */
border: 1px solid #dbdbdb;
border-radius: 6px;
padding: 0;
margin-top: 1rem;
background-color: white;
overflow: hidden;
}
[data-theme="dark"] #mastodonpy-output {
border-color: #4a4a4a;
background-color: #2e2e2e;
}
/* Styling for the rendered post card */
.mastodonpy-post .card-content {
padding: 1.25rem;
/* Padding inside the card */
}
.mastodonpy-post .boosted-by {
font-size: 0.9em;
color: #7a7a7a;
padding: 0.5rem 1.25rem;
border-bottom: 1px solid #dbdbdb;
background-color: #f5f5f5;
}
[data-theme="dark"] .mastodonpy-post .boosted-by {
color: #b5b5b5;
border-bottom-color: #4a4a4a;
background-color: #3a3a3a;
}
.mastodonpy-post .author-info {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
.mastodonpy-post .author-info img {
width: 48px;
height: 48px;
border-radius: 4px;
margin-right: 0.75rem;
}
.mastodonpy-post .author-info .names .display-name {
font-weight: bold;
}
.mastodonpy-post .author-info .names .username {
color: #7a7a7a;
font-size: 0.9em;
}
[data-theme="dark"] .mastodonpy-post .author-info .names .username {
color: #b5b5b5;
}
.mastodonpy-post .post-content {
margin-bottom: 1rem;
word-wrap: break-word;
}
.mastodonpy-post .post-content p {
margin-bottom: 0.75em !important;
}
.mastodonpy-post .post-content a {
color: hsl(217, 71%, 53%);
}
[data-theme="dark"] .mastodonpy-post .post-content a {
color: hsl(204, 71%, 63%);
}
.media-attachments {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 1rem;
}
.media-attachments img,
.media-attachments video,
.media-attachments audio {
/* Apply border to all media previews */
max-width: 150px;
max-height: 150px;
border-radius: 4px;
border: 1px solid #dbdbdb;
display: block;
background-color: #eee;
}
.media-attachments a span {
display: inline-block;
padding: 0.5em;
border: 1px solid #dbdbdb;
border-radius: 4px;
background-color: #f5f5f5;
font-size: 0.9em;
color: #363636;
text-decoration: none;
}
[data-theme="dark"] .media-attachments img,
[data-theme="dark"] .media-attachments video,
[data-theme="dark"] .media-attachments audio {
border-color: #4a4a4a;
background-color: #444;
}
[data-theme="dark"] .media-attachments a span {
border-color: #4a4a4a;
background-color: #3a3a3a;
color: #eee;
}
.poll {
margin-bottom: 1rem;
border: 1px solid #eee;
border-radius: 4px;
padding: 0.75rem;
}
[data-theme="dark"] .poll {
border-color: #4a4a4a;
}
.poll ul {
list-style: none;
margin: 0;
padding: 0;
}
.poll li {
margin-bottom: 0.5rem;
}
.poll .option-title {
font-weight: bold;
}
.poll .option-votes {
font-size: 0.9em;
color: #7a7a7a;
margin-left: 0.5em;
}
[data-theme="dark"] .poll .option-votes {
color: #b5b5b5;
}
.preview-card {
margin-bottom: 1rem;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
[data-theme="dark"] .preview-card {
border-color: #4a4a4a;
}
.preview-card img {
display: block;
max-width: 100%;
}
.preview-card .card-info {
padding: 0.75rem;
}
.preview-card .card-title {
font-weight: bold;
display: block;
margin-bottom: 0.25rem;
}
.preview-card .card-description {
font-size: 0.9em;
color: #555;
margin-bottom: 0.25rem;
}
[data-theme="dark"] .preview-card .card-description {
color: #ccc;
}
.preview-card .card-url {
font-size: 0.8em;
color: #7a7a7a;
}
[data-theme="dark"] .preview-card .card-url {
color: #b5b5b5;
}
.mastodonpy-post .post-meta {
font-size: 0.85em;
color: #7a7a7a;
border-top: 1px solid #dbdbdb;
padding-top: 0.75rem;
margin-top: 1rem;
}
[data-theme="dark"] .mastodonpy-post .post-meta {
color: #b5b5b5;
border-top-color: #4a4a4a;
}
.mastodonpy-post .post-meta a {
color: inherit;
text-decoration: underline;
}
/* Hide PyScript loading banner */
py-loader {
display: none;
}
</style>
</head>
<body>
<section class="section has-top-controls">
<button class="button theme-toggle-button" aria-label="Toggle theme">
<span class="icon theme-icon">
</span>
</button>
<div class="container">
<h1 class="title">Mastodon Single Post Embed via PyScript + Mastodon.py</h1>
<div class="box">
<div class="content">
<h2 class="title is-4">About This Method</h2>
<p>
This example uses <a href="https://pyscript.net/" target="_blank" rel="noopener noreferrer">PyScript</a>
to run Python code directly in the browser, with the <code>pyodide_http.patch_all()</code> method
to enable the <a href="https://mastodonpy.readthedocs.io/" target="_blank"
rel="noopener noreferrer">Mastodon.py</a> library.
</p>
<p>
The Python code in this page fetches the raw status data for post <code>109349688112355529</code> from
<code>macaw.social</code> using <code>Mastodon.py</code>'s <code>status()</code> method (unauthenticated).
It then constructs HTML to display the post details and injects it into the page using PyScript's <code>display()</code> function.
</p>
<p>
This gives full control over rendering using Python, but requires writing the HTML generation code. Be aware
that fetching data might fail if the instance requires authentication (even for public posts).
</p>
</div>
</div>
<div class="box">
<div class="content">
<h2 class="title is-4">Rendered Post (via PyScript + Mastodon.py)</h2>
<p>The following post data was fetched and rendered using Python running in the browser:</p>
<div id="mastodonpy-output">
<p><i>Loading post data via PyScript...</i></p>
</div>
</div>
</div>
</div>
</section>
<div class="content has-text-centered">
<p>
<strong><a href="https://mastodon-embeds.glitch.me">Mastodon Embed Examples</a></strong>.
Powered by <a href="https://pyscript.net/" target="_blank">PyScript</a> and
<a href="https://mastodonpy.readthedocs.io/" target="_blank">Mastodon.py</a>.
Styled using <a href="https://bulma.io/" target="_blank" rel="noopener noreferrer">Bulma</a>.
Find me on Mastodon: <a href="https://macaw.social/@andypiper" target="_blank"
rel="noopener noreferrer">@[email protected]</a>.
</p>
</div>
</footer>
<py-config>
packages = ["mastodon-py", "pyodide-http"]
</py-config>
<!-- here is all of the Python code -->
<script type="py">
import js # To interact with JavaScript/DOM
import html # For escaping HTML content
from mastodon import Mastodon
import pyodide_http # required patching library
from datetime import datetime
INSTANCE_URL = "https://macaw.social"
STATUS_ID = "109349688112355529"
OUTPUT_DIV_ID = "mastodonpy-output"
def safe_escape(value, default=''):
"""Safely converts to string and escapes, providing a default."""
# Ensure value is not None before str(), although str(None) is 'None'
return html.escape(str(value or default))
def display_error(message):
"""Helper to display errors in the output div using innerHTML."""
output_div = js.document.getElementById(OUTPUT_DIV_ID)
if output_div:
# Construct the HTML string for the error
error_html = f'<div class="notification is-danger">{safe_escape(message)}</div>'
# Set innerHTML
output_div.innerHTML = error_html
print(f"Error: {message}")
def render_media(media_attachments):
"""Generates HTML for media attachments."""
if not media_attachments: return ""
media_html = '<div class="media-attachments">'
for media in media_attachments:
media_type = media.get('type') or 'unknown'
preview_url = safe_escape(media.get('preview_url'))
remote_url = safe_escape(media.get('remote_url') or media.get('url'), '#')
description = safe_escape(media.get('description'), f'{media_type} attachment')
if media_type in ['image', 'gifv'] and preview_url:
media_html += f'<a href="{remote_url}" target="_blank" rel="noopener noreferrer"><img src="{preview_url}" alt="{description}" title="{description}" loading="lazy"></a>'
elif media_type == 'video' and preview_url:
media_html += f'<a href="{remote_url}" target="_blank" rel="noopener noreferrer" title="{description} (Video)"><img src="{preview_url}" alt="{description}"></a>'
elif media_type == 'audio':
media_html += f'<a href="{remote_url}" target="_blank" rel="noopener noreferrer" title="{description}"><span>🎵 (Audio Link)</span></a>'
else:
media_html += f'<a href="{remote_url}" target="_blank" rel="noopener noreferrer"><span>[Attachment: {safe_escape(media_type)}]</span></a>'
media_html += '</div>'
return media_html
def render_poll(poll_data):
"""Generates HTML for a poll."""
if not poll_data: return ""
options_html = "<ul>"
for option in poll_data.get('options', []):
title = safe_escape(option.get('title'))
votes = option.get('votes_count', '?')
options_html += f'<li><span class="option-title">{title}</span> <span class="option-votes">({votes if votes is not None else "?"} votes)</span></li>'
options_html += "</ul>"
expires_at_val = poll_data.get('expires_at')
expires_str = ""
if expires_at_val:
try:
temp_dt = None
if isinstance(expires_at_val, datetime):
temp_dt = expires_at_val
elif isinstance(expires_at_val, str):
# Only call replace if it's a string
temp_dt = datetime.fromisoformat(expires_at_val.replace('Z', '+00:00'))
# Removed the 'else' block trying to convert unknown types to avoid potential errors
if temp_dt: # If we successfully got a datetime object
expires_str = f"Expires: {temp_dt.strftime('%Y-%m-%d %H:%M')}"
else: # Fallback if conversion failed or type was unexpected but not None
expires_str = f"Expires: {safe_escape(expires_at_val)}"
except Exception as date_err:
print(f"Error parsing poll expiry date: {date_err}")
expires_str = f"Expires: {safe_escape(expires_at_val)}" # Fallback
status = "Expired" if poll_data.get('expired', False) else expires_str
multiple = "Multiple choice" if poll_data.get('multiple', False) else "Single choice"
total_votes = poll_data.get('votes_count', '?')
poll_html = f"""
<div class="poll content">
<h4>Poll ({multiple})</h4>{options_html}
<p><small>Total Votes: {total_votes if total_votes is not None else "?"} | {status}</small></p>
</div>"""
return poll_html
def render_card(card_data):
"""Generates HTML for a preview card."""
if not card_data: return ""
card_url = safe_escape(card_data.get('url'), '#')
card_title = safe_escape(card_data.get('title'))
card_desc = safe_escape(card_data.get('description'))
card_img = safe_escape(card_data.get('image'))
card_provider = safe_escape(card_data.get('provider_name'))
card_html = f'<div class="preview-card">'
if card_img: card_html += f'<a href="{card_url}" target="_blank" rel="noopener noreferrer"><img src="{card_img}" alt="" loading="lazy"></a>'
card_html += '<div class="card-info content">'
if card_title: card_html += f'<a href="{card_url}" target="_blank" rel="noopener noreferrer"><strong class="card-title">{card_title}</strong></a>'
if card_desc: card_html += f'<p class="card-description">{card_desc}</p>'
card_link_text = card_provider if card_provider else card_url
card_html += f'<a href="{card_url}" target="_blank" rel="noopener noreferrer" class="card-url">{card_link_text}</a>'
card_html += '</div></div>'
return card_html
def render_status(status_data, output_div):
"""Renders the status HTML."""
if not output_div:
print("Error: Output element 'mastodonpy-output' not found.")
return
if not status_data:
display_error("Could not retrieve status data (API returned None or empty).")
return
is_reblog = status_data.get('reblog') is not None
status = status_data['reblog'] if is_reblog else status_data
account = status.get('account', {})
display_name = safe_escape(account.get('display_name'), 'Unknown User')
username = safe_escape(account.get('acct'))
avatar_url = safe_escape(account.get('avatar_static'))
post_content_html = status.get('content') or ''
post_url = safe_escape(status.get('url'), '#')
created_at_val = status.get('created_at')
formatted_date = 'Unknown date'
if created_at_val:
try:
temp_dt = None
if isinstance(created_at_val, datetime): # Check if it's already datetime
temp_dt = created_at_val
elif isinstance(created_at_val, str): # Check if it's a string
# Only call replace on the string
temp_dt = datetime.fromisoformat(created_at_val.replace('Z', '+00:00'))
# Removed the 'else' block trying to convert unknown types
if temp_dt: # If we successfully got a datetime object
formatted_date = temp_dt.strftime('%Y-%m-%d %H:%M:%S %Z')
else: # Fallback if type was unexpected but not None
formatted_date = safe_escape(created_at_val)
except Exception as date_err:
print(f"Error formatting created_at date: {date_err}")
formatted_date = safe_escape(created_at_val) # Fallback to escaped original
boost_html = ""
if is_reblog:
reblogger_account = status_data.get('account', {})
reblogger_name = safe_escape(reblogger_account.get('display_name'), 'Unknown User')
reblogger_acct = safe_escape(reblogger_account.get('acct'))
boost_html = f'<div class="boosted-by">🔁 Boosted by {reblogger_name} (@{reblogger_acct})</div>'
media_html = render_media(status.get('media_attachments', []))
poll_html = render_poll(status.get('poll'))
card_html = render_card(status.get('card'))
post_html = f"""
<div class="mastodonpy-post card">
{boost_html}
<div class="card-content">
<div class="media author-info">
<div class="media-left">
<figure class="image is-48x48">
<img src="{avatar_url}" alt="{display_name} avatar" loading="lazy" class="is-rounded">
</figure>
</div>
<div class="media-content names">
<p class="title is-5 display-name">{display_name}</p>
<p class="subtitle is-6 username">@{username}</p>
</div>
</div>
{media_html}
{poll_html}
{card_html}
<div class="content post-content">{post_content_html}</div>
<div class="post-meta content is-small">
<a href="{post_url}" target="_blank" rel="noopener noreferrer">Posted on: {formatted_date}</a>
</div>
</div>
</div>
"""
# Use innerHTML to render the generated HTML string
output_div.innerHTML = post_html
print("Post rendered successfully.")
try:
pyodide_http.patch_all()
print("Network requests patched.")
api = Mastodon(api_base_url=INSTANCE_URL)
print(f"Fetching status ID: {STATUS_ID}")
status_data = api.status(STATUS_ID)
print("Status data received.")
output_div_element = js.document.getElementById(OUTPUT_DIV_ID)
render_status(status_data, output_div_element)
except Exception as e:
display_error(e)
</script>
<script>
(function () {
// Simple inline SVGs for icons
const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`;
const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`;
// Select ALL buttons with this class
const toggleButtons = document.querySelectorAll('.theme-toggle-button');
// Select ALL icon spans within those buttons
const iconSpans = document.querySelectorAll('.theme-toggle-button .theme-icon');
const htmlElement = document.documentElement;
const storageKey = 'theme-preference';
// Function to apply theme and update ALL icons
const applyTheme = (theme) => {
htmlElement.dataset.theme = theme;
const iconHTML = theme === 'dark' ? moonIcon : sunIcon;
iconSpans.forEach(span => {
// Check if span exists before setting innerHTML
if (span) span.innerHTML = iconHTML;
});
};
// Function to get the preferred theme
const getPreferredTheme = () => {
const savedTheme = localStorage.getItem(storageKey);
if (savedTheme) return savedTheme;
// Default to light if no system preference detected or needed
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
// Function to handle the button click
const handleToggleClick = () => {
// Read the current theme directly from the html element
let currentTheme = htmlElement.dataset.theme || getPreferredTheme();
let newTheme = currentTheme === 'dark' ? 'light' : 'dark';
applyTheme(newTheme);
localStorage.setItem(storageKey, newTheme);
}
// --- Initialization ---
// Apply the initial theme when the script runs
let currentTheme = getPreferredTheme();
applyTheme(currentTheme);
// Add listeners to all toggle buttons found
if (toggleButtons.length > 0) {
toggleButtons.forEach(button => {
button.addEventListener('click', handleToggleClick);
});
} else {
// It's okay if not found on pages without the button
// console.warn("Theme toggle button(s) not found on this page.");
}
})();
</script>
</body>
</html>