custom element for embedding Bluesky posts and feeds mary-ext.github.io/bluesky-embed
typescript npm bluesky atcute
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

docs: link to jsdelivr

Mary 0f67d880 ab63a74f

+12 -9
+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