Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

fix: improve loading

Browse source
This commit is contained in:
Anthony Fu 2022-11-24 16:57:24 +08:00
parent 70645180aa
commit dbf4362d8b
4 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/account/AccountInlineInfo.vue
View file

@ -1,13 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Account } from 'masto' import type { Account } from 'masto'
defineProps<{ const { link = true } = defineProps<{
account: Account account: Account
link?: boolean
}>() }>()
</script> </script>
<template> <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 /> <AccountAvatar :account="account" w-5 h-5 />
<ContentRich :content="getDisplayName(account)" :emojis="account.emojis" /> <ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>

20
components/status/StatusReplyingTo.vue
View file

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

4
composables/content.ts
View file

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

5
composables/shiki.ts
View file

@ -30,6 +30,11 @@ export function highlightCode(code: string, lang: Lang) {
.then(() => { .then(() => {
registeredLang.value.set(lang, true) 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 return code
} }