From aced2d0f5ece55dfdae0b1c0d61f6f25bee660f3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 24 Nov 2025 21:48:47 +0000
Subject: [PATCH 1/2] feat: Add i18n support

Adds internationalization support for French, German, Italian, Ukrainian, and Hindi. Includes a language switcher and translates all user-facing strings.
---
 package.json                  |  4 +-
 src/App.vue                   | 43 ++++++++++++++++++---
 src/components/Challenges.vue | 72 ++++++++++++++++++-----------------
 src/components/Countdown.vue  |  2 +-
 src/components/ModalFrame.vue |  6 ++-
 src/components/Previews.vue   | 58 ++++++++++++++--------------
 src/locales/de.json           | 56 +++++++++++++++++++++++++++
 src/locales/en.json           | 56 +++++++++++++++++++++++++++
 src/locales/fr.json           | 56 +++++++++++++++++++++++++++
 src/locales/hi.json           | 56 +++++++++++++++++++++++++++
 src/locales/it.json           | 56 +++++++++++++++++++++++++++
 src/locales/uk.json           | 56 +++++++++++++++++++++++++++
 src/main.js                   | 25 ++++++++++++
 yarn.lock                     | 56 +++++++++++++++++++++++----
 14 files changed, 522 insertions(+), 80 deletions(-)
 create mode 100644 src/locales/de.json
 create mode 100644 src/locales/en.json
 create mode 100644 src/locales/fr.json
 create mode 100644 src/locales/hi.json
 create mode 100644 src/locales/it.json
 create mode 100644 src/locales/uk.json

diff --git a/package.json b/package.json
index 449a4b0..802639c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "dotenv": "^17.2.3",
     "moment": "^2.30.1",
     "vue": "^3.5.22",
+    "vue-i18n": "^11.2.1",
     "vue-router": "^4.6.3",
     "vue3-flip-countdown": "^0.1.6",
     "vue3-markdown-it": "^1.0.10"
@@ -27,6 +28,7 @@
     "eslint-plugin-vue": "~10.5.0",
     "globals": "^16.4.0",
     "vite": "^7.1.11",
-    "vite-plugin-vue-devtools": "^8.0.3"
+    "vite-plugin-vue-devtools": "^8.0.3",
+    "vue-eslint-parser": "^10.2.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 712ecf4..e926272 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,16 @@
 <template>
   <div id="app" :class="darkClass">
+    <div class="language-switcher">
+      <select v-model="locale">
+        <option
+          v-for="loc in availableLocales"
+          :key="`locale-${loc}`"
+          :value="loc"
+        >
+          {{ languageNames[loc] }}
+        </option>
+      </select>
+    </div>
     <Challenges
       @closeToolbar="toggleOptions"
       @previewOff="previewOff"
@@ -15,15 +26,16 @@
       <a href="https://dribdat.cc" target="_blank">dribdat</a>
       &#x1F3C0;
       <a v-if="allowToolbar" @click="toggleOptions" class="options"
-        ><span>options</span></a
+        ><span>{{ $t('options') }}</span></a
       >
     </div>
   </div>
 </template>
 
 <script>
-import { ref, onMounted } from "vue"
-import Challenges from "./components/Challenges.vue"
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import Challenges from "./components/Challenges.vue";
 
 export default {
   name: "App",
@@ -31,6 +43,15 @@ export default {
     Challenges,
   },
   setup() {
+    const { locale, availableLocales } = useI18n();
+    const languageNames = {
+      en: "English",
+      fr: "Français",
+      de: "Deutsch",
+      it: "Italiano",
+      uk: "Українська",
+      hi: "हिन्दी",
+    };
     const dribdatApi = ref(null);
     const dribdatHome = ref("#top");
     const dribdatDribs = ref("");
@@ -115,12 +136,22 @@ export default {
       previewOff,
       previewOn,
       setDarkMode,
-    }
-  }
-}
+      locale,
+      availableLocales,
+      languageNames,
+    };
+  },
+};
 </script>
 
 <style>
+.language-switcher {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1001;
+}
+
 @import 'https://cdn.jsdelivr.net/gh/maxwell-k/dejavu-sans-mono-web-font/index.css';
 
 #app {
diff --git a/src/components/Challenges.vue b/src/components/Challenges.vue
index 0adb5ba..d1ed3aa 100644
--- a/src/components/Challenges.vue
+++ b/src/components/Challenges.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="challenges">
-    <Header v-if="isHeadline" :event="event"></Header>
+    <EventHeader v-if="isHeadline" :event="event"></EventHeader>
 
     <div class="grid-container" v-if="!isHexagons">
       <div
@@ -67,18 +67,18 @@
             </div>
 
             <div class="team-join" v-if="isButtons">
-              <button @click="joinTeam(project)" title="Join">🏀</button>
+              <button @click="joinTeam(project)" :title="$t('join')">🏀</button>
               <button
                 v-if="isComments"
                 @click="openComment(project)"
-                title="Comment"
+                :title="$t('comment')"
               >
                 💬
               </button>
               <button
                 v-show="project.contact_url"
                 @click="contactTeam(project)"
