feat: render some real content

src/components/FluxNote.vue

@@ -11,7 +11,7 @@ import {
 
 import StackedNote from "@/components/StackedNote.vue"
 import { useLinks } from "@/hooks/useLinks.hook"
-import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { useNoteView } from "@/hooks/useNoteView.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
@@ -48,7 +48,7 @@ const refProps = toRefs(props)
 const store = useUserRepoStore()
 useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
-const { toHTML } = useMarkdown(repo)
+const { toHTML } = markdownBuilder(repo)
 const { listenToClick } = useLinks("note-display")
 const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
 

src/components/StackedNote.vue

@@ -188,34 +188,6 @@ watch(mode, async (newMode) => {
           <path d="M16 5l3 3" />
         </svg>
       </button>
-      <router-link
-        v-if="false"
-        :to="{
-          name: 'ShareNotes',
-          params: { user: user, repo: repo, note: sha },
-        }"
-        class="action"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-share"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <circle cx="6" cy="12" r="3" />
-          <circle cx="18" cy="6" r="3" />
-          <circle cx="18" cy="18" r="3" />
-          <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
-          <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
-        </svg>
-      </router-link>
       <div v-if="mode === 'edit'" class="edit">
         <edit-note v-model="rawContent" />
 

src/hooks/useFile.hook.ts

@@ -1,6 +1,6 @@
 import { computed, Ref, ref, toValue } from "vue"
 
-import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
 import { queryFileContent } from "@/modules/repo/services/repo"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
@@ -18,7 +18,7 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
     render,
     renderFromUTF8,
     getRawContent: getRawContentFromFile,
-  } = useMarkdown(shaValue)
+  } = markdownBuilder(shaValue)
 
   const { getCachedNote, saveCacheNote } = prepareNoteCache(
     shaValue,

src/hooks/useMarkdown.hook.ts

@@ -116,7 +116,7 @@ const rules: Renderer.RenderRuleRecord = {
 
 md.renderer.rules = { ...md.renderer.rules, ...rules }
 
-export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
+export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
   const getRawContent = (content: string) => decodeBase64ToUTF8(content)
   const renderFromUTF8 = (content: string, prefix?: string) =>
     content

src/modules/atproto/getAka.ts

@@ -1,5 +1,22 @@
 const correspondanceCache = new Map<string, string>()
 
+export const getUniqueAka = async (did: string) => {
+  if (correspondanceCache.has(did)) {
+    return correspondanceCache.get(did) as string
+  }
+
+  const response = await fetch(`https://plc.directory/${did}`)
+  const {
+    alsoKnownAs: [aka],
+  } = await response.json()
+
+  const alias = aka.replace("at://", "")
+
+  correspondanceCache.set(did, alias)
+
+  return alias
+}
+
 export const getAka = async (dids: Set<string>) => {
   const correspondance = await Promise.all(
     [...dids].map(async (did) => {

src/modules/atproto/getUrl.ts

@@ -1,10 +1,24 @@
-export const getUrl = async ({ did, rkey }: { did: string; rkey: string }) => {
+const endpointCache = new Map<string, string>()
+
+const getEndpoint = async (did: string) => {
+  if (endpointCache.has(did)) {
+    return endpointCache.get(did)
+  }
   const response = await fetch(`https://plc.directory/${did}`)
   const {
     service: [{ serviceEndpoint }],
   } = await response.json()
 
-  const url = new URL("/xrpc/com.atproto.repo.getRecord", serviceEndpoint)
+  endpointCache.set(did, serviceEndpoint)
+
+  return serviceEndpoint as string
+}
+
+export const getUrl = async ({ did, rkey }: { did: string; rkey: string }) => {
+  const url = new URL(
+    "/xrpc/com.atproto.repo.getRecord",
+    await getEndpoint(did),
+  )
   url.searchParams.set("repo", did)
   url.searchParams.set("collection", "space.litenote.note")
   url.searchParams.set("rkey", rkey)

src/modules/card/hooks/useSpacedRepetitionCards.ts

@@ -1,18 +1,18 @@
 // https://npm.io/package/supermemo
 
-import { useAsyncState } from '@vueuse/core'
-import { addDays, isAfter } from 'date-fns'
-import { computed, nextTick, watch } from 'vue'
+import { useAsyncState } from "@vueuse/core"
+import { addDays, isAfter } from "date-fns"
+import { computed, nextTick, watch } from "vue"
 
-import { data } from '@/data/data'
-import { DataType } from '@/data/DataType.enum'
-import { useFile } from '@/hooks/useFile.hook'
-import { useLinks } from '@/hooks/useLinks.hook'
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { Card } from '@/modules/card/models/Card'
-import { RepetitionCard } from '@/modules/card/models/RepetitionCard'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
+import { data } from "@/data/data"
+import { DataType } from "@/data/DataType.enum"
+import { useFile } from "@/hooks/useFile.hook"
+import { useLinks } from "@/hooks/useLinks.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { Card } from "@/modules/card/models/Card"
+import { RepetitionCard } from "@/modules/card/models/RepetitionCard"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
 
 const MAX_LEVEL = 8
 
@@ -22,23 +22,23 @@ export interface Repetition {
 }
 
 export const useSpacedRepetitionCards = () => {
-  const { toHTML } = useMarkdown()
+  const { toHTML } = markdownBuilder()
   const store = useUserRepoStore()
-  const { listenToClick } = useLinks('flip-card')
+  const { listenToClick } = useLinks("flip-card")
 
   const cardFiles = computed(() =>
     store.files.filter(
       (file) =>
         file.path !== undefined &&
-        file.path.startsWith('_cards') &&
-        file.path.endsWith('.md')
-    )
+        file.path.startsWith("_cards") &&
+        file.path.endsWith(".md"),
+    ),
   )
 
   const {
     state: cards,
     isReady,
-    execute
+    execute,
   } = useAsyncState(
     async () => {
       const cards: Repetition[] = []
@@ -55,7 +55,7 @@ export const useSpacedRepetitionCards = () => {
           $type: DataType.RepetitionCard,
           level: 1,
           repeatDate: new Date(),
-          needsReview: false
+          needsReview: false,
         })
 
         if (
@@ -67,30 +67,30 @@ export const useSpacedRepetitionCards = () => {
         }
 
         const { getContent } = useFile(cardFile.sha, false)
-        const content = (await getContent()) ?? ''
+        const content = (await getContent()) ?? ""
 
         const [front, back, references] =
-          decodeBase64ToUTF8(content).split('___') ?? []
+          decodeBase64ToUTF8(content).split("___") ?? []
 
         cards.push({
           repetition,
           card: {
             front: toHTML(front),
             back: toHTML(back),
-            references: toHTML(references)
-          }
+            references: toHTML(references),
+          },
         })
       }
 
       return cards
     },
     [],
-    { immediate: false }
+    { immediate: false },
   )
 
   const successRepetition = async (cardId: string) => {
     const repetition = await data.get<DataType.RepetitionCard, RepetitionCard>(
-      cardId
+      cardId,
     )
     if (!repetition) {
       return
@@ -100,13 +100,13 @@ export const useSpacedRepetitionCards = () => {
       ...repetition,
       needsReview: false,
       level: Math.min(repetition.level + 1, MAX_LEVEL),
-      repeatDate: addDays(new Date(), 2 ** repetition.level)
+      repeatDate: addDays(new Date(), 2 ** repetition.level),
     })
   }
 
   const failRepetition = async (cardId: string) => {
     const repetition = await data.get<DataType.RepetitionCard, RepetitionCard>(
-      cardId
+      cardId,
     )
     if (!repetition) {
       return
@@ -118,13 +118,13 @@ export const useSpacedRepetitionCards = () => {
       ...repetition,
       level,
       needsReview: false,
-      repeatDate: addDays(new Date(), level)
+      repeatDate: addDays(new Date(), level),
     })
   }
 
   const needsReview = async (cardId: string) => {
     const repetition = await data.get<DataType.RepetitionCard, RepetitionCard>(
-      cardId
+      cardId,
     )
     if (!repetition) {
       return
@@ -132,7 +132,7 @@ export const useSpacedRepetitionCards = () => {
 
     await data.update<DataType.RepetitionCard, RepetitionCard>({
       ...repetition,
-      needsReview: true
+      needsReview: true,
     })
   }
 
@@ -142,7 +142,7 @@ export const useSpacedRepetitionCards = () => {
       nextTick(() => {
         listenToClick()
       }),
-    { immediate: true }
+    { immediate: true },
   )
 
   watch(cardFiles, () => execute())
@@ -152,6 +152,6 @@ export const useSpacedRepetitionCards = () => {
     successRepetition,
     failRepetition,
     needsReview,
-    isLoading: !isReady
+    isLoading: !isReady,
   }
 }

src/modules/repo/services/repo.ts

@@ -1,4 +1,4 @@
-import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
 import { RepoFile } from "@/modules/repo/interfaces/RepoFile"
 import { UserSettings } from "@/modules/repo/interfaces/UserSettings"
@@ -41,7 +41,7 @@ export const getCachedMainReadme = async (owner: string, repo: string) => {
   if (!owner || !repo) {
     return null
   }
-  const { render } = useMarkdown()
+  const { render } = markdownBuilder()
 
   const { getCachedNote } = prepareNoteCache(`${owner}-${repo}-README`)
   const { note: cachedReadme } = await getCachedNote()
@@ -58,7 +58,7 @@ export const getMainReadme = async (owner: string, repo: string) => {
     return null
   }
 
-  const { render } = useMarkdown()
+  const { render } = markdownBuilder()
   const { getCachedNote, saveCacheNote } = prepareNoteCache(
     `${owner}-${repo}-README`,
   )

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(() => {