From dba2c885a9b848872778f78eba15b2333270ccd3 Mon Sep 17 00:00:00 2001
From: JBierenbroodspot <jim12.brood@gmail.com>
Date: Wed, 12 Jul 2023 23:28:52 +0200
Subject: [PATCH] Did a bunch of stuff

---
 .../components/about/about.component.svelte   |  5 +++
 .../full_name.svelte}                         |  0
 src/lib/components/about/socials.svelte       | 26 ++++++++++++++
 src/lib/components/base.component.svelte      |  6 ++++
 .../cv_info_articles/info.component.ts        |  1 -
 .../info.article.svelte}                      | 15 +++++---
 .../info.component.svelte                     | 34 ++++++++++++++-----
 src/lib/types/cv_types.ts                     |  2 +-
 src/routes/+page.svelte                       |  9 +++--
 9 files changed, 81 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/about/about.component.svelte
 rename src/lib/components/{name_and_socials/name.component.svelte => about/full_name.svelte} (100%)
 create mode 100644 src/lib/components/about/socials.svelte
 create mode 100644 src/lib/components/base.component.svelte
 delete mode 100644 src/lib/components/cv_info_articles/info.component.ts
 rename src/lib/components/{cv_info_articles/info.article.component.svelte => info/info.article.svelte} (74%)
 rename src/lib/components/{cv_info_articles => info}/info.component.svelte (62%)

