Merge branch 'elk-zone:main' into main

.env.example

@@ -8,7 +8,7 @@ NUXT_CLOUDFLARE_ACCOUNT_ID=
 NUXT_CLOUDFLARE_NAMESPACE_ID=
 NUXT_CLOUDFLARE_API_TOKEN=
 
-# 'cloudflare' | 'fs'
+# 'cloudflare' | 'vercel' | 'fs'
 NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
         run: pnpm nuxi prepare
 
       - name: 🧪 Test project
-        run: pnpm test
+        run: pnpm test:ci
 
       - name: 📝 Lint
         run: pnpm lint

README.md

@@ -49,7 +49,8 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
 1. start container: ```docker-compose up -d```
 
-Note: The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
+> [!NOTE]
+> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
 
 
 ### Ecosystem

components/status/StatusSpoiler.vue

@@ -30,7 +30,7 @@ function getToggleText() {
       <slot name="spoiler" />
     </div>
     <div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
-      <button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" :aria-expanded="showContent" @click="toggleContent()">
+      <button btn-text px-2 py-1 rounded-lg :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" :aria-expanded="showContent" @click="toggleContent()">
         <div v-if="showContent" i-ri:eye-line />
         <div v-else i-ri:eye-close-line />
         {{ showContent ? $t('status.spoiler_show_less') : $t(getToggleText()) }}

components/tag/TagCard.vue

@@ -39,8 +39,10 @@ function go(evt: MouseEvent | KeyboardEvent) {
     <div>
       <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
         <TagActionButton :tag="tag" />
-        <span>#</span>
-        <span hover:underline>{{ tag.name }}</span>
+        <bdi>
+          <span>#</span>
+          <span hover:underline>{{ tag.name }}</span>
+        </bdi>
       </h4>
       <CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
     </div>

composables/content-parse.ts

@@ -72,6 +72,8 @@ const sanitizer = sanitize({
 /**
  * Parse raw HTML form Mastodon server to AST,
  * with interop of custom emojis and inline Markdown syntax
+ * @param html The content to parse
+ * @param options The parsing options
  */
 export function parseMastodonHTML(
   html: string,
@@ -140,6 +142,8 @@ export function parseMastodonHTML(
 
 /**
  * Converts raw HTML form Mastodon server to HTML for Tiptap editor
+ * @param html The content to parse
+ * @param customEmojis The custom emojis to use
  */
 export function convertMastodonHTML(html: string, customEmojis: Record<string, mastodon.v1.CustomEmoji> = {}) {
   const tree = parseMastodonHTML(html, {

composables/content-render.ts

@@ -1,5 +1,5 @@
-import { TEXT_NODE } from 'ultrahtml'
-import type { Node } from 'ultrahtml'
+import { ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
+import type { ElementNode, Node } from 'ultrahtml'
 import { Fragment, h, isVNode } from 'vue'
 import type { VNode } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -98,6 +98,23 @@ function treeToVNode(
   return null
 }
 
+function addBdiNode(node: Node) {
+  if (node.children.length === 1 && node.children[0].type === ELEMENT_NODE && node.children[0].name === 'bdi')
+    return
+
+  const children = node.children.splice(0, node.children.length)
+  const bdi = {
+    name: 'bdi',
+    parent: node,
+    loc: node.loc,
+    type: ELEMENT_NODE,
+    attributes: {},
+    children,
+  } satisfies ElementNode
+  children.forEach((n: Node) => n.parent = bdi)
+  node.children.push(bdi)
+}
+
 function handleMention(el: Node) {
   // Redirect mentions to the user page
   if (el.name === 'a' && el.attributes.class?.includes('mention')) {
@@ -108,11 +125,13 @@ function handleMention(el: Node) {
         const [, server, username] = matchUser
         const handle = `${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
         el.attributes.href = `/${server}/@${username}`
+        addBdiNode(el)
         return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
       }
       const matchTag = href.match(TagLinkRE)
       if (matchTag) {
         const [, , name] = matchTag
+        addBdiNode(el)
         el.attributes.href = `/${currentServer.value}/tags/${name}`
       }
     }

composables/masto/icons.ts

@@ -40,6 +40,7 @@ export const accountFieldIcons: Record<string, string> = Object.fromEntries(Obje
   Switch: 'i-ri:switch-line',
   Telegram: 'i-ri:telegram-line',
   Threads: 'i-ri:threads-line',
+  TikTok: 'i-ri:tiktok-line',
   Tumblr: 'i-ri:tumblr-line',
   Twitch: 'i-ri:twitch-line',
   Twitter: 'i-ri:twitter-line',

composables/shikiji.ts

@@ -5,7 +5,7 @@ const highlighter = ref<Highlighter>()
 const registeredLang = ref(new Map<string, boolean>())
 let shikijiImport: Promise<void> | undefined
 
-export function useHighlighter(lang: Lang) {
+export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlighter?: Highlighter } {
   if (!shikijiImport) {
     shikijiImport = import('shikiji')
       .then(async ({ getHighlighter }) => {
@@ -21,13 +21,15 @@ export function useHighlighter(lang: Lang) {
           ],
         })
       })
+
+    return { promise: shikijiImport }
   }
 
   if (!highlighter.value)
-    return undefined
+    return { promise: shikijiImport }
 
   if (!registeredLang.value.get(lang)) {
-    highlighter.value.loadLanguage(lang)
+    const promise = highlighter.value.loadLanguage(lang)
       .then(() => {
         registeredLang.value.set(lang, true)
       })
@@ -37,10 +39,10 @@ export function useHighlighter(lang: Lang) {
           registeredLang.value.set(fallbackLang, true)
         })
       })
-    return undefined
+    return { promise }
   }
 
-  return highlighter.value
+  return { highlighter: highlighter.value }
 }
 
 function useShikijiTheme() {
@@ -60,7 +62,7 @@ function escapeHtml(text: string) {
 }
 
 export function highlightCode(code: string, lang: Lang) {
-  const highlighter = useHighlighter(lang)
+  const { highlighter } = useHighlighter(lang)
   if (!highlighter)
     return escapeHtml(code)
 

composables/tiptap/shikiji-parser.ts

@@ -7,11 +7,13 @@ export const shikijiParser: Parser = (options) => {
   const lang = options.language ?? 'text'
 
   // Register the language if it's not yet registered
-  const highlighter = useHighlighter(lang as BuiltinLanguage)
+  const { highlighter, promise } = useHighlighter(lang as BuiltinLanguage)
 
-  // If the language is not loaded, we return an empty set of decorations
+  // If the highlighter or the language is not available, return a promise that
+  // will resolve when it's ready. When the promise resolves, the editor will
+  // re-parse the code block.
   if (!highlighter)
-    return []
+    return promise ?? []
 
   if (!parser)
     parser = createParser(highlighter)

nuxt.config.ts

@@ -102,6 +102,12 @@ export default defineNuxtConfig({
       namespaceId: '',
       apiToken: '',
     },
+    vercel: {
+      url: '',
+      token: '',
+      env: '',
+      base: '',
+    },
     public: {
       privacyPolicyUrl: '',
       // We use LibreTranslate (https://github.com/LibreTranslate/LibreTranslate) as

package.json

@@ -20,8 +20,10 @@
     "prepare": "ignore-dependency-scripts \"tsx scripts/prepare.ts\"",
     "generate": "nuxi generate",
     "test:unit": "stale-dep && vitest",
+    "test:unit:ci": "stale-dep && vitest run",
     "test:typecheck": "stale-dep && vue-tsc --noEmit && vue-tsc --noEmit --project service-worker/tsconfig.json",
     "test": "nr test:unit",
+    "test:ci": "nr test:unit:ci",
     "update:team:avatars": "tsx scripts/avatars.ts",
     "cleanup-translations": "tsx scripts/cleanup-translations.ts",
     "prepare-translation-status": "tsx scripts/prepare-translation-status.ts",
@@ -55,6 +57,8 @@
     "@tiptap/suggestion": "2.1.8",
     "@tiptap/vue-3": "2.1.8",
     "@unocss/nuxt": "^0.53.4",
+    "@upstash/redis": "^1.27.1",
+    "@vercel/kv": "^1.0.1",
     "@vue-macros/nuxt": "^1.6.0",
     "@vueuse/core": "^10.2.1",
     "@vueuse/gesture": "2.0.0-beta.1",
@@ -84,7 +88,7 @@
     "page-lifecycle": "^0.1.2",
     "pinia": "^2.1.4",
     "postcss-nested": "^6.0.1",
-    "prosemirror-highlight": "^0.3.3",
+    "prosemirror-highlight": "^0.4.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "shikiji": "^0.9.9",
     "simple-git": "^3.19.1",

pages/[[server]]/tags/[tag].vue

@@ -28,7 +28,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>#{{ tagName }}</span>
+      <bdi text-lg font-bold>#{{ tagName }}</bdi>
     </template>
 
     <template #actions>