From 271aab3e51c2f54e549d1dc416b7e0dc1f4ee61f Mon Sep 17 00:00:00 2001
From: Lena Fuhrimann <6780471+cloudlena@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:37:58 +0200
Subject: [PATCH] Link from speakers to sessions ans vice versa

---
 package-lock.json                          | 12 ++++++------
 src/lib/locales/de.json                    |  7 +++++++
 src/lib/locales/en.json                    |  7 +++++++
 src/routes/schedule/ExternalSession.svelte | 11 ++++++-----
 src/routes/schedule/TrackSession.svelte    | 17 +++++++----------
 src/routes/sessions/[id]/+page.svelte      | 13 ++++++++++---
 src/routes/speakers/[id]/+page.svelte      | 19 ++++++++++++++++---
 7 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aadd5f7..a812d08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1622,9 +1622,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001641",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz",
-			"integrity": "sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==",
+			"version": "1.0.30001642",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
+			"integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
 			"dev": true,
 			"funding": [
 				{
@@ -3597,9 +3597,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-			"integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+			"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
diff --git a/src/lib/locales/de.json b/src/lib/locales/de.json
index 84aeaf9..0740611 100644
--- a/src/lib/locales/de.json
+++ b/src/lib/locales/de.json
@@ -55,6 +55,13 @@
 		"title": "Programm",
 		"description": "Auch dieses Jahr haben wir wieder ein spannendes Programm für die Cloud Native Community vorbereitet, randvoll mit packenden Sessions!"
 	},
+	"session": {
+		"back": "Zurück zum Programm"
+	},
+	"speaker": {
+		"back": "Zurück zu den Speaker:innen",
+		"sessions": "Sessions"
+	},
 	"sponsors": {
 		"title": "Sponsor:innen",
 		"body": "Der Non-Profit-Verein «bernerit.rocks» organisiert den Anlass für Cloud Native Praktiker:innen und setzt dabei auf Sponsor:innen. Durch Ihre Unterstützung präsentieren Sie sich an vorderster Front der extrem stark wachsenden Cloud Native Community der Schweiz. Werden Sie Sponsor:in und knüpfen Sie Kontakte mit den anwesenden Spezialist:innen am Cloud Native Day! Bitte nehmen Sie via <a href=\"mailto:sponsoring@cloudnativeday.ch\">sponsoring@cloudnativeday.ch</a> Kontakt mit uns auf.",
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index 240ebb2..4b18cfa 100644
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@@ -55,6 +55,13 @@
 		"title": "Schedule",
 		"description": "This year we have again prepared an exciting schedule for the Cloud Native community, jam-packed with amazing sessions!"
 	},
+	"session": {
+		"back": "Back to Schedule"
+	},
+	"speaker": {
+		"back": "Back to Speakers",
+		"sessions": "Sessions"
+	},
 	"sponsors": {
 		"title": "Sponsors",
 		"body": "The nonprofit association “bernerit.rocks” organizes this event for Cloud Native practitioners with the help of lots of voluntary work and, of course, sponsors. With a sponsorship, you can present yourself prominently in front of this extremely fast-growing Swiss Cloud Native Community. Become a sponsor and get in contact with the Cloud Native specialists at the first Swiss Cloud Native Day! Please contact <a href=\"mailto:sponsoring@cloudnativeday.ch\">sponsoring@cloudnativeday.ch</a>.",
diff --git a/src/routes/schedule/ExternalSession.svelte b/src/routes/schedule/ExternalSession.svelte
index 4f23834..8c9b7c5 100644
--- a/src/routes/schedule/ExternalSession.svelte
+++ b/src/routes/schedule/ExternalSession.svelte
@@ -11,14 +11,15 @@
 	const endTime = room.session.endsAt;
 </script>
 
-<div
-	class="card variant-soft-secondary {getSessionWidth(room.session)} mb-2 {getSessionHeight(
+<a
+	href="/sessions/{room.session.id}"
+	class="card card-hover variant-soft-secondary {getSessionWidth(
 		room.session
-	)}"
+	)} mb-2 {getSessionHeight(room.session)}"
 >
 	<header class="card-header flex justify-center">
 		<h4 class="h4">
-			<a href="/sessions/{room.session.id}">{room.session.title}</a>
+			{room.session.title}
 		</h4>
 	</header>
 	<section class="flex justify-center">
@@ -26,4 +27,4 @@
 			{formatTime(startTime)} - {formatTime(endTime)}
 		{/if}
 	</section>
-</div>
+</a>
diff --git a/src/routes/schedule/TrackSession.svelte b/src/routes/schedule/TrackSession.svelte
index cc30a18..ec5590c 100644
--- a/src/routes/schedule/TrackSession.svelte
+++ b/src/routes/schedule/TrackSession.svelte
@@ -11,20 +11,17 @@
 		new Date(dateString).toLocaleTimeString('de-CH', { hour: 'numeric', minute: 'numeric' });
 </script>
 