diff --git a/src/lib/components/about/about.component.svelte b/src/lib/components/about/about.component.svelte
new file mode 100644
index 0000000..6f51a56
--- /dev/null
+++ b/src/lib/components/about/about.component.svelte
@@ -0,0 +1,5 @@
+<script context="module" lang="ts">
+	export interface SubComponentArgs {}
+
+	export const globals = {} as const;
+</script>
diff --git a/src/lib/components/name_and_socials/name.component.svelte b/src/lib/components/about/full_name.svelte
similarity index 100%
rename from src/lib/components/name_and_socials/name.component.svelte
rename to src/lib/components/about/full_name.svelte
diff --git a/src/lib/components/about/socials.svelte b/src/lib/components/about/socials.svelte
new file mode 100644
index 0000000..dd4dd65
--- /dev/null
+++ b/src/lib/components/about/socials.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Social } from '$lib/types/cv_types';
+
+	export let socials: Social[] = [
+		{ icon: '', url: 'www.google.com', description: 'Test' }
+	];
+</script>
+
+<table>
+	<tbody>
+		{#each socials as social}
+			<tr>
+				<td>{social.icon}</td>
+				<td>
+					<a href="{social.url.toString()}">{social.description}</a>
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style lang="scss">
+	table {
+		grid-area: d;
+	}
+</style>
diff --git a/src/lib/components/base.component.svelte b/src/lib/components/base.component.svelte
new file mode 100644
index 0000000..63ab90d
--- /dev/null
+++ b/src/lib/components/base.component.svelte
@@ -0,0 +1,6 @@
+<script context="module" lang="ts">
+	export type Arg = { argKey: string; argValue: any };
+	export let args: Arg[] = [];
+</script>
+
+<style lang="scss"></style>
diff --git a/src/lib/components/cv_info_articles/info.component.ts b/src/lib/components/cv_info_articles/info.component.ts
deleted file mode 100644
index 2e67cf1..0000000
--- a/src/lib/components/cv_info_articles/info.component.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const infoBodyPadding: string = '56px' as const;
diff --git a/src/lib/components/cv_info_articles/info.article.component.svelte b/src/lib/components/info/info.article.svelte
similarity index 74%
rename from src/lib/components/cv_info_articles/info.article.component.svelte
rename to src/lib/components/info/info.article.svelte
index 36dfb81..b5b259d 100644
--- a/src/lib/components/cv_info_articles/info.article.component.svelte
+++ b/src/lib/components/info/info.article.svelte
@@ -1,13 +1,20 @@
+<script context="module" lang="ts">
+	export interface InfoArticle {
+		title: string;
+		bodyText: string;
+	}
+</script>
+
 <script lang="ts">
-	export let title: string;
-	export let bodyText: string;
+	import type { SubComponentArgs } from '$lib/components/info/info.component.svelte';
+	export let args: SubComponentArgs;
 </script>
 
 <article>
 	<h2>
-		<span>{title}</span>
+		<span>{args.title}</span>
 	</h2>
-	<p>{bodyText}</p>
+	<p>{args.bodyText}</p>
 </article>
 
 <style lang="scss">
diff --git a/src/lib/components/cv_info_articles/info.component.svelte b/src/lib/components/info/info.component.svelte
similarity index 62%
rename from src/lib/components/cv_info_articles/info.component.svelte
rename to src/lib/components/info/info.component.svelte
index 705e9d3..f76a579 100644
--- a/src/lib/components/cv_info_articles/info.component.svelte
+++ b/src/lib/components/info/info.component.svelte
@@ -1,17 +1,35 @@
+<script context="module" lang="ts">
+	export interface SubComponentArgs {
+		title: string;
+		bodyText: string;
+	}
+
+	export const globals = {
+		infoBodyPadding: '56px' as const
+	} as const;
+</script>
+
 <script lang="ts">
-	import InfoArticleComponent from './info.article.component.svelte';
-	import { infoBodyPadding } from './info.component';
+	import InfoArticleComponent from './info.article.svelte';
 
-	import type { InfoArticleList } from '$lib/types/cv_types';
+	const topBorderStyle = (): string => {
+		return subComponents === undefined ? '' : 'no-top';
+	};
 
-	export let infoArticles: InfoArticleList;
+	export let subComponents: SubComponentArgs[];
 
-	let hasTopBorder: string = infoArticles === undefined ? '' : 'no-top';
+	let locals = {
+		hasTopBorder: topBorderStyle()
+	};
 </script>
 
-<div id="infoBody" class="{hasTopBorder}" style="--padding: {infoBodyPadding};">
-	{#each infoArticles as { title, bodyText }, _}
-		<InfoArticleComponent title="{title}" bodyText="{bodyText}" />
+<div
+	id="infoBody"
+	class="{locals.hasTopBorder}"
+	style="--padding: {globals.infoBodyPadding};"
+>
+	{#each subComponents as article}
+		<InfoArticleComponent args="{article}" />
 	{/each}
 </div>
 
diff --git a/src/lib/types/cv_types.ts b/src/lib/types/cv_types.ts
index 09db9a1..94a705b 100644
--- a/src/lib/types/cv_types.ts
+++ b/src/lib/types/cv_types.ts
@@ -17,6 +17,6 @@ export type InfoArticleList = InfoArticle[];
 
 export type Social = {
 	icon: string;
-	url: URL;
+	url: string;
 	description: string;
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3874b17..1bdf736 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { SkillList, InfoArticleList } from '$lib/types/cv_types';
 
-	import InfoComponent from '$lib/components/cv_info_articles/info.component.svelte';
-	import NameComponent from '$lib/components/name_and_socials/name.component.svelte';
+	import InfoComponent from '$lib/components/info/info.component.svelte';
+	import NameComponent from '$lib/components/about/full_name.svelte';
 	import SkillAreaComponent from '$lib/components/proficiency_trackers/skill_area.component.svelte';
+	import SocialsComponent from '$lib/components/about/socials.svelte';
 
 	const skills: SkillList = [];
 	const infoArticles: InfoArticleList = [
@@ -14,7 +15,8 @@
 
 <section id="mainContent">
 	<NameComponent />
-	<InfoComponent infoArticles="{infoArticles}" />
+	<InfoComponent subComponents="{infoArticles}" />
+	<SocialsComponent />
 	<SkillAreaComponent />
 </section>
 
@@ -23,6 +25,7 @@
 		display: grid;
 		grid-template:
 			'a b' 1fr
+			'd b' 1fr
 			'c b' auto / 1fr 3fr;
 	}
 </style>