add l10n in missing areas

package.json

@@ -36,9 +36,9 @@
 		"@11ty/eleventy": "^0.7.1",
 		"@lingui/cli": "^2.8.3",
 		"@lingui/macro": "^2.8.3",
-		"babel-core": "^6.26.3",
 		"babel-eslint": "^7.2.3",
 		"babel-minify": "^0.2.0",
+		"babel-plugin-macros": "^2.6.1",
 		"eslint": "^4.9.0",
 		"eslint-config-prettier": "^2.3.0",
 		"eslint-config-synacor": "^2.0.2",
@@ -60,17 +60,17 @@
 		"preact-cli": "^3.0.0-rc.3",
 		"preact-render-spy": "^1.2.1",
 		"run-sequence": "^2.2.1",
-		"sw-precache": "^5.2.0"
+		"sw-precache": "^5.2.0",
+		"gulp-connect": "^5.7.0"
 	},
 	"dependencies": {
 		"@emmetio/codemirror-plugin": "^0.5.4",
-		"@lingui/react": "^2.7.4",
+		"@lingui/react": "^2.8.3",
 		"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
 		"codemirror": "^5.37.0",
 		"copy-webpack-plugin": "^4.5.1",
 		"esprima": "^4.0.0",
 		"firebase": "^5.5.8",
-		"gulp-connect": "^5.7.0",
 		"jszip": "^3.1.5",
 		"preact": "^10.0.0-rc.0",
 		"preact-portal": "^1.1.3",

src/components/AddLibrary.jsx

@@ -2,6 +2,8 @@ import { h, Component } from 'preact';
 import { jsLibs, cssLibs } from '../libraryList';
 import { trackEvent } from '../analytics';
 import { LibraryAutoSuggest } from './LibraryAutoSuggest';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 export default class AddLibrary extends Component {
 	constructor(props) {
@@ -58,8 +60,12 @@ export default class AddLibrary extends Component {
 	}
 	render() {
 		return (
+			<I18n>
+				{({ i18n }) => (
 					<div>
-				<h1>Add Library</h1>
+						<h1>
+							<Trans>Add Library</Trans>
+						</h1>
 
 						<div class="flex flex-v-center">
 							<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
@@ -73,15 +79,17 @@ export default class AddLibrary extends Component {
 									type="text"
 									id="externalLibrarySearchInput"
 									class="full-width"
-							placeholder="Type here to search libraries"
+									placeholder={i18n._(t`Type here to search libraries`)}
 								/>
 							</LibraryAutoSuggest>
 						</div>
 						<div class="tar opacity--70">
-					<small>Powered by cdnjs</small>
+							<small>
+								<Trans>Powered by cdnjs</Trans>
+							</small>
 						</div>
 						<div style="margin:20px 0;">
-					Choose from popular libraries:{' '}
+							<Trans>Choose from popular libraries</Trans>:{' '}
 							<select
 								name=""
 								id="js-add-library-select"
@@ -106,14 +114,22 @@ export default class AddLibrary extends Component {
 						</div>
 
 						<h3 class="mb-0">JS</h3>
-				<p class="mt-0 help-text">Put each library in new line</p>
+						<p class="mt-0 help-text">
+							<Trans>Put each library in new line</Trans>
+						</p>
 
-				<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
+						<p
+							style="font-size: 0.8em;"
+							class="show-when-extension opacity--70"
+						>
+							<Trans>
 								Note: You can load external scripts only from following domains:
+							</Trans>
 							localhost, https://ajax.googleapis.com, https://code.jquery.com,
-					https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
+							https://cdnjs.cloudflare.com, https://unpkg.com,
-					https://cdn77.com, https://maxcdn.bootstrapcdn.com,
+							https://maxcdn.com, https://cdn77.com,
-					https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
+							https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/,
+							https://rawgit.com, https://wzrd.in
 						</p>
 
 						<textarea
@@ -127,7 +143,9 @@ export default class AddLibrary extends Component {
 						/>
 
 						<h3 class="mb-0">CSS</h3>
-				<p class="mt-0 help-text">Put each library in new line</p>
+						<p class="mt-0 help-text">
+							<Trans>Put each library in new line</Trans>
+						</p>
 						<textarea
 							onBlur={this.textareaBlurHandler.bind(this)}
 							data-lang="css"
@@ -138,6 +156,8 @@ export default class AddLibrary extends Component {
 							value={this.state.css}
 						/>
 					</div>
+				)}
+			</I18n>
 		);
 	}
 }

src/components/Console.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { Inspector, chromeDark } from 'react-inspector';
-import { Trans } from '@lingui/macro';
+import { Trans, t, NumberFormat } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 import { PureComponent } from 'preact/compat';
 
 class LogRow extends Component {
@@ -44,6 +45,8 @@ export class Console extends PureComponent {
 		} = this.props;
 
 		return (
+			<I18n>
+				{({ i18n }) => (
 					<div
 						id="consoleEl"
 						class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
@@ -51,17 +54,19 @@ export class Console extends PureComponent {
 						<div id="consoleLogEl" class="console__log">
 							<div
 								class="js-console__header  code-wrap__header"
-						title="Double click to toggle console"
+								title={i18n._(t`Double click to toggle console`)}
 								onDblClick={onConsoleHeaderDblClick}
 							>
 								<span class="code-wrap__header-label">
 									<Trans>Console</Trans>
-							<span class="count-label">{logs.length}</span>
+									<span class="count-label">
+										<NumberFormat value={logs.length} />
+									</span>
 								</span>
 								<div class="code-wrap__header-right-options">
 									<a
 										class="code-wrap__header-btn"
-								title="Clear console (CTRL + L)"
+										title={i18n._(t`Clear console (CTRL + L)`)}
 										onClick={onClearConsoleBtnClick}
 									>
 										<svg>
@@ -70,7 +75,7 @@ export class Console extends PureComponent {
 									</a>
 									<a
 										class="code-wrap__header-btn  code-wrap__collapse-btn"
-								title="Toggle console"
+										title={i18n._(t`Toggle console`)}
 										onClick={toggleConsole}
 									/>
 								</div>
@@ -100,6 +105,8 @@ export class Console extends PureComponent {
 							/>
 						</div>
 					</div>
+				)}
+			</I18n>
 		);
 	}
 }

src/components/Footer.jsx

@@ -1,5 +1,7 @@
 import { h, Component } from 'preact';
 import { Button } from './common';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 class JS13K extends Component {
 	constructor(props) {
@@ -71,6 +73,8 @@ export default class Footer extends Component {
 
 	render() {
 		return (
+			<I18n>
+				{({ i18n }) => (
 					<div id="footer" class="footer">
 						<div>
 							<a href="/" target="_blank" rel="noopener noreferrer">
@@ -83,7 +87,7 @@ export default class Footer extends Component {
 								data-event-category="ui"
 								data-event-action="helpButtonClick"
 								class="footer__link  hint--rounded  hint--top-right"
-						aria-label="Help"
+								aria-label={i18n._(t`Help`)}
 							>
 								<svg
 									style="width:20px; height:20px; vertical-align:text-bottom"
@@ -97,7 +101,7 @@ export default class Footer extends Component {
 								data-event-category="ui"
 								data-event-action="keyboardShortcutButtonClick"
 								class="footer__link hint--rounded  hint--top-right hide-on-mobile"
-						aria-label="Keyboard shortcuts"
+								aria-label={i18n._(t`Keyboard shortcuts`)}
 							>
 								<svg
 									style={{
@@ -111,7 +115,7 @@ export default class Footer extends Component {
 							</Button>
 							<a
 								class="footer__link  hint--rounded  hint--top-right"
-						aria-label="Tweet about 'Web Maker'"
+								aria-label={i18n._(t`Tweet about 'Web Maker'`)}
 								href="http://twitter.com/share?url=https://webmaker.app/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -131,9 +135,11 @@ export default class Footer extends Component {
 								data-event-category="ui"
 								data-event-action="supportDeveloperFooterBtnClick"
 								class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile support-link"
-						aria-label="Support the developer by pledging some amount"
+								aria-label={i18n._(
+									t`Support the developer by pledging some amount`
+								)}
 							>
-						Donate
+								<Trans>Donate</Trans>
 							</Button>
 						</div>
 
@@ -161,7 +167,7 @@ export default class Footer extends Component {
 											}}
 											onClick={this.props.onJs13KDownloadBtnClick}
 										>
-									Download game as zip
+											<Trans>Download game as zip</Trans>
 										</button>
 										<a
 											class="btn"
@@ -174,14 +180,14 @@ export default class Footer extends Component {
 											href="https://pasteboard.co/"
 											target="_blank"
 										>
-									Upload Image
+											<Trans>Upload Image</Trans>
 										</a>
 										<button
 											class="btn"
 											style={{ width: '200px', display: 'block' }}
 											onClick={this.props.onJs13KHelpBtnClick}
 										>
-									Help
+											<Trans>Help</Trans>
 										</button>
 									</div>
 								)}
@@ -193,7 +199,7 @@ export default class Footer extends Component {
 								onClick={this.props.saveHtmlBtnClickHandler}
 								id="saveHtmlBtn"
 								class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
-						aria-label="Save as HTML file"
+								aria-label={i18n._(t`Save as HTML file`)}
 							>
 								<svg viewBox="0 0 24 24">
 									<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
@@ -216,7 +222,7 @@ export default class Footer extends Component {
 								onClick={this.props.codepenBtnClickHandler}
 								id="codepenBtn"
 								class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile hide-in-file-mode"
-						aria-label="Edit on CodePen"
+								aria-label={i18n._(t`Edit on CodePen`)}
 							>
 								<svg>
 									<use xlinkHref="#codepen-logo" />
@@ -227,7 +233,7 @@ export default class Footer extends Component {
 								id="screenshotBtn"
 								class="mode-btn  hint--rounded  hint--top-left show-when-extension"
 								onClick={this.props.screenshotBtnClickHandler}
-						aria-label="Take screenshot of preview"
+								aria-label={i18n._(t`Take screenshot of preview`)}
 							>
 								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
 									<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
@@ -240,7 +246,7 @@ export default class Footer extends Component {
 								onClick={this.layoutBtnClickhandler.bind(this, 1)}
 								id="layoutBtn1"
 								class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on right"
+								aria-label={i18n._(t`Switch to layout with preview on right`)}
 							>
 								<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
 									<use xlinkHref="#mode-icon" />
@@ -250,7 +256,7 @@ export default class Footer extends Component {
 								onClick={this.layoutBtnClickhandler.bind(this, 2)}
 								id="layoutBtn2"
 								class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on bottom"
+								aria-label={i18n._(t`Switch to layout with preview on bottom`)}
 							>
 								<svg viewBox="0 0 100 100">
 									<use xlinkHref="#mode-icon" />
@@ -260,7 +266,7 @@ export default class Footer extends Component {
 								onClick={this.layoutBtnClickhandler.bind(this, 3)}
 								id="layoutBtn3"
 								class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on left"
+								aria-label={i18n._(t`Switch to layout with preview on left`)}
 							>
 								<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
 									<use xlinkHref="#mode-icon" />
@@ -270,7 +276,7 @@ export default class Footer extends Component {
 								onClick={this.layoutBtnClickhandler.bind(this, 5)}
 								id="layoutBtn5"
 								class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with all vertical panes"
+								aria-label={i18n._(t`Switch to layout with all vertical panes`)}
 							>
 								<svg viewBox="0 0 100 100">
 									<use xlinkHref="#vertical-mode-icon" />
@@ -280,7 +286,7 @@ export default class Footer extends Component {
 								onClick={this.layoutBtnClickhandler.bind(this, 4)}
 								id="layoutBtn4"
 								class="mode-btn hint--top-left hint--rounded hide-in-file-mode hide-on-mobile"
-						aria-label="Switch to full screen preview"
+								aria-label={i18n._(t`Switch to full screen preview`)}
 							>
 								<svg viewBox="0 0 100 100">
 									<rect x="0" y="0" width="100" height="100" />
@@ -288,7 +294,7 @@ export default class Footer extends Component {
 							</button>
 							<button
 								class="mode-btn hint--top-left hint--rounded hide-on-mobile"
-						aria-label="Detach Preview"
+								aria-label={i18n._(t`Detach preview`)}
 								onClick={this.props.detachedPreviewBtnHandler}
 							>
 								<svg viewBox="0 0 24 24">
@@ -304,7 +310,7 @@ export default class Footer extends Component {
 								class={`notifications-btn  mode-btn  hint--top-left  hint--rounded ${
 									this.props.hasUnseenChangelog ? 'has-new' : ''
 								}`}
-						aria-label="See Changelog"
+								aria-label={i18n._(t`See changelog`)}
 							>
 								<svg viewBox="0 0 24 24">
 									<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
@@ -316,7 +322,7 @@ export default class Footer extends Component {
 								data-event-category="ui"
 								data-event-action="settingsBtnClick"
 								class="mode-btn  hint--top-left  hint--rounded"
-						aria-label="Settings"
+								aria-label={i18n._(t`Settings`)}
 							>
 								<svg>
 									<use xlinkHref="#settings-icon" />
@@ -324,6 +330,8 @@ export default class Footer extends Component {
 							</Button>
 						</div>
 					</div>
+				)}
+			</I18n>
 		);
 	}
 }

src/components/SavedItemPane.jsx

@@ -1,10 +1,9 @@
 import { h, Component } from 'preact';
 import { log } from '../utils';
 import { trackEvent } from '../analytics';
-import { itemService } from '../itemService';
-import { alertsService } from '../notifications';
-import { deferred } from '../deferred';
 import { ItemTile } from './ItemTile';
+import { Trans, NumberFormat, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 export default class SavedItemPane extends Component {
 	constructor(props) {
@@ -113,7 +112,9 @@ export default class SavedItemPane extends Component {
 			} catch (exception) {
 				log(exception);
 				alert(
-					'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.'
+					i18n._(
+						t`'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.`
+					)
 				);
 			}
 		});
@@ -154,6 +155,8 @@ export default class SavedItemPane extends Component {
 		{ filteredItems = this.state.items, items = [] }
 	) {
 		return (
+			<I18n>
+				{({ i18n }) => (
 					<div
 						id="js-saved-items-pane"
 						class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
@@ -164,27 +167,36 @@ export default class SavedItemPane extends Component {
 							onClick={this.onCloseIntent.bind(this)}
 							class="btn  saved-items-pane__close-btn"
 							id="js-saved-items-pane-close-btn"
-					aria-label="Close saved creations pane"
+							aria-label={i18n._(t`Close saved creations pane`)}
 						>
 							X
 						</button>
-				<div class="flex flex-v-center" style="justify-content: space-between;">
+						<div
-					<h3>My Library ({filteredItems.length})</h3>
+							class="flex flex-v-center"
+							style="justify-content: space-between;"
+						>
+							<h3>
+								<Trans>My Library ({filteredItems.length})</Trans>
+							</h3>
 
 							<div>
 								<button
 									onClick={exportBtnClickHandler}
 									class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Export all your creations into a single importable file."
+									aria-label={i18n._(
+										t`Export all your creations into a single importable file.`
+									)}
 								>
-							Export
+									<Trans>Export</Trans>
 								</button>
 								<button
 									onClick={this.importBtnClickHandler.bind(this)}
 									class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
+									aria-label={i18n._(
+										t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
+									)}
 								>
-							Import
+									<Trans>Import</Trans>
 								</button>
 							</div>
 						</div>
@@ -194,29 +206,41 @@ export default class SavedItemPane extends Component {
 							id="searchInput"
 							class="search-input"
 							onInput={this.searchInputHandler.bind(this)}
-					placeholder="Search your creations here..."
+							placeholder={i18n._(t`Search your creations here...`)}
 						/>
 
 						<div id="js-saved-items-wrap" class="saved-items-pane__container">
 							{!filteredItems.length && items.length ? (
-						<div class="mt-1">No match found.</div>
+								<div class="mt-1">
+									<Trans>No match found.</Trans>
+								</div>
 							) : null}
 							{filteredItems.map(item => (
 								<ItemTile
 									item={item}
 									onClick={this.itemClickHandler.bind(this, item)}
 									onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
-							onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(this, item)}
+									onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(
+										this,
+										item
+									)}
 								/>
 							))}
 							{!items.length ? (
 								<div class="tac">
-							<h2 class="opacity--30">Nothing saved here.</h2>
+									<h2 class="opacity--30">
-							<img style="max-width: 80%; opacity:0.4" src="assets/empty.svg" />
+										<Trans>Nothing saved here.</Trans>
+									</h2>
+									<img
+										style="max-width: 80%; opacity:0.4"
+										src="assets/empty.svg"
+									/>
 								</div>
 							) : null}
 						</div>
 					</div>
+				)}
+			</I18n>
 		);
 	}
 }

src/components/Settings.jsx

@@ -378,7 +378,7 @@ export default class Settings extends Component {
 								stopped.
 							</HelpText>
 						</div>
-						{/*
+
 						<Divider />
 
 						<div>
@@ -389,13 +389,13 @@ export default class Settings extends Component {
 									onChange={e => this.updateSetting(e, 'lang')}
 								>
 									<option value="en">English</option>
-							<option value="hi">Hindi</option>
+									<option value="hi">हिंदी</option>
 									<option value="sa">Sanskrit</option>
-							<option value="es">Spanish</option>
+									<option value="es">Español (España)</option>
+									<option value="zh-Hans">中文(简体)</option>
 								</select>
 							</label>
 						</div>
-						*/}
 					</TabPanel>
 				</Tabs>
 			</div>