Make all strings in ui translatable

zadeviggers · Oct 25, 2022 · 0e61249 · 0e61249
1 parent 3b16f63
commit 0e61249
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/src/components/OfflineButton.astro b/src/components/OfflineButton.astro
@@ -1,6 +1,13 @@
+---
+import { useTranslations } from '../i18n/util';
+const t = useTranslations(Astro);
+---
+
 <div id="offline-wrapper">
-	<span id="offline-status-text" aria-hidden="true">Offline not enabled.</span>
-	<button id="offline-control-button" aria-hidden="true" tabindex="-1">Install offline</button>
+	<span id="offline-status-text" aria-hidden="true">{t('offline.statusText.disabled')}</span>
+	<button id="offline-control-button" aria-hidden="true" tabindex="-1">
+		{t('offline.button.install')}
+	</button>
 </div>
 <style>
 	#offline-wrapper {
@@ -60,6 +67,9 @@
 </style>
 
 <script>
+	import { useTranslations } from '../i18n/util';
+	const t = useTranslations(Astro);
+
 	const offlineWrapper = document.getElementById('offline-wrapper') as HTMLDivElement;
 	const offlineStatusText = document.getElementById('offline-status-text') as HTMLSpanElement;
 	const offlineButton = document.getElementById('offline-control-button') as HTMLButtonElement;
@@ -113,10 +123,6 @@
 		offlineStatusText.classList.toggle('loading', isLoading);
 	}
 
-	function updateStatusMessage(message: string) {
-		offlineStatusText.innerText = message;
-	}
-
 	if (import.meta.env.DEV) removeOffline();
 	else if ('serviceWorker' in navigator) {
 		offlineWrapper.toggleAttribute('data-offline-supported', true);
@@ -126,8 +132,8 @@
 
 		if (await isWorkerInstalled()) {
 			// If the site is already set up to work offline, make the button remove offline support instead
-			offlineButton.innerText = 'Remove offline';
-			updateStatusMessage('Offline enabled.');
+			offlineButton.innerText = t('offline.button.remove')!;
+			offlineStatusText.innerText = t('offline.statusText.enabled')!;
 		}
 
 		navigator.serviceWorker.addEventListener('controllerchange', downloadStuffOnSwReady);
@@ -145,7 +151,7 @@
 					break;
 				case 'offline ready':
 					updateLoadingState(false);
-					updateStatusMessage('Ready to work offline.');
+					offlineStatusText.innerText = t('offline.statusText.ready')!;
 					break;
 			}
 		});
@@ -154,25 +160,25 @@
 
 		offlineButton.addEventListener('click', async () => {
 			if (await isWorkerInstalled()) {
-				updateStatusMessage('Removing offline.');
+				offlineStatusText.innerText = t('offline.statusText.removing')!;
 				updateLoadingState(true);
 				await removeOffline();
 				updateLoadingState(false);
-				updateStatusMessage('Offline removed.');
-				offlineButton.innerText = 'Install offline';
+				offlineStatusText.innerText = t('offline.statusText.removed')!;
+				offlineButton.innerText = t('offline.button.install')!;
 			} else {
 				offlineButton.toggleAttribute('disabled', true);
-				updateStatusMessage('Installing worker.');
+				offlineStatusText.innerText = t('offline.statusText.installing')!;
 				updateLoadingState(true);
 				navigator.serviceWorker
 					.register('/service-worker.js', {
 						scope: '/',
 					})
 					.then(() => {
-						offlineButton.innerText = 'Remove offline';
+						offlineButton.innerText = t('offline.button.remove')!;
 						offlineButton.toggleAttribute('disabled', false);
 						updateLoadingState(false);
-						updateStatusMessage('Worker installed.');
+						offlineStatusText.innerText = t('offline.statusText.installed')!;
 					});
 			}
 		});

diff --git a/src/i18n/en/ui.ts b/src/i18n/en/ui.ts
@@ -62,6 +62,17 @@ export default {
 	// Offline warning message at the top of documentation pages
 	'offline.warning.title': 'Page served from offline cache',
 	'offline.warning.body': 'The content here may be out of date, so be careful.',
+	// Offline control button
+	'offline.button.install': 'Install offline',
+	'offline.button.remove': 'Remove offline',
+	// Status text next to the offline control button
+	'offline.statusText.installing': 'Installing worker,',
+	'offline.statusText.removing': 'Removing offline.',
+	'offline.statusText.installed': 'Installed worker.',
+	'offline.statusText.removed': 'Offline removed.',
+	'offline.statusText.ready': 'Ready to work offline.',
+	'offline.statusText.enabled': 'Offline enabled.',
+	'offline.statusText.disabled': 'Offline not enabled.',
 	// Aside component default labels
 	'aside.note': 'Note',
 	'aside.tip': 'Tip',