feat(SPA): i18n internationzalization, english and french

web/src/components/CodeBlock.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed, ref, watchEffect } from 'vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { highlightToHtml, useShikiHighlighter } from '@/composables/useShikiHighlighter'
@@ -11,7 +13,7 @@ const props = defineProps<{
 
 const { copied, copy } = useCopyToClipboard()
 
-const buttonLabel = computed(() => (copied.value ? 'Copied' : 'Copy'))
+const buttonLabel = computed(() => (copied.value ? t('Copied') : t('Copy')))
 const buttonIcon = computed(() => (copied.value ? 'i-lucide-check' : 'i-lucide-copy'))
 
 const highlightedHtml = ref<string | null>(null)
@@ -37,7 +39,7 @@ function onCopy() {
 				color="neutral"
 				variant="ghost"
 				size="xs"
-				:aria-label="`Copy ${label ?? lang} example`"
+				:aria-label="t('Copy {0} example', [label ?? lang])"
 				aria-live="polite"
 				class="gap-1.5 px-1.5 font-medium text-toned"
 				:ui="{ leadingIcon: 'size-3.5' }"