Did a bunch of stuff

main
JBierenbroodspot 11 months ago
parent 01d69949d0
commit dba2c885a9

@ -0,0 +1,5 @@
<script context="module" lang="ts">
export interface SubComponentArgs {}
export const globals = {} as const;
</script>

@ -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>

@ -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>

@ -1 +0,0 @@
export const infoBodyPadding: string = '56px' as const;

@ -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">

@ -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>

@ -17,6 +17,6 @@ export type InfoArticleList = InfoArticle[];
export type Social = {
icon: string;
url: URL;
url: string;
description: string;
};

@ -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>

Loading…
Cancel
Save