refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/content/ContentCode.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { code, lang } = defineProps<{
+  code: string
+  lang?: string
+}>()
+
+const raw = computed(() => decodeURIComponent(code).replace(/&#39;/g, '\''))
+
+const langMap: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  vue: 'html',
+}
+
+const highlighted = computed(() => {
+  return lang ? highlightCode(raw.value, (langMap[lang] || lang) as any) : raw
+})
+</script>
+
+<template>
+  <pre v-if="lang" class="code-block" v-html="highlighted" />
+  <pre v-else class="code-block">{{ raw }}</pre>
+</template>

app/components/content/ContentMentionGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  replying?: boolean
+}>()
+</script>
+
+<template>
+  <p flex="~ gap-1 wrap" items-center text-sm :class="{ 'zen-none': !replying }">
+    <span i-ri-arrow-right-line ml--1 text-secondary-light /><slot />
+  </p>
+</template>

app/components/content/ContentRich.setup.ts

@@ -0,0 +1,29 @@
+import type { mastodon } from 'masto'
+
+defineOptions({
+  name: 'ContentRich',
+})
+
+const {
+  content,
+  emojis,
+  hideEmojis = false,
+  markdown = true,
+} = defineProps<{
+  content: string
+  emojis?: mastodon.v1.CustomEmoji[]
+  hideEmojis?: boolean
+  markdown?: boolean
+}>()
+
+const emojisObject = useEmojisFallback(() => emojis)
+
+export default () => h(
+  'span',
+  { class: 'content-rich', dir: 'auto' },
+  contentToVNode(content, {
+    emojis: emojisObject.value,
+    hideEmojis,
+    markdown,
+  }),
+)