From 80a4dce64da550d2620d15ddbf6bd6c42a9428fa Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 26 Apr 2024 23:57:23 +0530
Subject: [PATCH] fix(theme/i18n): 404 page not showing localized text

---
 src/client/theme-default/NotFound.vue         | 45 ++++++++++++-------
 src/client/theme-default/composables/langs.ts |  2 +
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
index 8861062fc031..9ed917de2bfc 100644
--- a/src/client/theme-default/NotFound.vue
+++ b/src/client/theme-default/NotFound.vue
@@ -1,44 +1,55 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { withBase } from 'vitepress'
 import { useData } from './composables/data'
 import { useLangs } from './composables/langs'
 
-const { site, theme } = useData()
+const { site } = useData()
 const { localeLinks } = useLangs({ removeCurrent: false })
 
-const root = ref('/')
+const locale = ref({
+  link: '/',
+  index: 'root'
+})
+
 onMounted(() => {
   const path = window.location.pathname
     .replace(site.value.base, '')
     .replace(/(^.*?\/).*$/, '/$1')
   if (localeLinks.value.length) {
-    root.value =
-      localeLinks.value.find(({ link }) => link.startsWith(path))?.link ||
-      localeLinks.value[0].link
+    locale.value =
+      localeLinks.value.find(({ link }) => link.startsWith(path)) ||
+      localeLinks.value[0]
   }
 })
+
+const notFound = computed(() => ({
+  code: 404,
+  title: 'PAGE NOT FOUND',
+  quote:
+    "But if you don't change your direction, and if you keep looking, you may end up where you are heading.",
+  linkLabel: 'go to home',
+  linkText: 'Take me home',
+  ...(locale.value.index === 'root'
+    ? site.value.themeConfig?.notFound
+    : site.value.locales?.[locale.value.index]?.themeConfig?.notFound)
+}))
 </script>
 
 <template>
   <div class="NotFound">
-    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
-    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
+    <p class="code">{{ notFound.code }}</p>
+    <h1 class="title">{{ notFound.title }}</h1>
     <div class="divider" />
-    <blockquote class="quote">
-      {{
-        theme.notFound?.quote ??
-        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
-      }}
-    </blockquote>
+    <blockquote class="quote">{{ notFound.quote }}</blockquote>
 
     <div class="action">
       <a
         class="link"
-        :href="withBase(root)"
-        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+        :href="withBase(locale.link)"
+        :aria-label="notFound.linkLabel"
       >
-        {{ theme.notFound?.linkText ?? 'Take me home' }}
+        {{ notFound.linkText }}
       </a>
     </div>
   </div>
diff --git a/src/client/theme-default/composables/langs.ts b/src/client/theme-default/composables/langs.ts
index e29afe949be6..a6174b0e66e3 100644
--- a/src/client/theme-default/composables/langs.ts
+++ b/src/client/theme-default/composables/langs.ts
@@ -8,6 +8,7 @@ export function useLangs({
 } = {}) {
   const { site, localeIndex, page, theme, hash } = useData()
   const currentLang = computed(() => ({
+    index: localeIndex.value,
     label: site.value.locales[localeIndex.value]?.label,
     link:
       site.value.locales[localeIndex.value]?.link ||
@@ -19,6 +20,7 @@ export function useLangs({
       removeCurrent && currentLang.value.label === value.label
         ? []
         : {
+            index: key,
             text: value.label,
             link:
               normalizeLink(