get PDS link component to work

Author: essential-randomness

webcomponent-pds-links/__example__/package-lock.json

@@ -10,6 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@atproto/identity": "^0.4.9",
+    "@fujocoded/zod-transform-socials": "^0.0.12",
     "astro": "^5.12.9"
   },
   "devDependencies": {

webcomponent-pds-links/__example__/package.json

@@ -1,65 +1,161 @@
+import {
+  SocialLinks,
+  type SocialLinksData,
+} from "@fujocoded/zod-transform-socials";
+import { IdResolver } from "@atproto/identity";
+
+const IDENTITY_RESOLVER = new IdResolver({});
+
+export const getDid = async ({ didOrHandle }: { didOrHandle: string }) => {
+  if (didOrHandle.startsWith("did:")) {
+    return didOrHandle;
+  }
+  return await IDENTITY_RESOLVER.handle.resolve(didOrHandle);
+};
+
+export const getPdsUrl = async ({ didOrHandle }: { didOrHandle: string }) => {
+  const did = await getDid({ didOrHandle });
+  if (!did) {
+    throw new Error(`Did not resolve to a valid DID: ${didOrHandle}`);
+  }
+  const atprotoData = await IDENTITY_RESOLVER.did.resolveAtprotoData(did);
+  return atprotoData.pds;
+};
+
 type Contact = {
-    url: string;
-    platform?: string;
-}
+  url: string;
+  platform?: string;
+};
 type Card = {
-    name: string;
-    contacts: Contact[];
+  name: string;
+  contacts: Contact[];
 };
 
 type Collections = {
-    cursor: string | undefined;
-    records: {
-        cid: string;
-        uri: string;
-        value: Card
-    }[];
-}
+  cursor: string | undefined;
+  records: {
+    cid: string;
+    uri: string;
+    value: Card;
+  }[];
+};
 
 class PdsLinks extends HTMLElement {
-    static observedAttributes = ["did", "pds-url"];
+  static observedAttributes = ["did", "handle", "at-identifier"];
+
+  constructor() {
+    super();
+  }
 
-    constructor() {
-        super();
+  async getPdsData() {
+    const userId =
+      this.getAttribute("did") ??
+      this.getAttribute("handle") ??
+      this.getAttribute("at-identifier");
+    if (!userId) {
+      throw new Error("Couldn't find a valid UserId");
     }
+    const did = await getDid({ didOrHandle: userId });
+    return {
+      did: did!,
+      url: await getPdsUrl({ didOrHandle: userId }),
+    };
+  }
 
-    updateContacts(card: Card) {
-        const template = this.querySelector("template");
-        console.log(template);
-        if (!template) {
-            return;
-        }
-        const contactElements = card.contacts.map(contact => {
-            const contactElement = template?.content.firstElementChild?.cloneNode(true) as HTMLLIElement;
-            const linkElement = contactElement.querySelector("a")!;
-            linkElement.href = contact.url;
-            linkElement.dataset.platform = contact.platform;
-            linkElement.innerText = contact.url;
-            return contactElement;
-        });
-            console.log(contactElements);
-        this.replaceChildren(template, ...contactElements);
+  /**
+   * Returns the element with the given tag from the given parent, or
+   * creates and appends it if there's none.
+   *
+   * Additionally, if no parent is given, return that Element in the template,
+   * or make the given one as a new root and append it.
+   */
+  getOrCreateElement<T extends HTMLElement>(
+    elementTag: keyof HTMLElementTagNameMap,
+    parent?: HTMLElement
+  ): T {
+    if (!parent) {
+      const template = this.querySelector("template")?.content.cloneNode(
+        true
+      ) as DocumentFragment | undefined;
+      if (template?.querySelector(elementTag)) {
+        const newTag = this.appendChild(template.querySelector(elementTag)!)
+        return newTag as T;
+      }
+    } else {
+      const innerElement = parent.querySelector(elementTag);
+      if (innerElement) {
+        return innerElement as T;
+      }
     }
+    const newElement = document.createElement(elementTag) as T;
+    (parent ?? this).appendChild(newElement);
+    return newElement;
+  }
 
-    async connectedCallback() {
-        const did = this.getAttribute("did")!;
-        const pdsUrl = this.getAttribute("pds-url")!;
-        const getRecordsEndpoint = new URL("/xrpc/com.atproto.repo.listRecords", pdsUrl);
-        getRecordsEndpoint.searchParams.set("repo", did);
-        getRecordsEndpoint.searchParams.set("collection", "com.fujocoded.rolodex.card");
-
-        const collectionsResponse = await fetch(getRecordsEndpoint);
-        if (collectionsResponse.ok) {
-            const collections = await collectionsResponse.json();
-            console.log(collections);
-            this.updateContacts((collections as unknown as Collections).records[0].value)
-        }
+  getInnerLinkText(contact: SocialLinksData[number]) {
+    const name =
+      contact.username ??
+      contact.url.replace("http://", "").replace("https://", "");
+    return name.endsWith("/") ? name.substring(0, name.length - 1) : name;
+  }
+
+  getIcon(contact: SocialLinksData[number]) {
+    if (contact.icon?.startsWith("simple-icons:")) {
+      const iconName = contact.icon.replace("simple-icons:", "");
+      return `https://cdn.simpleicons.org/${iconName}`;
     }
 
-    // attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    //     console.log(name, oldValue, newValue)
-    // }
-}
+    if (contact.icon == "favicon") {
+      return new URL("/favicon/favicon-32x32.png", contact.url).href;
+    }
+  }
+
+  updateContacts(card: Card) {
+    const contactElements = SocialLinks.parse(card.contacts).map((contact) => {
+      const contactElement = this.getOrCreateElement<HTMLLIElement>("li");
+      const linkElement = this.getOrCreateElement<HTMLAnchorElement>(
+        "a",
+        contactElement
+      );
+
+      linkElement.href = contact.url;
+      linkElement.dataset.platform = contact.platform;
+      linkElement.innerText = this.getInnerLinkText(contact);
+
+      const iconUrl = this.getIcon(contact);
+      if (iconUrl) {
+      contactElement.dataset.icon = iconUrl;
+      contactElement.style.setProperty("--icon-url", `url(${iconUrl})`)
+      }
 
+      return contactElement;
+    });
+    const root = this.getOrCreateElement("ul");
+    root.replaceChildren(this.querySelector("template") ?? "", ...contactElements);
+  }
+
+  async connectedCallback() {
+    // As soon as we latch in, we go get the data from the PDS
+    const pdsData = await this.getPdsData();
+
+    const getRecordsEndpoint = new URL(
+      "/xrpc/com.atproto.repo.listRecords",
+      pdsData.url
+    );
+    getRecordsEndpoint.searchParams.set("repo", pdsData.did);
+    getRecordsEndpoint.searchParams.set(
+      "collection",
+      "com.fujocoded.rolodex.card"
+    );
+
+    const collectionsResponse = await fetch(getRecordsEndpoint);
+    if (collectionsResponse.ok) {
+      const collections = await collectionsResponse.json();
+      this.updateContacts(
+        (collections as unknown as Collections).records[0].value
+      );
+    }
+  }
+}
 
-customElements.define("atfujo-links", PdsLinks)
+customElements.define("atfujo-links", PdsLinks);