move text content to locales/en.json

noi-techpark · Jul 12, 2023 · 960dec8 · 960dec8
1 parent d550606
commit 960dec8
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 39 deletions.
diff --git a/databrowser/src/layouts/AppFooter.vue b/databrowser/src/layouts/AppFooter.vue
@@ -4,6 +4,7 @@ SPDX-FileCopyrightText: NOI Techpark <[email protected]>
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="flex flex-col">
     <div class="bg-[#F4F8F9]">
@@ -29,12 +30,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                   <div class="mx-2 w-px self-stretch bg-black"></div>
                   <div
                     class="h-full rounded border border-black px-2 py-1 text-lg font-semibold leading-5 text-black"
-                  >
-                    DATA<br />BROWSER
-                  </div>
+                    v-html="t('header.toolBadge')"
+                  ></div>
                 </div>
               </router-link>
-              Tool to access<br />open data
+              <span v-html="t('footer.cards.databrowser')"></span>
             </div>
           </CardContainer>
           <CardContainer :no-padding="true" class="grow bg-white p-3">
@@ -44,22 +44,24 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 class="aspect-square h-12"
                 src="/logo-open-data-hub-black.svg"
               />
-              Place where data and<br />tech are shared
+              <span v-html="t('footer.cards.openDataHub')"></span>
             </div>
           </CardContainer>
           <CardContainer :no-padding="true" class="grow bg-white p-3">
             <div class="flex items-center gap-4">
               <img alt="NOI Techpark" src="/logo-noi.svg" />
-              Innovation hub in<br />Südtirol/Alto Adige
+              <span v-html="t('footer.cards.noi')"></span>
             </div>
           </CardContainer>
         </div>
         <div class="flex w-full flex-col gap-4 pt-4 lg:flex-row">
           <ul class="grow basis-0">
-            <li class="font-semibold">Relevant links</li>
+            <li class="font-semibold">
+              {{ t('footer.columns.relevantLinks.title') }}
+            </li>
             <li>
               <router-link to="/dataset-overview" class="no-underline">
-                Datasets
+                {{ t('header.menu.datasets') }}
               </router-link>
             </li>
             <li>
@@ -69,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 variant="no-underline"
                 tone="text"
               >
-                How to
+                {{ t('header.menu.howTo') }}
               </ExternalLink>
             </li>
             <li>
@@ -79,24 +81,28 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 variant="no-underline"
                 tone="text"
               >
-                Contact
+                {{ t('header.menu.contact') }}
               </ExternalLink>
             </li>
           </ul>
           <ul class="grow basis-0">
-            <li class="font-semibold">Quickstart</li>
+            <li class="font-semibold">
+              {{ t('footer.columns.quickstart.title') }}
+            </li>
             <li>
               <ExternalLink
                 class="flex items-center gap-2"
                 href="https://opendatahub.com"
                 variant="no-underline"
                 tone="text"
               >
-                Open Data Hub Website
+                {{ t('footer.columns.quickstart.openDataHubWebsite') }}
               </ExternalLink>
             </li>
             <li>
-              <router-link to="/"> Databrowser </router-link>
+              <router-link to="/">{{
+                t('footer.columns.quickstart.databrowser')
+              }}</router-link>
             </li>
             <li>
               <ExternalLink
@@ -105,33 +111,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 variant="no-underline"
                 tone="text"
               >
-                Web Components
+                {{ t('footer.columns.quickstart.webComponents') }}
               </ExternalLink>
             </li>
           </ul>
           <ul class="grow basis-0">
-            <li class="font-semibold">Contributors</li>
+            <li class="font-semibold">
+              {{ t('footer.columns.contributors.title') }}
+            </li>
             <li>
-              The Data Browser is the result of a great collaboration between
-              many awesome people!
+              {{ t('footer.columns.contributors.text') }}
               <ExternalLink
                 class="inline-flex items-center gap-2"
                 href="https://opendatahub.com/community/contributors?project=databrowser"
                 tone="text"
               >
-                Check them out!<IconExternal />
+                {{ t('footer.columns.contributors.link') }}<IconExternal />
               </ExternalLink>
             </li>
           </ul>
           <ul class="grow basis-0">
-            <li class="font-semibold">Social Media</li>
+            <li class="font-semibold">
+              {{ t('footer.columns.socialMedia.title') }}
+            </li>
             <li>
               <ExternalLink
                 class="flex items-center gap-2 no-underline"
                 href="https://opendatahub.com/community/contributors?project=databrowser"
                 tone="text"
               >
-                <img src="/logo-github.svg" alt="GitHub" />GitHub
+                <img
+                  src="/logo-github.svg"
+                  :alt="t('footer.columns.socialMedia.github')"
+                />{{ t('footer.columns.socialMedia.github') }}
               </ExternalLink>
             </li>
             <li>
@@ -140,7 +152,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 href="https://opendatahub.com/community/contributors?project=databrowser"
                 tone="text"
               >
