Experimental language translation

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -4,6 +4,8 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+const translateOpts = ['htmlError'];
+
 const ErrorBar = createClass({
 	displayName     : 'ErrorBar',
 	getDefaultProps : function() {
@@ -27,7 +29,7 @@ const ErrorBar = createClass({
 			if(err.id == 'CLOSE') this.hasCloseError = true;
 			if(err.id == 'MISMATCH') this.hasMatchError = true;
 			return <li key={idx}>
-				Line {err.line} : {err.text}, '{err.type}' tag
+				{'Line'.translate()} {err.line} : {err.text}, '{err.type}' {'tag'.translate()}
 			</li>;
 		});
 
@@ -38,34 +40,35 @@ const ErrorBar = createClass({
 		const msg = [];
 		if(this.hasOpenError){
 			msg.push(<div>
-				An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
+				{'openTag'.translate()}
 			</div>);
 		}
 
 		if(this.hasCloseError){
 			msg.push(<div>
-				An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
+				{'closeTag'.translate()}
 			</div>);
 		}
 
 		if(this.hasMatchError){
 			msg.push(<div>
-				A type mismatch means you closed a tag, but the last open tag was a different type.
+				{'missmatchTag'.translate()}
 			</div>);
 		}
 		return <div className='protips'>
-			<h4>Protips!</h4>
+			<h4>{'Protips!'.translate()}</h4>
 			{msg}
 		</div>;
 	},
 
 	render : function(){
+		''.setTranslationDefaults(translateOpts);
 		if(!this.props.errors.length) return null;
 
 		return <div className='errorBar'>
 			<i className='fas fa-exclamation-triangle' />
-			<h3> There are HTML errors in your markup</h3>
-			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
+			<h3> {'h3Title'.translate()}</h3>
+			<small>{'descriptionText'.translate()}</small>
 			{this.renderErrors()}
 			<hr />
 			{this.renderProtip()}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -5,10 +5,12 @@ const _     = require('lodash');
 const cx    = require('classnames');	//Unused variable
 
 const DISMISS_KEY = 'dismiss_notification12-04-23';
+const translateOpts = ['notificationPopup'];
 
 const NotificationPopup = createClass({
 	displayName     : 'NotificationPopup',
 	getInitialState : function() {
+		''.setTranslationDefaults(translateOpts);
 		return {
 			notifications : {}
 		};
@@ -21,6 +23,7 @@ const NotificationPopup = createClass({
 		window.removeEventListener('resize', this.checkNotifications);
 	},
 	notifications : {
+		// as the following is a text that is supposed to recieve updates usually, we will keep it untranslated by now.
 		psa : function(){
 			return (
 				<>
@@ -73,8 +76,8 @@ const NotificationPopup = createClass({
 			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
 			<i className='fas fa-info-circle info' />
 			<div className='header'>
-				<h3>Notice</h3>
-				<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+				<h3>{'Notice'.translate()}</h3>
+				<small>{'keepInMind'.translate()}:</small>
 			</div>
 			<ul>{_.values(this.state.notifications)}</ul>
 		</div>;

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -15,6 +15,7 @@ const validations = require('./validations.js');
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
 const homebreweryThumbnail = require('../../thumbnail.png');
+const translateOpts = ['editPage', 'propertiesTab'];
 
 const callIfExists = (val, fn, ...args)=>{
 	if(val[fn]) {
@@ -121,11 +122,11 @@ const MetadataEditor = createClass({
 
 	handleDelete : function(){
 		if(this.props.metadata.authors && this.props.metadata.authors.length <= 1){
-			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
-			if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
+			if(!confirm('onlyAuthorDelete'.translate())) return;
+			if(!confirm('confirm1'.translate())) return;
 		} else {
-			if(!confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
-			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
+			if(!confirm('multipleAuthorDelete'.translate())) return;
+			if(!confirm('confirm2'.translate())) return;
 		}
 
 		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
@@ -154,11 +155,11 @@ const MetadataEditor = createClass({
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
-				<i className='fas fa-ban' /> unpublish
+				<i className='fas fa-ban' /> {'unpublish'.translate()}
 			</button>;
 		} else {
 			return <button className='publish' onClick={()=>this.handlePublish(true)}>
-				<i className='fas fa-globe' /> publish
+				<i className='fas fa-globe' /> {'publish'.translate()}
 			</button>;
 		}
 	},
@@ -167,22 +168,22 @@ const MetadataEditor = createClass({
 		if(!this.props.metadata.editId) return;
 
 		return <div className='field delete'>
-			<label>delete</label>
+			<label>{'delete'.translate()}</label>
 			<div className='value'>
 				<button className='publish' onClick={this.handleDelete}>
-					<i className='fas fa-trash-alt' /> delete brew
+					<i className='fas fa-trash-alt' /> {'delete brew'.translate()}
 				</button>
 			</div>
 		</div>;
 	},
 
 	renderAuthors : function(){
-		let text = 'None.';
+		let text = 'None'.translate()+'.';
 		if(this.props.metadata.authors && this.props.metadata.authors.length){
 			text = this.props.metadata.authors.join(', ');
 		}
 		return <div className='field authors'>
-			<label>authors</label>
+			<label>{'authors'.translate()}</label>
 			<div className='value'>
 				{text}
 			</div>
@@ -212,7 +213,7 @@ const MetadataEditor = createClass({
 			dropdown =
 				<Nav.dropdown className='disabled value' trigger='disabled'>
 					<div>
-						{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
+						{'themesLegacy'.translate()} <i className='fas fa-caret-down'></i>
 					</div>
 				</Nav.dropdown>;
 		} else {
@@ -227,7 +228,7 @@ const MetadataEditor = createClass({
 		}
 
 		return <div className='field themes'>
-			<label>theme</label>
+			<label>{'theme'.translate()}</label>
 			{dropdown}
 		</div>;
 	},
@@ -248,7 +249,7 @@ const MetadataEditor = createClass({
 		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
 
 		return <div className='field language'>
-			<label>language</label>
+			<label>{'language'.translate()}</label>
 			<div className='value'>
 				<Combobox trigger='click'
 					className='language-dropdown'
@@ -267,7 +268,7 @@ const MetadataEditor = createClass({
 					}}
 				>
 				</Combobox>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
+				<small>{'languageSub'.translate()}</small>
 			</div>
 
 		</div>;
@@ -277,7 +278,7 @@ const MetadataEditor = createClass({
 		if(!global.enable_v3) return;
 
 		return <div className='field systems'>
-			<label>Renderer</label>
+			<label>{'renderer'.translate()}</label>
 			<div className='value'>
 				<label key='legacy'>
 					<input
@@ -286,7 +287,7 @@ const MetadataEditor = createClass({
 						name = 'renderer'
 						checked={this.props.metadata.renderer === 'legacy'}
 						onChange={(e)=>this.handleRenderer('legacy', e)} />
-					Legacy
+					{'Legacy'.translate()}
 				</label>
 
 				<label key='V3'>
@@ -296,35 +297,36 @@ const MetadataEditor = createClass({
 						name = 'renderer'
 						checked={this.props.metadata.renderer === 'V3'}
 						onChange={(e)=>this.handleRenderer('V3', e)} />
-					V3
+					{'v3'.translate()}
 				</label>
 
 				<a href='/legacy' target='_blank' rel='noopener noreferrer'>
-					Click here to see the demo page for the old Legacy renderer!
+					{'legacyDemoLink'.translate()}
 				</a>
 			</div>
 		</div>;
 	},
 
 	render : function(){
+		''.setTranslationDefaults(translateOpts);
 		return <div className='metadataEditor'>
-			<h1 className='sectionHead'>Brew</h1>
+			<h1 className='sectionHead'>{'Brew'.translate()}</h1>
 
 			<div className='field title'>
-				<label>title</label>
+				<label>{'title'.translate()}</label>
 				<input type='text' className='value'
 					defaultValue={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
 			<div className='field-group'>
 				<div className='field-column'>
 					<div className='field description'>
-						<label>description</label>
+						<label>{'description'.translate()}</label>
 						<textarea defaultValue={this.props.metadata.description} className='value'
 							onChange={(e)=>this.handleFieldChange('description', e)} />
 					</div>
 					<div className='field thumbnail'>
-						<label>thumbnail</label>
+						<label>{'thumbnail'.translate()}</label>
 						<input type='text'
 							defaultValue={this.props.metadata.thumbnail}
 							placeholder='https://my.thumbnail.url'
@@ -338,13 +340,13 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
-				placeholder='add tag' unique={true}
+			<StringArrayEditor label={'tags'.translate()} valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+				placeholder={'add tag'.translate()} unique={true}
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}/>
 
 			<div className='field systems'>
-				<label>systems</label>
+				<label>{'systems'.translate()}</label>
 				<div className='value'>
 					{this.renderSystems()}
 				</div>
@@ -358,26 +360,26 @@ const MetadataEditor = createClass({
 
 			<hr/>
 
-			<h1 className='sectionHead'>Authors</h1>
+			<h1 className='sectionHead'>{'authors'.translate()}</h1>
 
 			{this.renderAuthors()}
 
-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+			<StringArrayEditor label={'invited authors'.translate()} valuePatterns={[/.+/]}
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
-				placeholder='invite author' unique={true}
+				placeholder={'invite author'.translate()} unique={true}
 				values={this.props.metadata.invitedAuthors}
-				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
+				notes={['invitedSub1'.translate(), 'invitedSub2'.translate()]}
 				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
 
 			<hr/>
 
 			<h1 className='sectionHead'>Privacy</h1>
 
 			<div className='field publish'>
-				<label>publish</label>
+				<label>{'publish'.translate()}</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
+					<small>{'publishedSub'.translate()}</small>
 				</div>
 			</div>
 

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -161,7 +161,7 @@ const Snippetbar = createClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
-				</>
+				</>;
 
 		}
 
@@ -181,7 +181,7 @@ const Snippetbar = createClass({
 				<i className='fas fa-palette' />
 				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			
+
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>

client/homebrew/homebrew.jsx

@@ -13,6 +13,8 @@ const ErrorPage = require('./pages/errorPage/errorPage.jsx');
 const PrintPage = require('./pages/printPage/printPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
+const Localize = require('locale/localization.js');
+
 const WithRoute = (props)=>{
 	const params = useParams();
 	const [searchParams] = useSearchParams();
@@ -59,6 +61,8 @@ const Homebrew = createClass({
 		global.enable_themes = this.props.enable_themes;
 		global.config = this.props.config;
 
+		Localize.addTranslationFunc(this.props.config.localeData);
+
 		return {};
 	},
 
@@ -79,8 +83,8 @@ const Homebrew = createClass({
 						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
 						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 					</Routes>
 				</div>
 			</Router>