-                title="Contact"
+                :title="$t('contact')"
               >
                 👋
               </button>
@@ -109,9 +109,9 @@
 
     <Countdown v-if="isCountdown" :event="event"></Countdown>
 
-    <Footer v-if="isHeadline" :event="event"></Footer>
+    <EventFooter v-if="isHeadline" :event="event"></EventFooter>
 
-    <div class="loading" v-if="projects == null" title="Loading ...">
+    <div class="loading" v-if="projects == null" :title="$t('loading')">
       <i class="ball">🏀</i>
     </div>
 
@@ -121,30 +121,31 @@
       <button
         class="modal-close-button"
         @click="$emit('closeToolbar')"
-        title="Close"
+        :title="$t('close')"
       >
         ⬡
       </button>
       <span class="share-button btn">
-        🌐<a :href="shareUrl()">Share</a>
+        🌐<a :href="shareUrl()">{{ $t('share') }}</a>
       </span>
       &nbsp;
       <input type="checkbox" v-model="isHeadline" id="isHeadline" />
-      <label for="isHeadline" title="Header">⛳</label>
+      <label for="isHeadline" :title="$t('header')">⛳</label>
       <input type="checkbox" v-model="isChallenges" id="isChallenges" />
-      <label for="isChallenges" title="Show Challenges">🏆</label>
+      <label for="isChallenges" :title="$t('show_challenges')">🏆</label>
       <input type="checkbox" v-model="isHexagons" id="isHexagons" />
-      <label for="isHexagons" title="Hexgrid mode">⬣</label>
+      <label for="isHexagons" :title="$t('hexgrid_mode')">⬣</label>
       <input type="checkbox" v-model="isCountdown" id="isCountdown" />
-      <label for="isCountdown" title="Countdown">⏰</label>
+      <label for="isCountdown" :title="$t('countdown')">⏰</label>
       <input type="checkbox" v-model="isPreviews" id="isPreviews" />
-      <label for="isPreviews" title="Pop-ups">👀</label>
+      <label for="isPreviews" :title="$t('pop_ups')">👀</label>
       <input type="checkbox" v-model="isExcerpts" id="isExcerpts" />
-      <label for="isExcerpts" title="Excerpts">🖼️</label>
+      <label for="isExcerpts" :title="$t('excerpts')">🖼️</label>
       <input type="checkbox" v-model="isButtons" id="isButtons" />
-      <label for="isButtons" title="Join/Contact button">🪟</label>
+      <label for="isButtons" :title="$t('join_contact_button')">🪟</label>
       <input type="checkbox" v-model="isComments" id="isComments" />
-      <label for="isComments" title="Comment buttons">💬</label>
+      <label for="isComments" :title="$t('comment_buttons')">💬</label>
+      <label for="darkMode">{{ $t('dark_mode') }}</label>
       <select v-model="darkMode" id="darkMode" @change="changeDark">
         <option value="default" selected>🌗</option>
         <option
@@ -156,6 +157,7 @@
         </option>
       </select>
       &nbsp;
+      <label for="sortBy">{{ $t('sort_by') }}</label>
       <select v-model="sortOrder" id="sortBy" @change="changeOrder">
         <option value="default" selected>📚</option>
         <option
