refactor: i18n SEO

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"

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"

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"

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

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

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>

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"

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

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>

components/teams/index.vue

@@ -4,9 +4,12 @@
       {{ $t("team.title") }}
     </h4>
     <div class="mt-1 text-secondaryLight">
-      Join
+      <SmartAnchor
-      <SmartAnchor label="beta" to="https://hoppscotch.io/beta" blank />
+        :label="$t('team.join_beta')"
-      to access teams.
+        to="https://hoppscotch.io/beta"
+        blank
+        class="link"
+      />
     </div>
     <div class="space-y-4 mt-4">
       <ButtonSecondary

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"],

languages.json

@@ -3,210 +3,181 @@
     "code": "af",
     "name": "Afrikaans",
     "iso": "af-AF",
-    "file": "af.json",
+    "file": "af.json"
-    "country": "AF"
   },
   {
     "code": "ar",
     "name": "عربى",
     "iso": "ar-AR",
     "file": "ar.json",
-    "country": "AR"
+    "dir": "rtl"
   },
   {
     "code": "ca",
     "name": "Català",
     "iso": "ca-CA",
-    "file": "ca.json",
+    "file": "ca.json"
-    "country": "CA"
   },
   {
     "code": "cs",
     "name": "Čeština",
     "iso": "cs-CS",
-    "file": "cs.json",
+    "file": "cs.json"
-    "country": "CS"
   },
   {
     "code": "da",
     "name": "Dansk",
     "iso": "da-DA",
-    "file": "da.json",
+    "file": "da.json"
-    "country": "DA"
   },
   {
     "code": "de",
     "name": "Deutsch",
     "iso": "de-DE",
-    "file": "de.json",
+    "file": "de.json"
-    "country": "DE"
   },
   {
     "code": "el",
     "name": "Ελληνικά",
     "iso": "el-EL",
-    "file": "el.json",
+    "file": "el.json"
-    "country": "EL"
   },
   {
     "code": "en",
     "name": "English",
     "iso": "en-US",
-    "file": "en.json",
+    "file": "en.json"
-    "country": "US"
   },
   {
     "code": "es",
     "name": "Español",
     "iso": "es-ES",
-    "file": "es.json",
+    "file": "es.json"
-    "country": "ES"
   },
   {
     "code": "fi",
     "name": "Suomalainen",
     "iso": "fi-FI",
-    "file": "fi.json",
+    "file": "fi.json"
-    "country": "FI"
   },
   {
     "code": "fr",
     "name": "Français",
     "iso": "fr-FR",
-    "file": "fr.json",
+    "file": "fr.json"
-    "country": "FR"
   },
   {
     "code": "he",
     "name": "עִברִית",
     "iso": "he-HE",
-    "file": "he.json",
+    "file": "he.json"
-    "country": "HE"
   },
   {
     "code": "hu",
     "name": "Magyar",
     "iso": "hu-HU",
-    "file": "hu.json",
+    "file": "hu.json"
-    "country": "HU"
   },
   {
     "code": "it",
     "name": "Italiano",
     "iso": "it",
-    "file": "it.json",
+    "file": "it.json"
-    "country": "IT"
   },
   {
     "code": "ja",
     "name": "日本人",
     "iso": "ja-JA",
-    "file": "ja.json",
+    "file": "ja.json"
-    "country": "JA"
   },
   {
     "code": "ko",
     "name": "한국어",
     "iso": "ko-KO",
-    "file": "ko.json",
+    "file": "ko.json"
-    "country": "KO"
   },
   {
     "code": "nl",
     "name": "Nederlands",
     "iso": "nl-NL",
-    "file": "nl.json",
+    "file": "nl.json"
-    "country": "NL"
   },
   {
     "code": "no",
     "name": "Norsk",
     "iso": "no-NO",
-    "file": "no.json",
+    "file": "no.json"
-    "country": "NO"
   },
   {
     "code": "pl",
     "name": "Polskie",
     "iso": "pl-PL",
-    "file": "pl.json",
+    "file": "pl.json"
-    "country": "PL"
   },
   {
     "code": "pt-br",
     "name": "Português Brasileiro",
     "iso": "pt-BR",
-    "file": "pt-br.json",
+    "file": "pt-br.json"
-    "country": "BR"
   },
   {
     "code": "pt",
     "name": "Português",
     "iso": "pt-PT",
-    "file": "pt.json",
+    "file": "pt.json"
-    "country": "PT"
   },
   {
     "code": "ro",
     "name": "Română",
     "iso": "ro-RO",
-    "file": "ro.json",
+    "file": "ro.json"
-    "country": "RO"
   },
   {
     "code": "ru",
     "name": "Pусский",
     "iso": "ru-RU",
-    "file": "ru.json",
+    "file": "ru.json"
-    "country": "RU"
   },
   {
     "code": "sr",
     "name": "Српски",
     "iso": "sr-SR",
-    "file": "sr.json",
+    "file": "sr.json"
-    "country": "SR"
   },
   {
     "code": "sv",
     "name": "Svenska",
     "iso": "sv-SV",
-    "file": "sv.json",
+    "file": "sv.json"
-    "country": "SV"
   },
   {
     "code": "tr",
     "name": "Türk",
     "iso": "tr-TR",
-    "file": "tr.json",
+    "file": "tr.json"
-    "country": "TR"
   },
   {
     "code": "uk",
     "name": "Українська",
     "iso": "uk-UK",
-    "file": "uk.json",
+    "file": "uk.json"
-    "country": "UK"
   },
   {
     "code": "vi",
     "name": "Tiếng Việt",
     "iso": "vi-VI",
-    "file": "vi.json",
+    "file": "vi.json"
-    "country": "VI"
   },
   {
-    "code": "zh-tw",
+    "code": "tw",
     "name": "中國傳統的",
     "iso": "zh-TW",
-    "file": "zh-tw.json",
+    "file": "tw.json"
-    "country": "TW"
   },
   {
-    "code": "zh",
+    "code": "cn",
     "name": "简体中文",
     "iso": "zh-CN",
-    "file": "zh.json",
+    "file": "cn.json"
-    "country": "CN"
   }
 ]

