From dbf4362d8be99047da4ecf7dfe63e9daf4761ddd Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 16:57:24 +0800
Subject: [PATCH] fix: improve loading

---
 components/account/AccountInlineInfo.vue |  5 +++--
 components/status/StatusReplyingTo.vue   | 22 ++++++++++++----------
 composables/content.ts                   |  4 ++--
 composables/shiki.ts                     |  5 +++++
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 42fb8ca6..88ba79da 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/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>
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 7488070e..1f38e6fe 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/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>
diff --git a/composables/content.ts b/composables/content.ts
index 9aace7ae..c5241ff1 100644
--- a/composables/content.ts
+++ b/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)
diff --git a/composables/shiki.ts b/composables/shiki.ts
index 09426ed4..dfd097a6 100644
--- a/composables/shiki.ts
+++ b/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
   }