From da0901d16b7896df6786ad9935a37cb0bbeb7966 Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sun, 4 Mar 2018 20:59:48 +0100
Subject: [PATCH] chore: update website front-end with translate support

---
 website/i18n/en.json      | 27 +++++++++++++-
 website/pages/en/help.js  | 25 ++++++++-----
 website/pages/en/index.js | 76 ++++++++++++++++++++++++++++-----------
 website/pages/en/users.js | 23 +++++++++---
 4 files changed, 118 insertions(+), 33 deletions(-)

diff --git a/website/i18n/en.json b/website/i18n/en.json
index 007a42708..c6873c4e0 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -12,7 +12,6 @@
     "contributing": "Contributing Verdaccio",
     "dev-plugins": "Developing Plugins",
     "docker": "Docker",
-    "home": "Verdaccio npm proxy private registry",
     "iss-server": "Installing on IIS server",
     "installation": "Installation",
     "kubernetes": "Kubernetes",
@@ -52,6 +51,32 @@
     "Stay up to date|no description given": "Stay up to date",
     "Need help?|no description given": "Need help?",
     "This project is maintained by a dedicated group of people.|statement made to reader": "This project is maintained by a dedicated group of people.",
+    "Learn more about Verdaccio using the [documentation on this site.](/docs/en/installation.html)|no description given": "Learn more about Verdaccio using the [documentation on this site.](/docs/en/installation.html)",
+    "You can follow and contact us on|no description given": "You can follow and contact us on",
+    "If the documentation is not enough help, you can try browsing into our|no description given": "If the documentation is not enough help, you can try browsing into our",
+    "and also you can chat with the Verdaccio community at|no description given": "and also you can chat with the Verdaccio community at",
+    "More Help?|no description given": "More Help?",
+    "This project is maintained by the Verdaccio community.|no description given": "This project is maintained by the Verdaccio community.",
+    "Documentation|no description given": "Documentation",
+    "Contribute|no description given": "Contribute",
+    "Easy to Install|no description given": "Easy to Install",
+    "Easy to Set Up|no description given": "Easy to Set Up",
+    "Easy to Use|no description given": "Easy to Use",
+    "That’s it ! Enjoy your private package manager.|no description given": "That’s it ! Enjoy your private package manager.",
+    "**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.|no description given": "**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.",
+    "The most popular npm clients are supported|no description given": "The most popular npm clients are supported",
+    "We have an official **Docker** image ready to use|no description given": "We have an official **Docker** image ready to use",
+    "and **Kubernetes Helm** support for easy deployment|no description given": "and **Kubernetes Helm** support for easy deployment",
+    "Making the DevOps work easy|no description given": "Making the DevOps work easy",
+    "Verdaccio is plugin based, authentication, middleware and storage support. Just pick one or create your custom one.|no description given": "Verdaccio is plugin based, authentication, middleware and storage support. Just pick one or create your custom one.",
+    "Plugin Support|no description given": "Plugin Support",
+    "Who's Using This?|no description given": "Who's Using This?",
+    "This project is used by all these people|no description given": "This project is used by all these people",
+    "More|no description given": "More",
+    "Users|no description given": "Users",
+    "This project is used by many folks|no description given": "This project is used by many folks",
+    "Are you using this project? Do not be shy and add your company/project logo.|no description given": "Are you using this project? Do not be shy and add your company/project logo.",
+    "Add your company|no description given": "Add your company",
     "Help Translate|recruit community translators for your project": "Help Translate",
     "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
     "Translate this Doc|recruitment message asking to translate the docs": "Translate"
diff --git a/website/pages/en/help.js b/website/pages/en/help.js
index 8e94c1588..f36f3079c 100755
--- a/website/pages/en/help.js
+++ b/website/pages/en/help.js
@@ -7,6 +7,7 @@
 
 const React = require('react');
 
+const translate = require("../../server/translate.js").translate;
 const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
