WIP implementation of webrings

spearcat · spearcat · commit 63db87d77535 · 2024-12-16T14:33:58.000-03:00
diff --git a/components.d.ts b/components.d.ts
@@ -26,6 +26,10 @@ declare module 'vue' {
     SpotifyPlayer: typeof import('./src/components/custom-elements/SpotifyPlayer.vue')['default']
     'UserbarBadge.ce': typeof import('./src/components/custom-elements/UserbarBadge.ce.vue')['default']
     VaButton: typeof import('vuestic-ui')['VaButton']
+    VaForm: typeof import('vuestic-ui')['VaForm']
+    VaInput: typeof import('vuestic-ui')['VaInput']
+    VaModal: typeof import('vuestic-ui')['VaModal']
+    VaSelect: typeof import('vuestic-ui')['VaSelect']
     'WebampPlayer.ce': typeof import('./src/components/custom-elements/WebampPlayer.ce.vue')['default']
   }
 }
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/src/assets/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>
diff --git a/lexicons/ring.json b/lexicons/ring.json
@@ -35,6 +35,9 @@
         "member": {
             "type": "object",
             "description": "Represents a webring invitation.",
+            "required": [
+                "membership"
+            ],
             "properties": {
                 "membership": {
                     "type": "string",
diff --git a/lexicons/ring.yml b/lexicons/ring.yml
@@ -28,6 +28,8 @@ defs:
     type: object
     description: >-
       Represents a webring invitation.
+    required:
+      - membership
     properties:
       membership:
         type: string
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@atcute/cid": "^1.0.2",
     "@atcute/client": "^2.0.6",
     "@atcute/oauth-browser-client": "^1.0.7",
+    "@atcute/tid": "^1.0.1",
     "@atproto/syntax": "^0.3.1",
     "@mdx-js/mdx": "^3.1.0",
     "@noble/hashes": "^1.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -42,6 +42,7 @@ watchImmediate(prefersDark, prefersDark => {
                     <VaButton preset="secondary" to="/">Home</VaButton>
                     <VaButton preset="secondary" to="/edit">Create Page</VaButton>
                     <VaButton preset="secondary" to="/page/did:plc:nmc77zslrwafxn75j66mep6o/test.mdx">Test Page</VaButton>
+                    <VaButton preset="secondary" to="/rings">My @rings</VaButton>
                 </template>
             </VaNavbar>
         </template>
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
diff --git a/src/components/SignInGate.vue b/src/components/SignInGate.vue
@@ -28,7 +28,7 @@ watchImmediate(user, user => {
         cancel-text="Cancel"
         @ok="authenticateIfNecessary(handle).finally(() => open = false)"
     >
-        <VaInput v-model="handle" placeholder="Handle" />
+        <VaInput v-model="handle" label="@handle" placeholder="e.g. you.bsky.social" />
     </VaModal>
 
 </template>
diff --git a/src/lib/atproto/atweb-client.ts b/src/lib/atproto/atweb-client.ts
@@ -1,13 +1,14 @@
 import { KittyAgent } from './kitty-agent';
 import { parseAtUri } from '../utils';
-import type { At, IoGithubAtwebFile } from '@atcute/client/lexicons';
+import type { At, IoGithubAtwebFile, IoGithubAtwebRing } from '@atcute/client/lexicons';
 import { parse as parseMime } from 'file-type-mime';
 import { toString as ui8ToString, fromString as ui8FromString } from 'uint8arrays';
 import { user, type Account, type User } from './signed-in-user';
 import { getDidAndPds } from './pds-helpers';
 import { AtUri } from '@atproto/syntax';
 import { filepathToRkey } from './rkey';
 import { lookupMime } from '../mime';
+import { now as tidNow } from '@atcute/tid';
 
 export class AtwebClient {
     get agent(): KittyAgent {
@@ -64,4 +65,63 @@ export class AtwebClient {
 
         return { ...result, rkey };
     }
+
+    async createRing(
+        name: string,
+        creatorMainPage: string,
+    ): Promise<{ cid: At.CID; uri: AtUri; }> {
+        const tid = tidNow();
+
+        const membership = await this.agent.create({
+            collection: 'io.github.atweb.ringMembership',
+            repo: this.user.did,
+            rkey: tid,
+            record: {
+                $type: 'io.github.atweb.ringMembership',
+                ring: AtUri.make(this.user.did, 'io.github.atweb.ring', tid).toString(),
+                mainPage: AtUri.make(this.user.did, 'io.github.atweb.page', filepathToRkey(creatorMainPage)).toString(),
+                createdAt: new Date().toISOString(),
+            }
+        });
+
+        const result = await this.agent.create({
+            collection: 'io.github.atweb.ring',
+            repo: this.user.did,
+            rkey: tid,
+            record: {
+                $type: 'io.github.atweb.ring',
+                name: name,
+                members: [{
+                    membership: membership.uri,
+                }],
+                createdAt: new Date().toISOString(),
+            }
+        });
+
+        return { ...result, uri: new AtUri(result.uri) };
+    }
+
+    async updateRing(
+        rkey: string,
+        ring: IoGithubAtwebRing.Record,
+        swapRecord?: string,
+    ) {
+        await this.agent.put({
+            collection: 'io.github.atweb.ring',
+            repo: this.user.did,
+            rkey,
+            record: ring,
+            swapRecord
+        });
+    }
+
+    async deleteRing(
+        rkey: string
+    ) {
+        await this.agent.delete({
+            collection: 'io.github.atweb.ring',
+            repo: this.user.did,
+            rkey,
+        });
+    }
 }
diff --git a/src/lib/atproto/atweb-unauthed.ts b/src/lib/atproto/atweb-unauthed.ts
@@ -1,6 +1,6 @@
 import { CredentialManager, simpleFetchHandler } from "@atcute/client";
 import { KittyAgent } from "./kitty-agent";
-import type { At } from "@atcute/client/lexicons";
+import type { At, IoGithubAtwebRing } from "@atcute/client/lexicons";
 import { parseAtUri } from "../utils";
 import { getDidAndPds } from "./pds-helpers";
 import type { Awaitable } from "@vueuse/core";
@@ -197,3 +197,56 @@ export async function getManagedRings(didOrHandle: string) {
         uri: new AtUri(record.uri),
     }));
 }
+
+export async function getRingsUserIsAMemberOf(didOrHandle: string) {
+    const { records } = await unauthedAgent.list({
+        collection: 'io.github.atweb.ringMembership',
+        repo: didOrHandle,
+    });
+
+    const rings: Array<IoGithubAtwebRing.Record & { uri: AtUri }> = [];
+    for (const record of records) {
+        const uri = new AtUri(record.value.ring);
+        if (uri.host === didOrHandle) continue;
+
+        const entry = await unauthedAgent.tryGet({
+            collection: 'io.github.atweb.ring',
+            repo: uri.host,
+            rkey: uri.rkey,
+        });
+
+        if (entry.value) {
+            rings.push({
+                ...entry.value,
+                uri: new AtUri(entry.uri),
+            });
+        }
+    }
+
+    return rings;
+}
+
+export async function getMemberRings(didOrHandle: string) {
+    const { records } = await unauthedAgent.list({
+        collection: 'io.github.atweb.ring',
+        repo: didOrHandle,
+    });
+
+    return records.map(record => ({
+        ...record.value,
+        uri: new AtUri(record.uri),
+    }));
+}
+
+export async function getRing(repo: string, rkey: string) {
+    const result = await unauthedAgent.get({
+        collection: 'io.github.atweb.ring',
+        repo,
+        rkey,
+    });
+    return {
+        ...result.value,
+        cid: result.cid,
+        uri: new AtUri(result.uri),
+    };
+}
diff --git a/src/lib/atproto/handles/did-document.ts b/src/lib/atproto/handles/did-document.ts
@@ -133,8 +133,3 @@ export async function getDidDocument(did: At.DID): Promise<DidDocument> {
 
     return doc;
 }
-
-export async function getPdsFromDid(did: At.DID) {
-    const didDocument = await getDidDocument(did);
-    return getPdsEndpoint(didDocument);
-}
diff --git a/src/lib/atproto/kitty-agent.ts b/src/lib/atproto/kitty-agent.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 
 import { XRPC, XRPCError, type XRPCOptions, type XRPCRequestOptions, type XRPCResponse } from "@atcute/client";
-import type { At, ComAtprotoRepoApplyWrites, ComAtprotoRepoCreateRecord, ComAtprotoRepoGetRecord, ComAtprotoRepoListRecords, ComAtprotoRepoPutRecord, ComAtprotoSyncGetBlob, ComAtprotoSyncListBlobs, Procedures, Queries, Records } from "@atcute/client/lexicons";
+import type { At, ComAtprotoRepoApplyWrites, ComAtprotoRepoCreateRecord, ComAtprotoRepoDeleteRecord, ComAtprotoRepoGetRecord, ComAtprotoRepoListRecords, ComAtprotoRepoPutRecord, ComAtprotoSyncGetBlob, ComAtprotoSyncListBlobs, Procedures, Queries, Records } from "@atcute/client/lexicons";
 
 interface GetRecordParams<K extends keyof Records> extends ComAtprotoRepoGetRecord.Params { collection: K; }
 interface GetRecordOutput<K extends keyof Records> extends ComAtprotoRepoGetRecord.Output { value: Records[K]; }
@@ -152,6 +152,12 @@ export class KittyAgent<X extends XRPC = XRPC> {
         return data as CreateRecordOutput<K>;
     }
 
+    async delete(params: ComAtprotoRepoDeleteRecord.Input) {
+        const data = await this.call('com.atproto.repo.deleteRecord', params);
+
+        return data;
+    }
+
     async paginatedList<K extends keyof Records>(params: {
         repo: string,
         collection: K,
diff --git a/src/lib/atproto/lexicon.ts b/src/lib/atproto/lexicon.ts
@@ -43,7 +43,7 @@ declare module '@atcute/client/lexicons' {
         interface Member {
             [Brand.Type]?: 'io.github.atweb.ring#member';
             /** Link to the membership record for this member. */
-            membership?: At.Uri;
+            membership: At.Uri;
         }
     }
 
diff --git a/src/lib/atproto/pds-helpers.ts b/src/lib/atproto/pds-helpers.ts
@@ -1,19 +1,21 @@
-import { getPdsFromDid } from './handles/did-document';
+import { getDidDocument, getPdsEndpoint } from './handles/did-document';
 import type { At } from "@atcute/client/lexicons";
 import { resolveHandleAnonymously } from "./handles/resolve";
+import type { DidDocument } from '@atcute/client/utils/did';
 
-const didPdsCache = new Map<string, { did: At.DID; pds: string }>();
+const didPdsCache = new Map<string, { did: At.DID; pds: string, didDocument: DidDocument }>();
 
-export async function getDidAndPds(handleOrDid: string): Promise<{ did: At.DID; pds: string }> {
+export async function getDidAndPds(handleOrDid: string): Promise<{ did: At.DID; pds: string, didDocument: DidDocument }> {
     if (didPdsCache.has(handleOrDid)) {
         return didPdsCache.get(handleOrDid)!;
     }
 
     const did = await resolveHandleAnonymously(handleOrDid);
-    const pds = await getPdsFromDid(did);
+    const didDocument = await getDidDocument(did);
+    const pds = getPdsEndpoint(didDocument);
     if (!pds) throw new Error(`No PDS for ${handleOrDid} (${did})!`);
 
-    didPdsCache.set(handleOrDid, { did, pds });
+    didPdsCache.set(handleOrDid, { did, pds, didDocument });
 
-    return { did, pds };
+    return { did, pds, didDocument };
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,7 @@
 import './assets/main.scss';
 
+import 'bluesky-profile-card-embed';
+
 // import './custom-elements.ts';
 
 import { createApp } from 'vue';
diff --git a/src/router.ts b/src/router.ts
@@ -29,12 +29,6 @@ const router = createRouter({
             name: 'invited',
             component: () => import('@/views/ReceiveInviteView.vue'),
         },
-        // manage a webring you own
-        {
-            path: '/ring/:rkey',
-            name: 'ring',
-            component: () => import('@/views/RingView.vue'),
-        },
         // manage your rings and the rings you are in
         {
             path: '/rings',
diff --git a/src/views/ListRingsView.vue b/src/views/ListRingsView.vue
diff --git a/src/views/RingView.vue b/src/views/RingView.vue

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,10 @@ declare module 'vue' {`
`26`	`26`	`SpotifyPlayer: typeof import('./src/components/custom-elements/SpotifyPlayer.vue')['default']`
`27`	`27`	`'UserbarBadge.ce': typeof import('./src/components/custom-elements/UserbarBadge.ce.vue')['default']`
`28`	`28`	`VaButton: typeof import('vuestic-ui')['VaButton']`
	`29`	`+ VaForm: typeof import('vuestic-ui')['VaForm']`
	`30`	`+ VaInput: typeof import('vuestic-ui')['VaInput']`
	`31`	`+ VaModal: typeof import('vuestic-ui')['VaModal']`
	`32`	`+ VaSelect: typeof import('vuestic-ui')['VaSelect']`
`29`	`33`	`'WebampPlayer.ce': typeof import('./src/components/custom-elements/WebampPlayer.ce.vue')['default']`
`30`	`34`	`}`
`31`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ watchImmediate(user, user => {`
`28`	`28`	`cancel-text="Cancel"`
`29`	`29`	`@ok="authenticateIfNecessary(handle).finally(() => open = false)"`
`30`	`30`	`>`
`31`		`- <VaInput v-model="handle" placeholder="Handle" />`
	`31`	`+ <VaInput v-model="handle" label="@handle" placeholder="e.g. you.bsky.social" />`
`32`	`32`	`</VaModal>`
`33`	`33`
`34`	`34`	`</template>`