Re-componentize EventBlock, some misc change, update UX entirely.

2026-01-11 21:41:19 -05:00
parent 415495e215
commit 9fc25f3072
10 changed files with 328 additions and 248 deletions
--- a/src/components/event/EBComponents/EventActionButtons.svelte
+++ b/src/components/event/EBComponents/EventActionButtons.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { FilePen, CalendarPlus, Link as LinkIcon } from '@lucide/svelte';
+	import type { LinkType } from '$lib/schemas';
+
+	let {
+		registrationLink,
+		paymentLink,
+		addToCalendar
+	} = $props<{
+		registrationLink?: LinkType[] | null;
+		paymentLink?: LinkType[] | null;
+		addToCalendar: () => void;
+	}>();
+
+	const handleClick = (e: MouseEvent) => {
+		e.stopPropagation();
+	};
+</script>
+
+<div class="space-y-2 pointer-events-auto">
+	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-2">
+		{#if registrationLink}
+			<a
+				href={registrationLink[0].url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-ecsess-500 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-600"
+				onclick={handleClick}
+			>
+				<FilePen class="h-4 w-4" strokeWidth={2.5} />
+				Register
+			</a>
+		{:else}
+			<div class="flex items-center justify-center gap-2 rounded-xl bg-ecsess-700/50 px-4 py-3 text-sm font-bold text-ecsess-300/70 opacity-60">
+				<FilePen class="h-4 w-4" strokeWidth={2.5} />
+				Drop In
+			</div>
+		{/if}
+
+		<button
+			type="button"
+			onclick={(e) => {
+				e.stopPropagation();
+				addToCalendar();
+			}}
+			class="flex w-full items-center justify-center gap-2 rounded-xl bg-ecsess-700 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-800"
+		>
+			<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
+			Add to Calendar
+		</button>
+
+		{#if paymentLink}
+			<a
+				href={paymentLink[0].url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="col-span-2 flex items-center justify-center gap-2 rounded-xl bg-ecsess-800 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-900 sm:col-span-1"
+				onclick={handleClick}
+			>
+				<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
+				Pay
+			</a>
+		{:else}
+			<div class="col-span-2 flex items-center justify-center gap-2 rounded-xl bg-ecsess-800/50 px-4 py-3 text-sm font-bold text-ecsess-300/70 opacity-60 sm:col-span-1">
+				Free!
+			</div>
+		{/if}
+	</div>
+</div>
--- a/src/components/event/EBComponents/EventBadges.svelte
+++ b/src/components/event/EBComponents/EventBadges.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	let { isPastEvent = false, eventCategory } = $props<{
+		isPastEvent?: boolean;
+		eventCategory?: string[];
+	}>();
+</script>
+
+<div class="absolute top-0 left-0 right-0 z-30 flex items-start justify-between gap-2 p-4 pointer-events-none">
+	{#if isPastEvent}
+		<span class="rounded-full bg-ecsess-800/90 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-gray-300 backdrop-blur-sm">
+			Past Event
+		</span>
+	{:else}
+		<span class="rounded-full bg-ecsess-400 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-white backdrop-blur-sm">
+			Upcoming
+		</span>
+	{/if}
+
+	{#if eventCategory && eventCategory.length > 0}
+		<div class="flex flex-wrap justify-end gap-2">
+			{#each eventCategory as category}
+				<span class="rounded-full bg-ecsess-500/90 px-3 py-1.5 text-xs font-bold uppercase tracking-wider text-white backdrop-blur-sm">
+					{category}
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
--- a/src/components/event/EBComponents/EventDescription.svelte
+++ b/src/components/event/EBComponents/EventDescription.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { ExternalLink as ExternalLinkIcon } from '@lucide/svelte';
+	import RichText from 'components/RichText.svelte';
+	import type { InputValue } from '@portabletext/svelte';
+	import type { LinkType } from '$lib/schemas';
+
+	let { eventTitle, eventDescription, generalLink } = $props<{
+		eventTitle: string;
+		eventDescription?: InputValue;
+		generalLink?: LinkType[] | null;
+	}>();
+
+	const handleClick = (e: MouseEvent) => {
+		e.stopPropagation();
+	};
+</script>
+
+<div class="relative z-30 p-6 pointer-events-auto">
+	<h3 class="text-2xl font-bold leading-tight text-white">{eventTitle}</h3>
+</div>
+
+<div class="relative z-30 my-2 flex h-56 flex-col md:h-64 xl:h-80 pointer-events-auto">
+	<div class="flex flex-1 justify-center overflow-y-auto border-y border-ecsess-800 p-6 text-ecsess-100">
+		{#if eventDescription}
+			<RichText value={eventDescription} />
+		{:else}
+			<p>No description available for this event.</p>
+		{/if}
+	</div>
+</div>
+
+{#if generalLink}
+	<div class="relative z-30 flex w-full flex-wrap items-center justify-center gap-3 overflow-auto p-6 pb-8 pointer-events-auto">
+		{#each generalLink.slice(0, 4) as link}
+			<a
+				href={link.url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex items-center justify-center gap-2 rounded-xl bg-ecsess-600 px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-ecsess-700"
+				onclick={handleClick}
+			>
+				<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
+				{link.title}
+			</a>
+		{/each}
+	</div>
+{/if}
+
+<div class="relative z-30 p-4 lg:hidden pointer-events-auto">
+	<p class="text-sm text-ecsess-400">Click to flip back</p>
+</div>
--- a/src/components/event/EBComponents/EventImageHeader.svelte
+++ b/src/components/event/EBComponents/EventImageHeader.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	let { eventTitle, thumbnail, eventCategory } = $props<{
+		eventTitle: string;
+		thumbnail?: string;
+		eventCategory?: string[];
+	}>();
+
+	const getDefaultImage = (category?: string[]): string => {
+		if (!category || category.length === 0) return '/ECSESS.png';
+		const cat = category[0];
+		switch (cat) {
+			case 'social':
+				return '/Social.jpg';
+			case 'technical':
+				return '/Technical.jpg';
+			case 'professional':
+				return '/Professional.jpg';
+			case 'academic':
+				return '/Academic.jpg';
+			default:
+				return '/ECSESS.png';
+		}
+	};
+
+	const imageSrc = $derived(thumbnail || getDefaultImage(eventCategory));
+	const imageAlt = $derived(thumbnail ? eventTitle : `${eventCategory?.[0] || 'Default'} Event`);
+</script>
+
+<div class="relative z-30 h-80 overflow-hidden rounded-t-2xl pointer-events-none">
+	<img class="h-full w-full object-cover pointer-events-none" src={imageSrc} alt={imageAlt} />
+	<div class="absolute inset-0 bg-gradient-to-b from-transparent via-ecsess-800/20 to-ecsess-950 rounded-t-2xl pointer-events-none"></div>
+	<div class="absolute bottom-0 left-0 right-0 p-6 pointer-events-none">
+		<h3 class="text-2xl font-bold leading-tight text-white">{eventTitle}</h3>
+	</div>
+</div>
--- a/src/components/event/EBComponents/EventInfoGrid.svelte
+++ b/src/components/event/EBComponents/EventInfoGrid.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { CalendarDays, MapPin } from '@lucide/svelte';
+
+	let { date, location } = $props<{
+		date: string;
+		location?: string;
+	}>();
+</script>
+
+<div class="relative z-30 m-5 space-y-3 rounded-xl border border-ecsess-800/30 bg-ecsess-900/60 p-4 backdrop-blur-sm pointer-events-none">
+	<div class="flex items-center gap-3">
+		<div class="flex h-10 w-10 items-center justify-center rounded-full bg-ecsess-400">
+			<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
+		</div>
+		<div class="flex-1">
+			<p class="text-sm font-semibold text-ecsess-50">{date}</p>
+		</div>
+	</div>
+
+	<div class="flex items-center gap-3">
+		<div class="flex h-10 w-10 items-center justify-center rounded-full bg-ecsess-400">
+			<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
+		</div>
+		<div class="flex-1">
+			<p class="text-sm font-semibold text-ecsess-50">{location ?? 'TBA'}</p>
+		</div>
+	</div>
+</div>
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import {
-		CalendarDays,
-		MapPin,
-		Link as LinkIcon,
-		FilePen,
-		CalendarPlus,
-		ExternalLink as ExternalLinkIcon
-	} from '@lucide/svelte';
-	import RichText from 'components/RichText.svelte';
+	import type { LinkType } from '$lib/schemas';
+	import type { InputValue } from '@portabletext/svelte';
+	import EventImageHeader from './EBComponents/EventImageHeader.svelte';
+	import EventBadges from './EBComponents/EventBadges.svelte';
+	import EventInfoGrid from './EBComponents/EventInfoGrid.svelte';
+	import EventActionButtons from './EBComponents/EventActionButtons.svelte';
+	import EventDescription from './EBComponents/EventDescription.svelte';

 	let {
 		eventTitle,
@@ -15,19 +13,29 @@
 		location,
 		eventDescription,
 		thumbnail,
-		registrationLink, //[LinkType]
-		paymentLink, //[LinkType]
-		generalLink, //[LinkType]
+		registrationLink,
+		paymentLink,
+		generalLink,
 		eventCategory,
 		isPastEvent = false
-	} = $props();
+	} = $props<{
+		eventTitle: string;
+		date: string;
+		location?: string;
+		eventDescription?: InputValue;
+		thumbnail?: string;
+		registrationLink?: LinkType[] | null;
+		paymentLink?: LinkType[] | null;
+		generalLink?: LinkType[] | null;
+		eventCategory?: string[];
+		isPastEvent?: boolean;
+	}>();

 	let showDescription = $state(false);

-	// Function to generate .ics file for calendar
 	const addToCalendar = () => {
 		const eventDate = new Date(date);
-		const endDate = new Date(eventDate.getTime() + 2 * 60 * 60 * 1000); // 2 hours duration
+		const endDate = new Date(eventDate.getTime() + 2 * 60 * 60 * 1000);

 		const formatDate = (d: Date) => {
 			return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
@@ -58,240 +66,89 @@
 		URL.revokeObjectURL(url);
 	};

-	const flipCard = (e: MouseEvent) => {
+	const flipCard = () => {
 		showDescription = !showDescription;
 	};
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			flipCard();
+		}
+	};
 </script>

-<div
-	class="
-	flip-box
-	group relative flex flex-col rounded-2xl"
->
-	<!--Flip Card container-->
-	<div class="flip-box-inner rounded-2xl" class:show-back={showDescription}>
-		<!--Front Side-->
-		<!--Opacity thing is to fix the visual bug on ios-->
+<div class="group relative flex h-full w-full flex-col rounded-2xl perspective-[1000px]">
+	<div
+		class="grid h-full w-full text-center transition-transform duration-500 rounded-2xl transform-3d {showDescription
+			? 'transform-[rotateY(180deg)]'
+			: ''}"
+	>
+		<!-- Front Side -->
 		<div
-			class="flip-box-front bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl transition-opacity duration-500 {showDescription
+			class="col-start-1 row-start-1 flex h-full w-full flex-col rounded-2xl bg-ecsess-950 transition-opacity duration-500 backface-hidden transform-3d transform-[rotateY(0)] cursor-pointer {showDescription
 				? 'pointer-events-none opacity-0'
 				: 'opacity-100'}"
+			data-flip-side="front"
+			role="button"
+			tabindex="0"
+			onclick={flipCard}
+			onkeydown={handleKeyDown}
+			aria-label="Flip event card to view description"
 		>
-			<!--Flip button-->
-			<div
-				class="
-				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
-				onclick={flipCard}
-			></div>
-			<!-- Image Container with Gradient Overlay -->
-			<div class="relative h-80 overflow-hidden rounded-t-2xl">
-				{#if thumbnail}
-					<img class="h-full w-full object-cover" src={thumbnail} alt={eventTitle} />
-				{:else if eventCategory?.[0] === 'social'}
-					<img class="h-full w-full object-cover" src="/Social.jpg" alt="Social Event" />
-				{:else if eventCategory?.[0] === 'technical'}
-					<img class="h-full w-full object-cover" src="/Technical.jpg" alt="Technical Event" />
-				{:else if eventCategory?.[0] === 'professional'}
-					<img
-						class="h-full w-full object-cover"
-						src="/Professional.jpg"
-						alt="Professional Event"
-					/>
-				{:else if eventCategory?.[0] === 'academic'}
-					<img class="h-full w-full object-cover" src="/Academic.jpg" alt="Academic Event" />
-				{:else}
-					<img class="h-full w-full object-cover" src="/ECSESS.png" alt="ECSESS Event" />
-				{/if}

-				<!-- Gradient overlay -->
-				<div
-					class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 rounded-t-2xl bg-gradient-to-b from-transparent"
-				></div>
-				<!-- Event Title Overlay -->
-				<div class="absolute right-0 bottom-0 left-0 p-6">
-					<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
-						{eventTitle}
-					</h3>
+			<EventImageHeader {eventTitle} {thumbnail} {eventCategory} />
+			<EventBadges {isPastEvent} {eventCategory} />
+
+			<EventInfoGrid {date} {location} />
+
+			{#if !isPastEvent}
+				<div class="relative z-30 flex-1 px-6 pb-4 pt-0 pointer-events-auto">
+					<EventActionButtons {registrationLink} {paymentLink} {addToCalendar} />
 				</div>
-			</div>
-			<!-- Badges -->
-			<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
-				{#if isPastEvent}
-					<span
-						class="bg-ecsess-900 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-gray-300 uppercase backdrop-blur-sm"
-					>
-						Past Event
-					</span>
-				{:else}
-					<span
-						class="bg-ecsess-400/95 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
-					>
-						Upcoming
-					</span>
-				{/if}
+			{/if}

-				{#if eventCategory && eventCategory.length > 0}
-					<div class="flex flex-wrap justify-end gap-2">
-						{#each eventCategory as category}
-							<span
-								class="bg-ecsess-500/95 rounded-full px-3 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
-							>
-								{category}
-							</span>
-						{/each}
-					</div>
-				{/if}
-			</div>
-
-			<!-- Info Grid -->
-			<div class="bg-ecsess-900/40 m-5 space-y-3 rounded-xl p-4">
-				<div class="flex items-center gap-3">
-					<div
-						class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
-					>
-						<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
-					</div>
-					<div class="flex-1">
-						<p class="text-ecsess-50 text-sm font-semibold">{date}</p>
-					</div>
-				</div>
-
-				<div class="flex items-center gap-3">
-					<div
-						class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
-					>
-						<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
-					</div>
-					<div class="flex-1">
-						<p class="text-ecsess-50 text-sm font-semibold">
-							{location ?? 'TBA'}
-						</p>
-					</div>
-				</div>
-			</div>
-			<div class="relative z-100 flex-1 p-4 px-6">
-				<!-- Action Buttons -->
-				{#if !isPastEvent}
-					<div class="space-y-2">
-						<!-- Registration & Payment Row & Add to Calendar Button -->
-						<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-2">
-							{#if registrationLink}
-								<a
-									href={registrationLink[0].url}
-									target="_blank"
-									rel="noopener noreferrer"
-									class="bg-ecsess-500 hover:bg-ecsess-600 p3 shadow-ecsess-300 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold
-								text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg
-								"
-								>
-									<FilePen class="h-4 w-4" strokeWidth={2.5} />
-									Register
-								</a>
-							{:else}
-								<div
-									class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white"
-								>
-									<FilePen class="h-4 w-4" strokeWidth={2.5} />
-									Drop In
-								</div>
-							{/if}
-							<button
-								onclick={addToCalendar}
-								class="bg-ecsess-700 hover:bg-ecsess-800 shadow-ecsess-400 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
-								shadow-md transition-all hover:-translate-y-1 hover:cursor-pointer hover:shadow-lg"
-							>
-								<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
-								Add to Calendar
-							</button>
-							{#if paymentLink}
-								<a
-									href={paymentLink[0].url}
-									target="_blank"
-									rel="noopener noreferrer"
-									class="bg-ecsess-800 hover:bg-ecsess-900 shadow-ecsess-500 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
-									shadow-md transition-all hover:-translate-y-1 hover:shadow-lg sm:col-span-1"
-								>
-									<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
-									Pay
-								</a>
-							{:else}
-								<div
-									class="bg-ecsess-800 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white sm:col-span-1"
-								>
-									Free!
-								</div>
-							{/if}
-						</div>
-					</div>
-				{/if}
-			</div>
 			<div class="p-4 lg:hidden">
-				<p>Click to view more</p>
+				<p class="text-sm text-ecsess-400">Click to view more</p>
 			</div>
 		</div>
+
 		<!-- Back Side -->
 		<div
-			class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl"
+			class="col-start-1 row-start-1 flex h-full w-full flex-col rounded-2xl bg-ecsess-950 transition-opacity duration-500 backface-hidden transform-3d transform-[rotateY(180deg)] cursor-pointer {showDescription
+				? 'opacity-100'
+				: 'pointer-events-none opacity-0'}"
+			data-flip-side="back"
+			class:flipped={showDescription}
+			role="button"
+			tabindex="0"
+			onclick={flipCard}
+			onkeydown={handleKeyDown}
+			aria-label="Flip event card back to front"
 		>
-			<!--Flip button-->
-			<div
-				class="
-				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
-				onclick={flipCard}
-			></div>
-			<!--Event Title-->
-			<div class="right-0 bottom-0 left-0 p-6">
-				<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
-					{eventTitle}
-				</h3>
-			</div>
-			<div class="relative z-20 my-2 flex h-56 flex-col md:h-64 xl:h-84" onclick={flipCard}>
-				<!-- Description -->
-				<div
-					class="text-ecsess-100 border-ecsess-800 flex flex-1 justify-center overflow-y-auto border-y p-6"
-				>
-					{#if eventDescription}
-						<RichText value={eventDescription} />
-					{:else}
-						<p>No description available for this event.</p>
-					{/if}
-				</div>
-			</div>
-
-			<!-- General Links -->
-			<!--add max-h-41 we decide to go back to scrollable-->
-			<div
-				class="relative z-20 flex w-full flex-1 flex-wrap items-center justify-center gap-4 overflow-auto p-6"
-			>
-				{#if generalLink}
-					{#each generalLink as link}
-						<a
-							href={link.url}
-							target="_blank"
-							rel="noopener noreferrer"
-							class="bg-ecsess-600 hover:bg-ecsess-700 shadow-ecsess-400 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold
-							text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg"
-						>
-							<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
-							{link.title}
-						</a>
-					{/each}
-				{/if}
-			</div>
+			<EventDescription {eventTitle} {eventDescription} {generalLink} />
 		</div>
 	</div>
 </div>

 <style>
-	.flip-box {
-		@apply h-full w-full perspective-[1000px];
+	@media (min-width: 448px) {
+		.group:hover [data-flip-side='front']:not(.flipped) {
+			animation: wiggle 0.3s ease-in-out;
+			pointer-events: auto !important;
+		}
+		.group:hover [data-flip-side='back'].flipped {
+			animation: wiggleBack 0.3s ease-in-out;
+			pointer-events: auto !important;
+		}
 	}

-	.flip-box-inner {
-		@apply grid h-full w-full text-center duration-800 transform-3d;
+	[data-flip-side='front'],
+	[data-flip-side='back'] {
+		will-change: transform;
 	}

-	@keyframes rotate-and-back {
+	@keyframes wiggle {
 		0% {
 			transform: rotateY(0);
 		}
@@ -305,26 +162,19 @@
 			transform: rotateY(0);
 		}
 	}
-	@media (min-width: 448px) {
-		/* Apply hover effect only on screens wider than md*/
-		.flip-box:hover .flip-box-front {
-			@apply animate-[rotate-and-back_0.3s_ease-in-out];
+
+	@keyframes wiggleBack {
+		0% {
+			transform: rotateY(180deg);
+		}
+		33% {
+			transform: rotateY(185deg);
+		}
+		66% {
+			transform: rotateY(175deg);
+		}
+		100% {
+			transform: rotateY(180deg);
 		}
 	}
-
-	.flip-box-front,
-	.flip-box-back {
-		@apply col-1 row-1 h-full w-full [-webkit-backface-visibility:hidden] backface-hidden;
-	}
-	.flip-box-front {
-		@apply z-2 rotate-y-0 transform-3d;
-	}
-
-	.flip-box-back {
-		@apply rotate-y-180;
-	}
-
-	.show-back {
-		@apply rotate-y-180;
-	}
-</style>
+</style>
--- a/src/components/event/EventTabsContent.svelte
+++ b/src/components/event/EventTabsContent.svelte
@@ -83,6 +83,10 @@
 		for (const link of e.links ?? []) {
 			if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') {
 				generalLinks.push(link);
+				// Limit general links to 4
+				if (generalLinks.length >= 4) {
+					break;
+				}
 			} else if (link.kind === type && link.url !== '') {
 				return [link];
 			}