add post embed processor

Author: treethought

bun.lock

@@ -35,6 +35,7 @@
 		"@atcute/oauth-browser-client": "^3.0.0",
 		"@atcute/pckt": "^0.1.5",
 		"@atcute/standard-site": "^1.0.0",
+		"bluesky-post-embed": "^1.0.6",
 		"obsidian": "latest",
 		"remark-parse": "^11.0.0",
 		"remark-stringify": "^11.0.0",

package.json

@@ -1,6 +1,18 @@
 import { Record } from "@atcute/atproto/types/repo/listRecords";
 
-export { getRecord, deleteRecord, putRecord} from "./lib/atproto";
+export { getRecord, deleteRecord, putRecord } from "./lib/atproto";
+
+export const BSKY_POST_RE = /https:\/\/bsky\.app\/profile\/([^/?#]+)\/post\/([A-Za-z0-9]+)/;
+
+export function bskyPostATUri(url: string): string | null {
+	const match = url.match(BSKY_POST_RE);
+	if (!match) return null;
+
+	const [, handleOrDid, rkey] = match;
+	if (!handleOrDid || !rkey) return null;
+
+	return `at://${handleOrDid}/app.bsky.feed.post/${rkey}`;
+}
 
 export {
 	getSembleCollections,

src/lib.ts

@@ -6,6 +6,7 @@ import { StandardFeedView, VIEW_ATMOSPHERE_STANDARD_FEED } from "views/standardf
 import { ATClient } from "lib/client";
 import { Clipper } from "lib/clipper";
 import { registerIcons } from "./icons";
+import { BlueskyPostProcessor } from "./postprocessor";
 
 export default class AtmospherePlugin extends Plugin {
 	settings: AtProtoSettings = DEFAULT_SETTINGS;
@@ -15,6 +16,7 @@ export default class AtmospherePlugin extends Plugin {
 	async onload() {
 		registerIcons();
 		await this.loadSettings();
+
 		this.client = new ATClient();
 		this.clipper = new Clipper(this);
 
@@ -34,6 +36,9 @@ export default class AtmospherePlugin extends Plugin {
 			}
 		});
 
+		const bskyProcessor = new BlueskyPostProcessor();
+		this.registerMarkdownPostProcessor((el, ctx) => bskyProcessor.process(el, ctx));
+
 		this.registerView(VIEW_TYPE_ATMOSPHERE_BOOKMARKS, (leaf) => {
 			return new BookmarksView(leaf, this);
 		});

src/main.ts

@@ -0,0 +1,56 @@
+import { Component, MarkdownPostProcessorContext, setIcon } from "obsidian";
+import { BSKY_POST_RE, bskyPostATUri } from "lib";
+
+
+export class BlueskyPostProcessor extends Component {
+
+	async process(el: HTMLElement, _ctx: MarkdownPostProcessorContext) {
+
+		if (!customElements.get("bluesky-post")) {
+			import("bluesky-post-embed");
+		}
+
+		const links = el.findAll("a").filter(link => {
+			const href = link.getAttribute("href") ?? "";
+			return BSKY_POST_RE.test(href);
+		});
+
+		if (links.length === 0) return;
+
+		for (const link of links) {
+			const atUri = bskyPostATUri(link.getAttribute("href") ?? "");
+			if (!atUri) continue;
+
+			this.attachToggle(link, atUri);
+		}
+	}
+
+	private attachToggle(link: HTMLElement, uri: string) {
+		const embedId = `bsky-embed-${uri.replace(/[:\/]/g, "-")}`;
+
+		const btn = document.createElement("button");
+		btn.setAttribute("aria-label", "Toggle post embed");
+		btn.addClass("bsky-embed-toggle");
+		setIcon(btn, "message-circle");
+
+		link.insertAdjacentElement("afterend", btn);
+
+		btn.addEventListener("click", () => {
+			const existing = document.getElementById(embedId);
+			if (existing) {
+				existing.remove();
+				setIcon(btn, "message-circle");
+				return;
+			}
+
+			const embedEl = document.createElement("bluesky-post") as HTMLElement;
+			embedEl.id = embedId;
+			embedEl.setAttribute("src", uri);
+			embedEl.setAttribute("allow-unauthenticated", "");
+			embedEl.addClass("bsky-post-embed-wrapper");
+
+			btn.insertAdjacentElement("afterend", embedEl);
+			setIcon(btn, "x");
+		});
+	}
+}