custom element for embedding Bluesky posts and feeds
mary-ext.github.io/bluesky-embed
typescript
npm
bluesky
atcute
chore: remove docs folder
-139
docs/.nojekyll
docs/.nojekyll
This is a binary file and will not be displayed.
-139
docs/index.html
-139
docs/index.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>Bluesky post embeds</title>
7
-
<style>
8
-
:root {
9
-
--background-primary: #fafafa;
10
-
--background-secondary: #e5e5e5;
11
-
--text-primary: #000000;
12
-
--text-link: #1d4ed8;
13
-
--divider: #c8c8c8;
14
-
}
15
-
16
-
@media (prefers-color-scheme: dark) {
17
-
:root {
18
-
--background-primary: #0a0a0a;
19
-
--background-secondary: #171717;
20
-
--text-primary: #ffffff;
21
-
--text-link: #60a5fa;
22
-
--divider: #404040;
23
-
}
24
-
}
25
-
26
-
html {
27
-
background: var(--background-primary);
28
-
color: var(--text-primary);
29
-
color-scheme: light dark;
30
-
font-size: 14px;
31
-
line-height: 1.25rem;
32
-
font-family:
33
-
system-ui,
34
-
-apple-system,
35
-
BlinkMacSystemFont,
36
-
'Segoe UI',
37
-
Roboto,
38
-
Oxygen,
39
-
Ubuntu,
40
-
Cantarell,
41
-
'Open Sans',
42
-
'Helvetica Neue',
43
-
sans-serif;
44
-
}
45
-
46
-
body {
47
-
margin: 24px auto;
48
-
padding: 0 16px;
49
-
max-width: 680px;
50
-
}
51
-
52
-
h1,
53
-
h2,
54
-
h3,
55
-
h4,
56
-
h5,
57
-
h6,
58
-
p {
59
-
margin-block-start: 1.1rem;
60
-
margin-block-end: 1.1rem;
61
-
}
62
-
63
-
h1 {
64
-
font-size: 1.25rem;
65
-
}
66
-
h2 {
67
-
font-size: 1.125rem;
68
-
}
69
-
70
-
a {
71
-
color: var(--text-link);
72
-
}
73
-
74
-
pre {
75
-
border-radius: 4px;
76
-
background: var(--background-secondary);
77
-
padding: 8px;
78
-
overflow-x: auto;
79
-
font-size: 12px;
80
-
}
81
-
82
-
bluesky-post {
83
-
--font-size: 16px;
84
-
margin: 16px auto;
85
-
}
86
-
87
-
.bluesky-post-fallback {
88
-
margin: 16px 0;
89
-
border-left: 3px solid var(--divider);
90
-
padding: 4px 8px;
91
-
}
92
-
.bluesky-post-fallback p {
93
-
margin: 0 0 8px 0;
94
-
}
95
-
</style>
96
-
<script type="module" src="https://esm.sh/bluesky-post-embed@~0.1.0"></script>
97
-
<script type="module">
98
-
const dark = matchMedia('(prefers-color-scheme: dark)');
99
-
100
-
const update_theme = () => {
101
-
const is_dark = dark.matches;
102
-
103
-
for (const node of document.querySelectorAll('bluesky-post')) {
104
-
node.setAttribute('theme', !is_dark ? 'light' : 'dark');
105
-
}
106
-
};
107
-
108
-
update_theme();
109
-
dark.addEventListener('change', update_theme);
110
-
</script>
111
-
</head>
112
-
<body>
113
-
<h1><bluesky-post></h1>
114
-
<p>A custom element for embedding Bluesky posts.</p>
115
-
<p>See <a href="https://github.com/mary-ext/bluesky-post-embed">GitHub repository</a> for details.</p>
116
-
117
-
<bluesky-post
118
-
src="https://bsky.app/profile/did:plc:ragtjsm2j2vknwkz3zp4oxrd/post/3kj2umze7zj2n"
119
-
theme="light"
120
-
>
121
-
<blockquote class="bluesky-post-fallback">
122
-
<p dir="auto">angel mode</p>
123
-
— Paul Frazee 🦋 (@pfrazee.com)
124
-
<a href="https://bsky.app/profile/pfrazee.com/post/3kj2umze7zj2n">January 16, 2024</a>
125
-
</blockquote>
126
-
</bluesky-post>
127
-
128
-
<pre>
129
-
<bluesky-post src="https://bsky.app/profile/did:plc:ragtjsm2j2vknwkz3zp4oxrd/post/3kj2umze7zj2n" theme="light">
130
-
<blockquote class="bluesky-post-fallback">
131
-
<p dir="auto">angel mode</p>
132
-
&mdash; Paul Frazee 🦋 (@pfrazee.com)
133
-
<a href="https://bsky.app/profile/pfrazee.com/post/3kj2umze7zj2n">January 16, 2024</a>
134
-
</blockquote>
135
-
</bluesky-post>
136
-
<script type="module" src="https://esm.sh/bluesky-post-embed@~0.1.0"></script></pre
137
-
>
138
-
</body>
139
-
</html>