Links WORK

Author: spearcat

Diff for: components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     'NewBlink.ce': typeof import('./src/components/custom-elements/NewBlink.ce.vue')['default']
     'OmitVanillaCss.ce': typeof import('./src/components/custom-elements/OmitVanillaCss.ce.vue')['default']
     'OnekoKitty.ce': typeof import('./src/components/custom-elements/OnekoKitty.ce.vue')['default']
+    'RingLink.ce': typeof import('./src/components/custom-elements/RingLink.ce.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SignInGate: typeof import('./src/components/SignInGate.vue')['default']

Diff for: src/components/SignInGate.vue

@@ -11,12 +11,28 @@ defineProps<{
 }>();
 
 const handle = ref('');
+const hash = ref('');
 const open = ref(false);
 
+let finishAuthentication: () => void = () => {};
+let cancelAuthentication: () => void = () => {};
+
+const codePasteOpen = ref(false);
+
 watchImmediate(user, user => {
     handle.value = user?.handle ?? '';
 });
 
+async function authenticate() {
+    authenticateIfNecessary(handle.value, () => {
+        return new Promise((resolve, reject) => {
+            finishAuthentication = () => resolve(hash.value);
+            cancelAuthentication = reject;
+            codePasteOpen.value = true;
+        });
+    });
+}
+
 </script>
 <template>
     <VaButton :class="signInButtonClass" v-if="!user" @click="open = true">{{ signInText ?? 'Sign in' }}</VaButton>
@@ -26,9 +42,19 @@ watchImmediate(user, user => {
         v-model="open"
         ok-text="Sign In"
         cancel-text="Cancel"
-        @ok="authenticateIfNecessary(handle).finally(() => open = false)"
+        @ok="authenticate()"
     >
         <VaInput v-model="handle" label="@handle" placeholder="e.g. you.bsky.social" />
     </VaModal>
+    <VaModal
+        v-model="codePasteOpen"
+        ok-text="Complete Sign In"
+        cancel-text="Cancel"
+        @ok="finishAuthentication()"
+        @cancel="cancelAuthentication()"
+        @click-outside="cancelAuthentication()"
+    >
+        <VaInput v-model="hash" label="Input displayed code" />
+    </VaModal>
 
 </template>

Diff for: src/components/custom-elements/RingLink.ce.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { getRing } from '@/lib/atproto/atweb-unauthed';
+import { resolveRoute } from '@/lib/vue-utils';
+import { AtUri } from '@atproto/syntax';
+import { ref } from 'vue';
+
+const { direction = 'previous', ringUri, self } = defineProps<{
+    direction?: 'previous' | 'next';
+    ringUri: string;
+    self: string;
+}>();
+
+const ringAtUri = new AtUri(ringUri);
+
+const ring = await getRing(ringAtUri.host, ringAtUri.rkey);
+
+const realMembers = ring.members.filter(e => e.isMember);
+const memberIndex = realMembers.findIndex(member => member.membership.host === self);
+
+const prevMemberLink = ref<string>();
+const nextMemberLink = ref<string>();
+if (memberIndex != -1) {
+    const prevMember = ring.members[wrapAround(memberIndex - 1, realMembers.length)];
+    const nextMember = ring.members[wrapAround(memberIndex + 1, realMembers.length)];
+    prevMemberLink.value = resolveRoute(`/page/${prevMember.membership.host}/${prevMember.mainPage?.rkey ?? '!!! FAILED !!!.mdx'}`);
+    nextMemberLink.value = resolveRoute(`/page/${nextMember.membership.host}/${nextMember.mainPage?.rkey ?? '!!! FAILED !!!.mdx'}`);
+}
+
+function wrapAround(i: number, max: number) {
+    if (i >= max) i %= max;
+    else if (i < 0) i += max;
+    return i;
+}
+
+</script>
+
+<template>
+    <a class="va-link" v-bind="$attrs" :href="direction === 'previous' ? prevMemberLink : nextMemberLink">
+        <slot></slot>
+    </a>
+</template>

Diff for: src/lib/atproto/atweb-unauthed.ts

@@ -264,6 +264,7 @@ async function *getMembershipStatuses(owner: string, members: IoGithubAtwebRing.
 
         yield {
             membership: uri,
+            mainPage: result.value?.mainPage ? new AtUri(result.value.mainPage) : undefined,
             isMember,
             isOwner,
         };

Diff for: src/lib/atproto/oauth.ts

@@ -12,7 +12,7 @@ configureOAuth({
 export class AtpOauthClient {
     constructor() {}
 
-    async authenticate(handle: string) {
+    async authenticate(handle: string, showInputCodeModal: () => Promise<string>) {
         const { identity, metadata } = await resolveFromIdentity(handle);
 
         // passing `identity` is optional,
@@ -32,8 +32,8 @@ export class AtpOauthClient {
         window.open(authUrl, '_blank', 'noopener,noreferrer');
 
         // TODO setup a redirect instead
-        const hash = prompt('Input the code that was displayed on the page');
-        if (!hash) throw new Error('User cancelled authentication');
+
+        const hash = await showInputCodeModal();
 
         // `createAuthorizationUrl` asks for the server to redirect here with the
         // parameters assigned in the hash, not the search string.

Diff for: src/lib/atproto/signed-in-user.ts

@@ -55,7 +55,7 @@ watchImmediate([account, agents], ([account, agents]) => {
 const oauthClient = new AtpOauthClient();
 export async function authenticateIfNecessary(
     handle: string,
-    refreshOnly = false,
+    refreshOnlyOrShowInputCodeModal: boolean | (() => Promise<string>),
 ) {
     if (!agents.value || !account.value || account.value.handle !== handle) {
         let session: Session | undefined;
@@ -70,9 +70,9 @@ export async function authenticateIfNecessary(
 
         console.log('seession', session);
 
-        if (refreshOnly && !session) return false;
+        if (refreshOnlyOrShowInputCodeModal === true && !session) return false;
 
-        session ??= await oauthClient.authenticate(handle);
+        session ??= await oauthClient.authenticate(handle, refreshOnlyOrShowInputCodeModal as () => Promise<string>);
 
         const oauthAgent = new OAuthUserAgent(session);
 

Diff for: src/lib/markdown/components.tsx

@@ -21,6 +21,7 @@ import NewBlink from '@/components/custom-elements/NewBlink.ce.vue';
 import LesbiBadge from '@/components/custom-elements/LesbiBadge.ce.vue';
 import EightyEightThirtyOneBadge from '@/components/custom-elements/EightyEightThirtyOneBadge.ce.vue';
 import UserbarBadge from '@/components/custom-elements/UserbarBadge.ce.vue';
+import RingLink from '@/components/custom-elements/RingLink.ce.vue';
 
 type Props = Record<string, any>;
 
@@ -75,5 +76,6 @@ export const components: MDXComponents = {
     LesbiBadge: LesbiBadge,
     Badge: EightyEightThirtyOneBadge,
     Userbar: UserbarBadge,
+    RingLink: RingLink,
     ...(extraComponents as unknown as MDXComponents)
 };

Diff for: src/lib/vue-utils.ts

@@ -14,6 +14,8 @@ import {
     type Reactive,
 } from 'vue';
 import type { ReactiveMarker } from '@vue/reactivity/dist/reactivity.d.ts';
+import router from '@/router';
+import type { RouteLocationAsPath, RouteLocationAsRelative, RouteLocationAsString } from 'vue-router';
 
 export function getSlotChildrenText(
     children: Slot | VNode[] | VNodeArrayChildren | undefined,
@@ -112,3 +114,10 @@ export async function watchImmediateAsync(
 
     return watcher;
 }
+
+export function resolveRoute(route: RouteLocationAsString | RouteLocationAsRelative | RouteLocationAsPath) {
+    // https://stackoverflow.com/a/70989279
+    const resolved = router.resolve(route);
+    const absoluteURL = new URL(resolved.href, window.location.origin).href;
+    return absoluteURL;
+}

Diff for: src/pages/invited/[inviterDid]/[ringAndInviteRkey]/index.vue

@@ -12,24 +12,40 @@ const { didDocument } = await getDidAndPds(route.params.inviterDid);
 const inviterHandle = didDocument.alsoKnownAs?.[0].replace('at://', '') ?? route.params.inviterDid;
 
 const mainPage = ref('');
+const inviteAccepted = ref<boolean | string>(false);
 
 async function acceptInvite() {
     const ring = await getRing(route.params.inviterDid, route.params.ringAndInviteRkey);
     if (!ring.members.some(member => member.membership.host === user.value!.did))
         return; // invite was rescinded
 
     await user.value!.client.acceptInvite(route.params.inviterDid, route.params.ringAndInviteRkey, mainPage.value);
+
+    inviteAccepted.value = ring.name;
 }
 </script>
 
 <template>
-    <SignInGate :sign-in-text="`Sign in to view invite from @${inviterHandle}`">
-        <div>
-            Accept this invite from @{{ inviterHandle }}?
-        </div>
-        <div>
-            <VaInput v-model="mainPage" label="My Member Page" placeholder="index.mdx"/>
-            <VaButton @click="acceptInvite()" style="vertical-align: text-top; margin-top: -1px">OK</VaButton>
-        </div>
-    </SignInGate>
+    <div class="main">
+        <SignInGate :sign-in-text="`Sign in to view invite from @${inviterHandle}`">
+            <div v-if="!inviteAccepted">
+                <div>
+                    Accept this invite from @{{ inviterHandle }}?
+                </div>
+                <div>
+                    <VaInput v-model="mainPage" label="My Member Page" placeholder="index.mdx" />
+                    <VaButton @click="acceptInvite()" style="vertical-align: text-top; margin-top: -1px">OK</VaButton>
+                </div>
+            </div>
+            <div v-else>
+                Welcome to {{ inviteAccepted }}!
+            </div>
+        </SignInGate>
+    </div>
 </template>
+
+<style lang="scss" scoped>
+.main {
+    padding: 0 1rem;
+}
+</style>

Diff for: src/pages/rings.vue

@@ -9,7 +9,7 @@ import router from '@/router';
 import type { IoGithubAtwebRing } from '@atcute/client/lexicons';
 import { now as tidNow } from '@atcute/tid';
 import { AtUri } from '@atproto/syntax';
-import { computedAsync, useBrowserLocation, type ElementOf } from '@vueuse/core';
+import { computedAsync, useBrowserLocation, useClipboard, type ElementOf } from '@vueuse/core';
 import { computed, ref, shallowRef, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { RouteLocationAsPath, RouteLocationAsRelative, RouteLocationAsString, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
@@ -160,7 +160,7 @@ async function addMember(ring: Ring, handle: string) {
 
     await user.value!.client.updateRingMembers(
         ring.uri.rkey,
-        [...ring.members, AtUri.make(did, 'io.github.atweb.ringMembership', membershipTid)],
+        [...ring.members, AtUri.make(did, 'io.github.atweb.ringMembership', ring.uri.rkey)],
         ring.cid
     );
 
@@ -182,11 +182,13 @@ async function reloadRings() {
     }
 }
 
-function resolveRoute(route: RouteLocationAsString | RouteLocationAsRelative | RouteLocationAsPath) {
-    // https://stackoverflow.com/a/70989279
-    const resolved = router.resolve(route);
-    const absoluteURL = new URL(resolved.href, window.location.origin).href;
-    return absoluteURL;
+const { copy } = useClipboard();
+function copyRingMdx(ring: Ring) {
+    copy(
+        `<RingLink direction="previous" ring-uri="${ring.uri.toString()}" self="${user.value!.did}">prev</RingLink>\n` +
+            `${ring.name}\n` +
+            `<RingLink direction="next" ring-uri="${ring.uri.toString()}" self="${user.value!.did}">next</RingLink>`
+    );
 }
 </script>
 
@@ -263,6 +265,9 @@ function resolveRoute(route: RouteLocationAsString | RouteLocationAsRelative | R
                 <p>( <code>{{ selectedRing.uri }}</code> )</p>
                 <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 v-for="member in selectedRing.members" :key="member.membership.toString()" class="ring-member-card va-gutter-2">
                     <div class="va-gutter-2">
                         <bluesky-profile-card :actor="getMemberName(member.membership)" allow-unauthenticated="true">