feat: shorten DID in public note URLs by stripping did:plc: prefix

URLs are now /pub/<base32id>/rkey instead of /pub/did:plc:<base32id>/rkey.
Non-plc DIDs keep their method prefix (e.g. web:example.com).

src/components/PublicNoteList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { PublicNoteListItem } from "@/modules/note/models/Note"
+import { toShortDid } from "@/modules/atproto/shortDid"
 import { slugify } from "@/utils/slugify"
 import { vInfiniteScroll } from "@vueuse/components"
 
@@ -25,7 +26,7 @@ defineSlots<{
           :to="{
             name: 'PublicNoteView',
             params: {
-              did: note.did,
+              shortDid: toShortDid(note.did),
               rkey: note.rkey,
               slug: slugify(note.title),
             },

src/components/StackedPublicNote.vue

@@ -9,6 +9,7 @@ import { computedAsync } from "@vueuse/core"
 import { getUrl } from "@/modules/atproto/getUrl"
 import { withATProtoImages } from "@/modules/atproto/withATProtoImages"
 import { getAuthor } from "@/modules/atproto/getAuthor"
+import { fromShortDid } from "@/modules/atproto/shortDid"
 import { PublicNoteRecord } from "@/modules/atproto/publicNote.types"
 
 const props = defineProps<{
@@ -17,7 +18,7 @@ const props = defineProps<{
 }>()
 
 const didrkey = computed(() => props.didrkey)
-const did = computed(() => props.didrkey.split("-")[0])
+const did = computed(() => fromShortDid(props.didrkey.split("-")[0]))
 const rkey = computed(() => props.didrkey.split("-")[1])
 const classNameId = computed(() => didrkey.value.replaceAll(":", "-"))
 

src/hooks/useATProtoLinks.hook.ts

@@ -3,6 +3,7 @@ import { ComputedRef, onUnmounted, Ref, toValue } from "vue"
 import { isExternalLink } from "@/utils/link"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { parseAtUri } from "@/modules/atproto/parseAtUri"
+import { toShortDid } from "@/modules/atproto/shortDid"
 import { router } from "@/router/router"
 
 export const useATProtoLinks = (
@@ -35,25 +36,25 @@ export const useATProtoLinks = (
         href.replace(window.location.origin, ""),
       )
 
-      if (!params.did || !params.rkey) {
+      if (!params.shortDid || !params.rkey) {
         return
       }
 
       const noteId = params.slug
-        ? `${params.did}-${params.rkey}-${params.slug}`
+        ? `${params.shortDid}-${params.rkey}-${params.slug}`
-        : `${params.did}-${params.rkey}`
+        : `${params.shortDid}-${params.rkey}`
 
       addStackedNote(
         toValue(currentAtUri) ?? "",
         noteId,
-        `${params.did}-${params.rkey}`,
+        `${params.shortDid}-${params.rkey}`,
       )
       return
     }
 
     if (href.startsWith("at://")) {
       const { did, rkey } = parseAtUri(href)
-      const noteId = `${did}-${rkey}`
+      const noteId = `${toShortDid(did)}-${rkey}`
 
       addStackedNote(toValue(currentAtUri) ?? "", noteId)
     }

src/modules/atproto/shortDid.ts

@@ -0,0 +1,6 @@
+export const toShortDid = (did: string) => did.replace(/^did:(plc:)?/, "")
+// did:plc:xxx → xxx, did:web:x → web:x
+
+export const fromShortDid = (shortDid: string) =>
+  shortDid.includes(":") ? `did:${shortDid}` : `did:plc:${shortDid}`
+// xxx → did:plc:xxx, web:x → did:web:x

src/router/router.ts

@@ -25,13 +25,13 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/PublicNoteListView.vue"),
   },
   {
-    path: "/pub/:did",
+    path: "/pub/:shortDid",
     name: "PublicNoteListByDidView",
     props: true,
     component: () => import("@/views/PublicNoteListByDidView.vue"),
   },
   {
-    path: "/pub/:did/:rkey/:slug?",
+    path: "/pub/:shortDid/:rkey/:slug?",
     name: "PublicNoteView",
     props: true,
     component: () => import("@/views/PublicNoteView.vue"),

src/views/PublicNoteListByDidView.vue

@@ -3,11 +3,12 @@ import HomeButton from "@/components/HomeButton.vue"
 import PublicNoteList from "@/components/PublicNoteList.vue"
 import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
 import { getAuthor } from "@/modules/atproto/getAuthor"
+import { fromShortDid } from "@/modules/atproto/shortDid"
 import { computedAsync } from "@vueuse/core"
 import { computed } from "vue"
 
-const props = defineProps<{ did: string }>()
+const props = defineProps<{ shortDid: string }>()
-const did = computed(() => props.did)
+const did = computed(() => fromShortDid(props.shortDid))
 
 const { notes, isLoading, canLoadMore, onLoadMore } = usePublicNoteList({ did })
 

src/views/PublicNoteView.vue

@@ -8,6 +8,7 @@ import { getAuthor } from "@/modules/atproto/getAuthor"
 import type { PublicNoteRecord } from "@/modules/atproto/publicNote.types"
 import { withATProtoImages } from "@/modules/atproto/withATProtoImages"
 import { getUrl } from "@/modules/atproto/getUrl"
+import { fromShortDid } from "@/modules/atproto/shortDid"
 import { downloadFont } from "@/utils/downloadFont"
 import { slugify } from "@/utils/slugify"
 import { computedAsync } from "@vueuse/core"
@@ -19,9 +20,9 @@ import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useTitle } from "@vueuse/core"
 import { displayLanguage } from "@/utils/displayLanguage"
 
-const props = defineProps<{ did: string; rkey: string; slug?: string }>()
+const props = defineProps<{ shortDid: string; rkey: string; slug?: string }>()
 const router = useRouter()
-const did = computed(() => props.did)
+const did = computed(() => fromShortDid(props.shortDid))
 const rkey = computed(() => props.rkey)
 
 const author = computedAsync(async () => getAuthor(did.value))
@@ -125,7 +126,7 @@ watch(
     <div class="note article">
       <div class="header">
         <back-button
-          :fallback="{ name: 'PublicNoteListByDidView', params: { did } }"
+          :fallback="{ name: 'PublicNoteListByDidView', params: { shortDid } }"
           :prefer-fallback="false"
         />
 
@@ -134,7 +135,7 @@ watch(
           v-if="author && content"
         >
           <router-link
-            :to="{ name: 'PublicNoteListByDidView', params: { did: did } }"
+            :to="{ name: 'PublicNoteListByDidView', params: { shortDid } }"
             class="link link-hover"
           >
             {{ author.handle }}