feat: parse and render RichText from a record

components/profile/ProfileAvatar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ProfileView } from './types'
+
+defineProps<{
+  profile: ProfileView
+  square?: boolean
+  big?: boolean
+}>()
+
+const defaultAvatar = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+const loaded = ref(false)
+const error = ref(false)
+</script>
+
+<template>
+  <img
+    :key="profile.avatar"
+    :src="(error || !loaded) ? defaultAvatar : profile.avatar"
+    :alt="$t('account.avatar_description', [profile.displayName ?? profile.handle])"
+    :class="[
+      loaded ? 'bg-base' : 'bg-gray:10',
+      square ? '' : 'rounded-full',
+    ]"
+    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
+    loading="lazy"
+    width="400"
+    height="400"
+    select-none
+    @load="loaded = true"
+    @error="error = true"
+  >
+</template>

components/profile/ProfileBigAvatar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ProfileView } from './types'
+
+// Avatar with a background base achieving a 3px border to be used in status cards
+// The border is used for Avatar on Avatar for reblogs and connecting replies
+
+defineProps<{
+  profile: ProfileView
+  square?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :key="profile.avatar"
+    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
+    :class="{ 'rounded-full': !square }"
+    bg-base w-54px h-54px
+    flex items-center justify-center
+  >
+    <ProfileAvatar :profile w-48px h-48px :square="square" />
+  </div>
+</template>

components/profile/types.ts

@@ -0,0 +1,5 @@
+import type { AppBskyActorDefs } from '@atcute/client/lexicons'
+
+export type ProfileView = AppBskyActorDefs.ProfileView
+  | AppBskyActorDefs.ProfileViewBasic
+  | AppBskyActorDefs.ProfileViewDetailed

components/rich-text/RichText.ts

@@ -0,0 +1,33 @@
+import type { RichtextSegment } from '@atcute/bluesky-richtext-segmenter'
+import type { AppBskyRichtextFacet } from '@atcute/client/lexicons'
+import { segmentize } from '@atcute/bluesky-richtext-segmenter'
+
+import RichTextLink from './RichTextLink.vue'
+import RichTextMention from './RichTextMention.vue'
+import RichTextTag from './RichTextTag.vue'
+
+interface Props {
+  text: string
+  facets?: AppBskyRichtextFacet.Main[]
+}
+
+function renderSegment({ text, features }: RichtextSegment) {
+  const feature = features?.at(0)
+
+  switch (feature?.$type) {
+    case 'app.bsky.richtext.facet#link':
+      return h(RichTextLink, { text, uri: feature.uri })
+    case 'app.bsky.richtext.facet#mention':
+      return h(RichTextMention, { text, did: feature.did })
+    case 'app.bsky.richtext.facet#tag':
+      return h(RichTextTag, { text, tag: feature.tag })
+    default:
+      return text
+  }
+}
+
+export default function RichText(props: Props) {
+  const segments = segmentize(props.text, props.facets)
+
+  return h('div', { class: 'content-rich' }, segments.map(renderSegment))
+}

components/rich-text/RichTextLink.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+  uri: string
+}>()
+</script>
+
+<template>
+  <NuxtLink :href="uri" external>
+    {{ text }}
+  </NuxtLink>
+</template>

components/rich-text/RichTextMention.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+  did: string
+}>()
+
+// TODO async loaded profile hovercard
+</script>
+
+<template>
+  <NuxtLink :to="`/profile/${did}`">
+    {{ text }}
+  </NuxtLink>
+</template>

components/rich-text/RichTextTag.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  tag: string
+  text: string
+}>()
+
+// TODO reimplement dropdown with record author only tag / mute tag
+</script>
+
+<template>
+  <CommonDropdown inline-flex>
+    <button>{{ text }}</button>
+    <template #popper>
+      <NuxtLink :to="`/hashtag/${tag}`">
+        <CommonDropdownItem
+          :text="`See ${tag} posts`"
+          icon="i-ri:search-line"
+        />
+      </NuxtLink>
+      <NuxtLink :to="`/hashtag/${tag}`">
+        <CommonDropdownItem
+          :text="`See ${tag} posts by user`"
+          icon="i-ri:user-line"
+        />
+      </NuxtLink>
+      <CommonDropdownItem
+        :text="`Mute ${tag}`"
+        icon="i-ri:eye-off-line"
+      />
+    </template>
+  </CommonDropdown>
+</template>

lexicons.d.ts

@@ -0,0 +1 @@
+/// <reference types="@atcute/bluesky/lexicons" />

package.json

@@ -32,6 +32,10 @@
     "release": "stale-dep && bumpp && tsx scripts/release.ts"
   },
   "dependencies": {
+    "@atcute/bluesky": "^1.0.9",
+    "@atcute/bluesky-richtext-parser": "^1.0.6",
+    "@atcute/bluesky-richtext-segmenter": "^1.0.5",
+    "@atcute/client": "^2.0.6",
     "@emoji-mart/data": "^1.1.2",
     "@fnando/sparkline": "^0.3.10",
     "@iconify-emoji/twemoji": "^1.0.2",