feat: notes and first item view

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>