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

2024-11-05 00:19:59 +00:00 · 2022-12-27 22:04:52 +01:00 · 2022-12-27 22:04:52 +01:00 · 6412127283
commit 6412127283
parent 29b7cb3838
8 changed files with 47 additions and 17 deletions
--- 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'">
--- 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">
--- 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>
--- 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>
--- 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">
--- 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,
--- 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',
--- 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"