feat: migrate to paraglide

.prettierignore

@@ -24,4 +24,3 @@ pnpm-debug.log*
 **/*.yml
 public/
 src/services/locale.ts
-src/services/translations.ts

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,37 @@
+# .vscode/i18n-ally-custom-framework.yml
+
+# An array of strings which contain Language Ids defined by VS Code
+# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
+languageIds:
+  - javascript
+  - typescript
+  - vue
+  - astro
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]m\\.({key})\\(.*?\\)"
+  - "{{\\s*m\\.({key})\\(.*?\\)\\s*}}"
+  - "{m\\.({key})\\(.*?\\)}"
+
+# A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
+# and works like how the i18next framework identifies the namespace scope from the
+# useTranslation() hook.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+scopeRangeRegex: "import\\s*\\*\\s*as\\s*m\\s*from\\s*['\"`].*?paraglide/messages['\"`]"
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+# Optional: uncomment the following two lines to use
+
+refactorTemplates:
+  - m.$1()
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "messages",
   "i18n-ally.sortKeys": true,
   "search.exclude": {

package.json

@@ -7,11 +7,10 @@
     "start": "astro dev",
     "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro build",
     "preview": "astro preview",
-    "types": "node ./scripts/getTypes.mjs",
+    "types": "npx --yes supabase gen types typescript --project-id=xvwzpoazmxkqosrdewyv > src/services/supabase.types.ts",
     "fmt": "prettier --write '**/*' --ignore-unknown",
     "generate:locale:translations": "tsx scripts/generate_locale_translations.tsx",
     "generate:blog:translations": "tsx scripts/generate_blog_translations.tsx",
-    "generate:translation.ts": "tsx scripts/generate_translation_ts_file.tsx",
     "generate:plugin:translations": "tsx scripts/generate_plugin_translations.tsx",
     "setup:new:locale": "tsx scripts/setup_new_locale.tsx",
     "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide"
@@ -71,4 +70,4 @@
     "zod": "^3.24.1",
     "@inlang/paraglide-js": "1.11.8"
   }
-}
+}

scripts/getTypes.mjs

@@ -4,7 +4,7 @@ import { supa_url } from './utils.mjs'
 
 const exec = util.promisify(execCb)
 const supaId = supa_url.split('//')[1].split('.')[0]
