feat: improve status detail page title (#485)

components/status/StatusDetails.vue

@@ -15,6 +15,12 @@ const status = $computed(() => {
 const createdAt = useFormattedDateTime(status.createdAt)
 
 const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
+})
 </script>
 
 <template>

composables/utils.ts

@@ -2,6 +2,7 @@ import type { Emoji } from 'masto'
 
 export const UserLinkRE = /^https?:\/\/([^/]+)\/@([^/]+)$/
 export const TagLinkRE = /^https?:\/\/([^/]+)\/tags\/([^/]+)$/
+export const HTMLTagRE = /<[^>]+>/g
 
 export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
   if (typeof w === 'undefined' || typeof h === 'undefined')
@@ -29,3 +30,7 @@ export function noop() {}
 export const useIsMac = () => computed(() =>
   useRequestHeaders(['user-agent'])['user-agent']?.includes('Macintosh')
     ?? navigator?.platform?.includes('Mac') ?? false)
+
+export function removeHTMLTags(str: string) {
+  return str.replaceAll(HTMLTagRE, '')
+}

locales/en-US.json

@@ -69,6 +69,7 @@
   "common": {
     "end_of_list": "End of the list",
     "error": "ERROR",
+    "in": "in",
     "kiloSuffix": "K",
     "megaSuffix": "M",
     "not_found": "404 Not Found",

locales/zh-CN.json

@@ -12,7 +12,7 @@
     "follow_requested": "已申请关注",
     "followers": "关注者",
     "followers_count": "被 {0} 人关注",
-    "following": "关注中",
+    "following": "正在关注",
     "following_count": "正在关注 {0} 人",
     "follows_you": "已关注你",
     "go_to_profile": "转到个人资料",
@@ -68,6 +68,7 @@
   "common": {
     "end_of_list": "列表到底啦",
     "error": "错误",
+    "in": "在",
     "kiloSuffix": "K",
     "megaSuffix": "M",
     "not_found": "无法找到相关内容",

pages/[[server]]/@[account]/index/following.vue

@@ -10,7 +10,7 @@ const paginator = account ? useMasto().accounts.iterateFollowing(account.id, {})
 
 if (account) {
   useHeadFixed({
-    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account})`,
+    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
 </script>