Studio: Translate "About Studio" modal (#228)

* Remove unused script * Add and inject translatable strings * Capture error in Sentry * Combine version and version number in one string * Add sprintif * Replace a signle quote --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
Automattic · Jun 11, 2024 · 216154a · 216154a
1 parent af60614
commit 216154a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/src/about-menu/about-menu.html b/src/about-menu/about-menu.html
@@ -78,24 +78,19 @@
 <body> 
   <div>  
     <img src="./studio-app-icon.png" alt="Studio App Icon" width="64" height="64">
-        <p class="studio-name">Studio by WordPress.com</p>
-        <p class="version">Version <span id="version"></span></p>
+        <p class="studio-name" id="studio-by-wpcom">Studio by WordPress.com</p>
+        <p class="version"><span id="version-text">Version x.y.z</span></p>
         <p class="links">
           <a href="https://github.com/Automattic/studio" target="_blank">GitHub</a>
           <span class="separator">&middot;</span>
-          <a href="https://github.com/Automattic/studio/issues/new/choose" target="_blank">Share Feedback</a>
+          <a id="share-feedback" href="https://github.com/Automattic/studio/issues/new/choose" target="_blank">Share Feedback</a>
         </p>
   </div>
-    <script>
-        // Access the version from the injected JavaScript
-        const version = document.getElementById('version');
-        version.innerText = window.appVersion; 
-    </script>
   <div class="info">
-    <p>Demo sites powered by<br><a href="https://wordpress.com/hosting/?utm_source=studio&utm_medium=referral&utm_campaign=about_screen" target="_blank">WordPress.com hosting ↗</a></p>
+    <p><span id="demo-sites">Demo sites powered by</span><br><a href="https://wordpress.com/hosting/?utm_source=studio&utm_medium=referral&utm_campaign=about_screen" target="_blank">WordPress.com hosting ↗</a></p>
   </div>
   <div class="info">
-    <p>Local sites powered by<br><a href="https://wordpress.org/playground/" target="_blank">WordPress Playground ↗</a></p>
+    <p><span id="local-sites">Local sites powered by</span><br><a href="https://wordpress.org/playground/" target="_blank">WordPress Playground ↗</a></p>
   </div>
 </body>
 </html>
diff --git a/src/about-menu/open-about-menu.ts b/src/about-menu/open-about-menu.ts
@@ -1,5 +1,7 @@
 import { BrowserWindow, app, shell } from 'electron';
 import path from 'path';
+import * as Sentry from '@sentry/electron/renderer';
+import { sprintf, __ } from '@wordpress/i18n';
 import { ABOUT_WINDOW_HEIGHT, ABOUT_WINDOW_WIDTH } from '../constants';
 
 let aboutWindow: BrowserWindow | null = null;
@@ -35,17 +37,31 @@ export function openAboutWindow() {
 	// Read package.json and pass version to about window
 	const packageJson = app.getVersion();
 
+	function escapeSingleQuotes( str: string ) {
+		return str.replace( /'/g, "\\'" );
+	}
+
 	aboutWindow.webContents.on( 'dom-ready', () => {
 		if ( aboutWindow ) {
-			// Inject version into the about window's HTML
-			aboutWindow.webContents
-				.executeJavaScript( `document.getElementById('version').innerText = '${ packageJson }'` )
-				.catch( ( err ) => {
-					console.error( 'Error executing JavaScript:', err );
-				} );
+			const versionText = sprintf( __( 'Version %s' ), packageJson );
+			const studioByWpcomText = escapeSingleQuotes( __( 'Studio by WordPress.com' ) );
+			const shareFeedbackText = escapeSingleQuotes( __( 'Share Feedback' ) );
+			const demoSitesText = escapeSingleQuotes( __( 'Demo sites powered by' ) );
+			const localSitesText = escapeSingleQuotes( __( 'Local sites powered by' ) );
+
+			const script = `
+				document.getElementById('studio-by-wpcom').innerText = '${ studioByWpcomText }';
+				document.getElementById('version-text').innerText = '${ versionText }';
+				document.getElementById('share-feedback').innerText = '${ shareFeedbackText }';
+				document.getElementById('demo-sites').innerText = '${ demoSitesText }';
+				document.getElementById('local-sites').innerText = '${ localSitesText }';
+			`;
+			aboutWindow.webContents.executeJavaScript( script ).catch( ( err ) => {
+				Sentry.captureException( err );
+				console.error( 'Error executing JavaScript:', err );
+			} );
 		}
 	} );
-
 	aboutWindow.on( 'closed', () => {
 		aboutWindow = null;
 	} );