Add Guild Events

svelte-society · Jul 7, 2024 · aeb575a · aeb575a
1 parent ea97126
commit aeb575a
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 7 deletions.
diff --git a/packages/service/src/collector.ts b/packages/service/src/collector.ts
@@ -4,12 +4,13 @@ import { GuildService } from "./services/guild-service.js";
 import { PackageService } from "./services/package-service.js";
 import { type ConnectedService, SocietyStatsService } from "./services/society-stats-service.js";
 import { VideoService } from "./services/video-service.js";
+import {GuildEventService} from "./services/guild-event-service.js";
 
 // biome-ignore lint/suspicious/noExplicitAny:
 export class CollectorService extends ComposedService<any> {
 	private readonly stats = new SocietyStatsService();
 	constructor(private userService: ConnectedService) {
-		super([new VideoService(), new PackageService(), new ArticleService(), new GuildService()]);
+		super([new VideoService(), new PackageService(), new ArticleService(), new GuildService(), new GuildEventService()]);
 	}
 
 	async getInformation(metadata: ServiceMetadata): Promise<ContentData & StatsData & Record<string, unknown>> {

diff --git a/sites/www/src/lib/ui/ContentCard.svelte b/sites/www/src/lib/ui/ContentCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Tags from './Tags.svelte';
-	import SvelteMarkdown from "svelte-markdown";
-	import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+	import SvelteMarkdown from 'svelte-markdown';
+	import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 	let { id, title, description, type, author, time, views, likes, tags, url, children } = $props();
 </script>
 
@@ -10,7 +10,11 @@
 		<div class="flex">
 			<span class="font-semibold">{type}&nbsp;</span>
 			<span class="flex text-gray-500"
-				><span>by {author}&nbsp;•{#if time}&nbsp;{formatDistanceToNow(time)}&nbsp;•{/if}&nbsp;</span>
+				><span
+					>by {author}&nbsp;•{#if time}&nbsp;{formatDistanceToNow(time, {
+							addSuffix: true
+						})}&nbsp;•{/if}&nbsp;</span
+				>
 				<span class="flex items-center gap-1">
 					{views}
 					<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -60,7 +64,7 @@
 		</form>
 	</div>
 
-	<h2 class="mb-2 text-xl font-bold"><a href="{url}">{title}</a></h2>
+	<h2 class="mb-2 text-xl font-bold"><a href={url}>{title}</a></h2>
 	<p class="mb-4 text-gray-700"><SvelteMarkdown source={description} /></p>
 
 	{@render children()}
@@ -70,6 +74,8 @@
 			<Tags {tags} />
 		</div>
 
-		{#if time}<div class="text-xs text-gray-500">&nbsp;{formatDistanceToNow(time)}</div>{/if}
+		{#if time}<div class="text-xs text-gray-500">
+				&nbsp;{formatDistanceToNow(time, { addSuffix: true })}
+			</div>{/if}
 	</div>
 </div>
diff --git a/sites/www/src/lib/ui/cards/GuildEventCard.svelte b/sites/www/src/lib/ui/cards/GuildEventCard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Content from '../ContentCard.svelte';
+	let { id, children, cover, startAt, venue, ...props } = $props();
+</script>
+
+<Content
+	{...props}
+	time={startAt}
+	tags={[{ id: venue ? 'physical' : 'online', name: venue ? 'Physical' : 'Online' }]}
+	type="Event"
+>
+	{#if cover}
+		<figure>
+			<img src={cover} />
+		</figure>
+	{/if}
+	{#if Array.isArray(venue)}
+		<section>
+			<iframe
+				frameborder="0"
+				src="https://www.google.com/maps/embed/v1/place?q={venue[1]},{venue[0]}&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
+			></iframe>
+		</section>
+	{/if}
+</Content>
+
+<style>
+	figure {
+		margin: 0;
+		padding: 0;
+	}
+
+	figure img {
+		width: 100%;
+		border-radius: 8px;
+	}
+	iframe {
+		max-width: 100%;
+		overflow: hidden;
+		aspect-ratio: 3/1;
+		width: 100%;
+		border: 0;
+		border-radius: 8px;
+	}
+</style>
diff --git a/sites/www/src/routes/(app)/+page.server.ts b/sites/www/src/routes/(app)/+page.server.ts
@@ -2,6 +2,7 @@ import { CollectorService } from 'sveltesociety.dev-service/src/collector.js';
 import { GuildService } from 'sveltesociety.dev-service/src/services/guild-service';
 import { ConnectedService } from 'sveltesociety.dev-service/src/services/society-stats-service.js';
 import type { PageServerLoad } from './$types';
+import { GuildEventService } from 'sveltesociety.dev-service/src/services/guild-event-service';
 
 export const load: PageServerLoad = async () => {
 	// TODO: get user info from request (cookie?)
@@ -18,7 +19,8 @@ export const load: PageServerLoad = async () => {
 			{ type: 'package', identifier: 'svelte' },
 			{ type: 'package', identifier: 'svelte-atoms' },
 			{ type: 'guild', identifier: 'london-javascript' },
-			...(await new GuildService().getAllServiceMetadata())
+			...(await new GuildService().getAllServiceMetadata()),
+			...(await new GuildEventService().getAllServiceMetadata())
 		])
 	};
 };
diff --git a/sites/www/src/routes/(app)/+page.svelte b/sites/www/src/routes/(app)/+page.svelte
@@ -6,6 +6,7 @@
 	import PackageCard from '$lib/ui/cards/PackageCard.svelte';
 	import RecipeCard from '$lib/ui/cards/RecipeCard.svelte';
 	import VideoCard from '$lib/ui/cards/VideoCard.svelte';
+	import GuildEventCard from '$lib/ui/cards/GuildEventCard.svelte';
 	export let data: PageData;
 
 	let tags = [
@@ -52,5 +53,7 @@
 		/>
 	{:else if item.type === 'guild'}
 		<GuildCard {...item} title={item.name} time={item.lastUpdate} tags={[]} />
+	{:else if item.type === 'guild-event'}
+		<GuildEventCard {...item} title={item.name} tags={[]} />
 	{/if}
 {/each}