refactor: i18n SEO

2021-08-16 22:02:18 +05:30
parent e5c8d05850
commit c04435108b
22 changed files with 185 additions and 144 deletions
--- 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"
--- 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"
--- 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"
--- 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
--- 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
--- 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>
--- 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"
--- 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
--- 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>
--- 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
--- 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"],
--- 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"
  }
 ]
--- 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)
--- a/locales/cn.json
+++ b/locales/cn.json
--- 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"
 }
--- a/locales/zh-tw.json
+++ b/locales/zh-tw.json
--- 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)
--- 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: {
--- 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`,
    }
  },
 })
--- 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>
--- 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`,
    }
  },
 }
--- 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>