#129: erros with i18n

koinos · Nov 21, 2024 · 2135f1c · 2135f1c
1 parent 245b176
commit 2135f1c
Show file tree

Hide file tree

Showing 13 changed files with 311 additions and 49 deletions.
diff --git a/components/layout/Menu.js b/components/layout/Menu.js
@@ -1,37 +1,37 @@
 import Link from "next/link"
 import { useRouter } from "next/router"
+import { useTranslations } from 'next-intl'
 
 export default function Menu() {
-  const router = useRouter();
+  const router = useRouter()
+  const t = useTranslations('Menu')
 
   return (
     <>
-
       <ul className="wsmenu-list nav-theme">
-
         <li aria-haspopup="true">
-          <Link href="#" className="h-link">Learn<span className="wsarrow" /></Link>
+          <Link href="#" className="h-link">{t('learn')}<span className="wsarrow" /></Link>
           <ul className="sub-menu">
-            <li aria-haspopup="true"><Link href="/whitepaper">Whitepaper</Link></li>
-            <li aria-haspopup="true"><Link href="/#features">Features</Link></li>
-            <li aria-haspopup="true"><Link href="/faqs">FAQs</Link></li>
+            <li aria-haspopup="true"><Link href="/whitepaper">{t('whitepaper')}</Link></li>
+            <li aria-haspopup="true"><Link href="/#features">{t('features')}</Link></li>
+            <li aria-haspopup="true"><Link href="/faqs">{t('faqs')}</Link></li>
           </ul>
         </li>
 
         <li className="nl-simple" aria-haspopup="true">
-          <Link href="https://docs.koinos.io" className="h-link">Documentation</Link>
+          <Link href="https://docs.koinos.io" className="h-link">{t('documentation')}</Link>
         </li>
 
         <li className="nl-simple" aria-haspopup="true">
-          <Link href="/ecosystem" className="h-link">Ecosystem</Link>
+          <Link href="/ecosystem" className="h-link">{t('ecosystem')}</Link>
         </li>
 
         <li className="nl-simple" aria-haspopup="true">
-          <Link href="/#roadmap" className="h-link">Roadmap</Link>
+          <Link href="/#roadmap" className="h-link">{t('roadmap')}</Link>
         </li>
 
         <li className="nl-simple" aria-haspopup="true">
-          <Link href="/team" className="h-link">Team</Link>
+          <Link href="/team" className="h-link">{t('team')}</Link>
         </li>
 
         <li className="nl-simple" aria-haspopup="true">
@@ -42,6 +42,18 @@ export default function Menu() {
             </a>
           </Link>
         </li>
+
+        <li className="nl-simple" aria-haspopup="true">
+          <div className="language-switcher">
+            <Link href={router.asPath} locale="en" className={router.locale === 'en' ? 'active' : ''}>
+              EN
+            </Link>
+            {' | '}
+            <Link href={router.asPath} locale="es" className={router.locale === 'es' ? 'active' : ''}>
+              ES
+            </Link>
+          </div>
+        </li>
       </ul>
     </>
   )

diff --git a/components/sections/FeatureEcosystem.js b/components/sections/FeatureEcosystem.js
@@ -1,6 +1,9 @@
 import { useRef, useEffect } from "react";
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 export default function FeatureEcosystem() {
+  const t = useTranslations('FeatureEcosystem');
 
   return (
     <>
@@ -28,8 +31,10 @@ export default function FeatureEcosystem() {
                       </div>	{/* End Icon */}
                       {/* Text */}
                       <div className="fbox-txt">
-                        <h5 className="s-19 w-700">Kollection</h5>
-                        <p><a href="https://kollection.app">Kollection</a> is a full featured NFT marketplace that allows creators to launch and sell their products.</p>
+                        <h5 className="s-19 w-700">{t('projects.kollection.title')}</h5>
+                        <p>{t.rich('projects.kollection.description', {
+                          kollectionLink: (chunks) => <a href="https://kollection.app">Kollection</a>
+                        })}</p>
                       </div>
                     </div>
                     {/* FEATURE BOX #2 */}
@@ -38,7 +43,6 @@ export default function FeatureEcosystem() {
                       <div className="fbox-ico ico-50">
                         <div className="shape-ico color--theme">
                           {/* Vector Icon */}
-                          {/*<span className="flaticon-tutorial" />*/}
                           <img src="images/pages/ecosystem/koindx.png" />
                           {/* Shape */}
                           <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
@@ -48,8 +52,10 @@ export default function FeatureEcosystem() {
                       </div>	{/* End Icon */}
                       {/* Text */}
                       <div className="fbox-txt">
-                        <h5 className="s-19 w-700">KoinDX</h5>
-                        <p><a href="https://koindx.com">KoinDX</a> is the world's first decentralized exchange built on the Koinos blockchain.</p>
+                        <h5 className="s-19 w-700">{t('projects.koindx.title')}</h5>
+                        <p>{t.rich('projects.koindx.description', {
+                          koindxLink: (chunks) => <a href="https://koindx.com">KoinDX</a>
+                        })}</p>
                       </div>
                     </div>
                   </div>
@@ -70,8 +76,10 @@ export default function FeatureEcosystem() {
                       </div>	{/* End Icon */}
                       {/* Text */}
                       <div className="fbox-txt">
-                        <h5 className="s-19 w-700">Koiner</h5>
-                        <p><a href="https://koiner.app">Koiner</a> is the Koinos' community favorite block explorer giving users insights into chain statistics.</p>
+                        <h5 className="s-19 w-700">{t('projects.koiner.title')}</h5>
+                        <p>{t.rich('projects.koiner.description', {
+                          koinerLink: (chunks) => <a href="https://koiner.app">{chunks}</a>
+                        })}</p>
                       </div>
                     </div>
                     {/* FEATURE BOX #4 */}
@@ -90,8 +98,10 @@ export default function FeatureEcosystem() {
                       </div>	{/* End Icon */}
                       {/* Text */}
                       <div className="fbox-txt">
-                        <h5 className="s-19 w-700">KoinCity</h5>
-                        <p><a href="https://koincity.com">KoinCity</a> is a token launchpad with features including staking and social interaction.</p>
+                        <h5 className="s-19 w-700">{t('projects.koincity.title')}</h5>
+                        <p>{t.rich('projects.koincity.description', {
+                          koincityLink: (chunks) => <a href="https://koincity.com">KoinCity</a>
+                        })}</p>
                       </div>
                     </div>
                   </div>
@@ -102,21 +112,20 @@ export default function FeatureEcosystem() {
             <div className="col-md-5 order-first order-md-2">
               <div className="txt-block left-column wow" data-aos='fade-right'>
                 {/* Section ID */}
-                <span className="section-id">Ecosystem Highlights</span>
+                <span className="section-id">{t('sectionId')}</span>
                 {/* Title */}
-                <h2 className="s-44 w-700">An Ever-Evolving Ecosystem</h2>
+                <h2 className="s-44 w-700">{t('title')}</h2>
                 {/* Text */}
-                <p>With new and innovative dApps popping up every week, Koinos facilitates a bright future for Web3. Check out the <a href="/ecosystem">ecosystem</a> page to learn about more great projects.
-                </p>
+                <p>{t.rich('description', {
+                  ecosystemLink: (chunk) => <Link href="/ecosystem">ecosystem</Link>
+                })}</p>
                 {/* List */}
                 <ul className="simple-list">
                   <li className="list-item">
-                    <p>Onboard new users with free accounts and allow them to interact with your dApp without cryptocurrency
-                    </p>
+                    <p>{t('benefits.item1')}</p>
                   </li>
                   <li className="list-item">
-                    <p className="mb-0">Tap into the community to bootstrap your ideas and bring them to fruition
-                    </p>
+                    <p className="mb-0">{t('benefits.item2')}</p>
                   </li>
                 </ul>
               </div>

diff --git a/components/sections/KoinosHero.js b/components/sections/KoinosHero.js
@@ -1,9 +1,8 @@
 import Link from "next/link";
+import { useTranslations } from 'next-intl';
 
 export default function KoinosHero() {
-  const title1 = "Web3 for Everyone";
-  const title2 = "Frictionless, Simple, Powerful";
-  const subtle = "Koinos is engineered to deliver a user experience for everyday people.";
+  const t = useTranslations('Hero');
 
 
   return (
@@ -18,37 +17,28 @@ export default function KoinosHero() {
                 <div className="hero-27-txt wow" data-aos='fade-down'>
                   {/* Title */}
                   <div className="hero-titles">
-                    <h2 className="s-50 w-700 mb-2">{title1}</h2>
-                    <h2 className="s-40 w-700 mb-4">{title2}</h2>
+                    <h2 className="s-50 w-700 mb-2">{t('title1')}</h2>
+                    <h2 className="s-40 w-700 mb-4">{t('title2')}</h2>
                   </div>
                   {/* Text */}
-                  <p className="s-20 mb-4">{subtle}</p>
+                  <p className="s-20 mb-4">{t('subtitle')}</p>
                   {/* Buttons */}
                   <div className="btns-group hero-btns">
                     <Link
                       href="https://telegram.koinos.io/"
                       target="_blank"
                       className="btn r-04 btn--theme btn--primary"
                     >
-                      Join Telegram{" "}<i className="fa-brands fa-telegram fa-lg" />
+                      {t('buttons.telegram')}{" "}<i className="fa-brands fa-telegram fa-lg" />
                     </Link>
                     <Link
                       href="https://docs.koinos.io/"
                       target="_blank"
                       className="btn r-04 btn--theme btn--secondary"
                     >
-                      Build on Koinos{" "}<i className="fa-solid fa-code fa-lg" />
+                      {t('buttons.build')}{" "}<i className="fa-solid fa-code fa-lg" />
                     </Link>
                   </div>
-                  {/* 
-                                    <ul className="advantages ico-15 mt-25 clearfix">
-                                        <li><p>No credit card required</p></li>
-                                        <li className="advantages-links-divider"><p><span className="flaticon-minus" /></p></li>
-                                        <li><p>Cancel at anytime</p></li>
-                                        <li className="advantages-links-divider"><p><span className="flaticon-minus" /></p></li>
-                                        <li><p>Free 14 days trial</p></li>
-                                    </ul>
-                                     */}
                 </div>
               </div>
             </div>{" "}

diff --git a/i18n/request.js b/i18n/request.js
@@ -0,0 +1,3 @@
+export default async function getMessages(locale) {
+    return (await import(`../messages/${locale}.json`)).default;
+  }
diff --git a/messages/en.json b/messages/en.json
@@ -0,0 +1,49 @@
+{
+  "Menu": {
+    "learn": "Learn",
+    "whitepaper": "Whitepaper",
+    "features": "Features",
+    "faqs": "FAQs",
+    "documentation": "Documentation",
+    "ecosystem": "Ecosystem",
+    "roadmap": "Roadmap",
+    "team": "Team"
+  },
+  "Hero": {
+    "title1": "Web3 for Everyone",
+    "title2": "Frictionless, Simple, Powerful",
+    "subtitle": "Koinos is engineered to deliver a user experience for everyday people.",
+    "buttons": {
+      "telegram": "Join Telegram",
+      "build": "Build on Koinos"
+    }
+  },
+  "FeatureEcosystem": {
+    "sectionId": "Ecosystem Highlights",
+    "title": "An Ever-Evolving Ecosystem",
+    "description": "With new and innovative dApps popping up every week, Koinos facilitates a bright future for Web3. Check out the <ecosystemLink>ecosystem</ecosystemLink> page to learn about more great projects.",
+    "ecosystemLink": "ecosystem",
+    "benefits": {
+      "item1": "Onboard new users with free accounts and allow them to interact with your dApp without cryptocurrency",
+      "item2": "Tap into the community to bootstrap your ideas and bring them to fruition"
+    },
+    "projects": {
+      "kollection": {
+        "title": "Kollection",
+        "description": "<kollectionLink>Kollection</kollectionLink> is a full featured NFT marketplace that allows creators to launch and sell their products."
+      },
+      "koindx": {
+        "title": "KoinDX",
+        "description": "<koindxLink>KoinDX</koindxLink> is the world's first decentralized exchange built on the Koinos blockchain."
+      },
+      "koiner": {
+        "title": "Koiner",
+        "description": "<koinerLink>Koiner</koinerLink> is the Koinos' community favorite block explorer giving users insights into chain statistics."
+      },
+      "koincity": {
+        "title": "KoinCity",
+        "description": "<koincityLink>KoinCity</koincityLink> is a token launchpad with features including staking and social interaction."
+      }
+    }
+  }
+}
diff --git a/messages/es.json b/messages/es.json
@@ -0,0 +1,49 @@
+{
+  "Menu": {
+    "learn": "Aprende",
+    "whitepaper": "Libro Blanco",
+    "features": "Características",
+    "faqs": "Preguntas Frecuentes",
+    "documentation": "Documentación",
+    "ecosystem": "Ecosistema",
+    "roadmap": "Hoja de Ruta",
+    "team": "Equipo"
+  },
+  "Hero": {
+    "title1": "Web3 para Todos",
+    "title2": "Sin Fricción, Simple, Potente",
+    "subtitle": "Koinos está diseñado para ofrecer una experiencia de usuario para personas comunes.",
+    "buttons": {
+      "telegram": "Únete a Telegram",
+      "build": "Construye en Koinos"
+    }
+  },
+  "FeatureEcosystem": {
+    "sectionId": "Destacados del Ecosistema",
+    "title": "Un Ecosistema en Constante Evolución",
+    "description": "Con nuevas e innovadoras dApps surgiendo cada semana, Koinos facilita un futuro brillante para Web3. Visita la página del <ecosystemLink>ecosistema</ecosystemLink> para conocer más proyectos increíbles.",
+    "ecosystemLink": "ecosistema",
+    "benefits": {
+      "item1": "Incorpora nuevos usuarios con cuentas gratuitas y permíteles interactuar con tu dApp sin criptomonedas",
+      "item2": "Aprovecha la comunidad para impulsar tus ideas y llevarlas a cabo"
+    },
+    "projects": {
+      "kollection": {
+        "title": "Kollection",
+        "description": "<kollectionLink>Kollection</kollectionLink> es un mercado NFT completo que permite a los creadores lanzar y vender sus productos."
+      },
+      "koindx": {
+        "title": "KoinDX",
+        "description": "<koindxLink>KoinDX</koindxLink> es el primer intercambio descentralizado construido en la blockchain de Koinos."
+      },
+      "koiner": {
+        "title": "Koiner",
+        "description": "<koinerLink>Koiner</koinerLink> es el explorador de bloques favorito de la comunidad Koinos que proporciona información sobre las estadísticas de la cadena."
+      },
+      "koincity": {
+        "title": "KoinCity",
+        "description": "<koincityLink>KoinCity</koincityLink> es una plataforma de lanzamiento de tokens con características que incluyen staking e interacción social."
+      }
+    }
+  }
+}
diff --git a/middleware.js b/middleware.js
@@ -0,0 +1,12 @@
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  locales: ['en', 'es'],
+  defaultLocale: 'en',
+  localePrefix: 'always',
+  timeZone: 'UTC'
+});
+
+export const config = {
+  matcher: ['/', '/(es|en)/:path*']
+}; 
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,13 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin('./i18n/request.js');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // i18n: {
+  //   locales: ['en', 'es'],
+  //   defaultLocale: 'en',
+  // },
   reactStrictMode: false,
   output: 'standalone',
   async headers() {
@@ -21,4 +29,4 @@ const nextConfig = {
   }
 }
 
-module.exports = nextConfig
+module.exports = withNextIntl(nextConfig);