From c04435108bdb6c23bd845cfe61bc365812439fef Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 16 Aug 2021 22:02:18 +0530
Subject: [PATCH] refactor: i18n SEO

---
 components/app/Search.vue                |  2 +-
 components/app/Shortcuts.vue             |  2 +-
 components/collections/ChooseType.vue    |  6 +-
 components/environments/Add.vue          |  4 +-
 components/environments/Edit.vue         |  6 +-
 components/environments/ImportExport.vue |  2 +-
 components/environments/index.vue        |  6 +-
 components/firebase/Login.vue            | 10 +--
 components/smart/ColorModePicker.vue     | 16 +++-
 components/teams/index.vue               |  9 ++-
 helpers/shortcuts.js                     | 36 ++++-----
 languages.json                           | 93 ++++++++----------------
 layouts/default.vue                      |  3 +
 locales/{zh.json => cn.json}             |  0
 locales/en.json                          | 72 +++++++++++++-----
 locales/{zh-tw.json => tw.json}          |  0
 nuxt.config.js                           |  5 +-
 pages/documentation.vue                  |  2 +-
 pages/graphql.vue                        |  2 +-
 pages/index.vue                          |  2 +-
 pages/realtime.vue                       |  2 +-
 pages/settings.vue                       | 49 +++++++++----
 22 files changed, 185 insertions(+), 144 deletions(-)
 rename locales/{zh.json => cn.json} (100%)
 rename locales/{zh-tw.json => tw.json} (100%)

diff --git a/components/app/Search.vue b/components/app/Search.vue
index 4f57d3d38..5b21f6dd1 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -35,7 +35,7 @@
           :key="`map-${mapIndex}`"
         >
           <h5 class="my-2 text-secondaryLight py-2 px-4">
