custom element for embedding Bluesky posts and feeds
mary-ext.github.io/bluesky-embed
typescript
npm
bluesky
atcute
docs: link to jsdelivr
+12
-9
+12
-9
packages/site/src/app.tsx
+12
-9
packages/site/src/app.tsx
···
15
15
import BlueskyProfileFeed from './components/bluesky-profile-feed';
16
16
import CodeBlock from './components/code-block';
17
17
18
-
const UNPKG_URL = `https://unpkg.com/bluesky-embed@~0.2.0-alpha.2`;
19
18
const DEFAULT_URL = 'https://bsky.app/profile/did:plc:ragtjsm2j2vknwkz3zp4oxrd/post/3kj2umze7zj2n';
20
19
21
20
const App = () => {
···
168
167
};
169
168
170
169
const getPrerequisitePostMarkup = () => {
170
+
const JSDELIVR_URL = `https://cdn.jsdelivr.net/npm/bluesky-post-embed@~0.2.0-alpha.2`;
171
+
171
172
return `<!-- Core web component and styling -->
172
-
<script type="module" src="${UNPKG_URL}/dist/post-wc.js"></script>
173
-
<link rel="stylesheet" href="${UNPKG_URL}/dist/post-core.css">
173
+
<script type="module" src="${JSDELIVR_URL}/+esm"></script>
174
+
<link rel="stylesheet" href="${JSDELIVR_URL}/dist/core.min.css">
174
175
175
176
<!-- Built-in themes -->
176
-
<link rel="stylesheet" href="${UNPKG_URL}/themes/light.css" media="(prefers-color-scheme: light)">
177
-
<link rel="stylesheet" href="${UNPKG_URL}/themes/dim.css" media="(prefers-color-scheme: dark)">
177
+
<link rel="stylesheet" href="${JSDELIVR_URL}/themes/light.min.css" media="(prefers-color-scheme: light)">
178
+
<link rel="stylesheet" href="${JSDELIVR_URL}/themes/dim.min.css" media="(prefers-color-scheme: dark)">
178
179
179
180
<!-- Fallback/placeholder elements if JS script is taking a while to load or is failing -->
180
181
<style>
···
290
291
};
291
292
292
293
const getPrerequisiteProfileFeedMarkup = () => {
294
+
const JSDELIVR_URL = `https://cdn.jsdelivr.net/npm/bluesky-profile-feed-embed@~0.2.0-alpha.2`;
295
+
293
296
return `<!-- Core web component and styling -->
294
-
<script type="module" src="${UNPKG_URL}/dist/profile-feed-wc.js"></script>
295
-
<link rel="stylesheet" href="${UNPKG_URL}/dist/profile-feed-core.css">
297
+
<script type="module" src="${JSDELIVR_URL}/+esm"></script>
298
+
<link rel="stylesheet" href="${JSDELIVR_URL}/dist/core.min.css">
296
299
297
300
<!-- Built-in themes -->
298
-
<link rel="stylesheet" href="${UNPKG_URL}/themes/light.css" media="(prefers-color-scheme: light)">
299
-
<link rel="stylesheet" href="${UNPKG_URL}/themes/dim.css" media="(prefers-color-scheme: dark)">
301
+
<link rel="stylesheet" href="${JSDELIVR_URL}/themes/light.min.css" media="(prefers-color-scheme: light)">
302
+
<link rel="stylesheet" href="${JSDELIVR_URL}/themes/dim.min.css" media="(prefers-color-scheme: dark)">
300
303
`;
301
304
};
302
305