layouts/default.vue

@@ -124,6 +124,9 @@ export default defineComponent({
       windowInnerWidth: 0,
     }
   },
+  head() {
+    return this.$nuxtI18nHead({ addSeoAttributes: true })
+  },
   watch: {
     $route(to) {
       logPageView(to.fullPath)

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,8 +267,11 @@
       "forward": "Go forward to next page"
     },
     "miscellaneous": {
+      "title": "Miscellaneous",
       "invite": "Invite people to Hoppscotch"
     },
+    "request": {
+      "title": "Request",
       "send_request": "Send Request",
       "save_to_collections": "Save to Collections",
       "copy_request_link": "Copy Request Link",
@@ -254,6 +283,7 @@
       "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",
+  "tests": "Tests"
-  "create_new_environment": "Create new environment"
 }

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)

pages/documentation.vue

@@ -205,7 +205,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: `Documentation • Hoppscotch`,
+      title: `${this.$t("navigation.doc")} • Hoppscotch`,
     }
   },
   methods: {

pages/graphql.vue

@@ -60,7 +60,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: `GraphQL • Hoppscotch`,
+      title: `${this.$t("navigation.graphql")} • Hoppscotch`,
     }
   },
 })

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>

pages/realtime.vue

@@ -39,7 +39,7 @@
 export default {
   head() {
     return {
-      title: `Realtime • Hoppscotch`,
+      title: `${this.$t("navigation.realtime")} • Hoppscotch`,
     }
   },
 }

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" />
+            <ButtonPrimary
-            <div class="mt-4 text-secondaryLight">Log in to access.</div>
+              :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">
-                {{
+                {{ $t(getColorModeName($colorMode.preference)) }}
-                  $colorMode.preference.charAt(0).toUpperCase() +
-                  $colorMode.preference.slice(1)
-                }}
                 <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>