Redireccionar URL de acuerdo al lenguaje

src/app/[lang]/components/NavbarCustom.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, useSelectedLayoutSegments } from 'next/navigation';
 import Link from 'next/link';
 import propTypes from 'prop-types';
 import Container from 'react-bootstrap/Container';
@@ -15,10 +15,10 @@ import { locales } from '@/utils/locale';
 const NavbarCustom = ({ lang }) => {
   const i18nDictionary = useI18n();
   const router = useRouter();
-  const pathname = usePathname();
+  const urlSegments = useSelectedLayoutSegments();
 
   const onChangeLocale = (locale) => {
-    router.replace(pathname, { locale });
+    router.replace(`/${locale}/${urlSegments.join('/')}`);
   };
 
   return (
@@ -54,16 +54,13 @@ const NavbarCustom = ({ lang }) => {
             </Nav.Link>
           </Nav>
           <Nav>
-            <NavDropdown
-              title={lang}
-              id="collapsible-nav-dropdown"
-              onChange={(e) => onChangeLocale(e.target.value)}>
+            <NavDropdown title={lang} id="collapsible-nav-dropdown" onSelect={onChangeLocale}>
               {locales.map(
                 (locale) =>
                   locale !== lang && (
-                    <Nav.Link as={Link} key={locale} href={`/${locale}`}>
+                    <NavDropdown.Item key={locale} eventKey={locale}>
                       {locale}
-                    </Nav.Link>
+                    </NavDropdown.Item>
                   )
               )}
             </NavDropdown>

src/app/[lang]/keynotes/[uniquepage]/page.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import speakerslist from '@/data/speakers.json';
+import talksList from '@/data/talks.json';
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
+export async function generateStaticParams() {
+  return speakerslist.map((p) => ({
+    uniquepage: p.id.toString()
+  }));
+}
+
+const Speaker = ({ params: { uniquepage, lang } }) => {
+  const speaker = speakerslist.find((p) => p.id.toString() === uniquepage);
+  let talks = [];
+
+  if (!speaker) {
+    console.info('speaker not found');
+    notFound();
+  } else {
+    talks = talksList.filter((talk) => talk.speakers.includes(speaker.id));
+  }
+
+  return (
+    <>
+      <Image src={Avatar} width={200} height={200} placeholder="blur" alt="Picture of the author" />
+      <h1>
+        {speaker.first_name} {speaker.last_name}
+      </h1>
+      <h2>{speaker.affiliation}</h2>
+      <h3>{speaker.country_residence}</h3>
+      <ul>
+        <li>
+          <Link href={speaker.facebook} target="_blank">
+            {speaker.facebook}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.twitter} target="_blank">
+            {speaker.twitter}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.linkedin} target="_blank">
+            {speaker.linkedin}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.github} target="_blank">
+            {speaker.github}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.website} target="_blank">
+            {speaker.website}
+          </Link>
+        </li>
+      </ul>
+      {speaker.biography ? <p>{speaker.biography[lang]}</p> : null}
+      <h3>Talks</h3>
+      {talks.map((talk) => (
+        <Link key={talk.id} href={`/talks/${talk.id}`} locale={lang}>
+          <h1>{talk.title[lang]}</h1>
+        </Link>
+      ))}
+    </>
+  );
+};
+
+Speaker.propTypes = {
+  params: propTypes.shape({
+    uniquepage: propTypes.string,
+    lang: propTypes.string
+  })
+};
+
+export default Speaker;

src/app/[lang]/keynotes/page.js

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Image from 'next/image';
+import Link from 'next/link';
+import speakerslist from '@/data/speakers.json';
+
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
+const Speakers = ({ params: { lang } }) => {
+  return (
+    <>
+      {speakerslist.map(
+        (speaker) =>
+          speaker.type === 'keynote' && (
+            <Row key={speaker.id}>
+              <Col md={4}>
+                <Link href={`/keynotes/${speaker.id}`} locale={lang}>
+                  <Image src={Avatar} width={200} height={200} alt="Picture of the author" />
+                </Link>
+              </Col>
+              <Col md={8}>
+                <Link href={`/keynotes/${speaker.id}`} locale={lang}>
+                  <h1>
+                    {speaker.first_name} {speaker.last_name}
+                  </h1>
+                  <h2>{speaker.affiliation}</h2>
+                </Link>
+                <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
+                  <span>{speaker.twitter}</span>
+                </Link>
+              </Col>
+            </Row>
+          )
+      )}
+    </>
+  );
+};
+
+Speakers.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default Speakers;

src/app/[lang]/layout.js

@@ -2,6 +2,9 @@
 
 import React, { useState, useEffect } from 'react';
 import props from 'prop-types';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 import NavbarCustom from '@/app/[lang]/components/NavbarCustom';
 import { I18nContext } from '@/contexts/I18nContext';
 
@@ -24,7 +27,13 @@ const Root = ({ children, params: { lang } }) => {
       <html lang={lang}>
         <body>
           <NavbarCustom lang={lang} />
-          {children}
+          <main>
+            <Container>
+              <Row className="justify-content-md-center">
+                <Col lg={10}>{children}</Col>
+              </Row>
+            </Container>
+          </main>
         </body>
       </html>
     </I18nContext.Provider>

src/app/[lang]/speakers/page.js

@@ -2,26 +2,41 @@
 
 import React from 'react';
 import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Image from 'next/image';
 import Link from 'next/link';
 import speakerslist from '@/data/speakers.json';
 
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
 const Speakers = ({ params: { lang } }) => {
   return (
-    <main>
-      {speakerslist.map((speaker) => (
-        <div key={speaker.id}>
-          <Link href={`./speakers/${speaker.id}`} locale={lang}>
-            <h1>
-              {speaker.first_name} {speaker.last_name}
-            </h1>
-            <h2>{speaker.affiliation}</h2>
-          </Link>
-          <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
-            <span>{speaker.twitter}</span>
-          </Link>
-        </div>
-      ))}
-    </main>
+    <>
+      {speakerslist.map(
+        (speaker) =>
+          speaker.type === 'speaker' && (
+            <Row key={speaker.id}>
+              <Col md={4}>
+                <Link href={`/${lang}/speakers/${speaker.id}`} locale={lang}>
+                  <Image src={Avatar} width={200} height={200} alt="Picture of the author" />
+                </Link>
+              </Col>
+              <Col md={8}>
+                <Link href={`/${lang}/speakers/${speaker.id}`} locale={lang}>
+                  <h1>
+                    {speaker.first_name} {speaker.last_name}
+                  </h1>
+                  <h2>{speaker.affiliation}</h2>
+                </Link>
+                <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
+                  <span>{speaker.twitter}</span>
+                </Link>
+              </Col>
+            </Row>
+          )
+      )}
+    </>
   );
 };
 

src/data/speakers.json

@@ -1,6 +1,7 @@
 [
   {
     "id": "john-doe",
+    "type": "speaker",
     "first_name": "John",
     "last_name": "Doe",
     "email": "[email protected]",
@@ -20,6 +21,7 @@
   },
   {
     "id": "jane-doe",
+    "type": "keynote",
     "first_name": "Jane",
     "last_name": "Doe",
     "email": "[email protected]",