<script lang="ts">
    import Header from "$lib/header.svelte";
    import type { Project, Link } from './projects';
    import { projects } from './projects';
</script>

<Header />

{#each projects as project}
    {@render projectSummary({ project })}
{/each}

{#snippet projectSummary({
    project
}: {
    project: Project;
})}
    <div>
        <h3 id="{project.id}">{project.title}</h3>
        {#each project.paragraphs as paragraph}
            <p>{@html paragraph}</p>
        {/each}
        <ul>
            {#each project.links as link}
                <li><a href="{link.link}">{@html link.text}</a></li>
            {/each}
        </ul>
    </div>
{/snippet}