chore: Extract strings into localazation file

package.json

@@ -1,6 +1,5 @@
 {
-  "name": "GitHub: Better Line Counts",
-  "description": "Remove generated files from GitHub line counts",
+  "name": "github-better-line-counts",
   "private": true,
   "version": "1.7.0",
   "packageManager": "[email protected]",
@@ -37,6 +36,8 @@
     "@types/chrome": "^0.0.269",
     "@types/jsdom": "^21.1.3",
     "@vitest/coverage-v8": "^2.1.3",
+    "@wxt-dev/auto-icons": "^1.0.2",
+    "@wxt-dev/i18n": "^0.2.0",
     "@wxt-dev/module-vue": "^1.0.0",
     "autoprefixer": "^10.4.16",
     "env-cmd": "^10.1.0",

src/components/CommitDiff.ts

@@ -7,7 +7,7 @@ export const CommitDiff = createDiffComponent({
     const container = this.getDeletionsElement()?.parentElement;
     container?.appendChild(spinner);
   },
-  getAdditionsText: (count) => `${count} additions`,
-  getDeletionsText: (count) => `${count} deletions`,
-  getGeneratedText: (count) => `${count} generated lines.`,
+  getAdditionsText: (count) => i18n.t("diffs.additionsText", count),
+  getDeletionsText: (count) => i18n.t("diffs.deletionsText", count),
+  getGeneratedText: (count) => i18n.t("diffs.generatedText", count),
 });

src/components/CompareDiff.ts

@@ -7,7 +7,7 @@ export const CompareDiff = createDiffComponent({
     const container = this.getDeletionsElement()?.parentElement;
     container?.appendChild(spinner);
   },
-  getAdditionsText: (count) => `${count} additions`,
-  getDeletionsText: (count) => `${count} deletions`,
-  getGeneratedText: (count) => `${count} generated lines.`,
+  getAdditionsText: (count) => i18n.t("diffs.additionsText", count),
+  getDeletionsText: (count) => i18n.t("diffs.deletionsText", count),
+  getGeneratedText: (count) => i18n.t("diffs.generatedText", count),
 });

src/components/CustomListItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps<{
+defineProps<{
   value: string;
 }>();
 
@@ -14,7 +14,7 @@ const emits = defineEmits<{
 
     <textarea
       class="font-mono p-2 w-full resize-y m-0 outline-none -mb-1 min-h-[5rem]"
-      :placeholder="'Enter glob patterns:\n*.lock\n**/vendor/**'"
+      :placeholder="i18n.t('options.customLists.customRepoPlaceholder')"
       :value="value"
       @input="
         emits('update:value', ($event.target as HTMLTextAreaElement).value)

src/components/CustomListsPref.vue

@@ -23,26 +23,32 @@ const all = computed({
     };
   },
 });
+
+const { t } = i18n;
 </script>
 
 <template>
   <li class="flex flex-col gap-4">
     <!-- Header -->
     <div class="flex flex-col gap-2">
-      <p class="font-medium text-base-content text-lg">Custom Lists</p>
+      <p class="font-medium text-base-content text-lg">
+        {{ t("options.customLists.title") }}
+      </p>
       <p class="text-base">
-        Use
+        {{ t("options.customLists.description1") }}
         <a
           class="link link-secondary"
           href="https://github.com/isaacs/minimatch#features"
           target="_blank"
-          >minimatch</a
+          >{{ t("options.customLists.description2") }}</a
         >
-        glob patterns to mark files as generated accross all repos.
+        {{ t("options.customLists.description3") }}
       </p>
     </div>
 
     <!-- All Repos -->
-    <CustomListItem v-model:value="all">All Repos</CustomListItem>
+    <CustomListItem v-model:value="all">{{
+      i18n.t("options.customLists.allRepos")
+    }}</CustomListItem>
   </li>
 </template>

src/components/OptionsForm.vue

@@ -31,6 +31,8 @@ const { state, hasChanges, reset, saveChanges } = useForm<{
     await commitHashDiffsCache.clear();
   },
 );
+
+const { t } = i18n;
 </script>
 
 <template>
