feat(SPA): i18n internationzalization, english and french

web/src/lib/updateFormat.ts

@@ -1,3 +1,4 @@
+import { t } from '@/i18n'
 import { formatAbsoluteDateFromIso, formatRelativeDate } from '@/lib/relativeDate'
 
 export const ENABLE_BROWSER_UPDATES_COMMAND = 'renewcms enable-browser-updates'
@@ -26,12 +27,12 @@ export function formatLastChecked(iso: string, now: Date = new Date()) {
 	const yesterday = new Date(now)
 	yesterday.setDate(now.getDate() - 1)
 	if (isSameLocalDay(date, now)) {
-		return `Last checked today at ${formatClock(date)}`
+		return t('Last checked today at {0}', [formatClock(date)])
 	}
 	if (isSameLocalDay(date, yesterday)) {
-		return `Last checked yesterday at ${formatClock(date)}`
+		return t('Last checked yesterday at {0}', [formatClock(date)])
 	}
-	return `Last checked ${formatAbsoluteDateFromIso(iso)} at ${formatClock(date)}`
+	return t('Last checked {0} at {1}', [formatAbsoluteDateFromIso(iso), formatClock(date)])
 }
 
 export function isCheckDue(checkedAt: string | null, now: number = Date.now()) {
@@ -42,7 +43,7 @@ export function isCheckDue(checkedAt: string | null, now: number = Date.now()) {
 }
 
 export function formatReleased(iso: string) {
-	return `Released ${formatAbsoluteDateFromIso(iso)}`
+	return t('Released {0}', [formatAbsoluteDateFromIso(iso)])
 }
 
 const BYTES_PER_MB = 1024 * 1024
@@ -56,7 +57,7 @@ export function formatDownloadProgress(progress: {
 }) {
 	const done = Math.round(progress.downloaded_bytes / BYTES_PER_MB)
 	const total = Math.round(progress.total_bytes / BYTES_PER_MB)
-	return `${progress.percent}% · ${done} of ${total} MB`
+	return t('{0}% · {1} of {2} MB', [progress.percent, done, total])
 }
 
 export function downloadAnnouncement(version: string, percent: number) {
@@ -64,8 +65,8 @@ export function downloadAnnouncement(version: string, percent: number) {
 		Math.floor(percent / ANNOUNCEMENT_STEP_PERCENT) * ANNOUNCEMENT_STEP_PERCENT,
 		LAST_ANNOUNCED_PERCENT,
 	)
-	const base = `Downloading version ${version}`
-	return step > 0 ? `${base}, ${step} percent` : base
+	const base = t('Downloading version {0}', [version])
+	return step > 0 ? t('{0}, {1} percent', [base, step]) : base
 }
 
 export const VERIFYING_ANNOUNCEMENT = 'Checking the download'
@@ -84,7 +85,7 @@ export function browserUpdatesDocsUrl(releaseUrl: string) {
 }
 
 export function formatStartedAt(iso: string) {
-	return `Started at ${formatClock(new Date(iso))}`
+	return t('Started at {0}', [formatClock(new Date(iso))])
 }
 
 export function formatStartedWithAge(iso: string, now: Date = new Date()) {
@@ -96,10 +97,10 @@ export function formatUpdatedAt(iso: string, now: Date = new Date()) {
 	const yesterday = new Date(now)
 	yesterday.setDate(now.getDate() - 1)
 	if (isSameLocalDay(date, now)) {
-		return `Updated today at ${formatClock(date)}`
+		return t('Updated today at {0}', [formatClock(date)])
 	}
 	if (isSameLocalDay(date, yesterday)) {
-		return `Updated yesterday at ${formatClock(date)}`
+		return t('Updated yesterday at {0}', [formatClock(date)])
 	}
-	return `Updated ${formatAbsoluteDateFromIso(iso)} at ${formatClock(date)}`
+	return t('Updated {0} at {1}', [formatAbsoluteDateFromIso(iso), formatClock(date)])
 }