feat: support blurhash

components/common/Blurhash.ts

@@ -0,0 +1,37 @@
+import { decode } from 'blurhash'
+import { getDataUrlFromArr } from '~~/composables/utils'
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    blurhash: {
+      type: String,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, { attrs }) {
+    const placeholderSrc = ref<string>()
+    const isLoaded = ref(false)
+
+    onMounted(() => {
+      const img = document.createElement('img')
+      img.onload = () => {
+        isLoaded.value = true
+      }
+      img.src = props.src
+
+      if (props.blurhash) {
+        const pixels = decode(props.blurhash, 32, 32)
+        placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
+      }
+    })
+
+    return () => isLoaded.value || !placeholderSrc.value
+      ? h('img', { ...attrs, src: props.src })
+      : h('img', { ...attrs, src: placeholderSrc.value })
+  },
+})

components/status/StatusAttachment.vue

@@ -4,21 +4,33 @@ import type { Attachment } from 'masto'
 const { attachment } = defineProps<{
   attachment: Attachment
 }>()
+
+const aspectRatio = computed(() => {
+  if (attachment.meta?.original?.aspect)
+    return attachment.meta.original.aspect
+  if (attachment.meta?.small?.aspect)
+    return attachment.meta.small.aspect
+  return undefined
+})
 </script>
 
 <template>
-  <template v-if="attachment.type === 'image'">
+  <template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
-    <img
+    <CommonBlurhash
+      :blurhash="attachment.blurhash"
       class="status-attachment-image"
       :src="attachment.previewUrl!"
       :alt="attachment.description!"
       border="~ border"
+      :style="{
+        aspectRatio,
+      }"
       object-cover rounded-lg
-    >
+    />
   </template>
   <template v-else>
-    <div>
+    TODO:
-      TODO: {{ attachment }}
+    <pre>{{ attachment }}
-    </div>
+    </pre>
   </template>
 </template>

components/status/StatusMedia.vue

@@ -27,16 +27,13 @@ const { status } = defineProps<{
 .status-media-container-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  aspect-ratio: 2/1;
 }
 .status-media-container-3 {
   display: grid;
-  aspect-ratio: 16/9;
   grid-template-columns: 1fr 1fr;
 }
 .status-media-container-4 {
   display: grid;
-  aspect-ratio: 16/9;
   grid-template-columns: 1fr 1fr;
 }
 </style>

composables/content.ts

@@ -36,7 +36,7 @@ export function contentToVNode(
   handle: (node: Element) => Element | undefined | null | void = defaultHandle,
   customEmojis: Record<string, Emoji> = {},
 ): VNode {
-  content = content.replace(/:([\w-]+?):/g, (_, name) => {
+  content = content.trim().replace(/:([\w-]+?):/g, (_, name) => {
     const emoji = customEmojis[name]
     if (emoji)
       return `<img src="${emoji.url}" alt="${name}" class="custom-emoji" />`

composables/utils.ts

@@ -0,0 +1,16 @@
+export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
+  if (typeof w === 'undefined' || typeof h === 'undefined')
+    w = h = Math.sqrt(arr.length / 4)
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')!
+
+  canvas.width = w
+  canvas.height = h
+
+  const imgData = ctx.createImageData(w, h)
+  imgData.data.set(arr)
+  ctx.putImageData(imgData, 0, 0)
+
+  return canvas.toDataURL()
+}

package.json

@@ -23,6 +23,7 @@
     "@types/sanitize-html": "^2.6.2",
     "@unocss/nuxt": "^0.46.5",
     "@vueuse/nuxt": "^9.5.0",
+    "blurhash": "^2.0.4",
     "eslint": "^8.27.0",
     "form-data": "^4.0.0",
     "fs-extra": "^10.1.0",

pages/@[user]/[post].vue

@@ -8,21 +8,29 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
 </script>
 
 <template>
-  <template v-for="comment of context?.ancestors" :key="comment.id">
+  <template v-if="status">
-    <StatusCard :status="comment" border="t border" pt-4 />
+    <template v-for="comment of context?.ancestors" :key="comment.id">
-  </template>
+      <StatusCard :status="comment" border="t border" pt-4 />
-  <StatusDetails :status="status" border="t border" pt-4 />
+    </template>
-  <div border="t border" p6 flex gap-4>
+    <StatusDetails :status="status" border="t border" pt-4 />
-    <img :src="status?.account.avatar" rounded w-10 h-10 bg-gray:10>
+    <div border="t border" p6 flex gap-4>
-    <PublishWidget
+      <img :src="status?.account.avatar" rounded w-10 h-10 bg-gray:10>
-      w-full
+      <PublishWidget
-      :draft-key="`reply-${id}`"
+        w-full
-      :placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
+        :draft-key="`reply-${id}`"
-      :in-reply-to-id="id"
+        :placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
-    />
+        :in-reply-to-id="id"
-  </div>
+      />
+    </div>
 
-  <template v-for="comment of context?.descendants" :key="comment.id">
+    <template v-for="comment of context?.descendants" :key="comment.id">
-    <StatusCard :status="comment" border="t border" pt-4 />
+      <StatusCard :status="comment" border="t border" pt-4 />
+    </template>
+  </template>
+
+  <template>
+    <div>
+      Status not found
+    </div>
   </template>
 </template>

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@types/sanitize-html': ^2.6.2
   '@unocss/nuxt': ^0.46.5
   '@vueuse/nuxt': ^9.5.0
+  blurhash: ^2.0.4
   eslint: ^8.27.0
   form-data: ^4.0.0
   fs-extra: ^10.1.0
@@ -37,6 +38,7 @@ devDependencies:
   '@types/sanitize-html': 2.6.2
   '@unocss/nuxt': 0.46.5
   '@vueuse/nuxt': 9.5.0_nuxt@3.0.0
+  blurhash: 2.0.4
   eslint: 8.27.0
   form-data: 4.0.0
   fs-extra: 10.1.0
@@ -2088,6 +2090,10 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /blurhash/2.0.4:
+    resolution: {integrity: sha512-r/As72u2FbucLoK5NTegM/GucxJc3d8GvHc4ngo13IO/nt2HU4gONxNLq1XPN6EM/V8Y9URIa7PcSz2RZu553A==}
+    dev: true
+
   /boolbase/1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true