@@ -50,10 +52,10 @@ const { state, hasChanges, reset, saveChanges } = useForm<{
         :disabled="!hasChanges"
         @click="saveChanges"
       >
-        Save Changes
+        {{ t("saveChanges") }}
       </button>
       <button class="btn" :disabled="!hasChanges" @click="reset">
-        Discard
+        {{ t("discard") }}
       </button>
     </div>
   </form>

src/components/PrDiff.ts

@@ -7,7 +7,7 @@ export const PrDiff = createDiffComponent({
     const deletions = this.getDeletionsElement();
     deletions?.replaceWith(deletions, spinner);
   },
-  getAdditionsText: (count) => `+${count}`,
-  getDeletionsText: (count) => `−${count}`,
-  getGeneratedText: (count) => ` ⌁${count}`,
+  getAdditionsText: (count) => i18n.t("diffs.additionsSymbol", [count]),
+  getDeletionsText: (count) => i18n.t("diffs.deletionsSymbol", [count]),
+  getGeneratedText: (count) => i18n.t("diffs.generatedSymbol", [count]),
 });

src/components/ShowGeneratedCountPref.vue

@@ -12,13 +12,15 @@ const hideLineCount = useVModel(props, "hideGeneratedLineCount", emits);
 function toggle() {
   hideLineCount.value = !hideLineCount.value;
 }
+
+const { t } = i18n;
 </script>
 
 <template>
   <li class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
       <p class="font-medium text-base-content text-lg">
-        Show Generated Line Counts
+        {{ t("options.enabled.title") }}
       </p>
       <label class="text-base flex gap-4 items-center">
         <input
