add profile embed

Author: treethought

bun.lock

@@ -36,6 +36,7 @@
 		"@atcute/pckt": "^0.1.5",
 		"@atcute/standard-site": "^1.0.0",
 		"bluesky-post-embed": "^1.0.6",
+		"bluesky-profile-card-embed": "^1.0.1",
 		"obsidian": "latest",
 		"remark-parse": "^11.0.0",
 		"remark-stringify": "^11.0.0",

package.json

@@ -145,7 +145,7 @@ async function buildDocumentRecord(plugin: AtmospherePlugin, file: TFile): Promi
 
 	let richContent: PubLeafletContent.Main | BlogPcktContent.Main | null = null;
 	if (pub?.url.contains("leaflet.pub")) {
-		richContent = markdownToLeafletContent(resolved)
+		richContent = await markdownToLeafletContent(resolved)
 	} else if (pub?.url.contains("pckt.blog")) {
 		richContent = markdownToPcktContent(resolved)
 	}

src/commands/publishDocument.ts

@@ -6,7 +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";
+import { BskyEmbedProcessor } from "./postprocessor";
 
 export default class AtmospherePlugin extends Plugin {
 	settings: AtProtoSettings = DEFAULT_SETTINGS;
@@ -36,7 +36,7 @@ export default class AtmospherePlugin extends Plugin {
 			}
 		});
 
-		const bskyProcessor = new BlueskyPostProcessor();
+		const bskyProcessor = new BskyEmbedProcessor();
 		this.registerMarkdownPostProcessor((el, ctx) => bskyProcessor.process(el, ctx));
 
 		this.registerView(VIEW_TYPE_ATMOSPHERE_BOOKMARKS, (leaf) => {

src/main.ts

@@ -1,33 +1,35 @@
 import { Component, MarkdownPostProcessorContext, setIcon } from "obsidian";
-import { BSKY_POST_RE, bskyPostATUri } from "./util";
+import { BSKY_POST_RE, BSKY_PROFILE_RE, bskyPostATUri, bskyProfileActor } from "./util";
 
-
-export class BlueskyPostProcessor extends Component {
+export class BskyEmbedProcessor extends Component {
 
 	async process(el: HTMLElement, _ctx: MarkdownPostProcessorContext) {
-
 		if (!customElements.get("bluesky-post")) {
 			import("bluesky-post-embed");
+			import("bluesky-profile-card-embed");
 		}
 
 		const links = el.findAll("a").filter(link => {
 			const href = link.getAttribute("href") ?? "";
-			return BSKY_POST_RE.test(href);
+			return BSKY_POST_RE.test(href) || BSKY_PROFILE_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);
+			const postUri = bskyPostATUri(link.getAttribute("href") ?? "");
+			if (postUri) {
+				this.attachToggle(link, postUri);
+				return;
+			}
+			const actor = bskyProfileActor(link.getAttribute("href") ?? "");
+			if (actor) {
+				this.attachToggle(link, undefined, actor);
+			}
 		}
 	}
 
-	private attachToggle(link: HTMLElement, uri: string) {
-		const embedId = `bsky-embed-${uri.replace(/[:\/]/g, "-")}`;
-
+	private attachToggle(link: HTMLElement, uri?: string, actor?: string) {
 		const btn = document.createElement("button");
 		btn.setAttribute("aria-label", "Toggle post embed");
 		btn.addClass("bsky-embed-toggle");
@@ -36,18 +38,32 @@ export class BlueskyPostProcessor extends Component {
 		link.insertAdjacentElement("afterend", btn);
 
 		btn.addEventListener("click", () => {
+			let embedId = "";
+			if (uri) {
+				embedId = `bsky-post-embed-${uri.replace(/[:\/]/g, "-")}`;
+			} else if (actor) {
+				embedId = `bsky-profile-${actor.replace(/[:\/]/g, "-")}`;
+			} else {
+				return;
+			}
 			const existing = document.getElementById(embedId);
 			if (existing) {
 				existing.remove();
 				setIcon(btn, "message-circle");
 				return;
 			}
 
-			const embedEl = document.createElement("bluesky-post") as HTMLElement;
+			let embedEl: HTMLElement;
+			if (actor) {
+				embedEl = document.createElement("bluesky-profile-card") as HTMLElement;
+				embedEl.setAttribute("actor", actor);
+			} else {
+				embedEl = document.createElement("bluesky-post") as HTMLElement;
+				embedEl.setAttribute("src", uri!);
+			}
+
 			embedEl.id = embedId;
-			embedEl.setAttribute("src", uri);
 			embedEl.setAttribute("allow-unauthenticated", "");
-			embedEl.addClass("bsky-post-embed-wrapper");
 
 			btn.insertAdjacentElement("afterend", embedEl);
 			setIcon(btn, "x");

src/postprocessor.ts

@@ -37,6 +37,20 @@ export async function fetchOgImage(url: string): Promise<string | undefined> {
 }
 
 export const BSKY_POST_RE = /https:\/\/bsky\.app\/profile\/([^/?#]+)\/post\/([A-Za-z0-9]+)/;
+export const BSKY_PROFILE_RE = /https:\/\/bsky\.app\/profile\/([^/?#]+)/;
+
+export function bskyProfileActor(url: string): ActorIdentifier | null {
+	const match = url.match(BSKY_PROFILE_RE);
+	if (!match) return null;
+
+	const [, handleOrDid] = match;
+	if (!handleOrDid) return null;
+
+	if (!isActorIdentifier(handleOrDid)) {
+		return null
+	}
+	return handleOrDid;
+}
 
 export function bskyPostATUri(url: string): ResourceUri | null {
 	const match = url.match(BSKY_POST_RE);
@@ -69,7 +83,7 @@ export function UrlToRecordUri(url: string): ResourceUri | null {
  * Given an AT URI that may contain a handle, resolve the handle to a DID
  * and return the canonical AT URI
  */
-export async function resolveHandleInAtUri(uri: ResourceUri): Promise<ResourceUri| null> {
+export async function resolveHandleInAtUri(uri: ResourceUri): Promise<ResourceUri | null> {
 	const parsed = parseResourceUri(uri);
 	if (!parsed.ok) return uri;