Link from speakers to sessions ans vice versa

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:[email protected]\">[email protected]</a> Kontakt mit uns auf.",

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:[email protected]\">[email protected]</a>.",

src/routes/schedule/ExternalSession.svelte

@@ -11,19 +11,20 @@
 	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">
 		{#if startTime && endTime}
 			{formatTime(startTime)} - {formatTime(endTime)}
 		{/if}
 	</section>
-</div>
+</a>

src/routes/schedule/TrackSession.svelte

@@ -11,25 +11,22 @@
 		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 != ''}
 			{extractTime(startTime)} - {extractTime(endTime)}
 		{/if}
 		{room.name}
 	</section>
-</div>
+</a>

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,16 +14,22 @@
 <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}
 				<img src={logo} alt="{data.session.title} Logo" class="h-20 mb-8" />
 			{/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">

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>