Crear estructura base para Ponentes y Charlas

src/app/[lang]/dictionaries.js

@@ -1,8 +1,8 @@
 import 'server-only';
 
 const dictionaries = {
-  en: () => import('./dictionaries/en.json').then((module) => module.default),
-  es: () => import('./dictionaries/es.json').then((module) => module.default)
+  en: () => import('@/app/[lang]/dictionaries/en.json').then((module) => module.default),
+  es: () => import('@/app/[lang]/dictionaries/es.json').then((module) => module.default)
 };
 
 export const getDictionary = async (locale) => {

src/app/[lang]/not-found.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function NotFound() {
+  return <p>404 Not Found custom</p>;
+}

src/app/[lang]/page.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getDictionary } from './dictionaries';
+import { getDictionary } from '@/app/[lang]/dictionaries';
 
 export default async function Page({ params: { lang } }) {
   const dict = await getDictionary(lang);

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

@@ -0,0 +1,82 @@
+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>
+      <p>{speaker.biography}</p>
+
+      <h3>Talks</h3>
+
+      {talks.map((talk) => (
+        <Link key={talk.id} href={`/talks/${talk.id}`} locale={lang}>
+          <h1>{talk.title}</h1>
+        </Link>
+      ))}
+    </>
+  );
+};
+
+Speaker.propTypes = {
+  params: propTypes.shape({
+    uniquepage: propTypes.string,
+    lang: propTypes.string
+  })
+};
+
+export default Speaker;

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

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import propTypes from 'prop-types';
+import Link from 'next/link';
+import speakerslist from '@/data/speakers.json';
+
+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>
+  );
+};
+
+Speakers.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default Speakers;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import talksList from '@/data/talks.json';
+import { notFound } from 'next/navigation';
+
+export async function generateStaticParams() {
+  return talksList.map((p) => ({
+    uniquepage: p.id.toString()
+  }));
+}
+
+const UniquePage = ({ params: { uniquepage } }) => {
+  const talk = talksList.find((p) => p.id.toString() === uniquepage);
+
+  if (!talk) {
+    console.log('talk not found');
+    notFound();
+  }
+
+  return (
+    <>
+      <h1>{talk.title}</h1>
+
+      <iframe
+        src="https://www.youtube.com/embed/3YxneS1eyfM"
+        frameBorder="0"
+        allowfullScreen=""
+        className="video"></iframe>
+      <hr />
+
+      {talk.speakers.map((speaker) => (
+        <p key={speaker}>{speaker}</p>
+      ))}
+      <h2>Authors</h2>
+      <ul>
+        {talk.tags.map((tag) => (
+          <li key={tag}>{tag}</li>
+        ))}
+      </ul>
+
+      <p>{talk.description}</p>
+
+      <h2>Summary</h2>
+      <p>{talk.summary}</p>
+    </>
+  );
+};
+
+UniquePage.propTypes = {
+  params: propTypes.shape({
+    uniquepage: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default UniquePage;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import talksList from '@/data/talks.json';
+import Link from 'next/link';
+
+const Talks = ({ params: { lang } }) => {
+  return (
+    <main>
+      {talksList.map((talk) => (
+        <Link key={talk.id} href={`./talks/${talk.id}`} locale={lang}>
+          <h1>{talk.title}</h1>
+        </Link>
+      ))}
+    </main>
+  );
+};
+
+Talks.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default Talks;

src/data/speakers.json

@@ -0,0 +1,34 @@
+[
+  {
+    "id": "john-doe",
+    "first_name": "John",
+    "last_name": "Doe",
+    "email": "[email protected]",
+    "photo": "https://i.pravatar.cc/300",
+    "biography": "I am John Doe. I am an amazing speaker.",
+    "affiliation": "Acme Inc.",
+    "facebook": "https://www.facebook.com/johndoe",
+    "twitter": "@johndoe",
+    "linkedin": "https://www.linkedin.com/in/johndoe",
+    "github": "https://github.com/johndoe",
+    "website": "https://johndoe.com",
+    "country_origin": "USA",
+    "country_residence": "USA"
+  },
+  {
+    "id": "jane-doe",
+    "first_name": "Jane",
+    "last_name": "Doe",
+    "email": "[email protected]",
+    "photo": "https://i.pravatar.cc/300",
+    "biography": "I am Jane Doe. I am an amazing speaker.",
+    "affiliation": "Acme Inc.",
+    "facebook": "https://www.facebook.com/johndoe",
+    "twitter": "@johndoe",
+    "linkedin": "https://www.linkedin.com/in/johndoe",
+    "github": "https://github.com/janedenoe",
+    "website": "https://janedenoe.com",
+    "country_origin": "Colombia",
+    "country_residence": "Canada"
+  }
+]

src/data/talks.json

@@ -0,0 +1,35 @@
+[
+  {
+    "id": 1,
+    "title": "This is the title",
+    "speakers": [
+      "john-doe"
+    ],
+    "written_language": "English",
+    "spoken_language": "English",
+    "submission": "Talk",
+    "description": "This is the description",
+    "summary": "This is the summary",
+    "tags": [
+      "tag1",
+      "tag2"
+    ],
+    "video_url": "https://www.youtube.com/watch?v=123"
+  },
+  {
+    "id": 2,
+    "title": "This is the title",
+    "speakers": [
+      "john-doe",
+      "jane-doe"
+    ],
+    "written_language": "English",
+    "spoken_language": "Spanish",
+    "submission": "Workshop",
+    "description": "This is the description",
+    "summary": "This is the summary",
+    "tags": [
+      "tag1"
+    ]
+  }
+]

src/middleware.js

@@ -5,8 +5,6 @@ export function middleware(request) {
   // Check if there is any supported locale in the pathname
   const { pathname } = request.nextUrl;
 
-  console.log('pathname', pathname);
-
   const pathnameHasLocale = locales.some(
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
   );