feat: add project and repo urls

src/lib/components/site/projects/projects-item.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { Circle } from 'radix-icons-svelte';
+	import { Circle, ExternalLink, GithubLogo } from 'radix-icons-svelte';
 	import { Calendar, Scale } from 'lucide-svelte';
 	import * as Card from '$lib/components/ui/card';
 	import type { Project } from '$lib/content/projects';
+	import { Button } from '$lib/components/ui/button';
 
 	export let projectsItem: Project;
-	let { logo, title, description, languages, license, year } = projectsItem;
+	let { logo, title, description, gitHubUrl, projectUrl, languages, license, year } = projectsItem;
 </script>
 
 <Card.Root class="mb-6 inline-block hover:bg-muted/50">
@@ -16,26 +17,42 @@
 				{description}
 			</Card.Description>
 		</div>
-		<div class="justify-self-end">
+		<div class="h-full justify-self-end">
-			<enhanced:img src={logo} class="rounded-sm" alt={`${title} logo`} />
+			<enhanced:img src={logo} class="mb-2 rounded-sm" alt={`${title} logo`} />
 		</div>
 	</Card.Header>
 	<Card.Content>
-		<div class="flex space-x-4 text-sm text-muted-foreground">
+		<div class="flex justify-between">
-			{#each languages as language}
+			<div class="flex space-x-4 text-sm text-muted-foreground">
+				{#each languages as language}
+					<div class="flex items-center">
+						<Circle class="mr-1 h-3 w-3 {language.color}" />
+						{language.name}
+					</div>
+				{/each}
 				<div class="flex items-center">
-					<Circle class="mr-1 h-3 w-3 {language.color}" />
+					<Scale class="mr-1 h-3 w-3" />
-					{language.name}
+					{license}
+				</div>
+				<div class="flex items-center">
+					<Calendar class="mr-1 h-3 w-3" />
+					{year}
 				</div>
-			{/each}
-			<div class="flex items-center">
-				<Scale class="mr-1 h-3 w-3" />
-				{license}
-			</div>
-			<div class="flex items-center">
-				<Calendar class="mr-1 h-3 w-3" />
-				{year}
 			</div>
+			{#if gitHubUrl || projectUrl}
+				<div class="flex items-center">
+					{#if gitHubUrl}
+						<Button variant="ghost" size="icon" href={gitHubUrl}>
+							<GithubLogo />
+						</Button>
+					{/if}
+					{#if projectUrl}
+						<Button variant="ghost" size="icon" href={projectUrl}>
+							<ExternalLink />
+						</Button>
+					{/if}
+				</div>
+			{/if}
 		</div>
 	</Card.Content>
 </Card.Root>

src/lib/components/site/projects/projects.svelte

@@ -5,12 +5,6 @@
 
 <div class="w-full columns-1 gap-6 md:columns-2">
 	{#each projects as project}
-		{#if project.url}
+		<Projects.Item projectsItem={project} />
-			<a href={project.url} target="_blank">
-				<Projects.Item projectsItem={project} />
-			</a>
-		{:else}
-			<Projects.Item projectsItem={project} />
-		{/if}
 	{/each}
 </div>

src/lib/content/projects.ts

@@ -7,16 +7,20 @@ import omnidashLogo from '$lib/assets/projects/omnidash-logo.png?enhanced';
 import azureGeocodeMappingLogo from '$lib/assets/projects/azure-geocode-mapping-logo.png?enhanced';
 import slayerWeightCalcLogo from '$lib/assets/projects/slayerweightcalc-logo.png?enhanced';
 
+// TODO: Use vite glob import to import all images from a folder and select them based on their name
+// const gallery = Object.values(import.meta.glob('@assets/asso/*.{png,jpg,jpeg,PNG,JPEG}', { eager: true, as: 'url' }))
+
 export type ProgrammingLanguage = {
 	name: string;
 	color: string;
 };
 
 export type Project = {
-	url?: string;
 	logo: string;
 	title: string;
 	description: string;
+	gitHubUrl?: string;
+	projectUrl?: string;
 	languages: ProgrammingLanguage[];
 	license: string;
 	year: string;
@@ -24,11 +28,12 @@ export type Project = {
 
 const projects: Project[] = [
 	{
-		url: 'https://hellob.art',
 		logo: helloBartLogo,
 		title: 'hellob.art',
 		description:
 			'The website you are currently visiting. A personal portfolio website that regularly gets rebuilt. Currently it has been built in Svelte and SvelteKit and uses shadcn-svelte and Tailwind CSS for component styling.',
+		projectUrl: 'https://hellob.art',
+		gitHubUrl: 'https://github.com/bartvdbraak/hellob.art',
 		year: '2020',
 		license: 'GPLv3',
 		languages: [
@@ -39,11 +44,12 @@ const projects: Project[] = [
 		]
 	},
 	{
-		url: 'https://omnidash.io',
 		logo: omnidashLogo,
 		title: 'Omnidash',
 		description:
 			'Omnidash is an open-source dashboard for retrieving ticketing information from various sources and displaying them in a single view.',
+		projectUrl: 'https://omnidash.io',
+		gitHubUrl: 'https://github.com/bartvdbraak/omnidash',
 		year: '2023',
 		license: 'GPLv3',
 		languages: [
@@ -54,26 +60,12 @@ const projects: Project[] = [
 		]
 	},
 	{
-		url: 'https://github.com/bartvdbraak/azure-geocode-mapping',
-		logo: azureGeocodeMappingLogo,
-		title: 'azure-geocode-mapping',
-		description:
-			'azure-geocode-mapping is a Python package that generates a mapping of Azure regions to their display names and geocodes.',
-		year: '2023',
-		license: 'MIT',
-		languages: [
-			{
-				name: 'Python',
-				color: 'text-blue-400'
-			}
-		]
-	},
-	{
-		url: 'https://www.github.com/bartvdbraak/keyweave',
 		logo: keyweaveLogo,
 		title: 'Keyweave',
 		description:
 			'Keyweave is an open-source tool crafted in Rust to seamlessly fetch secrets from Azure Key Vault and weave them into a convenient .env file.',
+		gitHubUrl: 'https://www.github.com/bartvdbraak/keyweave',
+		projectUrl: 'https://docs.rs/crate/keyweave/latest',
 		year: '2023',
 		license: 'GPLv3',
 		languages: [
@@ -87,6 +79,22 @@ const projects: Project[] = [
 			}
 		]
 	},
+	{
+		logo: azureGeocodeMappingLogo,
+		title: 'azure-geocode-mapping',
+		description:
+			'azure-geocode-mapping is a Python package that generates a mapping of Azure regions to their display names and geocodes.',
+		projectUrl: 'https://bartvdbraak.github.io/azure-geocode-mapping/geo.mapping.json',
+		gitHubUrl: 'https://github.com/bartvdbraak/azure-geocode-mapping',
+		year: '2023',
+		license: 'MIT',
+		languages: [
+			{
+				name: 'Python',
+				color: 'text-blue-400'
+			}
+		]
+	},
 	{
 		logo: videoWallLogo,
 		title: 'Videowall',
@@ -124,11 +132,11 @@ const projects: Project[] = [
 		]
 	},
 	{
-		url: 'https://zaantje.com/',
 		logo: zaantjeLogo,
 		title: 'Zaantje',
 		description:
 			'A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of Zaandam, showcasing locations of famous music videos.',
+		projectUrl: 'https://zaantje.com/',
 		year: '2020',
 		license: 'Private',
 		languages: [
@@ -139,11 +147,12 @@ const projects: Project[] = [
 		]
 	},
 	{
-		url: 'https://bartvdbraak.github.io/SlayerWeightCalculator/',
 		logo: slayerWeightCalcLogo,
 		title: 'SlayerWeightCalculator',
 		description:
 			'I created this Slayer calculator for OldSchool RuneScape in 2019, but I am no longer maintaining it. As of 23th April 2023, I have decided to publicly archive the repository for it.',
+		projectUrl: 'https://bartvdbraak.github.io/SlayerWeightCalculator/',
+		gitHubUrl: 'https://github.com/bartvdbraak/SlayerWeightCalculator',
 		year: '2019',
 		license: 'BSD-2',
 		languages: [