feat(SPA): i18n internationzalization, english and french

web/src/views/IntegrationView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t } from '@/i18n'
+
 import { computed } from 'vue'
 import DashboardShell from '@/components/DashboardShell.vue'
 import EndpointCard from '@/components/EndpointCard.vue'
@@ -8,8 +10,10 @@ const origin = computed(() => window.location.origin)
 
 const { copied, copy } = useCopyToClipboard()
 
-const copyButtonLabel = computed(() => (copied.value ? 'Copied' : 'Copy'))
-const copyButtonIcon = computed(() => (copied.value ? 'i-lucide-check' : 'i-lucide-copy'))
+const copyButtonLabel = computed(() => (copied.value ? t('Copied') : t('Copy')))
+const copyButtonIcon = computed(() =>
+	copied.value ? 'i-lucide-check' : 'i-lucide-copy',
+)
 
 function copyBaseUrl() {
 	copy(origin.value)
@@ -39,7 +43,9 @@ const endpoints = computed(() => [
 	{
 		method: 'GET' as const,
 		path: '/v1/article/',
-		description: 'Lists every online article.',
+		get description() {
+			return t('Lists every online article.')
+		},
 		examples: {
 			fetch: `const res = await fetch('${origin.value}/v1/article/')\nconst articles = await res.json()`,
 			curl: `curl ${origin.value}/v1/article/`,
@@ -49,7 +55,11 @@ const endpoints = computed(() => [
 	{
 		method: 'GET' as const,
 		path: '/v1/article/{id}',
-		description: 'Returns one online article. Drafts and unknown ids both return 404.',
+		get description() {
+			return t(
+				'Returns one online article. Drafts and unknown ids both return 404.',
+			)
+		},
 		examples: {
 			fetch: `const res = await fetch('${origin.value}/v1/article/12')\nif (res.status === 404) return notFound()\nconst article = await res.json()`,
 			curl: `curl ${origin.value}/v1/article/12`,
@@ -58,29 +68,47 @@ const endpoints = computed(() => [
 	},
 ])
 
-const notes = [
-	'Anonymous callers only ever get online articles. Drafts stay private until you publish them.',
-	'Images in body use paths like /static/uploadedImages/<uuid>.png. Prefix them with the base URL before rendering.',
-	"Browsers can only call the API from origins listed in the server's CORS setting. Ask whoever runs the server to add your site's address.",
-]
+const notes = computed(() => [
+	t(
+		'Anonymous callers only ever get online articles. Drafts stay private until you publish them.',
+	),
+	t(
+		'Images in body use paths like /static/uploadedImages/<uuid>.png. Prefix them with the base URL before rendering.',
+	),
+	t(
+		"Browsers can only call the API from origins listed in the server's CORS setting. Ask whoever runs the server to add your site's address.",
+	),
+])
 </script>
 
 <template>
-	<DashboardShell mobile-title="Integration">
+	<DashboardShell :mobile-title="t('Integration')">
 		<div class="flex max-w-199 flex-col gap-6">
 			<div class="flex flex-col gap-1">
-				<h1 class="text-xl font-semibold text-highlighted">Connect your website</h1>
-				<p class="text-muted">A guide for the developer who builds your public site.</p>
+				<h1 class="text-xl font-semibold text-highlighted">
+					{{ t('Connect your website') }}
+				</h1>
+				<p class="text-muted">
+					{{
+						t(
+							'A guide for the developer who builds your public site.',
+						)
+					}}
+				</p>
 			</div>
 
 			<p class="text-base text-pretty text-toned">
-				RenewCMS is headless: it stores and publishes your articles but doesn't show them to
-				visitors. Your website fetches published articles from the two addresses below and
-				displays them in its own design.
+				{{
+					t(
+						"RenewCMS is headless: it stores and publishes your articles but doesn't show them to visitors. Your website fetches published articles from the two addresses below and displays them in its own design.",
+					)
+				}}
 			</p>
 
 			<div class="flex flex-col gap-1.5">
-				<span class="font-medium text-highlighted">Base URL</span>
+				<span class="font-medium text-highlighted">{{
+					t('Base URL')
+				}}</span>
 				<div class="flex border border-accented bg-default">
 					<span
 						class="h-10 min-w-0 flex-1 truncate px-3 font-mono text-sm leading-10 text-default"
@@ -112,8 +140,13 @@ const notes = [
 
 			<div class="flex flex-col gap-2.5">
 				<div v-for="note in notes" :key="note" class="flex gap-2.5">
-					<UIcon name="i-lucide-info" class="mt-0.75 size-4 shrink-0 text-info" />
-					<span class="text-base text-pretty text-toned">{{ note }}</span>
+					<UIcon
+						name="i-lucide-info"
+						class="mt-0.75 size-4 shrink-0 text-info"
+					/>
+					<span class="text-base text-pretty text-toned">{{
+						note
+					}}</span>
 				</div>
 			</div>
 		</div>