Add support for changing your atring main page

Author: spearcat

src/lib/atproto/atweb-client.ts

@@ -145,7 +145,7 @@ export class AtwebClient {
         await this.agent.put({
             collection: 'io.github.atweb.ringMembership',
             repo: this.user.did,
-            rkey: rkey,
+            rkey,
             record: {
                 $type: 'io.github.atweb.ringMembership',
                 createdAt: new Date().toISOString(),
@@ -154,4 +154,25 @@ export class AtwebClient {
             }
         });
     }
+
+    async setMainPage(rkey: string, mainPage: string) {
+        const { value, cid } = await this.agent.get({
+            collection: 'io.github.atweb.ringMembership',
+            repo: this.user.did,
+            rkey,
+        });
+
+        await this.agent.put({
+            collection: 'io.github.atweb.ringMembership',
+            repo: this.user.did,
+            rkey,
+            record: {
+                $type: 'io.github.atweb.ringMembership',
+                ring: value.ring,
+                createdAt: value.createdAt,
+                mainPage: AtUri.make(this.user.did, 'io.github.atweb.page', filepathToRkey(mainPage)).toString(),
+            },
+            swapRecord: cid,
+        });
+    }
 }

src/lib/atproto/atweb-unauthed.ts

@@ -193,14 +193,14 @@ export async function getRingsUserIsAMemberOf(didOrHandle: string) {
         repo: didOrHandle,
     });
 
-    const rings: Array<Awaited<ReturnType<typeof getRing>>> = [];
+    const rings: Array<Awaited<ReturnType<typeof getRing>> & { mainPage: AtUri }> = [];
     for (const record of records) {
         const uri = new AtUri(record.value.ring);
 
         const entry = await tryGetRing(uri.host, uri.rkey);
 
         if (entry) {
-            rings.push(entry);
+            rings.push({...entry, mainPage: new AtUri(record.value.mainPage)});
         }
     }
 

src/pages/rings.vue

@@ -3,8 +3,9 @@ import SignInGate from '@/components/SignInGate.vue';
 import { getRing, getRingsUserIsAMemberOf } from '@/lib/atproto/atweb-unauthed';
 import { resolveHandleAnonymously } from '@/lib/atproto/handles/resolve';
 import { getDidAndPds } from '@/lib/atproto/pds-helpers';
+import { rkeyToFilepath } from '@/lib/atproto/rkey';
 import { user, type User } from '@/lib/atproto/signed-in-user';
-import { watchImmediateAsync } from '@/lib/vue-utils';
+import { resolveRoute, watchImmediateAsync } from '@/lib/vue-utils';
 import router from '@/router';
 import type { IoGithubAtwebRing } from '@atcute/client/lexicons';
 import { now as tidNow } from '@atcute/tid';
@@ -17,9 +18,9 @@ import { useModal } from 'vuestic-ui';
 
 type Ring = Awaited<ReturnType<typeof getRing>>;
 
-const rings = ref<Ring[]>();
+const rings = ref<(Ring & { mainPage: AtUri })[]>();
 const route = useRoute('/rings');
-const selectedRing = ref<Ring>();
+const selectedRing = ref<(Ring & { mainPage: AtUri })>();
 
 await watchImmediateAsync(
     [route, user],
@@ -190,6 +191,19 @@ function copyRingMdx(ring: Ring) {
             `<RingLink direction="next" ring-uri="${ring.uri.toString()}" self="${user.value!.did}">next</RingLink>`
     );
 }
+
+const mainPageLink = ref('');
+watch(selectedRing, selectedRing => {
+    if (!selectedRing) return;
+    mainPageLink.value = rkeyToFilepath(selectedRing.mainPage.rkey);
+});
+
+async function setMainPage(ring: (Ring & { mainPage: AtUri }), mainPageLink: string) {
+    user.value!.client.setMainPage(
+        ring.members.find(e => e.membership.host === user.value!.did)!.membership.rkey,
+        mainPageLink
+    );
+}
 </script>
 
 <template>
@@ -266,7 +280,14 @@ function copyRingMdx(ring: Ring) {
                 <p><b>{{ selectedRing.members?.length ?? 0 }}</b> member(s)</p>
                 <p>Managed by <a class="va-link" :href="`https://bsky.app/profile/${selectedRing.uri.host}`">@{{ getMemberName(selectedRing.uri) }}</a></p>
 
-                <VaButton @click="copyRingMdx(selectedRing)">Copy ring MDX code</VaButton>
+                <div class="va-gutter-2">
+                    <VaButton @click="copyRingMdx(selectedRing)">Copy ring MDX code</VaButton>
+                </div>
+
+                <div class="va-gutter-2">
+                    <VaInput v-model="mainPageLink" label="My main page"></VaInput>
+                    <VaButton @click="setMainPage(selectedRing, mainPageLink)" class="set-my-main-page-button">Set my main page</VaButton>
+                </div>
 
                 <div v-for="member in selectedRing.members" :key="member.membership.toString()" class="ring-member-card va-gutter-2">
                     <div class="va-gutter-2">
@@ -318,6 +339,10 @@ function copyRingMdx(ring: Ring) {
 .ring-member-card:deep(.bluesky-embed) {
     margin: 0;
 }
+.set-my-main-page-button {
+    margin-left: 0.1rem;
+    vertical-align: text-top;
+}
 </style>
 
 <style lang="scss">