-<div
-	class="card variant-soft-primary {getSessionWidth(room.session)} p-2 mb-2 {getSessionHeight(
+<a
+	href="/sessions/{room.session.id}"
+	class="card card-hover variant-soft-primary {getSessionWidth(
 		room.session
-	)}"
+	)} p-2 mb-2 {getSessionHeight(room.session)}"
 >
 	<header class="card-header flex justify-center">
-		<h4 class="h4">
-			<a href="/sessions/{room.session.id}">{room.session.title}</a>
-		</h4>
+		<h4 class="h4">{room.session.title}</h4>
 	</header>
 	{#each room.session.speakers as speaker (speaker.id)}
-		<section class="flex justify-center">
-			<a href="/speakers/{speaker.id}">{speaker.name}</a>
-		</section>
+		<section class="flex justify-center">{speaker.name}</section>
 	{/each}
 	<section class="flex justify-center">
 		{#if startTime != '' && endTime != ''}
@@ -32,4 +29,4 @@
 		{/if}
 		{room.name}
 	</section>
-</div>
+</a>
diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte
index b1406ac..bf7e997 100644
--- a/src/routes/sessions/[id]/+page.svelte
+++ b/src/routes/sessions/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { _ } from 'svelte-i18n';
 	import Fa from 'svelte-fa';
 	import { faArrowLeft, faClock, faLocationDot } from '@fortawesome/free-solid-svg-icons';
 	import SvelteMarkdown from 'svelte-markdown';
@@ -13,8 +14,8 @@
 <div class="w-full px-8 py-16">
 	<section class="container mx-auto max-w-5xl">
 		<div class="md:col-span-2">
-			<a href="/schedule" class="mb-12 flex gap-2 items-center"
-				><Fa icon={faArrowLeft} /> Back to Schedule</a
+			<a href="/schedule" class="mb-12 flex gap-2 items-center text-blue-700 hover:text-indigo-700"
+				><Fa icon={faArrowLeft} /> {$_('session.back')}</a
 			>
 
 			{#if logo}
@@ -22,7 +23,13 @@
 			{/if}
 
 			<h1 class="h1">{data.session.title}</h1>
-			<h4 class="h4 mt-4">{data.session.speakers.map((s) => s.name).join(', ')}</h4>
+			{#each data.session.speakers as speaker (speaker.id)}
+				<h4 class="h4 mt-4">
+					<a href="/speakers/{speaker.id}" class="text-blue-700 hover:text-indigo-700"
+						>{speaker.name}</a
+					>
+				</h4>
+			{/each}
 
 			{#if data.session.startsAt && data.session.endsAt}
 				<p class="mt-8 mb-2 flex gap-2 items-center">
diff --git a/src/routes/speakers/[id]/+page.svelte b/src/routes/speakers/[id]/+page.svelte
index 0a80095..44eb7f1 100644
--- a/src/routes/speakers/[id]/+page.svelte
+++ b/src/routes/speakers/[id]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { _ } from 'svelte-i18n';
 	import Fa from 'svelte-fa';
 	import { faLinkedin, faTwitter } from '@fortawesome/free-brands-svg-icons';
-	import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+	import { faArrowLeft, faGlobe } from '@fortawesome/free-solid-svg-icons';
 	import { LinkType } from '$lib/Speaker';
 	import type { PageData } from './$types';
 
@@ -23,11 +24,16 @@
 	<section class="container mx-auto max-w-5xl grid md:grid-cols-3 gap-24">
 		<img class="rounded-lg" src={data.speaker.profilePicture} alt={data.speaker.fullName} />
 		<div class="md:col-span-2">
+			<a href="/#speakers" class="mb-12 flex gap-2 items-center text-blue-700 hover:text-indigo-700"
+				><Fa icon={faArrowLeft} /> {$_('speaker.back')}</a
+			>
+
 			<h1 class="h1">{data.speaker.fullName}</h1>
 			<h4 class="h4 mt-4">{data.speaker.tagLine}</h4>
-			<p class="my-12 whitespace-pre-wrap">{data.speaker.bio}</p>
+			<p class="my-8 whitespace-pre-wrap">{data.speaker.bio}</p>
+
 			{#if data.speaker.links}
-				<ul class="list">
+				<ul class="list mb-12">
 					{#each data.speaker.links as link (link.linkType)}
 						<li>
 							<Fa icon={linkTypeIcon(link.linkType)} />
@@ -36,6 +42,13 @@
 					{/each}
 				</ul>
 			{/if}
+
+			<h2 class="h3 mb-4">{$_('speaker.sessions')}</h2>
+			{#each data.speaker.sessions as session (session.id)}
+				<a href="/sessions/{session.id}" class="text-blue-700 hover:text-indigo-700"
+					>{session.name}</a
+				>
+			{/each}
 		</div>
 	</section>
 </div>