@@ -28,14 +30,19 @@ function toggle() {
           @change="toggle"
         />
         <p>
-          Along with
-          <span class="text-success font-medium">+additions</span> and
-          <span class="text-error font-medium">−deletions</span>, show a third
-          number for
-          <span class="text-base-content text-opacity-50 font-medium"
-            >⌁generated</span
-          >
-          lines.
+          {{ t("options.enabled.description1") }}
+          <span class="text-success font-medium">{{
+            t("options.enabled.description2")
+          }}</span>
+          {{ t("options.enabled.description3") }}
+          <span class="text-error font-medium">{{
+            t("options.enabled.description4")
+          }}</span
+          >{{ t("options.enabled.description5") }}
+          <span class="text-base-content text-opacity-50 font-medium">{{
+            t("options.enabled.description6")
+          }}</span>
+          {{ t("options.enabled.description7") }}
         </p>
       </label>
     </div>

src/components/TokenPref.vue

@@ -15,28 +15,32 @@ const token = useVModel(props, "githubPat", emits);
 const { data: user, error, isLoading } = useGithubUserQuery(token);
 
 const tokenHidden = ref(true);
+
+const { t } = i18n;
 </script>
 
 <template>
   <li class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
-      <p class="font-medium text-base-content text-lg">Access Private Repos</p>
+      <p class="font-medium text-base-content text-lg">
+        {{ t("options.privateRepos.title") }}
+      </p>
       <p class="text-base">
-        <em>Optional:</em> To recalculate the diff on private repos, the
-        extension needs a GitHub PAT to authenticate API requests.
+        <em>{{ t("options.privateRepos.description1") }}</em>
+        {{ t("options.privateRepos.description2") }}
         <a
           class="link link-secondary"
           href="https://github.com/settings/tokens/new?description=Github%3A%20Better%20Line%20Count&scopes=repo"
           target="_blank"
-          >Click here</a
+          >{{ t("options.privateRepos.description3") }}</a
         >
-        to create one.
+        {{ t("options.privateRepos.description4") }}
       </p>
     </div>
     <div class="join">
       <input
         class="join-item input input-bordered w-full"
-        placeholder="Personal access token..."
+        :placeholder="t('options.privateRepos.inputPlaceholder')"
         v-model="token"
         :type="tokenHidden ? 'password' : 'text'"
       />
@@ -53,17 +57,23 @@ const tokenHidden = ref(true);
 
     <template v-if="token">
       <p v-if="error" class="">
-        <span class="badge badge-error shrink-0">Token is invalid</span>
+        <span class="badge badge-error shrink-0">{{
+          t("options.privateRepos.invalidToken")
+        }}</span>
         {{ " " }}
         <span class="text-sm">{{ error }}</span>
       </p>
       <p v-else-if="isLoading || user == null" class="badge badge-ghost">
-        Checking token...
+        {{ t("options.privateRepos.checking") }}
       </p>
-      <p v-else class="">
-        <span class="badge badge-success">Token is valid</span>
+      <p v-else>
+        <span class="badge badge-success">{{
+          t("options.privateRepos.validToken")
+        }}</span>
         {{ " " }}
-        <span class="text-sm">Username: {{ user?.login }}</span>
+        <span class="text-sm">{{
+          t("options.privateRepos.username", [user.login])
+        }}</span>
       </p>
     </template>
   </li>

src/components/createDiffComponent.ts

@@ -44,10 +44,15 @@ export function createDiffComponent(options: {
       if (!hideGeneratedLineCount) {
         const generated = document.createElement("strong");
         generated.id = DIFF_COMPONENT_ID;
-        generated.textContent = options.getGeneratedText(stats.exclude.changes);
+        generated.textContent =
+          " " + options.getGeneratedText(stats.exclude.changes);
         generated.style.color = GREY_COLOR;
-        const generatedAdditionsText = `+${stats.exclude.additions}`;
-        const generatedDeletionsText = `−${stats.exclude.deletions}`;
+        const generatedAdditionsText = i18n.t("diffs.additionsSymbol", [
+          stats.exclude.additions,
+        ]);
+        const generatedDeletionsText = i18n.t("diffs.deletionsSymbol", [
+          stats.exclude.deletions,
+        ]);
         generated.title = `${generatedAdditionsText} ${generatedDeletionsText}`;
         spinner.replaceWith(generated);
       } else {

src/entrypoints/options/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Options</title>
     <script src="./main.ts" type="module"></script>
     <link rel="stylesheet" href="~/assets/tailwind.css" />
     <meta name="manifest.open_in_tab" content="false" />

src/entrypoints/options/main.ts

@@ -1,4 +1,6 @@
 import Options from "@/pages/Options.vue";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 
+document.title = i18n.t("options.title");
+
 createApp(Options).use(VueQueryPlugin).mount(document.body);

src/locales/en.yml

@@ -0,0 +1,49 @@
+name: GitHub Better Line Counts
+description: Remove generated files from GitHub line counts
+saveChanges: Save Changes
+discard: Discard
+diffs:
+  additionsText:
+    1: $1 addition
+    n: $1 additions
+  deletionsText:
+    1: $1 deletion
+    n: $1 deletions
+  generatedText:
+    1: $1 generated line.
+    n: $1 generated lines.
+  additionsSymbol: +$1
+  deletionsSymbol: −$1
+  generatedSymbol: ⌁$1
+options:
+  title: Options
+  privateRepos:
+    title: Access Private Repos
+    description1: "Optional:"
+    description2: To recalculate the diff on private repos, the extension needs a GitHub PAT to authenticate API requests.
+    description3: Click here
+    description4: to create one.
+    inputPlaceholder: Personal access token...
+    invalidToken: Token is invalid
+    validToken: Token is valid
+    checking: Checking token...
+    username: "Username: $1"
+  enabled:
+    title: Show Generated Line Counts
+    description1: Along with
+    description2: +additions
+    description3: and
+    description4: −deletions
+    description5: ", show a third number for"
+    description6: ⌁generated
+    description7: lines.
+  customLists:
+    title: Custom Lists
+    description1: Use
+    description2: minimatch
+    description3: glob patterns to mark files as generated across all repos.
+    allRepos: All Repos
+    customRepoPlaceholder: |
+      Enter glob patterns:
+      *.lock
+      **/vendor/**

wxt.config.ts

@@ -9,7 +9,11 @@ export default defineConfig({
   experimental: {
     entrypointImporter: "vite-node",
   },
-  modules: ["@wxt-dev/module-vue"],
+  modules: [
+    "@wxt-dev/module-vue",
+    "@wxt-dev/i18n/module",
+    "@wxt-dev/auto-icons",
+  ],
   imports: {
     presets: ["vue-router", "@vueuse/core"],
     imports: [
@@ -30,7 +34,13 @@ export default defineConfig({
       permissions.push("https://api.github.com/*");
     }
     return {
+      default_locale: "en",
+      name: "__MSG_name__",
+      description: "__MSG_description__",
       permissions,
     };
   },
+  autoIcons: {
+    grayscaleOnDevelopment: false,
+  },
 });