-            {{ map.section }}
+            {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 028ef822b..8f3dfd76f 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -59,7 +59,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h5 class="font-semibold text-secondaryDark">
-            {{ map.section }}
+            {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 20b4dc2f6..f2832f56a 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -3,13 +3,13 @@
     <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
       <SmartTab
         :id="'my-collections'"
-        :label="'My Collections'"
+        :label="$t('collection.my_collections')"
         :selected="true"
       />
       <SmartTab
         v-if="currentUser && currentUser.eaInvited && !doc"
         :id="'team-collections'"
-        :label="'Team Collections'"
+        :label="$t('collection.team_collections')"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <div class="select-wrapper">
@@ -36,7 +36,7 @@
                 disabled
                 selected
               >
-                Select team
+                {{ $t("collection.select_team") }}
               </option>
               <option
                 v-for="(team, index) in myTeams"
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 4db1e13a5..22b9d3bbd 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('environment.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -41,7 +41,7 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+        this.$toast.info(this.$t("environment.invalid_name").toString(), {
           icon: "info",
         })
         return
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 11a6c4026..7258f7dcc 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('environment.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
@@ -18,7 +18,7 @@
         </div>
         <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="p-4">
-            {{ $t("env_variable_list") }}
+            {{ $t("environment.variable_list") }}
           </label>
           <div class="flex">
             <ButtonSecondary
@@ -164,7 +164,7 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+        this.$toast.info(this.$t("environment.invalid_name").toString(), {
           icon: "info",
         })
         return
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index abe2e84c5..dc998c52b 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('modal.import_export')} ${$t('environments')}`"
+    :title="`${$t('modal.import_export')} ${$t('environment.title')}`"
     @close="hideModal"
   >
     <template #actions>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 62a0ff7fd..2791a55ed 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="environments">
+  <AppSection :label="$t('environment.title')">
     <div
       class="
         bg-primary
@@ -25,9 +25,9 @@
             focus:outline-none
           "
         >
-          <option :value="-1">No environment</option>
+          <option :value="-1">{{ $t("environment.no_environment") }}</option>
           <option v-if="environments.length === 0" value="0">
-            {{ $t("create_new_environment") }}
+            {{ $t("environment.create_new") }}
           </option>
           <option
             v-for="(environment, index) in environments"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index bfa06211b..b662ebf83 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -10,18 +10,18 @@
         <SmartItem
           :loading="signingInWithGoogle"
           svg="google"
-          label="Continue with Google"
+          :label="$t('auth.continue_with_google')"
           @click.native="signInWithGoogle"
         />
         <SmartItem
           :loading="signingInWithGitHub"
           svg="github"
-          label="Continue with GitHub"
+          :label="$t('auth.continue_with_github')"
           @click.native="signInWithGithub"
         />
         <SmartItem
           icon="mail"
-          label="Continue with Email"
+          :label="$t('auth.continue_with_email')"
           @click.native="mode = 'email'"
         />
       </div>
@@ -95,7 +95,7 @@
       <p v-if="mode === 'email'" class="text-secondaryLight">
         <SmartAnchor
           class="link"
-          label="← All sign in options"
+          :label="`← ${$t('auth.all_sign_in_options')}`"
           @click.native="mode = 'sign-in'"
         />
       </p>
@@ -105,7 +105,7 @@
       >
         <SmartAnchor
           class="link"
-          label="← Re-enter email"
+          :label="`← ${$t('auth.re_enter_email')}`"
           @click.native="mode = 'email'"
         />
         <SmartAnchor
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 5deaa74e1..188d54aa5 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -4,7 +4,7 @@
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
-      :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+      :title="$t(getColorModeName(color))"
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
@@ -49,6 +49,20 @@ export default defineComponent({
           return "devices"
       }
     },
+    getColorModeName(colorMode: string) {
+      switch (colorMode) {
+        case "system":
+          return "settings.system_mode"
+        case "light":
+          return "settings.light_mode"
+        case "dark":
+          return "settings.dark_mode"
+        case "black":
+          return "settings.black_mode"
+        default:
+          return "settings.system_mode"
+      }
+    },
   },
 })
 </script>
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 38f7643dc..7336fed18 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -4,9 +4,12 @@
       {{ $t("team.title") }}
     </h4>
     <div class="mt-1 text-secondaryLight">
-      Join
-      <SmartAnchor label="beta" to="https://hoppscotch.io/beta" blank />
-      to access teams.
+      <SmartAnchor
+        :label="$t('team.join_beta')"
+        to="https://hoppscotch.io/beta"
+        blank
+        class="link"
+      />
     </div>
     <div class="space-y-4 mt-4">
       <ButtonSecondary
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 29e9b05a7..5afdaa6f1 100644
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -2,7 +2,7 @@ import { getPlatformAlternateKey, getPlatformSpecialKey } from "./platformutils"
 
 export default [
   {
-    section: "General",
+    section: "shortcut.general.title",
     shortcuts: [
       {
         keys: ["?"],
@@ -23,56 +23,56 @@ export default [
     ],
   },
   {
-    section: "Request",
+    section: "shortcut.request.title",
     shortcuts: [
       {
         keys: [getPlatformSpecialKey(), "G"],
-        label: "shortcut.send_request",
+        label: "shortcut.request.send_request",
       },
       {
         keys: [getPlatformSpecialKey(), "S"],
-        label: "shortcut.save_to_collections",
+        label: "shortcut.request.save_to_collections",
       },
       {
         keys: [getPlatformSpecialKey(), "C"],
-        label: "shortcut.copy_request_link",
+        label: "shortcut.request.copy_request_link",
       },
       {
         keys: [getPlatformSpecialKey(), "I"],
-        label: "shortcut.reset_request",
+        label: "shortcut.request.reset_request",
       },
       {
         keys: [getPlatformAlternateKey(), "↑"],
-        label: "shortcut.next_method",
+        label: "shortcut.request.next_method",
       },
       {
         keys: [getPlatformAlternateKey(), "↓"],
-        label: "shortcut.previous_method",
+        label: "shortcut.request.previous_method",
       },
       {
         keys: [getPlatformAlternateKey(), "G"],
-        label: "shortcut.get_method",
+        label: "shortcut.request.get_method",
       },
       {
         keys: [getPlatformAlternateKey(), "H"],
-        label: "shortcut.head_method",
+        label: "shortcut.request.head_method",
       },
       {
         keys: [getPlatformAlternateKey(), "P"],
-        label: "shortcut.post_method",
+        label: "shortcut.request.post_method",
       },
       {
         keys: [getPlatformAlternateKey(), "U"],
-        label: "shortcut.put_method",
+        label: "shortcut.request.put_method",
       },
       {
         keys: [getPlatformAlternateKey(), "X"],
-        label: "shortcut.delete_method",
+        label: "shortcut.request.delete_method",
       },
     ],
   },
   {
-    section: "Navigation",
+    section: "shortcut.navigation.title",
     shortcuts: [
       {
         keys: [getPlatformSpecialKey(), "←"],
@@ -105,7 +105,7 @@ export default [
     ],
   },
   {
-    section: "Miscellaneous",
+    section: "shortcut.miscellaneous.title",
     shortcuts: [
       {
         keys: [getPlatformSpecialKey(), "M"],
@@ -117,7 +117,7 @@ export default [
 
 export const spotlight = [
   {
-    section: "Spotlight",
+    section: "app.spotlight",
     shortcuts: [
       {
         keys: ["?"],
@@ -148,7 +148,7 @@ export const spotlight = [
     ],
   },
   {
-    section: "Navigation",
+    section: "shortcut.navigation.title",
     shortcuts: [
       {
         keys: [getPlatformSpecialKey(), "←"],
@@ -220,7 +220,7 @@ export const spotlight = [
     ],
   },
   {
-    section: "Miscellaneous",
+    section: "shortcut.miscellaneous.title",
     shortcuts: [
       {
         keys: [getPlatformSpecialKey(), "M"],
diff --git a/languages.json b/languages.json
index 5bf61f8a4..de13c2ddc 100644
--- a/languages.json
+++ b/languages.json
@@ -3,210 +3,181 @@
     "code": "af",
     "name": "Afrikaans",
     "iso": "af-AF",
-    "file": "af.json",
-    "country": "AF"
+    "file": "af.json"
   },
   {
     "code": "ar",
     "name": "عربى",
     "iso": "ar-AR",
     "file": "ar.json",
-    "country": "AR"
+    "dir": "rtl"
   },
   {
     "code": "ca",
     "name": "Català",
     "iso": "ca-CA",
-    "file": "ca.json",
-    "country": "CA"
+    "file": "ca.json"
   },
   {
     "code": "cs",
     "name": "Čeština",
     "iso": "cs-CS",
-    "file": "cs.json",
-    "country": "CS"
+    "file": "cs.json"
   },
   {
     "code": "da",
     "name": "Dansk",
     "iso": "da-DA",
-    "file": "da.json",
-    "country": "DA"
+    "file": "da.json"
   },
   {
     "code": "de",
     "name": "Deutsch",
     "iso": "de-DE",
-    "file": "de.json",
-    "country": "DE"
+    "file": "de.json"
   },
   {
     "code": "el",
     "name": "Ελληνικά",
     "iso": "el-EL",
-    "file": "el.json",
-    "country": "EL"
+    "file": "el.json"
   },
   {
     "code": "en",
     "name": "English",
     "iso": "en-US",
-    "file": "en.json",
-    "country": "US"
+    "file": "en.json"
   },
   {
     "code": "es",
     "name": "Español",
     "iso": "es-ES",
-    "file": "es.json",
-    "country": "ES"
+    "file": "es.json"
   },
   {
     "code": "fi",
     "name": "Suomalainen",
     "iso": "fi-FI",
-    "file": "fi.json",
-    "country": "FI"
+    "file": "fi.json"
   },
   {
     "code": "fr",
     "name": "Français",
     "iso": "fr-FR",
-    "file": "fr.json",
-    "country": "FR"
+    "file": "fr.json"
   },
   {
     "code": "he",
     "name": "עִברִית",
     "iso": "he-HE",
-    "file": "he.json",
-    "country": "HE"
+    "file": "he.json"
   },
   {
     "code": "hu",
     "name": "Magyar",
     "iso": "hu-HU",
-    "file": "hu.json",
-    "country": "HU"
+    "file": "hu.json"
   },
   {
     "code": "it",
     "name": "Italiano",
     "iso": "it",
-    "file": "it.json",
-    "country": "IT"
+    "file": "it.json"
   },
   {
     "code": "ja",
     "name": "日本人",
     "iso": "ja-JA",
-    "file": "ja.json",
-    "country": "JA"
+    "file": "ja.json"
   },
   {
     "code": "ko",
     "name": "한국어",
     "iso": "ko-KO",
-    "file": "ko.json",
-    "country": "KO"
+    "file": "ko.json"
   },
   {
     "code": "nl",
     "name": "Nederlands",
     "iso": "nl-NL",
-    "file": "nl.json",
-    "country": "NL"
+    "file": "nl.json"
   },
   {
     "code": "no",
     "name": "Norsk",
     "iso": "no-NO",
-    "file": "no.json",
-    "country": "NO"
+    "file": "no.json"
   },
   {
     "code": "pl",
     "name": "Polskie",
     "iso": "pl-PL",
-    "file": "pl.json",
-    "country": "PL"
+    "file": "pl.json"
   },
   {
     "code": "pt-br",
     "name": "Português Brasileiro",
     "iso": "pt-BR",
-    "file": "pt-br.json",
-    "country": "BR"
+    "file": "pt-br.json"
   },
   {
     "code": "pt",
     "name": "Português",
     "iso": "pt-PT",
-    "file": "pt.json",
-    "country": "PT"
+    "file": "pt.json"
   },
   {
     "code": "ro",
     "name": "Română",
     "iso": "ro-RO",
-    "file": "ro.json",
-    "country": "RO"
+    "file": "ro.json"
   },
   {
     "code": "ru",
     "name": "Pусский",
     "iso": "ru-RU",
-    "file": "ru.json",
-    "country": "RU"
+    "file": "ru.json"
   },
   {
     "code": "sr",
     "name": "Српски",
     "iso": "sr-SR",
-    "file": "sr.json",
-    "country": "SR"
+    "file": "sr.json"
   },
   {
     "code": "sv",
     "name": "Svenska",
     "iso": "sv-SV",
-    "file": "sv.json",
-    "country": "SV"
+    "file": "sv.json"
   },
   {
     "code": "tr",
     "name": "Türk",
     "iso": "tr-TR",
-    "file": "tr.json",
-    "country": "TR"
+    "file": "tr.json"
   },
   {
     "code": "uk",
     "name": "Українська",
     "iso": "uk-UK",
-    "file": "uk.json",
-    "country": "UK"
+    "file": "uk.json"
   },
   {
     "code": "vi",
     "name": "Tiếng Việt",
     "iso": "vi-VI",
-    "file": "vi.json",
-    "country": "VI"
+    "file": "vi.json"
   },
   {
-    "code": "zh-tw",
+    "code": "tw",
     "name": "中國傳統的",
     "iso": "zh-TW",
-    "file": "zh-tw.json",
-    "country": "TW"
+    "file": "tw.json"
   },
   {
-    "code": "zh",
+    "code": "cn",
     "name": "简体中文",
     "iso": "zh-CN",
-    "file": "zh.json",
-    "country": "CN"
+    "file": "cn.json"
   }
 ]
diff --git a/layouts/default.vue b/layouts/default.vue
index 4db1ab18e..2a47514f8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -124,6 +124,9 @@ export default defineComponent({
       windowInnerWidth: 0,
     }
   },
+  head() {
+    return this.$nuxtI18nHead({ addSeoAttributes: true })
+  },
   watch: {
     $route(to) {
       logPageView(to.fullPath)
diff --git a/locales/zh.json b/locales/cn.json
similarity index 100%
rename from locales/zh.json
rename to locales/cn.json
diff --git a/locales/en.json b/locales/en.json
index a0393b698..169e79e87 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -101,9 +101,13 @@
     "share": "Share",
     "copy": "Copy",
     "search": "Search",
-    "type_a_command_search": "Type a command or search…"
+    "type_a_command_search": "Type a command or search…",
+    "spotlight": "Spotlight"
   },
   "collection": {
+    "my_collections": "My Collections",
+    "team_collections": "Team Collections",
+    "select_team": "Select a team",
     "save_as": "Save as",
     "select_location": "Select location",
     "select": "Select a Collection",
@@ -121,6 +125,7 @@
   },
   "team": {
     "title": "Teams",
+    "join_beta": "Join the beta program to access teams.",
     "exit": "Exit Team",
     "name_length_insufficient": "Team name should be atleast 6 characters long",
     "invalid_email_format": "Email format is invalid",
@@ -162,7 +167,13 @@
     "gist_created": "Gist created"
   },
   "auth": {
+    "login": "Login",
+    "continue_with_google": "Continue with Google",
+    "continue_with_github": "Continue with GitHub",
+    "continue_with_email": "Continue with Email",
     "email": "Email",
+    "all_sign_in_options": "All sign in options",
+    "re_enter_email": "Re-enter email",
     "account_exists": "Account exists with different credential - Login to link both accounts",
     "send_magic_link": "Send a magic link",
     "we_sent_magic_link": "We sent you a magic link!",
@@ -184,6 +195,7 @@
     "unsubscribe": "Unsubscribe"
   },
   "request": {
+    "title": "Request",
     "copy_link": "Copy link",
     "save": "Save",
     "save_as": "Save as",
@@ -194,9 +206,21 @@
     "share": "Share"
   },
   "settings": {
+    "account_description": "Customize your account settings.",
+    "theme_description": "Customize your application theme.",
+    "user": "User",
+    "account_name_description": "This is your display name.",
+    "account_email_description": "Your primary email address.",
+    "interceptor_description": "Middleware between application and APIs.",
+    "sync_description": "These settings are synced to cloud.",
+    "sync": "Synchronise",
     "shortcuts_indicator": "Shortcuts indicator",
     "telemetry": "Telemetry",
     "interceptor": "Interceptor",
+    "system_mode": "System",
+    "light_mode": "Light",
+    "dark_mode": "Dark",
+    "black_mode": "Black",
     "navigation_sidebar": "Navigation sidebar",
     "font_size": "Font size",
     "font_size_small": "Small",
@@ -226,12 +250,14 @@
   },
   "shortcut": {
     "general": {
+      "title": "General",
       "help_menu": "Help menu",
       "show_all": "Keyboard shortcuts",
       "command_menu": "Search & command menu",
       "close_current_menu": "Close current menu"
     },
     "navigation": {
+      "title": "Navigation",
       "rest": "Go to REST page",
       "graphql": "Go to GraphQL page",
       "realtime": "Go to Realtime page",
@@ -241,19 +267,23 @@
       "forward": "Go forward to next page"
     },
     "miscellaneous": {
+      "title": "Miscellaneous",
       "invite": "Invite people to Hoppscotch"
     },
-    "send_request": "Send Request",
-    "save_to_collections": "Save to Collections",
-    "copy_request_link": "Copy Request Link",
-    "reset_request": "Reset Request",
-    "next_method": "Select Next method",
-    "previous_method": "Select Previous method",
-    "get_method": "Select GET method",
-    "head_method": "Select HEAD method",
-    "post_method": "Select POST method",
-    "put_method": "Select PUT method",
-    "delete_method": "Select DELETE method"
+    "request": {
+      "title": "Request",
+      "send_request": "Send Request",
+      "save_to_collections": "Save to Collections",
+      "copy_request_link": "Copy Request Link",
+      "reset_request": "Reset Request",
+      "next_method": "Select Next method",
+      "previous_method": "Select Previous method",
+      "get_method": "Select GET method",
+      "head_method": "Select HEAD method",
+      "post_method": "Select POST method",
+      "put_method": "Select PUT method",
+      "delete_method": "Select DELETE method"
+    }
   },
   "error": {
     "something_went_wrong": "Something went wrong",
@@ -269,6 +299,15 @@
     "tests": "Write a test script to automate debugging.",
     "network_fail": "Unable to reach the API endpoint. Check your network connection and try again."
   },
+  "environment": {
+    "title": "Environments",
+    "no_environment": "No environment",
+    "new": "New Environment",
+    "create_new": "Create new environment",
+    "edit": "Edit Environment",
+    "variable_list": "Variable List",
+    "invalid_name": "Please provide a valid name for the environment"
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -295,12 +334,6 @@
   "preview_html": "Preview HTML",
   "history": "History",
   "collections": "Collections",
-  "environments": "Environments",
-  "new_environment": "New Environment",
-  "my_new_environment": "My New Environment",
-  "edit_environment": "Edit Environment",
-  "env_variable_list": "Variable List",
-  "invalid_environment_name": "Please provide a valid name for the environment",
   "request_type": "Request type",
   "status": "Status",
   "headers": "Headers",
@@ -461,6 +494,5 @@
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "pre_request_script": "Pre-request Script",
-  "tests": "Tests",
-  "create_new_environment": "Create new environment"
+  "tests": "Tests"
 }
diff --git a/locales/zh-tw.json b/locales/tw.json
similarity index 100%
rename from locales/zh-tw.json
rename to locales/tw.json
diff --git a/nuxt.config.js b/nuxt.config.js
index 039983d62..16b3d3373 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -193,7 +193,7 @@ export default {
 
   // Sitemap module configuration (https://github.com/nuxt-community/sitemap-module)
   sitemap: {
-    hostname: process.env.BASE_URL || "https://hoppscotch.io",
+    hostname: process.env.BASE_URL,
   },
 
   // Robots module configuration (https://github.com/nuxt-community/robots-module)
@@ -222,11 +222,12 @@ export default {
       fallbackLocale: "en",
     },
     lazy: true,
-    langDir: "lang/",
+    langDir: "locales/",
     detectBrowserLanguage: {
       alwaysRedirect: true,
       fallbackLocale: "en",
     },
+    baseUrl: process.env.BASE_URL,
   },
 
   // Color mode configuration (https://github.com/nuxt-community/color-mode-module)
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 17fbb48a7..2463c44f8 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -205,7 +205,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: `Documentation • Hoppscotch`,
+      title: `${this.$t("navigation.doc")} • Hoppscotch`,
     }
   },
   methods: {
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 31175f863..14ad78620 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -60,7 +60,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: `GraphQL • Hoppscotch`,
+      title: `${this.$t("navigation.graphql")} • Hoppscotch`,
     }
   },
 })
diff --git a/pages/index.vue b/pages/index.vue
index 73c4230ea..5be93d43d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -64,7 +64,7 @@
             <Collections />
           </SmartTab>
 
-          <SmartTab :id="'env'" :label="$t('environments')">
+          <SmartTab :id="'env'" :label="$t('environment.title')">
             <Environments />
           </SmartTab>
         </SmartTabs>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 6bdcee594..315bd59ee 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -39,7 +39,7 @@
 export default {
   head() {
     return {
-      title: `Realtime • Hoppscotch`,
+      title: `${this.$t("navigation.realtime")} • Hoppscotch`,
     }
   },
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index 5388f1906..19d9e90f0 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -7,17 +7,21 @@
             {{ $t("account") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
-            Customize your account settings.
+            {{ $t("settings.account_description") }}
           </p>
         </div>
         <div class="p-8 md:col-span-2">
           <div v-if="currentUser === null">
-            <ButtonPrimary label="Log in" @click.native="showLogin = true" />
-            <div class="mt-4 text-secondaryLight">Log in to access.</div>
+            <ButtonPrimary
+              :label="$t('auth.login')"
+              @click.native="showLogin = true"
+            />
           </div>
           <div v-else class="space-y-8">
             <section>
-              <h4 class="font-semibold text-secondaryDark">User</h4>
+              <h4 class="font-semibold text-secondaryDark">
+                {{ $t("settings.user") }}
+              </h4>
               <div class="space-y-4 py-4">
                 <div class="flex items-start">
                   <div class="flex items-center">
@@ -33,7 +37,7 @@
                       {{ currentUser.displayName || $t("nothing_found") }}
                     </label>
                     <p class="mt-1 text-secondaryLight">
-                      This is your display name.
+                      {{ $t("settings.account_name_description") }}
                     </p>
                   </div>
                 </div>
@@ -46,7 +50,7 @@
                       {{ currentUser.email || $t("nothing_found") }}
                     </label>
                     <p class="mt-1 text-secondaryLight">
-                      Your primary email address.
+                      {{ $t("settings.account_email_description") }}
                     </p>
                   </div>
                 </div>
@@ -54,9 +58,11 @@
             </section>
             <Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
             <section>
-              <h4 class="font-semibold text-secondaryDark">Sync</h4>
+              <h4 class="font-semibold text-secondaryDark">
+                {{ $t("settings.sync") }}
+              </h4>
               <div class="mt-1 text-secondaryLight">
-                These settings are synced to cloud.
+                {{ $t("settings.sync_description") }}
               </div>
               <div class="space-y-4 py-4">
                 <div class="flex items-center">
@@ -99,7 +105,7 @@
             {{ $t("theme") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
-            Customize your application theme.
+            {{ $t("settings.theme_description") }}
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
@@ -109,12 +115,9 @@
             </h4>
             <div class="mt-1 text-secondaryLight">
               <ColorScheme placeholder="..." tag="span">
-                {{
-                  $colorMode.preference.charAt(0).toUpperCase() +
-                  $colorMode.preference.slice(1)
-                }}
+                {{ $t(getColorModeName($colorMode.preference)) }}
                 <span v-if="$colorMode.preference === 'system'">
-                  ({{ $colorMode.value }} mode detected)
+                  ({{ $t(getColorModeName($colorMode.value)) }})
                 </span>
               </ColorScheme>
             </div>
@@ -213,7 +216,7 @@
             {{ $t("settings.interceptor") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
-            Middleware between application and APIs.
+            {{ $t("settings.interceptor_description") }}
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
@@ -397,7 +400,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: `Settings • Hoppscotch`,
+      title: `${this.$t("navigation.settings")} • Hoppscotch`,
     }
   },
   computed: {
@@ -452,6 +455,20 @@ export default defineComponent({
       })
       setTimeout(() => (this.clearIcon = "clear_all"), 1000)
     },
+    getColorModeName(colorMode: string) {
+      switch (colorMode) {
+        case "system":
+          return "settings.system_mode"
+        case "light":
+          return "settings.light_mode"
+        case "dark":
+          return "settings.dark_mode"
+        case "black":
+          return "settings.black_mode"
+        default:
+          return "settings.system_mode"
+      }
+    },
   },
 })
 </script>