feat: cleanup locale conf and add some RTL stuff (#564)

elk-zone · Dec 27, 2022 · 6412127 · 6412127
1 parent 29b7cb3
commit 6412127
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 17 deletions.
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
@@ -10,7 +10,17 @@ const { notification } = defineProps<{
   <article flex flex-col relative>
     <template v-if="notification.type === 'follow'">
       <NuxtLink :to="getAccountRoute(notification.account)">
-        <div flex items-center absolute pl-3 pr-4 py-3 bg-base rounded-br-3 top-0 left-0>
+        <div
+          flex items-center absolute
+          pl-3 pr-4 lrt-left-0
+          rounded-br-3
+          rtl="pr-3 pl-4 right-0"
+          rtl-rounded-bl-3
+          rtl-rounded-br-0
+          py-3 bg-base top-0
+          :lang="notification.status?.language ?? undefined"
+          :dir="notification.status?.language ? 'auto' : 'ltr'"
+        >
           <div i-ri:user-follow-fill mr-1 color-primary />
           <ContentRich
             text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
@@ -21,7 +31,11 @@ const { notification } = defineProps<{
             {{ $t('notification.followed_you') }}
           </span>
         </div>
-        <AccountBigCard :account="notification.account" />
+        <AccountBigCard
+          :account="notification.account"
+          :lang="notification.status?.language ?? undefined"
+          :dir="notification.status?.language ? 'auto' : 'ltr'"
+        />
       </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">

diff --git a/components/notification/NotificationGroupedFollow.vue b/components/notification/NotificationGroupedFollow.vue
@@ -10,10 +10,16 @@ const { formatHumanReadableNumber, forSR } = useHumanReadableNumber()
 const count = $computed(() => items.items.length)
 const addSR = $computed(() => forSR(count))
 const isExpanded = ref(false)
+const lang = $computed(() => {
+  return count > 1 || count === 0 ? undefined : items.items[0].status?.language
+})
+const dir = $computed(() => {
+  return lang ? 'auto' : 'ltr'
+})
 </script>
 
 <template>
-  <article flex flex-col relative>
+  <article flex flex-col relative :lang="lang ?? undefined" :dir="dir">
     <div flex items-center top-0 left-2 pt-2 px-3>
       <div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" />
       <template v-if="count > 1">

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
@@ -237,7 +237,10 @@ defineExpose({
           role="alert"
           aria-describedby="upload-failed"
           flex="~ col"
-          gap-1 text-sm pt-1 pl-2 pr-1 pb-2 text-red-600 dark:text-red-400
+          gap-1 text-sm
+          pt-1 pl-2 pr-1 pb-2
+          rtl="pl-1 pr-2"
+          text-red-600 dark:text-red-400
           border="~ base rounded red-600 dark:red-400"
         >
           <head id="upload-failed" flex justify-between>

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
@@ -65,7 +65,21 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
 </script>
 
 <template>
-  <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-1 px-4 pt-1 class="pb-1.5" transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
+  <div
+    v-if="filter?.filterAction !== 'hide'"
+    :id="`status-${status.id}`"
+    ref="el"
+    relative flex flex-col gap-1 px-4 pt-1
+    class="pb-1.5"
+    transition-100
+    :class="{ 'hover:bg-active': hover }"
+    tabindex="0"
+    focus:outline-none focus-visible:ring="2 primary"
+    :lang="status.language ?? undefined"
+    :dir="status.language ? 'auto' : 'ltr'"
+    @click="onclick"
+    @keydown.enter="onclick"
+  >
     <div flex justify-between>
       <slot name="meta">
         <div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1>
@@ -79,7 +93,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
     <div flex gap-3 :class="{ 'text-secondary': faded }">
       <div relative>
         <template v-if="showRebloggedByAvatarOnAvatar">
-          <div absolute top--3px left--0.8 z--1 w-25px h-25px rounded-full>
+          <div absolute top--3px lrt-left--0.8 rtl-right--0.8 z--1 w-25px h-25px rounded-full>
             <AccountAvatar :account="rebloggedBy" />
           </div>
         </template>

diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
@@ -29,7 +29,7 @@ const isDM = $computed(() => status.visibility === 'direct')
 </script>
 
 <template>
-  <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative>
+  <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative :lang="status.language ?? undefined" dir="auto">
     <StatusActionsMore :status="status" absolute right-2 top-2 />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
       <AccountHoverWrapper :account="status.account">

diff --git a/composables/setups.ts b/composables/setups.ts
@@ -33,14 +33,14 @@ export function setupPageHeader() {
   }
 
   const localeMap = (i18n.locales.value as LocaleObject[]).reduce((acc, l) => {
-    acc[l.code!] = l.dir ?? 'ltr'
+    acc[l.code!] = l.dir ?? 'auto'
     return acc
   }, {} as Record<string, Directions>)
 
   useHeadFixed({
     htmlAttrs: {
       lang: () => i18n.locale.value,
-      dir: () => localeMap[i18n.locale.value] ?? 'ltr',
+      dir: () => localeMap[i18n.locale.value] ?? 'auto',
     },
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,

diff --git a/config/i18n.ts b/config/i18n.ts
@@ -8,43 +8,36 @@ const locales: LocaleObject[] = [
     code: 'en-US',
     file: 'en-US.json',
     name: 'English',
-    dir: 'ltr',
   },
   {
     code: 'de-DE',
     file: 'de-DE.json',
     name: 'Deutsch',
-    dir: 'ltr',
   },
   {
     code: 'zh-CN',
     file: 'zh-CN.json',
     name: '简体中文',
-    dir: 'ltr',
   },
   {
     code: 'ja-JP',
     file: 'ja-JP.json',
     name: '日本語',
-    dir: 'ltr',
   },
   {
     code: 'es-ES',
     file: 'es-ES.json',
     name: 'Español',
-    dir: 'ltr',
   },
   {
     code: 'fr-FR',
     file: 'fr-FR.json',
     name: 'Français',
-    dir: 'ltr',
   },
   {
     code: 'cs-CZ',
     file: 'cs-CZ.json',
     name: 'Česky',
-    dir: 'ltr',
   },
   {
     code: 'ar',

diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
@@ -83,7 +83,7 @@ onReactivated(() => {
           @published="refreshContext()"
         />
 
-        <template v-for="comment, di of context?.descendants" :key="comment.id">
+        <template v-for="(comment, di) of context?.descendants" :key="comment.id">
           <StatusCard
             :status="comment" :actions="comment.visibility !== 'direct'" context="account"
             :connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId"