feat: past editions module

components/About/about.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 
-function About() {
+function About({year='2023', isEnded=false }) {
     return (
 			<div className='relative overflow-hidden h-[900px] lg:h-full'>
 				<img src='/img/sun.png' className='bg-03' />
@@ -18,12 +18,12 @@ function About() {
 						</div>
 						<div className='w-[600px] ml-10 lg:ml-0 lg:w-full lg:text-center'>
 							<Heading className='text-white'>
-								About AsyncAPI Conf on Tour 2023?
+								About AsyncAPI Conf on Tour {year}?
 							</Heading>
 							<Paragraph typeStyle='md' className="lg:mt-10" >
-								The AsyncAPI Conf on Tour 2023 is planned to take the online
+								The AsyncAPI Conf on Tour {year} {isEnded?'took ':'is planned to take '} the online
 								event to the next level by hosting physical events in four
-								different locations across the globe. Each location will feature
+								different locations across the globe. Each location {isEnded?'featured ':'will feature '}
 								its own keynote speakers, panels, and networking events,
 								allowing attendees to experience the conference in person while
 								still connecting with the larger global community.

components/Slider/slider.js

@@ -3,7 +3,7 @@ import Arrow from '../illustration/arrow';
 import React, { useEffect, useState, useRef } from 'react';
 import { useMediaQuery } from 'react-responsive';
 
-function ReactSlider({ children }) {
+function ReactSlider({ children, isAutoPlay }) {
 	const isTablet = useMediaQuery({ maxWidth: '1224px' });
 	const isMobile = useMediaQuery({ maxWidth: '590px' });
 	const [slides, setSlides] = useState(2);
@@ -19,6 +19,7 @@ function ReactSlider({ children }) {
 		speed: 500,
 		slidesToShow: slides,
 		infinite: true,
+		autoplay:isAutoPlay,
 		slidesToScroll: slides,
 		variableWidth: isMobile ? false : true,
 		arrows: false,

components/Venue/venue.js

@@ -3,11 +3,11 @@ import React from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Link from 'next/link';
-
+import Image from 'next/image'
 function Venue({ className, city }) {
 	return (
-		<Link href={`/venue/${city.name}`}>
-			<div className={`w-[500px] cursor-pointer sm:w-auto ${className}`}>
+		<Link href={`/venue/${city.name}`} className=''>
+			<div className={`w-[500px] cursor-pointer sm:w-auto min-h-[650px] ${className}`}>
 				<div className='w-[450px] sm:w-auto sm:h-[320px] card-bg flex items-center justify-center p-10'>
 					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg hoverEffect' />
 				</div>
@@ -17,9 +17,17 @@ function Venue({ className, city }) {
 					<Heading typeStyle='lg' className='text-white text-[30px]'>
 						{city.name}, {city.country}
 					</Heading>
-					<Paragraph className='pt-[16px] pb-[8px]'>
+					<div className='flex flex-col justify-between items-baseline'>
+						<Paragraph className='pt-[16px] h-full pb-[8px]'>
 						{city.description}
 					</Paragraph>
+					{city.recordedTalk
+						? <div className='p-2 mt-auto absolute bottom-0 flex items-center justify-between w-[170px] bg-black text-white shadow-sm leading-6 px-4 rounded-lg font-semibold'>
+								<Image src={require('../../public/img/yt-icon.webp')} alt='youtube icon' width={20} height={20}/>
+								<Link href={city.recordedTalk} >Recorded Talk</Link>
+						</div>
+						: null}
+					</div>
 				</div>
 			</div>
 		</Link>

config/city-lists.json

@@ -3,6 +3,7 @@
 		"name": "London",
 		"country": "UK",
 		"date": "September 20, 2023",
+		"recordedTalk":null,
 		"description": "Join us in London for the AsyncAPI Conference and unlock the API of opportunities! Let's bridge the messaging gap and create a tech buzz you will want to experience!",
 		"img": "/img/london.jpeg",
 		"address": "IBM UK Limited 20 York Road London SE1 7ND",
@@ -18,6 +19,7 @@
 	{
 		"name": "Madrid",
 		"country": "Spain",
+		"recordedTalk":"https://www.youtube.com/playlist?list=PLbi1gRlP7pihD-7XYb6c9wcTdkavDzF3_",
 		"date": "October 19, 2023",
 		"description": "Join us in Madrid for AsyncAPI Conference and learn how to speak fluent API! Let's taco about messaging and have a fiesta you will remember!",
 		"img": "https://images.unsplash.com/photo-1539037116277-4db20889f2d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
@@ -33,6 +35,7 @@
 	{
 		"name": "Bangalore",
 		"country": "India",
+		"recordedTalk":"https://www.youtube.com/playlist?list=PLbi1gRlP7pijVocLZS7FeWKA4NBzJa7_Z",
 		"date": "November 30, 2023",
 		"description": "Join us in Bengaluru for the AsyncAPI Conference and decode the language of APIs! Let's crack the language of APIs and ignite a tech revolution with some spice you'll remember!",
 		"img": "https://images.unsplash.com/photo-1596176530529-78163a4f7af2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2454&q=80",
@@ -48,6 +51,7 @@
 	{
 		"name": "Paris",
 		"country": "France",
+		"recordedTalk":null,
 		"date": "December 6-8, 2023",
 		"description": "Join us at apidays Paris for the AsyncAPI Conference and experience the art of API perfection! Let's craft a symphony of messaging and celebrate tech in style!",
 		"img": "https://images.unsplash.com/photo-1508050919630-b135583b29ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2306&q=80",

config/links.json

@@ -32,6 +32,16 @@
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
+	},
+	{
+		"title":"Past editions",
+		"ref":"",
+		"subMenu": [
+			{
+				"title": "2023",
+				"ref": "/editions/2023"
+			}
+		]
 	}
 ]
 

pages/editions/[year].js

@@ -0,0 +1,113 @@
+import ReactSlider from '../../components/Slider/slider';
+import Speaker from '../../components/Speaker/speaker';
+import Sponsors from '../../components/Sponsors/sponsors';
+import Heading from '../../components/Typography/heading';
+import Paragraph from '../../components/Typography/paragraph';
+import cities from '../../config/city-lists.json';
+import speakers from '../../config/speakers.json';
+import Venue from '../../components/Venue/venue';
+import Head from 'next/head';
+import About from '../../components/About/about';
+
+const extractYear = (dateString) => {
+    return dateString.split(' ').pop();
+}
+export async function getStaticProps({ params }) {
+    let res = [];
+    let yearEvents = [];
+    const data = cities.filter((p) => extractYear(p.date) === params.year);
+    yearEvents = data;
+    for (let i = 0; i < yearEvents.length; i++) {
+        let yearIter = yearEvents[i];
+        const getSpeakers = speakers.filter((s) => s.city === yearIter?.name);
+        yearIter.speakers = getSpeakers[0].lists;
+        res.push(yearIter);
+    }
+    return {
+        props: {
+            year: params.year,
+            data: res,
+        },
+    };
+}
+
+export async function getStaticPaths() {
+    const paths = cities.map((city) => ({
+        params: { year: extractYear(city.date) },
+    }));
+    return {
+        paths,
+        fallback: false,
+    };
+}
+
+const Edition = (props) => {
+
+    const year = props.year;
+    const speakers = props.data.map(item => item.speakers)
+    const cities = props.data
+
+    return <div>
+        <Head>
+            <title>AsyncAPI Conference {year}</title>
+				<meta name='description' content='Generated by create next app' />
+				<link rel='icon' href='/favicon.ico' />
+			</Head>
+			<div id='about'>
+				<About year={year} isEnded={true} />
+			</div>
+        <div className='gradient-bg py-10 w-full container flex flex-col justify-center items-center'>
+            <div className='w-[1130px] lg:w-full flex lg:py-20 flex-col items-center justify-center'>
+                <div className='text-center py-[46px] w-[714px] lg:w-full'>
+                    <Heading className='text-white'>Venues</Heading>
+                    <Paragraph className='mt-12'>
+                        The AsyncAPI Conf on Tour {year} took the online
+                        event to the next level by hosting physical events in {cities.length} {" "}
+                        different locations across the globe.
+                    </Paragraph>
+                </div>
+                <div className='w-full mt-[64px]'>
+                    <ReactSlider>
+                        {cities.map((_city) => {
+                            return <Venue key={_city.name} city={_city} />;
+                        })}
+                    </ReactSlider>
+                </div>
+            </div>
+        </div>
+        <div
+            id='speakers'
+            className='pt-[160px] container relative flex flex-col items-center justify-center'
+        >
+            <div className='lg:py-20 w-[1130px] lg:w-full'>
+                <div className='text-center'>
+                    <Heading className='text-white'>Speakers</Heading>
+                    <Paragraph className='mt-[20px]'>Meet the speakers</Paragraph>
+                </div>
+
+                <div className='my-10'>
+                    <div className='w-full mt-[64px]'>
+                        <ReactSlider isAutoPlay={true}>
+                            {speakers.flat().map((speaker, i) => {
+                                return (
+                                    <Speaker
+                                        key={i}
+                                        details={speaker}
+                                        location={'India'}
+                                        className='mt-10 mx-5 max-w-[500px]'
+                                    />
+                                );
+                            })}
+                        </ReactSlider>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div id='sponsors'>
+            <Sponsors imgs={['/img/sngular.png', '/img/IBM.png', '/img/postman.png', '/img/apidays.png']} />
+        </div>
+    </div>
+}
+
+export default Edition;

pages/venue/[id].js

@@ -75,7 +75,7 @@ function Venue({ city }) {
 			</div>
 			 <div
 				id='speakers'
-				className='border border border-x-0 border-b-0 border-[#333] py-28'
+				className='border border-x-0 border-b-0 border-[#333] py-28'
 			>
 				<div className='mt-[64px] container flex flex-col justify-center items-center pb-[181px]'>
 					<div className='w-[1130px] flex flex-col items-center lg:w-full'>