feat: more things translatable, in-context translation setup directions (#188)

Author: budak7273

.gitignore

@@ -213,6 +213,7 @@ typings/
 .env
 .env.test
 .env*.local
+.env*.personal
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

CONTRIBUTING.md

@@ -32,7 +32,7 @@ inside the container.
 At the highest level you must at least have:
 
 * [Bun](https://bun.sh/)
-* terminal (Bash is suggested but not required.)
+* Bash terminal (others may fail to run some scripts)
 
 ### bun installation
 
@@ -107,6 +107,27 @@ export NODE_ENV=staging; set -o allexport; source .env.staging; set +o allexport
 
 After running this command, all commands you run in that bash session will have those environment variables loaded.
 
+### Localization
+
+If you'd like to help translate and localize SMM to different languages, join our [discord server](https://discord.ficsit.app/).
+
+ficsit.app handles localization through the Tolgee Svelte integration.
+This allows for [in-context translation](https://tolgee.io/js-sdk/) - simply alt-click on a translatable element to open the Tolgee interface.
+If an element can't be alt-clicked it either doesn't support in-context translation or isn't translatable yet.
+You can also edit translations from the [project's webpage](https://translate.ficsit.app/projects/2).
+
+In order to edit translations in-context, you will need to provide a tolgee API key with edit permissions.
+To do this:
+
+1. Join the Discord and get added to the smr-frontend Tolgee project
+2. Create a copy of the env file you wish to use (such as `.env.staging`) and name it `.env.personal` (so it is gitignored and does not upset dev:serve)
+3. Visit [the project's integration page](https://translate.ficsit.app/projects/2/integrate) to generate an API key (the "weapon" you select does not matter)
+4. Replace the `PUBLIC_TOLGEE_API_KEY` in your new env file with the API key you generated
+5. Use your new env name when running commands.
+   For example, run `fenv personal` to switch to it.
+
+Using the in-context translation Screenshot feature also requires installing the _Tolgee Tools_ browser extension.
+
 ### Downloading Translations
 
 This project uses Tolgee to manage translations.

cspell.json

@@ -8,6 +8,7 @@
   "words": [
     "cfworker",
     "felte",
+    "fenv",
     "ficsit",
     "gpgsign",
     "pnpx",

src/lib/components/mods/compatibility/CompatibilityGrid.svelte

@@ -10,7 +10,7 @@
   export let compatibility: CompatibilityInfoInput;
 
   export const { t } = getTranslate();
-  export const noNotesText = '(No extra notes)';
+  export const noNotesText = $t('compatibility-info.no-notes');
 
   const modalStore = getModalStore();
   const openCompatibility = () => {
@@ -28,26 +28,29 @@
 
 <div class="card p-4">
   <div class="grid grid-flow-row gap-y-2">
-    <h3 class="my-4 text-2xl font-bold">Compatibility Information</h3>
-    <p>Click the colored text for more details.</p>
+    <h3 class="my-4 text-2xl font-bold">{$t('compatibility-info.header')}</h3>
+    <p>{$t('compatibility-info.subtitle')}</p>
     <div class="grid grid-flow-row">
       <table aria-label="Available Releases" class="max-w-auto table table-hover !overflow-visible">
         <tbody>
           <tr class="rounded border !border-surface-500">
-            <td><div class="flex items-center justify-center"><CompatibilityIcon /> Early Access</div></td>
             <td
               ><div class="flex items-center justify-center">
-                <CompatibilityIcon EXP={true} /> Experimental
+                <CompatibilityIcon />{$t('compatibility-info.branch.stable')}
+              </div></td>
+            <td
+              ><div class="flex items-center justify-center">
+                <CompatibilityIcon EXP={true} />{$t('compatibility-info.branch.unstable')}
               </div></td>
           </tr>
           <tr class="rounded border !border-surface-500">
             <td class="text-center">
-              <button class="m-0 min-w-0" title="Click for more information" on:click={openCompatibility}>
+              <button class="m-0 min-w-0" title={$t('tooltip.click-for-info')} on:click={openCompatibility}>
                 <CompatibilityStateText state={compatibility?.EA?.state} />
               </button>
             </td>
             <td class="text-center">
-              <button class="m-0 min-w-0" title="Click for more information" on:click={openCompatibility}>
+              <button class="m-0 min-w-0" title={$t('tooltip.click-for-info')} on:click={openCompatibility}>
                 <CompatibilityStateText state={compatibility?.EXP?.state} />
               </button>
             </td>

src/lib/components/utils/TagList.svelte

@@ -5,6 +5,9 @@
   import { Autocomplete, type AutocompleteOption, InputChip, type PopupSettings, popup } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
   import TagDisplay from './TagDisplay.svelte';
+  import { getTranslate } from '@tolgee/svelte';
+
+  export const { t } = getTranslate();
 
   const client = getContextClient();
 
@@ -21,10 +24,10 @@
   export let popupTriggerEvent: PopupSettings['event'] = 'click';
 
   $: allTags =
-    $getAllTags.data?.getTags?.map((t) => ({
-      label: `${t.name} - ${t.description}`,
-      value: t.id,
-      name: t.name
+    $getAllTags.data?.getTags?.map((tag) => ({
+      label: `${tag.name} - ${tag.description}`,
+      value: tag.id,
+      name: tag.name
     })) || ([] satisfies AutocompleteOption[]);
 
   const popupSettings: PopupSettings = {
@@ -34,16 +37,16 @@
   };
 
   let tagList = [];
-  const loadTagList = () => (tagList = tags.map((t: Tag) => t.name));
+  const loadTagList = () => (tagList = tags.map((tag: Tag) => tag.name));
 
   onMount(loadTagList);
 
-  const addTag = (tag: AutocompleteOption) => {
-    const realTag = $getAllTags.data?.getTags?.find((t) => t.id == tag.value);
+  const addTag = (tagToAdd: AutocompleteOption) => {
+    const realTag = $getAllTags.data?.getTags?.find((tag) => tag.id == tagToAdd.value);
     tags = [
       ...tags,
       {
-        id: tag.value,
+        id: tagToAdd.value,
         name: realTag?.name,
         description: realTag?.description
       }
@@ -53,7 +56,7 @@
   };
 
   const removeTag = (label: string) => {
-    const idx = tags.findIndex((t) => t.name === label);
+    const idx = tags.findIndex((tag) => tag.name === label);
     tags = [...tags.slice(0, idx), ...tags.slice(idx + 1)];
 
     loadTagList();
@@ -72,22 +75,22 @@
       </div>
     {/if}
   {:else}
-    <div class="mb-2">Tags</div>
+    <div class="mb-2">{$t('mod.tags.title')}</div>
 
     <div use:popup={popupSettings}>
       <InputChip
         bind:input={inputTag}
         bind:value={tagList}
-        on:remove={(t) => removeTag(t.detail.chipValue)}
+        on:remove={(tag) => removeTag(tag.detail.chipValue)}
         name="tags"
         chips="variant-filled-primary" />
     </div>
 
     <div class="card max-h-48 w-max max-w-full overflow-y-auto p-4" tabindex="-1" data-popup="popupAutocomplete">
       <Autocomplete
         bind:input={inputTag}
-        options={allTags.filter((t) => tagList.indexOf(t.name) < 0)}
-        on:selection={(t) => addTag(t.detail)} />
+        options={allTags.filter((tag) => tagList.indexOf(tag.name) < 0)}
+        on:selection={(tag) => addTag(tag.detail)} />
     </div>
   {/if}
 </div>

src/routes/mod/[modId]/+page.svelte

@@ -17,9 +17,12 @@
   import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
   import EditCompatibilityModal from '$lib/modals/EditCompatibilityModal.svelte';
   import Page404 from '$lib/components/general/Page404.svelte';
+  import { getTranslate } from '@tolgee/svelte';
 
   export let data: PageData;
 
+  export const { t } = getTranslate();
+
   $: ({ modId, mod } = data);
 
   const client = getContextClient();
@@ -46,7 +49,7 @@
           });
         } else {
           toastStore.trigger({
-            message: `Mod deleted`,
+            message: $t('mod.toast.mod-deleted'),
             background: 'variant-filled-success',
             timeout: 5000
           });
@@ -57,8 +60,8 @@
 
   const deleteModal: ModalSettings = {
     type: 'confirm',
-    title: 'Delete Mod?',
-    body: 'Are you sure you wish to delete this mod?',
+    title: $t('mod.modal.delete.title'),
+    body: $t('mod.modal.delete.text'),
     response: (r: boolean) => {
       if (r) {
         deleteModFn();
@@ -103,27 +106,27 @@
         {#if canUserEdit}
           <button class="variant-ghost-primary btn" on:click={() => goto(base + '/mod/' + modId + '/edit')}>
             <span class="material-icons pr-2">edit</span>
-            Edit</button>
+            {$t('mod.edit')}</button>
           <button class="variant-ghost-primary btn" on:click={() => modalStore.trigger(deleteModal)}>
             <span class="material-icons pr-2">delete_forever</span>
-            Delete</button>
+            {$t('mod.delete')}</button>
           <button class="variant-ghost-primary btn" on:click={() => goto(base + '/mod/' + modId + '/new-version')}>
             <span class="material-icons pr-2">upload_file</span>
-            New Version</button>
+            {$t('mod.new-version')}</button>
         {/if}
         {#if canUserEditCompatibility}
           <button class="variant-ghost-primary btn" on:click={() => modalStore.trigger(editCompatibilityModal)}>
             <span class="material-icons">rocket_launch</span>
             <span class="material-icons pr-2">science</span>
-            Edit Compatibility</button>
+            {$t('mod.edit-compatibility')}</button>
         {/if}
         <button class="variant-ghost-primary btn" on:click={() => (versionsTab = !versionsTab)}>
           {#if !versionsTab}
             <span class="material-icons pr-2" title="Browse all uploaded versions of this mod">view_list</span>
-            View Versions
+            {$t('mod.view-versions')}
           {:else}
             <span class="material-icons pr-2" title="View the description page for this mod">description</span>
-            View Description
+            {$t('mod.view-description')}
           {/if}
         </button>
       </div>

src/routes/mod/[modId]/new-version/+page.svelte

@@ -12,6 +12,9 @@
   import type { PageData } from './$types';
   import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
   import EditCompatibilityForm from '$lib/components/mods/compatibility/EditCompatibilityForm.svelte';
+  import { getTranslate } from '@tolgee/svelte';
+
+  export const { t } = getTranslate();
 
   export let data: PageData;
 
@@ -118,7 +121,7 @@
       title="View the description page for this mod"
       on:click={() => modalStore.trigger(backModal)}>
       <span class="material-icons pr-2">arrow_back</span>
-      Back to Mod
+      {$t('version.back')}
     </button>
   </div>
 </div>

src/routes/mod/[modId]/version/[versionId]/+page.svelte

@@ -15,6 +15,9 @@
   import type { PageData } from './$types';
   import { getModalStore, getToastStore, type ModalSettings, popup } from '@skeletonlabs/skeleton';
   import Page404 from '$lib/components/general/Page404.svelte';
+  import { getTranslate } from '@tolgee/svelte';
+
+  export const { t } = getTranslate();
 
   export let data: PageData;
 
@@ -151,7 +154,7 @@
           href={base + '/mod/' + modId}
           title="View the description page for this mod">
           <span class="material-icons">extension</span>
-          <span>Back to Mod</span>
+          <span>{$t('version.back')}</span>
         </a>
       </div>
     </div>

src/routes/new-mod/+page.svelte

@@ -7,6 +7,9 @@
   import { base } from '$app/paths';
   import MetaDescriptors from '$lib/components/utils/MetaDescriptors.svelte';
   import { getToastStore } from '@skeletonlabs/skeleton';
+  import { getTranslate } from '@tolgee/svelte';
+
+  export const { t } = getTranslate();
 
   const toastStore = getToastStore();
 
@@ -28,7 +31,7 @@
           });
         } else {
           toastStore.trigger({
-            message: `Mod created`,
+            message: $t('new-mod.toast.creation-success'),
             background: 'variant-filled-success',
             timeout: 5000
           });
@@ -42,7 +45,7 @@
   <MetaDescriptors description="Adding a new mod in the Satisfactory Mod Repository" title="New mod" />
 </svelte:head>
 
-<h1 class="my-4 text-4xl font-bold">New Mod</h1>
+<h1 class="my-4 text-4xl font-bold">{$t('new-mod.title')}</h1>
 
 <div class="card p-4">
   <section>