@@ -18,18 +19,18 @@ class Help extends React.Component {
     const supportLinks = [
       {
         content:
-          'Learn more about Verdaccio using the [documentation on this site.](/docs/en/installation.html)',
-        title: 'Browse Docs',
+          <translate>Learn more about Verdaccio using the [documentation on this site.](/docs/en/installation.html)</translate>,
+        title: <translate>Browse Docs</translate>,
       },
       {
-        content: 'You can follow and contact us on [Twitter](https://twitter.com/verdaccio_npm).',
+        content: <translate>You can follow and contact us on</translate> + '[Twitter](https://twitter.com/verdaccio_npm).',
         title: 'Twitter',
       },
       {
-        content: "If the documentation is not enough help, you can try browsing into our " +
+        content: <translate>If the documentation is not enough help, you can try browsing into our</translate> +
         "[Question Database](https://github.com/verdaccio/verdaccio/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aquestion+) " +
-        "and also you can chat with the Verdaccio community in [Gitter](https://gitter.im/verdaccio/).",
-        title: 'More Help?',
+        <translate>and also you can chat with the Verdaccio community at</translate> + "[Gitter](https://gitter.im/verdaccio/).",
+        title: <translate>More Help?</translate>,
       },
     ];
 
@@ -38,9 +39,17 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2>Need help?</h2>
+              <h2>
+                <translate>
+                  Need help?
+                </translate>
+              </h2>
             </header>
-            <p>This project is maintained by the Verdaccio community.</p>
+            <p>
+              <translate>
+                This project is maintained by the Verdaccio community.
+              </translate>
+            </p>
             <GridBlock contents={supportLinks} layout="threeColumn" />
           </div>
         </Container>
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 941b9fe2a..905f3a5f8 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -8,6 +8,8 @@
 const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
+const translate = require("../../server/translate.js").translate;
+const translation = require('../../server/translation.js');
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
@@ -39,8 +41,12 @@ class HomeSplash extends React.Component {
             <div className="inner">
               <h2 className="projectTitle">
               <img title={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
-
-                <small>{siteConfig.tagline}</small>
+                <small>
+                  {
+                    translation[this.props.language]['localized-strings']
+                      .tagline
+                  }
+                </small>
               </h2>
               <div className="section promoSection">
                 <div className="promoRow">
@@ -53,7 +59,9 @@ class HomeSplash extends React.Component {
                         this.props.language +
                         '/installation.html'
                       }>
-                      Documentation
+                      <translate>
+                        Documentation
+                      </translate>
                     </Button>
                     <Button
                       href={
@@ -62,11 +70,26 @@ class HomeSplash extends React.Component {
                         this.props.language +
                         '/contributing.html'
                       }>
-                      Contribute
+                      <translate>
+                        Contribute
+                      </translate>
                     </Button>
                   </div>
                 </div>
               </div>
+              <div className="githubButton" style={{minHeight: '20px'}}>
+                <a
+                  className="github-button"
+                  href={siteConfig.repoUrl}
+                  data-icon="octicon-star"
+                  data-count-href="/verdaccio/verdaccio/stargazers"
+                  data-show-count={true}
+                  data-count-aria-label="# stargazers on GitHub"
+                  aria-label="Star verdaccio/verdaccio on GitHub"
+                >
+                  Star
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -103,14 +126,14 @@ class Index extends React.Component {
                   '$> npm install --global verdaccio \n' +
                   '$> yarn global add verdaccio\n' +
                   '```',
-                  title: 'Easy to Install',
+                  title: <translate>Easy to Install</translate>,
                 },
                 {
                   content: '```bash\n' +
                   '$> npm set registry http://localhost:4873 \n' +
                   '$> npm adduser --registry http://localhost:4873\n' +
                   '```',
-                  title: 'Easy to Set Up',
+                  title: <translate>Easy to Set Up</translate>,
                 }
               ]}
               layout="fourColumn"
@@ -120,7 +143,11 @@ class Index extends React.Component {
           <div
             className="productShowcaseSection paddingBottom"
             style={{textAlign: 'center'}}>
-            <h2>Easy to Use</h2>
+            <h2>
+              <translate>
+                Easy to Use
+              </translate>
+            </h2>
             <MarkdownBlock>
               ```bash&#8232;
                 $> verdaccio &#8232;
@@ -129,7 +156,9 @@ class Index extends React.Component {
               ```
             </MarkdownBlock>
             <h2>
-              That’s it ! Enjoy your private package manager.
+              <translate>
+                That’s it ! Enjoy your private package manager.
+              </translate>
             </h2>
           </div>
 
@@ -137,11 +166,11 @@ class Index extends React.Component {
             <GridBlock
               contents={[
                 {
-                  content: '**npm**, **yarn** and **pnpm** are part of any development workflow,' +
-                  ' we try to catch up with the latest updates.',
+                  content: <translate>**npm**, **yarn** and **pnpm** are part of any development workflow
+                    we try to catch up with the latest updates.</translate>,
                   image: siteConfig.baseUrl + 'img/package_managers_grey.png',
                   imageAlign: 'right',
-                  title: 'The most popular npm clients are supported',
+                  title: <translate>The most popular npm clients are supported</translate>,
                 },
               ]}
             />
@@ -151,17 +180,17 @@ class Index extends React.Component {
             <GridBlock
               contents={[
                 {
-                  content: 'We have an official **Docker** image ready to use &#8232;\n' +
+                  content: <translate>We have an official **Docker** image ready to use</translate> + '&#8232;\n' +
                   '```bash\n' +
                   'docker pull verdaccio/verdaccio\n' +
                   '```' +
-                  '\n and **Kubernetes Helm** support for easy deployment \n '+
+                  '\n' +  <translate>and **Kubernetes Helm** support for easy deployment</translate> + '\n '+
                   '```bash\n' +
                   'helm install --name npm stable/verdaccio\n' +
                   '```\n',
                   image: siteConfig.baseUrl + 'img/devops_support_grey.png',
                   imageAlign: 'left',
-                  title: 'Making the DevOps work easy',
+                  title: <translate>Making the DevOps work easy</translate>,
                 },
               ]}
             />
@@ -172,19 +201,26 @@ class Index extends React.Component {
               contents={[
                 {
                   content:
-                    'Verdaccio is plugin based, authentication, middleware and storage support. ' +
-                    'Just pick one or create your custom one.',
+                    <translate>Verdaccio is plugin based, authentication, middleware and storage support. Just pick one or create your custom one.</translate>,
                   image: siteConfig.baseUrl + 'img/verdaccio-tiny@3x.png',
                   imageAlign: 'right',
-                  title: 'Plugin Support',
+                  title: <translate>Plugin Support</translate>,
                 },
               ]}
             />
           </Container>
 
           <div className="productShowcaseSection paddingBottom">
-            <h2>{"Who's Using This?"}</h2>
-            <p>This project is used by all these people</p>
+            <h2>
+              <translate>
+                Who's Using This?
+              </translate>
+            </h2>
+            <p>
+              <translate>
+                This project is used by all these people
+              </translate>
+            </p>
             <div className="logos">{showcase}</div>
             <div className="more-users">
               <a
@@ -192,7 +228,7 @@ class Index extends React.Component {
                 href={
                   siteConfig.baseUrl + this.props.language + '/' + 'users.html'
                 }>
-                More {siteConfig.title} Users
+                <translate>More</translate> {siteConfig.title} <translate>Users</translate>
               </a>
             </div>
           </div>
diff --git a/website/pages/en/users.js b/website/pages/en/users.js
index 6c367bdbb..111454987 100644
--- a/website/pages/en/users.js
+++ b/website/pages/en/users.js
@@ -9,6 +9,7 @@ const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
+const translate = require("../../server/translate.js").translate;
 
 const siteConfig = require(process.cwd() + '/siteConfig.js');
 
@@ -27,15 +28,29 @@ class Users extends React.Component {
         <Container padding={['bottom', 'top']}>
           <div className="showcaseSection">
             <div className="prose">
-              <h1>Who's Using This?</h1>
-              <p>This project is used by many folks</p>
+              <h1>
+                <translate>
+                  Who's Using This?
+                </translate>
+              </h1>
+              <p>
+                <translate>
+                  This project is used by many folks
+                </translate>
+              </p>
             </div>
             <div className="logos">{showcase}</div>
-            <p>Are you using this project? Do not be shy and add your company/project logo.</p>
+            <p>
+              <translate>
+                Are you using this project? Do not be shy and add your company/project logo.
+              </translate>
+            </p>
             <a
               href="https://github.com/verdaccio/verdaccio/edit/master/website/siteConfig.js"
               className="button">
-              Add your company
+              <translate>
+                Add your company
+              </translate>
             </a>
           </div>
         </Container>