@@ -173,9 +175,10 @@
 
 <script>
 import { ref, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import moment from "moment";
-import Header from "./Header.vue";
-import Footer from "./Footer.vue";
+import EventHeader from "./Header.vue";
+import EventFooter from "./Footer.vue";
 import Previews from "./Previews.vue";
 import Countdown from "./Countdown.vue";
 import ProjectHoneycomb from "./Honeycomb.vue";
@@ -192,10 +195,11 @@ export default {
     Countdown,
     ProjectHoneycomb,
     Previews,
-    Header,
-    Footer,
+    EventHeader,
+    EventFooter,
   },
   setup(props, { emit }) {
+    const { t } = useI18n();
     const event = ref({});
     const projects = ref(null);
     const activities = ref(null);
@@ -211,19 +215,19 @@ export default {
     const isExcerpts = ref(false);
     const activePreview = ref(-1);
     const sortOrder = ref("title");
-    const sortOptions = ref([
-      { id: "id", name: "id" },
-      { id: "ident", name: "Ident" },
-      { id: "name", name: "Name" },
-      { id: "summary", name: "Summary" },
-      { id: "hashtag", name: "Hashtag" },
-      { id: "score", name: "Score" },
+    const sortOptions = computed(() => [
+      { id: "id", name: t("id") },
+      { id: "ident", name: t("ident") },
+      { id: "name", name: t("name") },
+      { id: "summary", name: t("summary") },
+      { id: "hashtag", name: t("hashtag") },
+      { id: "score", name: t("score") },
     ]);
     const darkMode = ref("default");
-    const darkOptions = ref([
-      { id: "default", name: "System" },
-      { id: "light", name: "Light" },
-      { id: "dark", name: "Dark" },
+    const darkOptions = computed(() => [
+      { id: "default", name: t("system") },
+      { id: "light", name: t("light") },
+      { id: "dark", name: t("dark") },
     ]);
 
     const filterProjects = computed(() => {
@@ -334,7 +338,7 @@ export default {
         }
       }
       if (!datasrc) {
-        errorMessage.value = "No data source provided.";
+        errorMessage.value = t("no_data_source");
         return;
       }
       let dribs_url = props.dribs;
@@ -370,7 +374,7 @@ export default {
               }
             });
             if (data.projects === null) {
-              return Promise.reject("Project data not found");
+              return Promise.reject(t("project_data_not_found"));
             }
           }
           projects.value = [];
@@ -447,7 +451,7 @@ export default {
         })
         .catch((err) => {
           if (err.message.indexOf('not valid JSON')) {
-            errorMessage.value = 'Could not load valid hackathon metadata.'
+            errorMessage.value = t("could_not_load_metadata");
             console.warn(err.message);
             console.log(datasrc);
           } else {
diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index ec9bd46..8d6ddab 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -19,7 +19,7 @@ export default {
       required: true,
     }
   },
-  setup(props) {
+  setup() {
     let timespan = ref("");
     let deadline = ref("2000-01-01 12:00");
     return {
diff --git a/src/components/ModalFrame.vue b/src/components/ModalFrame.vue
index a055067..2b27783 100644
--- a/src/components/ModalFrame.vue
+++ b/src/components/ModalFrame.vue
@@ -1,9 +1,10 @@
 <template>
   <section>
-    <button @click="isVoteActive = true">🗳️ Contribute</button>
+    <button @click="isVoteActive = true">🗳️ {{ $t('contribute') }}</button>
 
     <Modal v-if="isVoteActive" @close="isVoteActive = false">
-      <div class="content" slot="body">
+      <template v-slot:body>
+<div class="content" >
         <iframe
           :src="framesrc"
           width="100%"
@@ -14,6 +15,7 @@
           >Loading…</iframe
         >
       </div>
+</template>
     </Modal>
   </section>
 </template>
diff --git a/src/components/Previews.vue b/src/components/Previews.vue
index 04a54ed..b85da7b 100644
--- a/src/components/Previews.vue
+++ b/src/components/Previews.vue
@@ -7,7 +7,7 @@
             <div
               class="titlebar"
               @touchstart="touchStart"
-              title="Swipe here or tap below to advance"
+              :title="$t('swipe_to_advance')"
               :style="
                 'border-color:' +
                 (project.logo_color ? project.logo_color : '#ccc')
@@ -16,7 +16,7 @@
               <div class="imagepreview" v-if="project.image_url">
                 <a
                   class="imagepreview-floating"
-                  title="Open image"
+                  :title="$t('open_image')"
                   :href="project.image_url"
                   target="_blank"
                   :style="'background-image:url(' + project.image_url + ')'"
@@ -44,49 +44,49 @@
 
               <div class="status">
                 <button
-                  title="Open project page"
+                  :title="$t('open_project_page')"
                   @click="seeDetails(project.url)"
                 >
                   ◳ {{ project.phase }}
                 </button>
                 <button
                   v-if="isEmbeddable(project)"
-                  title="Open in a new window"
+                  :title="$t('open_in_new_window')"
                   @click="seeEmbed(project)"
                 >
-                  ⟁ View
+                  ⟁ {{ $t('view') }}
                 </button>
                 <button
                   v-if="project.download_url"
-                  title="Open demo or download link"
+                  :title="$t('open_demo_link')"
                   @click="seeDetails(project.download_url)"
                 >
-                  ⧨ Demo
+                  ⧨ {{ $t('demo') }}
                 </button>
 
                 <button
                   v-if="withButtons"
                   @click="joinTeam(project)"
-                  title="Join this team"
+                  :title="$t('join_this_team')"
                 >
-                  🏀 Join
+                  🏀 {{ $t('join') }}
                 </button>
 
                 <button
                   v-if="withComments"
                   @click="openComment(project)"
-                  title="Write a comment to the team"
+                  :title="$t('write_a_comment')"
                 >
-                  🗨️ Post
+                  🗨️ {{ $t('post') }}
                 </button>
 
                 <button
                   v-if="withButtons"
                   v-show="project.contact_url"
                   @click="contactTeam(project)"
-                  title="Open the contact page"
+                  :title="$t('open_contact_page')"
                 >
-                  👋 Contact
+                  👋 {{ $t('contact') }}
                 </button>
               </div>
             </div>
@@ -112,7 +112,7 @@
                       aria-valuemin="0"
                       aria-valuemax="100"
                       tabindex="-1"
-                      title="Time remaining"
+                      :title="$t('time_remaining')"
                       :style="
                         'width:' +
                         ruigehond +
@@ -128,22 +128,22 @@
                     <button
                       v-if="project.download_url"
                       class="fullscreen-demo-button"
-                      title="Open demo or download link"
+                      :title="$t('open_demo_link')"
                       @click="seeDetails(project.download_url)"
                     >
-                      Demo
+                      {{ $t('demo') }}
                     </button>
                     <button
                       @click="toggleNextproject()"
                       class="fullscreen-next-button"
-                      title="Next project"
+                      :title="$t('next_project')"
                     >
                       ▷
                     </button>
                     <button
                       @click="toggleFullscreen()"
                       class="fullscreen-close-button"
-                      title="Close fullscreen"
+                      :title="$t('close_fullscreen')"
                     >
                       ⨱
                     </button>
@@ -158,22 +158,22 @@
                   v-if="showExcerpt && isEmbeddable(project)"
                   class="go-fullscreen"
                   @click="toggleFullscreen()"
-                  title="Open in full screen mode - tap ⬡ to close again"
+                  :title="$t('open_fullscreen')"
                 >
-                  &#x26F6;<span>&nbsp;Zoom</span>
+                  &#x26F6;<span>&nbsp;{{ $t('zoom') }}</span>
                 </button>
 
                 <div class="autotext-nav">
                   <span v-if="project.autotext">
-                    <a href="#readme">README</a>
+                    <a href="#readme">{{ $t('readme') }}</a>
                   </span>
                   <span v-if="project.activities">
-                    <a href="#dribs">DRIBS</a>
+                    <a href="#dribs">{{ $t('dribs') }}</a>
                   </span>
                 </div>
 
                 <div v-if="project.longtext">
-                  <a class="autotext-link" name="pitch" href="#pitch">PITCH</a>
+                  <a class="autotext-link" name="pitch" href="#pitch">{{ $t('pitch') }}</a>
                   <Markdown
                     class="preview-longtext"
                     :source="project.longtext"
@@ -182,7 +182,7 @@
 
                 <div v-if="project.autotext">
                   <a class="autotext-link" name="readme" href="#pitch"
-                    >README</a
+                    >{{ $t('readme') }}</a
                   >
                   <Markdown
                     class="preview-autotext"
@@ -192,25 +192,25 @@
                     class="autotext-open"
                     target="_blank"
                     :href="project.autotext_url"
-                    >Open original ...</a
+                    >{{ $t('open_original') }}</a
                   >
                 </div>
 
                 <div v-if="project.activities">
-                  <a class="autotext-link" name="dribs" href="#pitch">DRIBS</a>
+                  <a class="autotext-link" name="dribs" href="#pitch">{{ $t('dribs') }}</a>
                   <Dribs :activities="project.activities" />
                 </div>
               </div>
             </div>
           </div>
           <div class="modal-footer" @touchstart="touchStart">
-            <button class="nav nav-prev" @click="goPrev()" title="Previous">
+            <button class="nav nav-prev" @click="goPrev()" :title="$t('previous')">
               ◁
             </button>
-            <button @click="selectNone()" class="nav nav-close" title="Close project">
+            <button @click="selectNone()" class="nav nav-close" :title="$t('close_project')">
               &check;
             </button>
-            <button class="nav nav-next" @click="goNext()" title="Next">
+            <button class="nav nav-next" @click="goNext()" :title="$t('next')">
               ▷
             </button>
           </div>
diff --git a/src/locales/de.json b/src/locales/de.json
new file mode 100644
index 0000000..7a6c4ba
--- /dev/null
+++ b/src/locales/de.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "Hallo!",
+  "join": "Beitreten",
+  "comment": "Kommentar",
+  "contact": "Kontakt",
+  "loading": "Laden ...",
+  "close": "Schließen",
+  "share": "Teilen",
+  "header": "Kopfzeile",
+  "show_challenges": "Herausforderungen anzeigen",
+  "hexgrid_mode": "Hexgrid-Modus",
+  "countdown": "Countdown",
+  "pop_ups": "Pop-ups",
+  "excerpts": "Auszüge",
+  "join_contact_button": "Beitreten/Kontakt-Button",
+  "comment_buttons": "Kommentar-Buttons",
+  "sort_by": "Sortieren nach",
+  "id": "id",
+  "ident": "Ident",
+  "name": "Name",
+  "summary": "Zusammenfassung",
+  "hashtag": "Hashtag",
+  "score": "Punktzahl",
+  "dark_mode": "Dunkelmodus",
+  "system": "System",
+  "light": "Hell",
+  "dark": "Dunkel",
+  "no_data_source": "Keine Datenquelle angegeben.",
+  "project_data_not_found": "Projektdaten nicht gefunden",
+  "could_not_load_metadata": "Konnte keine gültigen Hackathon-Metadaten laden.",
+  "swipe_to_advance": "Wischen Sie hier oder tippen Sie unten, um fortzufahren",
+  "open_image": "Bild öffnen",
+  "open_project_page": "Projektseite öffnen",
+  "open_in_new_window": "In neuem Fenster öffnen",
+  "view": "Ansicht",
+  "open_demo_link": "Demo- oder Download-Link öffnen",
+  "demo": "Demo",
+  "join_this_team": "Diesem Team beitreten",
+  "write_a_comment": "Einen Kommentar an das Team schreiben",
+  "post": "Posten",
+  "open_contact_page": "Kontaktseite öffnen",
+  "time_remaining": "Verbleibende Zeit",
+  "next_project": "Nächstes Projekt",
+  "close_fullscreen": "Vollbild schließen",
+  "open_fullscreen": "Im Vollbildmodus öffnen - tippen Sie auf ⬡, um wieder zu schließen",
+  "zoom": "Zoomen",
+  "readme": "README",
+  "dribs": "DRIBS",
+  "pitch": "PITCH",
+  "open_original": "Original öffnen ...",
+  "previous": "Zurück",
+  "close_project": "Projekt schließen",
+  "next": "Weiter",
+  "contribute": "Beitragen",
+  "options": "Optionen"
+}
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..5524674
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "Hello!",
+  "join": "Join",
+  "comment": "Comment",
+  "contact": "Contact",
+  "loading": "Loading ...",
+  "close": "Close",
+  "share": "Share",
+  "header": "Header",
+  "show_challenges": "Show Challenges",
+  "hexgrid_mode": "Hexgrid mode",
+  "countdown": "Countdown",
+  "pop_ups": "Pop-ups",
+  "excerpts": "Excerpts",
+  "join_contact_button": "Join/Contact button",
+  "comment_buttons": "Comment buttons",
+  "sort_by": "Sort by",
+  "id": "id",
+  "ident": "Ident",
+  "name": "Name",
+  "summary": "Summary",
+  "hashtag": "Hashtag",
+  "score": "Score",
+  "dark_mode": "Dark mode",
+  "system": "System",
+  "light": "Light",
+  "dark": "Dark",
+  "no_data_source": "No data source provided.",
+  "project_data_not_found": "Project data not found",
+  "could_not_load_metadata": "Could not load valid hackathon metadata.",
+  "swipe_to_advance": "Swipe here or tap below to advance",
+  "open_image": "Open image",
+  "open_project_page": "Open project page",
+  "open_in_new_window": "Open in a new window",
+  "view": "View",
+  "open_demo_link": "Open demo or download link",
+  "demo": "Demo",
+  "join_this_team": "Join this team",
+  "write_a_comment": "Write a comment to the team",
+  "post": "Post",
+  "open_contact_page": "Open the contact page",
+  "time_remaining": "Time remaining",
+  "next_project": "Next project",
+  "close_fullscreen": "Close fullscreen",
+  "open_fullscreen": "Open in full screen mode - tap ⬡ to close again",
+  "zoom": "Zoom",
+  "readme": "README",
+  "dribs": "DRIBS",
+  "pitch": "PITCH",
+  "open_original": "Open original ...",
+  "previous": "Previous",
+  "close_project": "Close project",
+  "next": "Next",
+  "contribute": "Contribute",
+  "options": "options"
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
new file mode 100644
index 0000000..09e397f
--- /dev/null
+++ b/src/locales/fr.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "Bonjour!",
+  "join": "Rejoindre",
+  "comment": "Commentaire",
+  "contact": "Contacter",
+  "loading": "Chargement ...",
+  "close": "Fermer",
+  "share": "Partager",
+  "header": "En-tête",
+  "show_challenges": "Afficher les défis",
+  "hexgrid_mode": "Mode grille hexagonale",
+  "countdown": "Compte à rebours",
+  "pop_ups": "Pop-ups",
+  "excerpts": "Extraits",
+  "join_contact_button": "Bouton Rejoindre/Contacter",
+  "comment_buttons": "Boutons de commentaire",
+  "sort_by": "Trier par",
+  "id": "id",
+  "ident": "Identifiant",
+  "name": "Nom",
+  "summary": "Résumé",
+  "hashtag": "Hashtag",
+  "score": "Score",
+  "dark_mode": "Mode sombre",
+  "system": "Système",
+  "light": "Clair",
+  "dark": "Sombre",
+  "no_data_source": "Aucune source de données fournie.",
+  "project_data_not_found": "Données du projet introuvables",
+  "could_not_load_metadata": "Impossible de charger des métadonnées de hackathon valides.",
+  "swipe_to_advance": "Balayez ici ou appuyez ci-dessous pour avancer",
+  "open_image": "Ouvrir l'image",
+  "open_project_page": "Ouvrir la page du projet",
+  "open_in_new_window": "Ouvrir dans une nouvelle fenêtre",
+  "view": "Voir",
+  "open_demo_link": "Ouvrir la démo ou le lien de téléchargement",
+  "demo": "Démo",
+  "join_this_team": "Rejoindre cette équipe",
+  "write_a_comment": "Écrire un commentaire à l'équipe",
+  "post": "Publier",
+  "open_contact_page": "Ouvrir la page de contact",
+  "time_remaining": "Temps restant",
+  "next_project": "Projet suivant",
+  "close_fullscreen": "Fermer le plein écran",
+  "open_fullscreen": "Ouvrir en mode plein écran - appuyez sur ⬡ pour fermer à nouveau",
+  "zoom": "Zoom",
+  "readme": "LISEZMOI",
+  "dribs": "DRIBS",
+  "pitch": "PITCH",
+  "open_original": "Ouvrir l'original ...",
+  "previous": "Précédent",
+  "close_project": "Fermer le projet",
+  "next": "Suivant",
+  "contribute": "Contribuer",
+  "options": "options"
+}
diff --git a/src/locales/hi.json b/src/locales/hi.json
new file mode 100644
index 0000000..58c94d1
--- /dev/null
+++ b/src/locales/hi.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "नमस्ते!",
+  "join": "शामिल हों",
+  "comment": "टिप्पणी",
+  "contact": "संपर्क करें",
+  "loading": "लोड हो रहा है ...",
+  "close": "बंद करें",
+  "share": "शेयर करें",
+  "header": "हैडर",
+  "show_challenges": "चुनौतियां दिखाएं",
+  "hexgrid_mode": "हेक्सग्रिड मोड",
+  "countdown": "काउंटडाउन",
+  "pop_ups": "पॉप-अप",
+  "excerpts": "अंश",
+  "join_contact_button": "शामिल हों/संपर्क बटन",
+  "comment_buttons": "टिप्पणी बटन",
+  "sort_by": "इसके अनुसार छाँटें",
+  "id": "आईडी",
+  "ident": "पहचान",
+  "name": "नाम",
+  "summary": "सारांश",
+  "hashtag": "हैशटैग",
+  "score": "स्कोर",
+  "dark_mode": "डार्क मोड",
+  "system": "सिस्टम",
+  "light": "लाइट",
+  "dark": "डार्क",
+  "no_data_source": "कोई डेटा स्रोत प्रदान नहीं किया गया।",
+  "project_data_not_found": "प्रोजेक्ट डेटा नहीं मिला",
+  "could_not_load_metadata": "मान्य हैकथॉन मेटाडेटा लोड नहीं किया जा सका।",
+  "swipe_to_advance": "आगे बढ़ने के लिए यहां स्वाइप करें या नीचे टैप करें",
+  "open_image": "छवि खोलें",
+  "open_project_page": "प्रोजेक्ट पेज खोलें",
+  "open_in_new_window": "नई विंडो में खोलें",
+  "view": "देखें",
+  "open_demo_link": "डेमो या डाउनलोड लिंक खोलें",
+  "demo": "डेमो",
+  "join_this_team": "इस टीम में शामिल हों",
+  "write_a_comment": "टीम को एक टिप्पणी लिखें",
+  "post": "पोस्ट",
+  "open_contact_page": "संपर्क पृष्ठ खोलें",
+  "time_remaining": "शेष समय",
+  "next_project": "अगला प्रोजेक्ट",
+  "close_fullscreen": "फ़ुलस्क्रीन बंद करें",
+  "open_fullscreen": "फ़ुल स्क्रीन मोड में खोलें - फिर से बंद करने के लिए ⬡ टैप करें",
+  "zoom": "ज़ूम",
+  "readme": "मुझे पढ़ें",
+  "dribs": "ड्रिब्स",
+  "pitch": "पिच",
+  "open_original": "मूल खोलें ...",
+  "previous": "पिछला",
+  "close_project": "प्रोजेक्ट बंद करें",
+  "next": "अगला",
+  "contribute": "योगदान दें",
+  "options": "विकल्प"
+}
diff --git a/src/locales/it.json b/src/locales/it.json
new file mode 100644
index 0000000..cde8c3a
--- /dev/null
+++ b/src/locales/it.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "Ciao!",
+  "join": "Unisciti",
+  "comment": "Commenta",
+  "contact": "Contatta",
+  "loading": "Caricamento in corso...",
+  "close": "Chiudi",
+  "share": "Condividi",
+  "header": "Intestazione",
+  "show_challenges": "Mostra sfide",
+  "hexgrid_mode": "Modalità griglia esagonale",
+  "countdown": "Conto alla rovescia",
+  "pop_ups": "Pop-up",
+  "excerpts": "Estratti",
+  "join_contact_button": "Pulsante Unisciti/Contatta",
+  "comment_buttons": "Pulsanti dei commenti",
+  "sort_by": "Ordina per",
+  "id": "id",
+  "ident": "Ident",
+  "name": "Nome",
+  "summary": "Riepilogo",
+  "hashtag": "Hashtag",
+  "score": "Punteggio",
+  "dark_mode": "Modalità scura",
+  "system": "Sistema",
+  "light": "Chiaro",
+  "dark": "Scuro",
+  "no_data_source": "Nessuna fonte di dati fornita.",
+  "project_data_not_found": "Dati del progetto non trovati",
+  "could_not_load_metadata": "Impossibile caricare metadati hackathon validi.",
+  "swipe_to_advance": "Scorri qui o tocca sotto per avanzare",
+  "open_image": "Apri immagine",
+  "open_project_page": "Apri la pagina del progetto",
+  "open_in_new_window": "Apri in una nuova finestra",
+  "view": "Visualizza",
+  "open_demo_link": "Apri demo o link per il download",
+  "demo": "Demo",
+  "join_this_team": "Unisciti a questa squadra",
+  "write_a_comment": "Scrivi un commento alla squadra",
+  "post": "Pubblica",
+  "open_contact_page": "Apri la pagina dei contatti",
+  "time_remaining": "Tempo rimanente",
+  "next_project": "Progetto successivo",
+  "close_fullscreen": "Chiudi schermo intero",
+  "open_fullscreen": "Apri in modalità schermo intero - tocca ⬡ per chiudere di nuovo",
+  "zoom": "Zoom",
+  "readme": "LEGGIMI",
+  "dribs": "DRIBS",
+  "pitch": "PITCH",
+  "open_original": "Apri originale...",
+  "previous": "Precedente",
+  "close_project": "Chiudi progetto",
+  "next": "Successivo",
+  "contribute": "Contribuisci",
+  "options": "opzioni"
+}
diff --git a/src/locales/uk.json b/src/locales/uk.json
new file mode 100644
index 0000000..81d1c0a
--- /dev/null
+++ b/src/locales/uk.json
@@ -0,0 +1,56 @@
+{
+  "greeting": "Привіт!",
+  "join": "Приєднатися",
+  "comment": "Коментар",
+  "contact": "Контакт",
+  "loading": "Завантаження ...",
+  "close": "Закрити",
+  "share": "Поділитися",
+  "header": "Заголовок",
+  "show_challenges": "Показати виклики",
+  "hexgrid_mode": "Режим гексагональної сітки",
+  "countdown": "Зворотний відлік",
+  "pop_ups": "Спливаючі вікна",
+  "excerpts": "Уривки",
+  "join_contact_button": "Кнопка Приєднатися/Контакт",
+  "comment_buttons": "Кнопки коментарів",
+  "sort_by": "Сортувати за",
+  "id": "id",
+  "ident": "Ідент",
+  "name": "Ім'я",
+  "summary": "Резюме",
+  "hashtag": "Хештег",
+  "score": "Оцінка",
+  "dark_mode": "Темний режим",
+  "system": "Система",
+  "light": "Світлий",
+  "dark": "Темний",
+  "no_data_source": "Джерело даних не надано.",
+  "project_data_not_found": "Дані проекту не знайдено",
+  "could_not_load_metadata": "Не вдалося завантажити дійсні метадані хакатону.",
+  "swipe_to_advance": "Проведіть пальцем тут або торкніться нижче, щоб перейти далі",
+  "open_image": "Відкрити зображення",
+  "open_project_page": "Відкрити сторінку проекту",
+  "open_in_new_window": "Відкрити в новому вікні",
+  "view": "Переглянути",
+  "open_demo_link": "Відкрити демонстраційне або завантажувальне посилання",
+  "demo": "Демо",
+  "join_this_team": "Приєднатися до цієї команди",
+  "write_a_comment": "Написати коментар команді",
+  "post": "Опублікувати",
+  "open_contact_page": "Відкрити сторінку контактів",
+  "time_remaining": "Час, що залишився",
+  "next_project": "Наступний проект",
+  "close_fullscreen": "Закрити повноекранний режим",
+  "open_fullscreen": "Відкрити в повноекранному режимі - торкніться ⬡, щоб знову закрити",
+  "zoom": "Масштаб",
+  "readme": "README",
+  "dribs": "DRIBS",
+  "pitch": "PITCH",
+  "open_original": "Відкрити оригінал ...",
+  "previous": "Попередній",
+  "close_project": "Закрити проект",
+  "next": "Наступний",
+  "contribute": "Зробити внесок",
+  "options": "опції"
+}
diff --git a/src/main.js b/src/main.js
index 4eabab8..04b547f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,39 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import Markdown from 'vue3-markdown-it'
 import Countdown from 'vue3-flip-countdown'
 
 import router from './router'
 
+// Import locale messages
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import de from './locales/de.json'
+import it from './locales/it.json'
+import uk from './locales/uk.json'
+import hi from './locales/hi.json'
+
+// Create i18n instance
+const i18n = createI18n({
+  legacy: false, // for Composition API
+  locale: 'en', // set default locale
+  fallbackLocale: 'en', // set fallback locale
+  messages: {
+    en,
+    fr,
+    de,
+    it,
+    uk,
+    hi
+  }
+})
+
 const app = createApp(App)
 
 app.use(router)
 app.use(Markdown)
 app.use(Countdown)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/yarn.lock b/yarn.lock
index 8b4b821..081208b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -474,6 +474,27 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.3.tgz#c2b9d2e374ee62c586d3adbea87199b1d7a7a6ba"
   integrity sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==
 
+"@intlify/core-base@11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-11.2.1.tgz#45e241b2ed9eead14ffa16d1c41164fbcebd33e3"
+  integrity sha512-2V1A4yaN9ElAnQ6ih3HHEc+jZ+sHV6BlQHjCsnIVlOotL5NCUgJElIxgUFiJs6zV4puoAq3hHuQIfWNp+J+8yQ==
+  dependencies:
+    "@intlify/message-compiler" "11.2.1"
+    "@intlify/shared" "11.2.1"
+
+"@intlify/message-compiler@11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-11.2.1.tgz#da7c7d0cab7feca16265f7061fae46980e75c56e"
+  integrity sha512-J2454D3Agg3Kvgaj14gxTleJU8/H06Sisz7C2BwiHF0/i5Soyfb5ySpwn8GCL6yscDbOGj6xM+lUe6gO6BFQyg==
+  dependencies:
+    "@intlify/shared" "11.2.1"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-11.2.1.tgz#b1f45fdb44ee2f247472059f010ded3a4c40e95e"
+  integrity sha512-O67LZM4dbfr70WCsZLW+g+pIXdgQ66laLVd/FicW7iYgP/RuH0X1FDGSh+Hr9Gou/8TeldUE6KmTGdLwX2ufIA==
+
 "@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
@@ -718,7 +739,7 @@
     "@vue/compiler-dom" "3.5.24"
     "@vue/shared" "3.5.24"
 
-"@vue/devtools-api@^6.6.4":
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -942,7 +963,7 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
-debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.4.1:
+debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.4.0, debug@^4.4.1:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
@@ -1051,7 +1072,7 @@ eslint-plugin-vue@~10.5.0:
     semver "^7.6.3"
     xml-name-validator "^4.0.0"
 
-eslint-scope@^8.4.0:
+eslint-scope@^8.2.0, eslint-scope@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.4.0.tgz#88e646a207fad61436ffa39eb505147200655c82"
   integrity sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
@@ -1064,7 +1085,7 @@ eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint-visitor-keys@^4.2.1:
+eslint-visitor-keys@^4.2.0, eslint-visitor-keys@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
   integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
@@ -1109,7 +1130,7 @@ eslint@^9.37.0:
     natural-compare "^1.4.0"
     optionator "^0.9.3"
 
-espree@^10.0.1, espree@^10.4.0:
+espree@^10.0.1, espree@^10.3.0, espree@^10.4.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-10.4.0.tgz#d54f4949d4629005a1fa168d937c3ff1f7e2a837"
   integrity sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
@@ -1118,7 +1139,7 @@ espree@^10.0.1, espree@^10.4.0:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^4.2.1"
 
-esquery@^1.5.0:
+esquery@^1.5.0, esquery@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
   integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
@@ -1706,7 +1727,7 @@ sirv@^3.0.1, sirv@^3.0.2:
     mrmime "^2.0.0"
     totalist "^3.0.0"
 
-source-map-js@^1.2.1:
+source-map-js@^1.0.2, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -1857,6 +1878,27 @@ vite@^7.1.11:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vue-eslint-parser@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz#cb53f89b14c7f5bf6a95c9532e3b2961ab619d61"
+  integrity sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==
+  dependencies:
+    debug "^4.4.0"
+    eslint-scope "^8.2.0"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
+    esquery "^1.6.0"
+    semver "^7.6.3"
+
+vue-i18n@^11.2.1:
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-11.2.1.tgz#04a5c7f36bb6f2483dd9f03166632d8a1876240e"
+  integrity sha512-cc3Wx4eJZac9WMS8mxhfYiCipm9PBQ2Dz15piWYm7DwNcCehaKRgpolEdiqrjjT27T3Wijz3xJ7NeIc8ofIWAA==
+  dependencies:
+    "@intlify/core-base" "11.2.1"
+    "@intlify/shared" "11.2.1"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-router@^4.6.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.6.3.tgz#52a40a231b910806438a8203c065a411fd3f1faa"

From 30dddf0004ea07194fb25888e825f4a27c644b26 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 25 Nov 2025 10:41:25 +0000
Subject: [PATCH 2/2] feat: Add i18n support and documentation

Adds internationalization support for French, German, Italian, Ukrainian, and Hindi. Includes a language switcher and translates all user-facing strings.

Also adds a new "Internationalization" section to the README.md with instructions on how to add and update translations.
---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index 859a93c..b830889 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,22 @@ yarn build
 yarn lint
 ```
 
+### Internationalization
+
+This project uses `vue-i18n` for internationalization. All locale files are located in the `src/locales` directory.
+
+**Adding or Updating Translations**
+
+To add or update a translation for an existing language, edit the corresponding JSON file in `src/locales`. For example, to update a French translation, you would edit `src/locales/fr.json`.
+
+**Adding a New Language**
+
+1.  Create a new JSON file in `src/locales` with the two-letter locale code for the new language (e.g., `es.json` for Spanish).
+2.  Copy the contents of `src/locales/en.json` into your new file.
+3.  Translate all the string values into the new language.
+4.  Import the new locale file in `src/main.js` and add it to the `messages` object in the `createI18n` configuration.
+5.  Add the new language to the `languageNames` object in `src/App.vue` to make it available in the language switcher.
+
 ### Recommended Browser Setup
 
 - Chromium-based browsers (Chrome, Edge, Brave, etc.):