feat: notes and first item view

src/modules/atproto/getUrl.ts

@@ -0,0 +1,13 @@
+export const getUrl = async ({ did, rkey }: { did: string; rkey: string }) => {
+  const response = await fetch(`https://plc.directory/${did}`)
+  const {
+    service: [{ serviceEndpoint }],
+  } = await response.json()
+
+  const url = new URL("/xrpc/com.atproto.repo.getRecord", serviceEndpoint)
+  url.searchParams.set("repo", did)
+  url.searchParams.set("collection", "space.litenote.note")
+  url.searchParams.set("rkey", rkey)
+
+  return url.toString()
+}

src/router/router.ts

@@ -14,15 +14,21 @@ const routes: Array<RouteRecordRaw> = [
     props: true,
     component: () => import("@/views/FluxNoteView.vue"),
   },
+  {
+    path: "/tiboudenote",
+    name: "PublicNoteListView",
+    component: () => import("@/views/PublicNoteListView.vue"),
+  },
   {
     path: "/notes",
     name: "PublicNoteListView",
     component: () => import("@/views/PublicNoteListView.vue"),
   },
   {
-    path: "/tiboudenote",
-    name: "PublicNoteListView",
-    component: () => import("@/views/PublicNoteListView.vue"),
+    path: "/notes/:did/:rkey",
+    name: "PublicNoteView",
+    props: true,
+    component: () => import("@/views/PublicNoteView.vue"),
   },
   {
     path: "/:user/:repo/inbox",

src/views/PublicNoteListView.vue

@@ -28,7 +28,15 @@ const getAlias = (did: string) => aka.value.get(did) ?? ""
   <div class="public-note-view" v-else>
     <ul>
       <li v-for="note in state.notes">
-        {{ getAlias(note.did) }}: {{ note.title }}
+        {{ getAlias(note.did) }}:
+        <router-link
+          :to="{
+            name: 'PublicNoteView',
+            params: { did: note.did, rkey: note.rkey },
+          }"
+          class="btn btn-link"
+          >{{ note.title }}</router-link
+        >
       </li>
     </ul>
   </div>

src/views/PublicNoteView.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { getUrl } from "@/modules/atproto/getUrl"
+import { computedAsync } from "@vueuse/core"
+import { computed } from "vue"
+
+const props = defineProps<{ did: string; rkey: string }>()
+const did = computed(() => props.did)
+const rkey = computed(() => props.rkey)
+
+const url = computedAsync(async () =>
+  getUrl({ did: did.value, rkey: rkey.value }),
+)
+const content = computedAsync(async () =>
+  url.value ? (await fetch(url.value).then()).json() : null,
+)
+</script>
+
+<template>
+  <div class="public-note-view">
+    {{ did }}/{{ rkey }}@{{ url }}
+    <pre>{{ content }}</pre>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.public-note-view {
+}
+</style>