feat: add font customization

src/bus/publicNoteEventBus.ts

@@ -0,0 +1,8 @@
+import { createEventBus } from "retrobus"
+
+interface EventBusParams {
+  path: string
+  currentNoteRkey?: string
+}
+
+export const publicNoteEventBus = createEventBus<EventBusParams>()

src/hooks/useATProtoLinks.hook.ts

@@ -0,0 +1,74 @@
+import { ComputedRef, onUnmounted, Ref, toValue } from "vue"
+
+import { isExternalLink } from "@/utils/link"
+import { publicNoteEventBus } from "@/bus/publicNoteEventBus"
+
+export const useATProtoLinks = (
+  className: ComputedRef<string> | string,
+  rkey?: Ref<string> | string,
+) => {
+  const linkNote: EventListener = (event) => {
+    const target = event.target as HTMLElement
+    const href = target.getAttribute("href")
+
+    if (!href) {
+      return
+    }
+
+    if (href.startsWith("#")) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (isExternalLink(href)) {
+      window.open(href, "_blank")
+      return
+    }
+
+    publicNoteEventBus.emit({
+      path: href,
+      currentNoteRkey: toValue(rkey),
+    })
+  }
+
+  const LINK_SELECTOR = `.${toValue(className)} a`
+
+  const removeListeners = () => {
+    const elements = document.querySelectorAll(LINK_SELECTOR)
+
+    elements.forEach((element) => {
+      element.removeEventListener("click", linkNote)
+    })
+  }
+
+  const listenToClick = () => {
+    removeListeners()
+    const elements = document.querySelectorAll(LINK_SELECTOR)
+
+    elements.forEach((element) => {
+      const href = element.getAttribute("href")
+
+      if (!href) {
+        return
+      }
+
+      if (isExternalLink(href)) {
+        element.classList.add("external-link")
+      }
+    })
+
+    elements.forEach((element) => {
+      element.addEventListener("click", linkNote)
+    })
+  }
+
+  onUnmounted(() => {
+    removeListeners()
+  })
+
+  return {
+    listenToClick,
+  }
+}

src/modules/atproto/getAka.ts

@@ -3,7 +3,6 @@ type Author = { alias: string; endpoint: string }
 const correspondanceCache = new Map<string, Author>()
 
 export const getUniqueAka = async (did: string): Promise<Author> => {
-  console.log(correspondanceCache)
   if (correspondanceCache.has(did)) {
     return correspondanceCache.get(did) as Author
   }
@@ -18,7 +17,6 @@ export const getUniqueAka = async (did: string): Promise<Author> => {
   const author = { alias, endpoint: serviceEndpoint }
 
   correspondanceCache.set(did, author)
-  console.log(correspondanceCache)
 
   return author
 }

src/views/PublicNoteListView.vue

@@ -106,6 +106,8 @@ const getAlias = (did: string) => aka.value.get(did) ?? ""
 
     .alias {
       text-align: right;
+      display: flex;
+      justify-content: flex-end;
     }
   }
 }

src/views/PublicNoteView.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook"
 import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { getUniqueAka } from "@/modules/atproto/getAka"
 import { getUrl } from "@/modules/atproto/getUrl"
+import { downloadFont } from "@/utils/downloadFont"
 import { computedAsync } from "@vueuse/core"
-import { computed } from "vue"
+import { computed, nextTick, watch } from "vue"
 
 export interface Root {
   uri: string
@@ -19,6 +21,9 @@ export interface Value {
   content: string
   createdAt: string
   publishedAt: string
+  theme?: string
+  fontFamily?: string
+  fontSize?: string
 }
 
 export interface Image {
@@ -46,9 +51,22 @@ const author = computedAsync(async () => getUniqueAka(did.value))
 const url = computedAsync(async () =>
   getUrl({ did: did.value, rkey: rkey.value }),
 )
-const rawContent = computedAsync(async () =>
+
+const article = computedAsync(async () =>
   url.value ? ((await fetch(url.value).then()).json() as Promise<Root>) : null,
 )
+
+watch(article, () => {
+  if (article.value?.value.fontFamily) {
+    downloadFont(article.value.value.fontFamily)
+  }
+
+  if (article.value?.value.fontSize) {
+    const root = document.documentElement
+    root.style.setProperty("--font-size", article.value.value.fontSize)
+  }
+})
+
 const { toHTML } = markdownBuilder()
 const withATProtoImages = (markdown: string) => {
   if (!author.value) {
@@ -67,16 +85,27 @@ const withATProtoImages = (markdown: string) => {
   })
 }
 
-const title = computed(() => rawContent.value?.value.title)
+const title = computed(() => article.value?.value.title)
 const content = computed(() =>
-  rawContent.value?.value.content
+  article.value?.value.content
-    ? toHTML(withATProtoImages(rawContent.value?.value.content))
+    ? toHTML(withATProtoImages(article.value?.value.content))
     : "",
 )
+
+const { listenToClick } = useATProtoLinks("note-display")
+
+watch(
+  content,
+  async () => {
+    await nextTick()
+    listenToClick()
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
-  <div class="public-note-view">
+  <div class="public-note-view repo-note">
     <div class="note article">
       <div class="repo-title-breadcrumb">
         <a
@@ -87,7 +116,7 @@ const content = computed(() =>
         >
       </div>
       <span class="badge badge-accent" v-if="author">{{ author.alias }}</span>
-      <article v-html="content"></article>
+      <article class="note-display" v-html="content"></article>
     </div>
   </div>
 </template>