chore: Adding home page and resources page translations

alstn2468 · Apr 14, 2021 · ee54104 · ee54104
1 parent 9eba04c
commit ee54104
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 22 deletions.
diff --git a/docs/i18n/fr/code.json b/docs/i18n/fr/code.json
@@ -1,4 +1,43 @@
 {
+  "homePage.head.tagline": {
+    "message": "Librairie de gestion d'état pour React"
+  },
+  "homePage.head.start": {
+    "message": "Commencer"
+  },
+  "homePage.minimal.title": {
+    "message": "Minimal et tout comme React"
+  },
+  "homePage.minimal.text": {
+    "message": "Recoil fonctionne et pense comme React. Ajoutez-le à votre application et obtenez un état partagé rapide et flexible."
+  },
+  "homePage.flow.title": {
+    "message": "Graphe de flux de données "
+  },
+  "homePage.flow.text": {
+    "message": "Données dérivées et requêtes asynchrones sont apprivoisées avec des fonctions pures et des un système d'abonnement efficace."
+  },
+  "homePage.cross.title": {
+    "message": "Observation inter-applications"
+  },
+  "homePage.cross.text": {
+    "message": "Implementez persistance, routage, débogage dans le temps ou retour arrière en observant tous les changements d'état dans votre application, sans nuire au fractionnement du code."
+  },
+  "resourcePage.head.title": {
+    "message": "Ressources Externes"
+  },
+  "resourcePage.learn.title": {
+    "message": "Apprendre Recoil"
+  },
+  "resourcePage.learn.course": {
+    "message": "a créé un cours vidéo Recoil gratuit (en anglais), qui vous emmène de la configuration à l'utilisation avancée. Dans le cours, vous apprendrez à tirer pleinement parti des APIs puissantes de Recoil."
+  },
+  "resourcePage.learn.more": {
+    "message": "Apprenez à récupérer des données avec Suspense, à utiliser Recoil pour résoudre les goulots d'étranglement courants de React, et bien plus encore."
+  },
+  "resourcePage.learn.watch": {
+    "message": "Regarder le cours"
+  },
   "theme.NotFound.title": {
     "message": "Page introuvable",
     "description": "The title of the 404 page"

diff --git a/docs/i18n/fr/docusaurus-theme-classic/navbar.json b/docs/i18n/fr/docusaurus-theme-classic/navbar.json
@@ -8,7 +8,7 @@
     "description": "Navbar item with label Blog"
   },
   "item.label.External Resources": {
-    "message": "Resources Externes",
+    "message": "Ressources Externes",
     "description": "Navbar item with label External Resources"
   },
   "item.label.GitHub": {

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -14,52 +14,53 @@ import useThemeContext from '@theme/hooks/useThemeContext';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import Translate from '@docusaurus/Translate';
 import styles from './styles.module.css';
 
 import WordMarkImaage from '../../static/img/wordmark.svg';
 
 const features = [
   {
-    title: <>Minimal and Reactish</>,
+    title: <Translate id="homePage.minimal.title">Minimal and Reactish</Translate>,
     imageUrl: 'img/icons/icon-reactish.svg',
     imageUrlDark: 'img/icons/icon-reactish--dark.svg',
     imageAlt: 'React logo.',
     description: (
-      <>
+      <Translate id="homePage.minimal.text">
         Recoil works and thinks like React. Add some to your app and get fast
         and flexible shared state.
-      </>
+      </Translate>
     ),
   },
   {
-    title: <>Data-Flow Graph</>,
+    title: <Translate id="homePage.flow.title">Data-Flow Graph</Translate>,
     imageUrl: 'img/icons/icon-functional.svg',
     imageUrlDark: 'img/icons/icon-functional--dark.svg',
     imageAlt: 'F at x, representing functional programming.',
     description: (
-      <>
+      <Translate id="homePage.flow.text">
         Derived data and asynchronous queries are tamed with pure functions and
         efficient subscriptions.
-      </>
+      </Translate>
     ),
   },
   {
-    title: <>Cross-App Observation</>,
+    title: <Translate id="homePage.cross.title">Cross-App Observation</Translate>,
     imageUrl: 'img/icons/icon-observation.svg',
     imageUrlDark: 'img/icons/icon-observation--dark.svg',
     imageAlt: 'Connected dots, representing observation of values from various points in an application.',
     description: (
-      <>
+      <Translate id="homePage.cross.text">
         Implement persistence, routing, time-travel debugging, or undo by
         observing all state changes across your app, without impairing
         code-splitting.
-      </>
+      </Translate>
     ),
   },
 ];
 
 function Feature({ feature: { imageUrl, imageUrlDark, imageAlt, title, description } }) {
-  const {isDarkTheme} = useThemeContext();
+  const { isDarkTheme } = useThemeContext();
   const resolvedImgUrl = useBaseUrl(isDarkTheme ? imageUrlDark : imageUrl);
   return (
     <div className={classnames('col col--4', styles.feature)}>
@@ -76,7 +77,7 @@ function Feature({ feature: { imageUrl, imageUrlDark, imageAlt, title, descripti
 
 function Home() {
   const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
+  const { siteConfig = {} } = context;
   return (
     <Layout description="A state management library for React.">
       <header className={classnames('hero hero--primary', styles.heroBanner)}>
@@ -85,15 +86,15 @@ function Home() {
             <WordMarkImaage width="200" />
             <div className={styles.hiddenText} aria-hidden="true">Recoil</div>
           </h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <p className="hero__subtitle"><Translate id="homePage.head.tagline">{siteConfig.tagline}</Translate></p>
           <div className={styles.buttons}>
             <Link
               className={classnames(
                 'hero__button button button--outline button--secondary button--lg',
                 styles.getStarted,
               )}
               to={useBaseUrl('docs/introduction/getting-started')}>
-              Get Started
+              <Translate id="homePage.head.start">Get Started</Translate>
             </Link>
           </div>
         </div>
@@ -117,7 +118,7 @@ function Home() {
           <div className="container">
             <div className="row">
               <div className="container">
-                <div className="row" style={{justifyContent: 'center'}}>
+                <div className="row" style={{ justifyContent: 'center' }}>
                   <iframe
                     width="560"
                     height="315"

diff --git a/docs/src/pages/resources.js b/docs/src/pages/resources.js
@@ -1,35 +1,36 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import Translate from '@docusaurus/Translate';
 
 function Resources() {
   return (
     <Layout title="External Resources">
       <div className="container margin-vert--lg">
         <div className="row">
           <div className="col col--8 col--offset-2 markdown">
-            <h1 className="margin-bottom--sm">External Resources</h1>
-            <h2>Learn Recoil</h2>
+            <h1 className="margin-bottom--sm"><Translate id="resourcePage.head.title">External Resources</Translate></h1>
+            <h2><Translate id="resourcePage.learn.title">Learn Recoil</Translate></h2>
             <p>
               <a
                 href="https://twitter.com/jacques_codes"
                 target="_blank"
                 rel="noopener noreferrer">
                 Jacques Blom
               </a>{' '}
-              has created a free Recoil video course, which takes you from setup
+              <Translate id="resourcePage.learn.course">has created a free Recoil video course, which takes you from setup
               to advanced usage. In the course you'll how to take full advantage
-              of Recoil's powerful APIs.
+              of Recoil's powerful APIs.</Translate>
             </p>
             <p>
-              Learn how to do data fetching with Suspense, how to use Recoil to
-              solve common React performance bottlenecks, and much more.
+              <Translate id="resourcePage.learn.more">Learn how to do data fetching with Suspense, how to use Recoil to
+              solve common React performance bottlenecks, and much more.</Translate>
             </p>
             <a
               className="button button--outline button--secondary button--lg"
               href="https://learnrecoil.com/?utm_source=docs&utm_medium=organic&utm_campaign=na"
               target="_blank"
               rel="noopener noreferrer">
-              Watch the course
+              <Translate id="resourcePage.learn.watch">Watch the course</Translate>
             </a>
           </div>
         </div>