-const command = `npx --yes supabase gen types typescript --project-id=${supaId} > types/supabase.types.ts`
+const command = `npx --yes supabase gen types typescript --project-id=${supaId} > services/supabase.types.ts`
 
 const main = async () => {
   try {

scripts/utils.mjs

@@ -1,7 +1,7 @@
 import 'dotenv/config'
 import keys from '../configs.json' assert { type: 'json' }
 
-export const branch = import.meta.env.BRANCH || import.meta.env.GITHUB_HEAD_REF || 'main'
+export const branch = import.meta?.env?.BRANCH || import.meta?.env?.GITHUB_HEAD_REF || 'main'
 
 console.log('Branch', branch)
 

scripts/yaml-to-json.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from 'node:fs'
+import { load } from 'js-yaml'
+import { join } from 'node:path'
+
+const lang = 'pl'
+try {
+  const yamlContent = readFileSync(join(process.cwd(), 'locales', `${lang}.yml`), 'utf8')
+  const yamlData = load(yamlContent, {
+    strict: true,
+    lineWidth: -1
+  })
+
+  if (!yamlData) {
+    throw new Error('YAML data is empty')
+  }
+
+  const newJsonData = {
+    $schema: "https://inlang.com/schema/inlang-message-format",
+    ...Object.entries(yamlData).reduce((acc, [key, value]) => ({
+      ...acc,
+      [key]: typeof value === 'string' ? value : JSON.stringify(value)
+    }), {})
+  }
+
+  writeFileSync(
+    join(process.cwd(), 'messages', `${lang}.json`),
+    JSON.stringify(newJsonData, null, 2)
+  )
+  console.log('✅ File written successfully')
+} catch (error) {
+  console.error('❌ Error:', error.message)
+  process.exit(1)
+}

src/components/AboutMartin.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Locales } from '@/services/locale'
-import translations from '@/services/translations'
+import * as m from "../paraglide/messages.js"
 import { getRelativeLocaleUrl } from 'astro:i18n'
 
 const props = defineProps<{ locale: Locales }>()
@@ -11,55 +11,55 @@ const props = defineProps<{ locale: Locales }>()
     <div class="flex flex-col items-start gap-8 md:flex-row">
       <img
         src="/martindonadieu.webp"
-        :alt="translations['martin_donadieu_on_a_motorcycle_with_a_rainbow_in_the_background'][props.locale]"
-        class="md:w-144 mx-auto h-auto w-3/4 rounded-lg object-cover md:mx-0"
+        :alt="m.martin_donadieu_on_a_motorcycle_with_a_rainbow_in_the_background()"
+        class="object-cover w-3/4 h-auto mx-auto rounded-lg md:w-144 md:mx-0"
       />
       <div class="flex-1 space-y-4">
         <p class="text-2xl text-white">
-          <span class="font-bold">👋 {{ translations['hi_there_im_martin_donadieu'][props.locale] }} </span>
+          <span class="font-bold">👋 {{ m.hi_there_im_martin_donadieu() }} </span>
         </p>
         <p>
-          🇫🇷 {{ translations['im_a_french_software_engineer'][props.locale] }}<br />
-          {{ translations['living_best_life'][props.locale] }} 🏝️. <br />{{ translations['made_capgo_with_passion'][props.locale] }}
+          🇫🇷 {{ m.im_a_french_software_engineer() }}<br />
+          {{ m.living_best_life() }} 🏝️. <br />{{ m.made_capgo_with_passion() }}
         </p>
         <p>
-          <span class="font-bold">🌟 {{ translations['i_m_a_huge_believer_in_open_source'][props.locale] }}</span
+          <span class="font-bold">🌟 {{ m.i_m_a_huge_believer_in_open_source() }}</span
           ><br />
-          {{ translations['capgo_proudly_stands_as_the_largest_ecosystem_of_open_source_plugins_for_capacitor'][props.locale] }} <br />{{
-            translations['we_re_committed_to_fostering_a_community_where_developers_can_learn_contribute_and_grow_together'][props.locale]
+          {{ m.capgo_proudly_stands_as_the_largest_ecosystem_of_open_source_plugins_for_capacitor() }} <br />{{
+            m.we_re_committed_to_fostering_a_community_where_developers_can_learn_contribute_and_grow_together()
           }}
         </p>
         <p>
-          📧 {{ translations['each_time_you_contact_capgo_you_re_reaching_out_to_me_directly'][props.locale] }}<br />
-          {{ translations['i_personally_handle_all_support_through_email_chat_or_discord_because_i_believe_in_real_connections'][props.locale] }} <br /><span class="font-bold"
-            >🫶 {{ translations['your_challenges_are_my_challenges'][props.locale] }}</span
+          📧 {{ m.each_time_you_contact_capgo_you_re_reaching_out_to_me_directly() }}<br />
+          {{ m.i_personally_handle_all_support_through_email_chat_or_discord_because_i_believe_in_real_connections() }} <br /><span class="font-bold"
+            >🫶 {{ m.your_challenges_are_my_challenges() }}</span
           >
         </p>
         <p>
           {{
-            translations['when_im_not_working_on_capgo_you_ll_find_me_scaling_climbing_walls_🧗‍♂️_dancing_to_zouk_rhythms_💃_or_exploring_madeiras_stunning_nature_🌿'][props.locale]
+            m.when_im_not_working_on_capgo_you_ll_find_me_scaling_climbing_walls_dancing_to_zouk_rhythms_or_exploring_madeiras_stunning_nature()
           }}
         </p>
         <p>
-          🐦 {{ translations['my_commitment_to_transparency_extends_to_everything_i_do'][props.locale] }} <br />{{
-            translations['you_can_see_my_entire_process_unfold_on_twitter'][props.locale]
+          🐦 {{ m.my_commitment_to_transparency_extends_to_everything_i_do() }} <br />{{
+            m.you_can_see_my_entire_process_unfold_on_twitter()
           }}
           <a href="https://twitter.com/martindonadieu" class="text-white hover:underline">@martindonadieu</a>
-          {{ translations['and_hear_more_about_my_journey_on_the'][props.locale] }} <a href="https://solos.ventures" class="text-white hover:underline">solos.ventures</a> podcast.
+          {{ m.and_hear_more_about_my_journey_on_the() }} <a href="https://solos.ventures" class="text-white hover:underline">solos.ventures</a> podcast.
         </p>
-        <p class="font-bold text-white">{{ translations['lets_make_app_development_amazing_together'][props.locale] }} 🤝</p>
+        <p class="font-bold text-white">{{ m.lets_make_app_development_amazing_together() }} 🤝</p>
         <div class="pt-4">
-          <div class="group relative mt-10 inline-flex">
+          <div class="relative inline-flex mt-10 group">
             <div
               class="transitiona-all animate-tilt absolute -inset-px rounded-xl bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] opacity-70 blur-lg duration-1000 group-hover:-inset-1 group-hover:opacity-100 group-hover:duration-200"
             />
             <a
               :href="getRelativeLocaleUrl(props.locale, 'register')"
-              :title="translations['get_quote_now'][props.locale]"
-              class="font-pj relative inline-flex items-center justify-center rounded-xl bg-gray-900 px-8 py-4 text-lg font-bold text-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
+              :title="m.get_quote_now()"
+              class="relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
               role="button"
             >
-              {{ translations['start_now'][props.locale] }}
+              {{ m.start_now() }}
             </a>
           </div>
         </div>

src/components/Blog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { formatTime } from '@/config/app'
 import type { Locales } from '@/services/locale'
-import translations from '@/services/translations'
+import * as m from "../paraglide/messages.js"
 import { getRelativeLocaleUrl } from 'astro:i18n'
 import { computed } from 'vue'
 
@@ -18,30 +18,30 @@ const cannLink = computed(() => getRelativeLocaleUrl(props.locale, 'blog/' + pro
 </script>
 
 <template>
-  <div class="overflow-hidden rounded-xl bg-gray-700">
+  <div class="overflow-hidden bg-gray-700 rounded-xl">
     <div>
       <div class="relative p-2">
-        <a :href="cannLink" :title="title" class="aspect-w-4 aspect-h-3 block">
+        <a :href="cannLink" :title="title" class="block aspect-w-4 aspect-h-3">
           <img
             height="350"
             width="997"
             loading="lazy"
-            class="h-full w-full rounded-lg object-cover"
+            class="object-cover w-full h-full rounded-lg"
             :src="image"
             :alt="`blog illustration ${title}`"
             :title="`blog illustration ${title}`"
           />
         </a>
         <div class="absolute left-4 top-4">
-          <span class="rounded-full bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-900 shadow-lg">
+          <span class="px-4 py-2 text-xs font-semibold tracking-widest text-gray-900 uppercase bg-white rounded-full shadow-lg">
             {{ tag }}
           </span>
         </div>
       </div>
-      <span class="mt-3 block px-5 text-sm font-semibold uppercase tracking-widest text-gray-300">
+      <span class="block px-5 mt-3 text-sm font-semibold tracking-widest text-gray-300 uppercase">
         {{ formatTime(date) }}
       </span>
-      <p class="mt-3 px-5 text-2xl font-semibold">
+      <p class="px-5 mt-3 text-2xl font-semibold">
         <a :href="cannLink" :title="title" class="text-gray-100">
           {{ title }}
         </a>
@@ -51,8 +51,8 @@ const cannLink = computed(() => getRelativeLocaleUrl(props.locale, 'blog/' + pro
         :title="title"
         class="m-5 mt-5 inline-flex items-center justify-center border-b-2 border-blue-300 pb-0.5 text-base font-semibold text-gray-200 transition-all duration-200 hover:border-blue-600 focus:border-blue-600"
       >
-        {{ translations['read_more'][props.locale] }}
-        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        {{ m.read_more() }}
+        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
         </svg>
       </a>