fix: improve loading

components/account/AccountInlineInfo.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-defineProps<{
+const { link = true } = defineProps<{
   account: Account
+  link?: boolean
 }>()
 </script>
 
 <template>
-  <NuxtLink :href="getAccountPath(account)" flex gap-1 items-center>
+  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>

components/status/StatusReplyingTo.vue

@@ -5,17 +5,19 @@ const { status } = defineProps<{
   status: Status
 }>()
 
-const account = await fetchAccount(status.inReplyToAccountId!)
+const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
 </script>
 
 <template>
-  <template v-if="account">
-    <div
-      flex="~ gap-1.5" items-center text-sm text-gray:85
-      :title="`Replying to ${getDisplayName(account)}`"
-    >
-      <div i-ri:reply-fill rotate-180 op50 />
-      <AccountInlineInfo :account="account" />
-    </div>
-  </template>
+  <NuxtLink
+    v-if="status.inReplyToId"
+    flex="~" items-center text-sm text-gray:85
+    :to="getStatusPath({ id: status.inReplyToId } as any)"
+    :title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
+  >
+    <div i-ri:reply-fill rotate-180 op50 class="mr-1.5" />
+    <AccountInlineInfo v-if="account" :account="account" :link="false" />
+    <span v-else>Someone</span>
+    's post
+  </NuxtLink>
 </template>

composables/content.ts

@@ -59,11 +59,11 @@ export function contentToVNode(
         return `<img src="${emoji.url}" alt="${name}" class="custom-emoji" />`
       return `:${name}:`
     })
-    // handle codeblocks
+    // handle code frames
     .replace(/<p>(```|~~~)([\s\S]+?)\1(\s|<br\s?\/?>)*<\/p>/g, (_1, _2, raw) => {
       const plain = htmlToText(`<p>${raw}</p>`).trim()
       const [lang, ...rest] = plain.split(/\n/)
-      return `<custom-code lang="${lang || ''}" code="${encodeURIComponent(rest.join('\n'))}" />`
+      return `<custom-code lang="${lang?.trim().toLowerCase() || ''}" code="${encodeURIComponent(rest.join('\n'))}" />`
     })
 
   const tree = parseFragment(content)

composables/shiki.ts

@@ -30,6 +30,11 @@ export function highlightCode(code: string, lang: Lang) {
       .then(() => {
         registeredLang.value.set(lang, true)
       })
+      .catch((e) => {
+        console.error(`[shiki] Failed to load language ${lang}`)
+        console.error(e)
+        registeredLang.value.set(lang, false)
+      })
     return code
   }