i18l Refactoring: use proper json files

frontend/src/components/CoordinateRequestDialog.js

@@ -1,16 +1,19 @@
 import Swal from "sweetalert2";
 import { useUserStore } from "@/stores";
+import i18n from "@/i18n";
+const { t } = i18n.global;
 
 export function requestCoordinate() {
   const apiUrl = import.meta.env.VITE_API_URL;
   // Lets pop up a swal to ask for the seed name and then send it to the backend
   Swal.fire({
-    title: "Request a seed thats not found in the database yet",
+    title: t("coordinate_request_dialog.text"),
     input: "text",
-    inputLabel: "Coordinate:",
-    inputPlaceholder: "Enter the Coordinate here...",
+    inputLabel: t("coordinate_request_dialog.coordinate"),
+    inputPlaceholder: t("coordinate_request_dialog.placeholder"),
     showCancelButton: true,
-    confirmButtonText: "Request",
+    confirmButtonText: t("coordinate_request_dialog.bt_request"),
+    cancelButtonText: t("coordinate_request_dialog.bt_cancel"),
     showLoaderOnConfirm: true,
     inputValidator: (coordinate) => validateCoordinate(coordinate),
     preConfirm: (coordinates) => {
@@ -38,7 +41,7 @@ export function requestCoordinate() {
   }).then((result) => {
     if (result.isConfirmed) {
       Swal.fire({
-        title: "Seed Requested",
+        title: t("coordinate_request_dialog.request_successful"),
         text: result.value.message,
         icon: "success",
       });
@@ -54,7 +57,7 @@ export function validateCoordinate(coordinate) {
     console.log(coordinate);
     let coordinateValid = coordinateValidationRegex.test(coordinate);
     if (!coordinateValid) {
-      resolve("Not a valid Coordinate!");
+      resolve(t("coordinate_request_dialog.invalid_syntax"));
     } else {
       resolve();
     }

frontend/src/components/Navbar.vue

@@ -75,7 +75,7 @@ import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
           <!-- Optionally, add buttons to set or clear token -->
           <div class="nav-link my-auto">
             <button v-if="isAuthenticated" @click="requestCoordinate" class="btn btn-sm btn-primary">
-              {{ $t("coordinate_request_dialog.request_coordinate_title") }}
+              {{ $t("coordinate_request_dialog.title") }}
             </button>
             <a v-else :href="loginUrl">
               <img src="https://community.cloudflare.steamstatic.com/public/images/signinthroughsteam/sits_01.png" />

frontend/src/content/README.md

@@ -1,26 +1,21 @@
 ## Contribution Guide
+
 We welcome contributions to help translate the website into different languages! Whether you're a developer or someone interested in contributing translations, here’s how you can help:
 
 ---
 
 ### For Developers:
-1. Folder Structure:
-- Navigate to the content folder, where all localization files are stored.
-- Create a new folder named after the language code you want to translate (e.g., `zh` for Chinese, `de` for German, `ko` for Korean). You can refer to the BCP 47 standard for valid language and locale codes.
-2. Follow the Existing Structure:
-- Use the `en` folder (which contains the English translations) as a reference. Make sure your new folder follows the same structure and file names as the `en` folder to ensure consistency across translations.
-3. Translation Files:
-- Each page or component of the site will have its own javascript file associated within the content folder (e.g., home.js, navbar.js).
-- Translate the content in each of these files into the appropriate language, ensuring the structure remains the same (keys must not be altered).
-- Make sure you modify `index.js` file to include your translation.
-4. Testing:
-- After adding or updating a translation, make sure to test your changes by running the website locally to verify that the translations display correctly.
-5. Submitting:
-- Once you’ve made your changes, submit a pull request for review.
+
+1. Copy the file "en.json" in the /locales/ folder and rename it to your target language code (e.g., `zh` for Chinese, `de` for German, `ko` for Korean) You can refer to the BCP 47 standard for valid language and locale codes.
+2. Translate each of the entries.
+3. Add the language code to the "locales" array in @/i18n.js and update the imports
+4. After adding or updating a translation, make sure to test your changes by running the website locally to verify that the translations display correctly.
+5. Once you’ve made your changes, submit a pull request for review.
 
 ---
 
 ### For Non-Developers:
+
 If you're not a developer but would still like to contribute translations, you can leave the translated content as a comment on [this issue](https://github.com/barratt/mapsnotincluded.org/issues/30). One of the contributors will incorporate your translations into the project. You can try to match the structure of the contents in `/frontend/src/content/en` folder so that it is easier for developers to add in the translation.
 
 ---