-                <img src="/logo-telegram.svg" alt="Telegram" />Telegram
+                <img
+                  src="/logo-telegram.svg"
+                  :alt="t('footer.columns.socialMedia.telegram')"
+                />{{ t('footer.columns.socialMedia.telegram') }}
               </ExternalLink>
             </li>
             <li>
@@ -149,7 +164,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 href="https://opendatahub.com/community/contributors?project=databrowser"
                 tone="text"
               >
-                <img src="/logo-element.svg" alt="element" />element.io
+                <img
+                  src="/logo-element.svg"
+                  :alt="t('footer.columns.socialMedia.element')"
+                />{{ t('footer.columns.socialMedia.element') }}
               </ExternalLink>
             </li>
             <li>
@@ -158,7 +176,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 href="https://opendatahub.com/community/contributors?project=databrowser"
                 tone="text"
               >
-                <img src="/logo-facebook.svg" alt="Facebook" />Facebook
+                <img
+                  src="/logo-facebook.svg"
+                  :alt="t('footer.columns.socialMedia.facebook')"
+                />{{ t('footer.columns.socialMedia.facebook') }}
               </ExternalLink>
             </li>
           </ul>

diff --git a/databrowser/src/layouts/AppHeader.vue b/databrowser/src/layouts/AppHeader.vue
@@ -4,6 +4,7 @@ SPDX-FileCopyrightText: NOI Techpark <[email protected]>
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div
     ref="header"
@@ -21,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           tone="text"
           class="flex items-center gap-x-2 text-sm"
         >
-          presented by
+          {{ t('header.presentedBy') }}
           <img
             :alt="t('header.logo')"
             class="aspect-square h-6"
@@ -49,9 +50,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               <div class="mx-2 w-px self-stretch bg-black"></div>
               <div
                 class="h-full rounded border border-black px-2 py-1 text-lg font-semibold leading-5 text-black"
-              >
-                DATA<br />BROWSER
-              </div>
+                v-html="t('header.toolBadge')"
+              ></div>
             </div>
           </router-link>
           <IconClose

diff --git a/databrowser/src/layouts/menu/MenuItems.vue b/databrowser/src/layouts/menu/MenuItems.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     >
       <HeaderButton>
         <router-link to="/dataset-overview" class="no-underline">
-          Datasets
+          {{ t('header.menu.datasets') }}
         </router-link>
       </HeaderButton>
       <HeaderButton>
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           variant="no-underline"
           tone="text"
         >
-          How to<IconExternal />
+          {{ t('header.menu.howTo') }}<IconExternal />
         </ExternalLink>
       </HeaderButton>
       <HeaderButton>
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           variant="no-underline"
           tone="text"
         >
-          Contact<IconExternal />
+          {{ t('header.menu.contact') }}<IconExternal />
         </ExternalLink>
       </HeaderButton>
     </div>
@@ -47,4 +47,7 @@ import MenuUserSection from '../../domain/auth/MenuUserSection.vue';
 import ExternalLink from '../../components/link/ExternalLink.vue';
 import HeaderButton from '../../components/header/HeaderButton.vue';
 import IconExternal from '../../components/svg/IconExternal.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 </script>
diff --git a/databrowser/src/locales/en.json b/databrowser/src/locales/en.json
@@ -11,12 +11,12 @@
   },
   "header": {
     "logo": "Open Data Hub - Logo",
+    "toolBadge": "DATA<br />BROWSER",
+    "presentedBy": "presented by",
     "menu": {
-      "title": "Menu",
-      "allDatasets": "All Datasets",
-      "goBackAction": "Go back",
-      "closeAction": "Close menu",
-      "openAction": "Open menu"
+      "datasets": "Datasets",
+      "howTo": "How To",
+      "contact": "Contact"
     },
     "hero": {
       "loading": {
@@ -27,10 +27,39 @@
     }
   },
   "footer": {
-    "imprint": "Imprint",
-    "legal": "Legal",
-    "privacy": "Privacy",
-    "sitemap": "Sitemap"
+    "cards": {
+      "databrowser": "Tool to access<br />open data",
+      "openDataHub": "Place where data and<br />tech are shared",
+      "noi": "Innovation hub in<br />Südtirol/Alto Adige"
+    },
+    "columns": {
+      "relevantLinks": {
+        "title": "Relevant links"
+      },
+      "quickstart": {
+        "title": "Quickstart",
+        "openDataHubWebsite": "Open Data Hub Website",
+        "databrowser": "Databrowser",
+        "webComponents": "Web Components"
+      },
+      "contributors": {
+        "title": "Contributors",
+        "text": "The Data Browser is the result of a great collaboration between many awesome people!",
+        "link": "Check them out!"
+      },
+      "socialMedia": {
+        "title": "Social Media",
+        "github": "GitHub",
+        "telegram": "Telegram",
+        "element": "element.io",
+        "facebook": "Facebook"
+      }
+    },
+    "notice": {
+      "copyright": "@Open Data Hub",
+      "privacy": "Privacy",
+      "imprint": "Imprint"
+    }
   },
   "languageSwitch": {
     "language": {