Create definition for Translate

[bissy]

for "Welcome Message" in MenuTabs.tsx
and "Tips for getting started" in homescreen.html.

[samuelmaddock]

This is a good start! I need to make some changes first before these contributions can be accommodated though.

[samuelmaddock]

This particular file will be tricky. It didn't have translations because it's using plain HTML. Before translations can be easily supported, it will need to be converted to a React component with JSX markup.

This is possible, but I might not be able to get around to refactoring this during the week.

[samuelmaddock]

Two things to note here:

1. Lines that were broken into several lines can be merged into one string. CSS's layout engine will handle line wrapping for us.
2. It might be best for semantics to describe the locale keys without using numbers. For example:

Suggested change

	tipsGettingStarted1: 'Tips for getting started',
	tipsGettingStartedHeader: 'Tips for getting started',

[samuelmaddock]

For special cases like this where the markup is mixed in with the string, I use a special React component called <Trans>. Here's an example:

metastream/packages/metastream-app/src/components/Popup.tsx

Lines 366 to 369 in 1cd9f13

	<Trans i18nKey="embedBlocked" values={{ host: mediaHostname }}>
	To enable playback with <strong>this website</strong>, Metastream must open the
	website in a popup.
	</Trans>

And the actual translation string looks like this:

metastream/packages/metastream-app/src/locale/en-US.ts

Lines 48 to 49 in 1cd9f13

	embedBlocked:
	'To enable playback with <1>{{host}}</1>, Metastream must open the website in a popup.',