feat: render some real content

src/views/PublicNoteView.vue

@@ -1,24 +1,66 @@
 <script setup lang="ts">
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { getUniqueAka } from "@/modules/atproto/getAka"
 import { getUrl } from "@/modules/atproto/getUrl"
 import { computedAsync } from "@vueuse/core"
 import { computed } from "vue"
 
+export interface Root {
+  uri: string
+  cid: string
+  value: Value
+}
+
+export interface Value {
+  $type: string
+  title: string
+  images: Image[]
+  content: string
+  createdAt: string
+  publishedAt: string
+}
+
+export interface Image {
+  alt: string
+  image: Image2
+}
+
+export interface Image2 {
+  $type: string
+  ref: Ref
+  mimeType: string
+  size: number
+}
+
+export interface Ref {
+  $link: string
+}
+
 const props = defineProps<{ did: string; rkey: string }>()
 const did = computed(() => props.did)
 const rkey = computed(() => props.rkey)
 
+const alias = computedAsync(async () => getUniqueAka(did.value))
 const url = computedAsync(async () =>
   getUrl({ did: did.value, rkey: rkey.value }),
 )
-const content = computedAsync(async () =>
-  url.value ? (await fetch(url.value).then()).json() : null,
+const rawContent = computedAsync(async () =>
+  url.value ? ((await fetch(url.value).then()).json() as Promise<Root>) : null,
+)
+const { toHTML } = markdownBuilder()
+
+// const title = computed(() => rawContent.value?.value.title)
+const content = computed(() =>
+  rawContent.value?.value.content
+    ? toHTML(rawContent.value?.value.content)
+    : "",
 )
 </script>
 
 <template>
   <div class="public-note-view">
-    {{ did }}/{{ rkey }}@{{ url }}
-    <pre>{{ content }}</pre>
+    <span v-if="alias">{{ alias }}</span>
+    <div v-html="content"></div>
   </div>
 </template>
 

src/views/TodoNotes.vue

@@ -2,7 +2,7 @@
 import { computed, defineAsyncComponent, nextTick, ref, watch } from "vue"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { useCheckboxCommit } from "@/hooks/useCheckboxCommit.hook"
-import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { queryFileContent } from "@/modules/repo/services/repo"
 import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
 
@@ -20,23 +20,19 @@ const todoNote = computed(() =>
 const sha = computed(() => todoNote.value?.sha ?? "")
 const path = computed(() => todoNote.value?.path)
 
-const { toHTML } = useMarkdown(repo)
+const { toHTML } = markdownBuilder(repo)
 
 // Setup checkbox commit handler
-const {
-  pendingContent,
-  syncContent,
-  listenToCheckboxes,
-  hasPendingChanges,
-} = useCheckboxCommit({
-  user: props.user,
-  repo: props.repo,
-  path,
-  initialContent: "",
-  initialSha: sha,
-  containerSelector: ".todo-notes .note-display",
-  debounceMs: 1000,
-})
+const { pendingContent, syncContent, listenToCheckboxes, hasPendingChanges } =
+  useCheckboxCommit({
+    user: props.user,
+    repo: props.repo,
+    path,
+    initialContent: "",
+    initialSha: sha,
+    containerSelector: ".todo-notes .note-display",
+    debounceMs: 1000,
+  })
 
 // Render pending content to HTML for display
 const renderedContent = computed(() => {