Merge pull request #12 from Lenni009/dev

Add translations

Author: Lenni009

README.md

@@ -1,2 +1,2 @@
 # image-compressor
-Compresses Images to below 10MB
+Compresses Images to below 10MB.

env.d.ts

@@ -17,7 +17,8 @@
     "jszip": "^3.10.1",
     "pinia": "^2.1.6",
     "sass": "^1.64.1",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.8.0"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.2",

package-lock.json

@@ -8,6 +8,9 @@ import type { FileObj } from './types/file';
 import { computed, ref, watch } from 'vue';
 import { useImageCompression } from './composables/useImageCompression';
 import { useZipCompression } from './composables/useZipCompression';
+import { useI18n } from './hooks/useI18n';
+
+const { t } = useI18n();
 
 const fileDataStore = useFileDataStore();
 const { files } = storeToRefs(fileDataStore);
@@ -60,32 +63,32 @@ watch(anyUncompressed, async (newVal) => {
 <template>
   <header>
     <NavBar />
-    <h1 class="title">Image Compressor</h1>
+    <h1 class="title">{{ t('translation.header') }}</h1>
   </header>
 
   <main>
     <div class="explanation-wrapper">
-      <p class="explanation">Compresses images to &lt; 10MB.</p>
+      <p class="explanation">{{ t('translation.subtitle') }}</p>
       <a
         href="https://nomanssky.fandom.com/wiki/Special:Upload?multiple=true"
         role="button"
         target="_blank"
         rel="noopener noreferrer"
-        >Open NMS Wiki Image Upload</a
+        >{{ t('translation.buttonwiki') }}</a
       >
     </div>
-    <h2 class="subheading">Input</h2>
+    <h2 class="subheading">{{ t('translation.input') }}</h2>
     <FileUpload />
 
-    <h2 class="subheading">File List</h2>
+    <h2 class="subheading">{{ t('translation.filelist') }}</h2>
     <div class="buttons">
       <button
         :aria-busy="isCompressing"
         :class="{ 'is-success': files.length && !anyUncompressed }"
         :disabled="!files.length || !anyUncompressed"
         @click="compressFiles"
       >
-        {{ files.length && !anyUncompressed ? 'All compressed!' : 'Compress' }}
+        {{ files.length && !anyUncompressed ? t('translation.allcompressed') : t('translation.compress') }}
       </button>
       <a
         :aria-busy="isZipCompressing"
@@ -94,21 +97,21 @@ watch(anyUncompressed, async (newVal) => {
         role="button"
         download
       >
-        Download ZIP
+        {{ t('translation.downloadzip') }}
       </a>
       <button
         :disabled="!files.length"
         class="secondary"
         @click="files = []"
       >
-        Clear List
+        {{ t('translation.clearlist') }}
       </button>
     </div>
     <div class="file-list">
       <FileItem
         v-for="file in files"
-        :key="file.id"
         :file-obj="file"
+        :key="file.id"
         @remove="removeItem(file)"
       />
     </div>

package.json

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 import type { FileObj } from '../types/file';
+import { useI18n } from '../hooks/useI18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   fileObj: FileObj;
@@ -33,20 +36,26 @@ const computeFileSize = (size: number) =>
     >
       <img
         :src="fileData"
-        class="preview"
         alt="Image preview"
+        class="preview"
         width="200"
       />
     </a>
     <div>
-      <div><span class="field-title">Name:</span> {{ fileObj.file.name }}</div>
-      <div><span class="field-title">Original Size:</span> {{ computeFileSize(orgSize) }}MB</div>
-      <div v-if="compSize"><span class="field-title">Compressed Size:</span> {{ computeFileSize(compSize) }}MB</div>
+      <div>
+        <span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
+      </div>
+      <div>
+        <span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
+      </div>
+      <div v-if="compSize">
+        <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
+      </div>
       <div
         v-if="fileObj.isTooLarge"
         class="error"
       >
-        <span class="field-title">Error:</span> File is too large!
+        <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
       </div>
     </div>
     <a
@@ -55,7 +64,7 @@ const computeFileSize = (size: number) =>
       :href="fileObj.isCompressed ? fileData : undefined"
       role="button"
       download
-      >Download</a
+      >{{ t('translation.download') }}</a
     >
     <button
       class="secondary delete-button"

src/App.vue

@@ -3,9 +3,12 @@ import { ref } from 'vue';
 import { useFileDataStore } from '../stores/fileData';
 import { storeToRefs } from 'pinia';
 import type { FileObj } from '../types/file';
+import { useI18n } from '../hooks/useI18n';
 
 const dragActive = ref(false);
 
+const { t } = useI18n();
+
 let id = 0;
 
 const fileDataStore = useFileDataStore();
@@ -39,19 +42,19 @@ function addFiles(uploadedFiles: FileList) {
 
 <template>
   <label
-    for="fileUpload"
-    class="drop-container"
     :class="{ 'drag-active': dragActive }"
+    class="drop-container"
+    for="fileUpload"
     @dragenter="dragActive = true"
     @dragleave="dragActive = false"
-    @drop.prevent="dropFile"
     @dragover.prevent
+    @drop.prevent="dropFile"
   >
-    <span class="drop-title">Drop files here</span>
+    <span class="drop-title">{{ t('translation.dropfiles') }}</span>
     <input
-      type="file"
       id="fileUpload"
       multiple
+      type="file"
       @change="uploadFile"
     />
   </label>

src/components/FileItem.vue

@@ -1,15 +1,43 @@
 <script setup lang="ts">
+import { watch, ref } from 'vue';
+import { useI18n } from '../hooks/useI18n';
 import ThemeSwitch from './ThemeSwitch.vue';
+
+const { t, locale } = useI18n();
+
+type Locales = typeof locale.value;
+
+const selectedLocale = ref<Locales>(locale.value);
+
+watch(selectedLocale, (newVal) => {
+  locale.value = newVal;
+  localStorage.setItem('lang', newVal);
+});
 </script>
 
 <template>
   <nav>
     <ul>
       <li>
-        <a href="..">&larr; View other pages</a>
+        <a
+          href=".."
+          :title="t('translation.viewother')"
+          >← {{ t('translation.viewother') }}</a
+        >
       </li>
     </ul>
     <ul>
+      <li>
+        <select v-model="selectedLocale">
+          <option
+            v-for="locale in $i18n.availableLocales"
+            :key="`locale-${locale}`"
+            :value="locale"
+          >
+            {{ locale }}
+          </option>
+        </select>
+      </li>
       <li>
         <ThemeSwitch />
       </li>

src/components/FileUpload.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
+import { useI18n } from '../hooks/useI18n';
+
+const { t } = useI18n();
+
 // determine preferred theme and update the html element with the respective tag
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 switchTheme(prefersDark ? 'dark' : 'light');
 
 function switchTheme(theme: string | undefined = undefined) {
   const currentTheme = document.documentElement.dataset.theme;
-  const computedNewTheme = currentTheme == 'dark' ? 'light' : 'dark';
+  const computedNewTheme = currentTheme === 'dark' ? 'light' : 'dark';
   const newTheme = theme ?? computedNewTheme;
   document.documentElement.dataset.theme = newTheme;
 }
 </script>
 
 <template>
-  <button
-    role="button"
-    class="themeswitcher"
-    id="themeSwitch"
-    @click="switchTheme()"
-  >
-    Switch Theme
-  </button>
+  <div style="text-align: right">
+    <button
+      class="themeswitcher"
+      id="themeSwitch"
+      style="width: auto"
+      @click="switchTheme()"
+    >
+      {{ t('translation.switchtheme') }}
+    </button>
+  </div>
 </template>

src/components/NavBar.vue

@@ -0,0 +1,39 @@
+import { i18n, messages } from '../i18n';
+
+// inspired by https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object
+
+type Join<FirstType, SecondType> = FirstType extends string | number
+  ? SecondType extends string | number
+    ? `${FirstType}${'' extends SecondType ? '' : '.'}${SecondType}`
+    : never
+  : never;
+
+/**
+ * Helper type that transforms an object tree into a union type of all possibles leaves.
+ */
+type Leaves<ObjectType> = ObjectType extends Record<string, unknown>
+  ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
+  : '';
+
+export type I18NLeaves = Leaves<(typeof messages)['Español']>;
+
+// This function adds type safety to the i18n t function.
+export function useI18n() {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { t, te, d, n, tm, rt, ...globalApi } = i18n.global;
+
+  type RemoveFirstFromTuple<T extends unknown[]> = ((...b: T) => void) extends (...b: infer I) => void ? I : [];
+
+  const typedT = t as (...args: [I18NLeaves, ...Partial<RemoveFirstFromTuple<Parameters<typeof t>>>]) => string;
+
+  return {
+    t: typedT.bind(i18n),
+    d: d.bind(i18n),
+    te: te.bind(i18n),
+    tm: tm.bind(i18n),
+    rt: rt.bind(i18n),
+    n: n.bind(i18n),
+    ...globalApi,
+  };
+}