☰

Bluesky embed

Embed bluesky posts on the blue websight

  1. // ==UserScript==
  2. // @name         Bluesky embed
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-11-19
  5. // @description  Embed bluesky posts on the blue websight
  6. // @author       Milan
  7. // @match        https://*.websight.blue/thread/*
  8. // @license      MIT
  9. // @icon         https://lore.capital/static/blueshi.png
  10. // @connect      embed.bsky.app
  11. // @grant        GM_xmlhttpRequest
  12. // ==/UserScript==
  13.  
  14.  
  15. const EMBED_URL = 'https://embed.bsky.app';
  16.  
  17. function scan(node) {
  18.     if (node === void 0) { node = document; }
  19.     const embeds = node.querySelectorAll('[data-bluesky-uri]');
  20.     for (let i = 0; i < embeds.length; i++) {
  21.         const id = String(Math.random()).slice(2);
  22.         const embed = embeds[i];
  23.         const aturi = embed.getAttribute('data-bluesky-uri');
  24.         if (!aturi) {
  25.             continue;
  26.         }
  27.         const ref_url = location.origin + location.pathname;
  28.         const searchParams = new URLSearchParams();
  29.         searchParams.set('id', id);
  30.         if (ref_url.startsWith('http')) {
  31.             searchParams.set('ref_url', encodeURIComponent(ref_url));
  32.         }
  33.         const iframe = document.createElement('iframe');
  34.         iframe.setAttribute('data-bluesky-id', id);
  35.         iframe.src = "".concat(EMBED_URL, "/embed/").concat(aturi.slice('at://'.length), "?").concat(searchParams.toString());
  36.         iframe.width = '100%';
  37.         iframe.style.border = 'none';
  38.         iframe.style.display = 'block';
  39.         iframe.style.flexGrow = '1';
  40.         iframe.frameBorder = '0';
  41.         iframe.scrolling = 'no';
  42.         const container = document.createElement('div');
  43.         container.style.maxWidth = '600px';
  44.         container.style.width = '100%';
  45.         container.style.marginTop = '10px';
  46.         container.style.marginBottom = '10px';
  47.         container.style.display = 'flex';
  48.         container.className = 'bluesky-embed';
  49.         container.appendChild(iframe);
  50.         embed.replaceWith(container);
  51.     }
  52. }
  53.  
  54. (function() {
  55.     'use strict';
  56.  
  57.     window.bluesky = window.bluesky || {
  58.         scan: scan,
  59.     };
  60.  
  61.     window.addEventListener('message', function (event) {
  62.         if (event.origin !== EMBED_URL) {
  63.             return;
  64.         }
  65.         var id = event.data.id;
  66.         if (!id) {
  67.             return;
  68.         }
  69.         var embed = document.querySelector("[data-bluesky-id=\"".concat(id, "\"]"));
  70.         if (!embed) {
  71.             return;
  72.         }
  73.         var height = event.data.height;
  74.         if (height) {
  75.             embed.style.height = "".concat(height, "px");
  76.         }
  77.     });
  78.  
  79.     const node_list = document.querySelectorAll(".message a[href^='https:\/\/bsky']");
  80.     Array.from(node_list).forEach(link => {
  81.         const oembed_url = "https://embed.bsky.app/oembed?mode=dark&url=";
  82.         GM_xmlhttpRequest({
  83.             method: "GET",
  84.             url: oembed_url + link.href,
  85.             headers: {
  86.                 "Content-Type": "application/json"
  87.             },
  88.             onload: function(response) {
  89.                 const embed = JSON.parse(response.responseText).html;
  90.                 link.parentElement.innerHTML += embed;
  91.                 scan();
  92.             }
  93.         });
  94.     });
  95.  
  96. })();