Making most static strings in substrate.dev supporting multi-lingual (p…

…olkadot-developers#802) * adding <translate> tag for multi-lingual support * Most strings are translatable now * Minor fix of bash syntax in console output * fixing spacing * using relative link so multi-lingual option is kept between navigation * cmd style in console output * Indent all JS to use spacing for indentation * Updated to latest libs * Fix site internal links to respect multi-lingual.
jakehemmerle · Dec 15, 2020 · f03c6ff · f03c6ff
1 parent a83576a
commit f03c6ff
Show file tree

Hide file tree

Showing 22 changed files with 1,833 additions and 1,412 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+root = true
+[*]
+indent_style=space
+indent_size=2
+tab_width=2
+end_of_line=lf
+
+[*.rs]
+indent_style=tab
+indent_size=tab
+tab_width=2
+end_of_line=lf
+charset=utf-8
+trim_trailing_whitespace=true
+max_line_length=100
+insert_final_newline=true
diff --git a/docs/tutorials/create-your-first-substrate-chain/interact.md b/docs/tutorials/create-your-first-substrate-chain/interact.md
@@ -15,7 +15,7 @@ Run the following commands to start your node:
 
 You should see something like this if your node is running successfully:
 
-```
+```bash
 Sep 23 15:23:21.759  WARN Running in --dev mode, RPC CORS has been disabled.
 Sep 23 15:23:21.759  INFO Substrate Node
 Sep 23 15:23:21.759  INFO ✌️  version 2.0.0-24da767-x86_64-linux-gnu

diff --git a/docs/tutorials/create-your-first-substrate-chain/setup.md b/docs/tutorials/create-your-first-substrate-chain/setup.md
@@ -27,21 +27,21 @@ Template, which serves as a good starting point for building on Substrate.
 
 1. Clone the Node Template (version `v2.0.0`).
 
-   ```bash
-   	git clone -b v2.0.0 --depth 1 https://github.com/substrate-developer-hub/substrate-node-template
-   ```
+    ```bash
+    git clone -b v2.0.0 --depth 1 https://github.com/substrate-developer-hub/substrate-node-template
+    ```
 
 2. Initialize your WebAssembly build environment
 
-   ```bash
-   make init
-   ```
+    ```bash
+    make init
+    ```
 
 3. Compile the Node Template
 
-   ```bash
-   make build
-   ```
+    ```bash
+    make build
+    ```
 
 The time required for the compilation step depends on the hardware you're using. Don't wait before
 moving on.

diff --git a/docs/tutorials/start-a-private-network/customchain.md b/docs/tutorials/start-a-private-network/customchain.md
@@ -169,7 +169,7 @@ As before, we specify another `base-path`, give it another `name`, and also spec
 
 Once the second node is up, you should see them authoring:
 
-```
+```bash
 Sep 24 13:32:29.909  INFO Substrate Node    
 Sep 24 13:32:29.909  INFO ✌️  version 2.0.0-24da767-x86_64-linux-gnu    
 Sep 24 13:32:29.909  INFO ❤️  by Substrate DevHub <https://github.com/substrate-developer-hub>, 2017-2020    
@@ -216,7 +216,7 @@ happened (**`finalized #0 (0x0ded…9b9d)`**). Substrate nodes require a restart
 GRANDPA key. Kill your nodes and restart them with the same commands you used previously. Now blocks
 should be finalized.
 
-```
+```bash
 Sep 24 13:37:33.863  INFO Substrate Node    
 Sep 24 13:37:33.864  INFO ✌️  version 2.0.0-24da767-x86_64-linux-gnu    
 Sep 24 13:37:33.864  INFO ❤️  by Substrate DevHub <https://github.com/substrate-developer-hub>, 2017-2020    

diff --git a/docs/tutorials/start-a-private-network/customspec.md b/docs/tutorials/start-a-private-network/customspec.md
@@ -80,7 +80,7 @@ All we need to do is change the authority addresses listed (currently Alice and
 addresses that we generated in the previous step. The **sr25519** addresses go in the **aura**
 section, and the **ed25519** addresses in the **grandpa** section. You may add as many validators as
 you like. For additional context, read about
-[keys in Substrate](https://substrate.dev/docs/en/knowledgebase/advanced/cryptography#public-key-cryptography).
+[keys in Substrate](../../knowledgebase/advanced/cryptography.md#public-key-cryptography).
 
 > Validators should not share the same keys, even for learning purposes. If two validators have the
 > same keys, they will produce conflicting blocks.

diff --git a/website/core/Footer.js b/website/core/Footer.js
@@ -16,10 +16,16 @@
 
 const React = require("react");
 
+const translate = require('docusaurus/lib/server/translate').translate;
+
+// note: The <translate>{string}</translate> in this file need to be manually added in
+//   `website/data/custom-translation-strings.json`. `yarn write-translations` doesn't cover
+//   them. Ref: https://docusaurus.io/docs/en/translation#custom-translation-strings
+
 class Blast extends React.Component {
   render() {
-    // FIXME: Doccusaurus v1 doesn't allow  for themes or customisation yet
-    // so we have to inline some styles to move our element to top
+    // note: Doccusaurus v1 doesn't allow for themes or customisation yet
+    //   so we have to inline some styles to move our element to top
     let cfg = this.props.config;
     return (
       <div>
@@ -112,67 +118,84 @@ class Footer extends React.Component {
             )}
           </a>
           <div>
-            <h5>Developer Hub</h5>
+            <h5><translate>Developer Hub</translate></h5>
             <a href={this.pageUrl("tutorials", this.props.language)}>
-              Tutorials
+              <translate>Tutorials</translate>
             </a>
             <a href={'/docs/' + this.props.language + '/'}>
-              Knowledge Base
+              <translate>Knowledge Base</translate>
+            </a>
+            <a href="https://substrate.dev/recipes/">
+              <translate>Recipes</translate>
+            </a>
+            <a href="https://substrate.dev/rustdocs">
+              <translate>API Reference</translate>
             </a>
-            <a href="https://substrate.dev/recipes/">Recipes</a>
-            <a href="https://substrate.dev/rustdocs">API Reference</a>
           </div>
           <div>
-            <h5>Community</h5>
-            <a href={this.pageUrl("community", this.props.language)}>Community Home</a>
-            <a href={this.pageUrl("newsletter", this.props.language)}>Newsletter</a>
+            <h5><translate>Community</translate></h5>
+            <a href={this.pageUrl("community", this.props.language)}>
+              <translate>Community Home</translate></a>
+            <a href={this.pageUrl("newsletter", this.props.language)}>
+              <translate>Newsletter</translate>
+            </a>
             <a href="https://app.element.io/#/room/!HzySYSaIhtyWrwiwEV:matrix.org">
-              Substrate Technical Chat
+              <translate>Substrate Technical Chat</translate>
+            </a>
+            <a href={this.pageUrl("seminar", this.props.language)}>
+              <translate>Substrate Seminar</translate>
             </a>
-            <a href={this.pageUrl("seminar", this.props.language)}>Substrate Seminar</a>
             <a
               href="http://stackoverflow.com/questions/tagged/substrate"
               target="_blank"
               rel="noreferrer noopener"
             >
-              Stack Overflow
+              <translate>Stack Overflow</translate>
             </a>
             <a
               href="https://twitter.com/ParityTech"
               target="_blank"
               rel="noreferrer noopener"
             >
-              Twitter
+              <translate>Twitter</translate>
             </a>
             <a
               href="https://www.meetup.com/parity/"
               target="_blank"
               rel="noreferrer noopener"
             >
-              Events
+              <translate>Events</translate>
             </a>
           </div>
           <div>
-            <h5>More</h5>
-            <a href="https://www.substrate.io/builders-program/">Substrate Builders Program</a>
+            <h5><translate>More</translate></h5>
+            <a href="https://www.substrate.io/builders-program/">
+              <translate>Substrate Builders Program</translate>
+            </a>
             <a href="https://www.parity.io/blog/">Blog</a>
             <a href="https://github.com/paritytech/substrate">
-              Substrate GitHub
+              <translate>Substrate GitHub</translate>
             </a>
             <a href="https://github.com/substrate-developer-hub/">
-              Developer Hub GitHub
+              <translate>Developer Hub GitHub</translate>
+            </a>
+            <a href="https://www.parity.io/privacy/">
+              <translate>Privacy Policy</translate>
+            </a>
+            <a href="/terms">
+              <translate>Terms of Use</translate>
             </a>
-            <a href="https://www.parity.io/privacy/">Privacy Policy</a>
-            <a href="/terms">Terms of Use</a>
             <a href="#" id="cookie-settings">
-              Cookie Settings
+              <translate>Cookie Settings</translate>
+
               {/* Script for cookie settings pop-up. */}
               <script dangerouslySetInnerHTML={{ __html: `
                 var cookieSettings = document.getElementById('cookie-settings');
                 cookieSettings.onclick = function() {
                   return klaro.show();
                 };
-              ` }}></script>
+              ` }}>
+              </script>
             </a>
           </div>
         </section>

diff --git a/website/core/FullSplash.js b/website/core/FullSplash.js
@@ -60,7 +60,6 @@ class HomeSplash extends React.Component {
 
     return (
       <SplashContainer>
-
         <div className="inner">
           <ProjectTitle siteConfig={siteConfig} />
           <PromoSection>

diff --git a/website/core/HomeSplash.js b/website/core/HomeSplash.js
@@ -20,73 +20,73 @@ const Container = require('react-bootstrap/Container')
 const Button = require('react-bootstrap/Button')
 
 class HomeSplash extends React.Component {
-	render() {
-		const { siteConfig } = this.props
+  render() {
+    const { siteConfig } = this.props
 
-		const SplashContainer = props => (
-			<div
-				className={`homeContainer heroImage pt-${this.props.padding} pb-${this.props.padding}`}
-				id={props.id ? props.id : ''}>
-				<div className='homeSplashFade'>
-					<div className='wrapper homeWrapper'>{props.children}</div>
-				</div>
-			</div>
-		)
+    const SplashContainer = props => (
+      <div
+        className={`homeContainer heroImage pt-${this.props.padding} pb-${this.props.padding}`}
+        id={props.id ? props.id : ''}>
+        <div className='homeSplashFade'>
+          <div className='wrapper homeWrapper'>{props.children}</div>
+        </div>
+      </div>
+    )
 
-		const ProjectTitle = props => (
-			<Container>
-				<h1 className='projectTitle'>{this.props.title}</h1>
-				<p className='lead text-muted'>{this.props.tagline}</p>
-				{this.props.description && (
-					<section>
-						<span className='description'>{this.props.description}</span>
-					</section>
-				)}
-				{this.props.buttonUrl && (
-					<Button
-						variant='secondary'
-						href={this.props.buttonUrl}
-						className='m-1 primary-color btn-lg'>
-						{this.props.buttonText}
-					</Button>
-				)}
-			</Container>
-		)
+    const ProjectTitle = props => (
+      <Container>
+        <h1 className='projectTitle'>{this.props.title}</h1>
+        <p className='lead text-muted'>{this.props.tagline}</p>
+        {this.props.description && (
+          <section>
+            <span className='description'>{this.props.description}</span>
+          </section>
+        )}
+        {this.props.buttonUrl && (
+          <Button
+            variant='secondary'
+            href={this.props.buttonUrl}
+            className='m-1 primary-color btn-lg'>
+            {this.props.buttonText}
+          </Button>
+        )}
+      </Container>
+    )
 
-		const PromoSection = props => (
-			<div className='section promoSection'>
-				<div className='promoRow'>
-					<div className='pluginRowBlock'>{props.children}</div>
-				</div>
-			</div>
-		)
+    const PromoSection = props => (
+      <div className='section promoSection'>
+        <div className='promoRow'>
+          <div className='pluginRowBlock'>{props.children}</div>
+        </div>
+      </div>
+    )
 
-		return (
-			<SplashContainer {...this.props}>
-				<div className='inner'>
-					<ProjectTitle siteConfig={siteConfig} />
-					<PromoSection>
-						{this.props.buttons ? (
-							this.props.buttons.map((button, index) => {
-								return (
-									<Button
-										key={index}
-										size='lg'
-										variant='secondary'
-										href={button.href}
-										className={`mr-2` + (index == 0 ? ` primary-color` : ``)}>
-										{button.name}
-									</Button>
-								)
-							})
-						) : (
-							''
-						)}
-					</PromoSection>
-				</div>
-			</SplashContainer>
-		)
-	}
+    return (
+      <SplashContainer {...this.props}>
+        <div className='inner'>
+          <ProjectTitle siteConfig={siteConfig} />
+          <PromoSection>
+            {this.props.buttons ? (
+              this.props.buttons.map((button, index) => {
+                return (
+                  <Button
+                    key={index}
+                    size='lg'
+                    variant='secondary'
+                    href={button.href}
+                    className={`mr-2` + (index == 0 ? ` primary-color` : ``)}>
+                    {button.name}
+                  </Button>
+                )
+              })
+            ) : (
+              ''
+            )}
+          </PromoSection>
+        </div>
+      </SplashContainer>
+    )
+  }
 }
 
 module.exports = HomeSplash
diff --git a/website/data/custom-translation-strings.json b/website/data/custom-translation-strings.json
@@ -0,0 +1,26 @@
+{
+  "_comment": "This file is used to provide custom strings for translations, including overriding defaults",
+  "localized-strings": {},
+  "pages-strings": {
+    "Developer Hub|no description given": "Developer Hub",
+    "Tutorials|no description given": "Tutorials",
+    "Knowledge Base|no description given": "Knowledge Base",
+    "Recipes|no description given": "Recipes",
+    "API Reference|no description given": "API Reference",
+    "Community|no description given": "Community",
+    "Community Home|no description given": "Community Home",
+    "Newsletter|no description given": "Newsletter",
+    "Substrate Technical Chat|no description given": "Substrate Technical Chat",
+    "Substrate Seminar|no description given": "Substrate Seminar",
+    "Stack Overflow|no description given": "Stack Overflow",
+    "Twitter|no description given": "Twitter",
+    "Events|no description given": "Events",
+    "More|no description given": "More",
+    "Substrate Builders Program|no description given": "Substrate Builders Program",
+    "Substrate GitHub|no description given": "Substrate GitHub",
+    "Developer Hub GitHub|no description given": "Developer Hub GitHub",
+    "Privacy Policy|no description given": "Privacy Policy",
+    "Terms of Use|no description given": "Terms of Use",
+    "Cookie Settings|no description given": "Cookie Settings"
+  }
+}