pages/src/routes/games/+page.svelte

<script lang="ts">
    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
    import ContentSidebar from "$lib/content-sidebar.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import LinkList from "$lib/link-list.svelte";
    import type { Project } from '$lib/projects';
    import { games } from '$lib/projects';
</script>

<svelte:head>
    <title>Games | denizk0461</title> 
</svelte:head>

<BannerTitleAlt
    title="Games"
    banner="/projects/banner.webp"
    subtitle="Just some small game projects"
/>

<ContentSidebar>

    <TableOfContents slot="side-left" />
    
    <div slot="main">
        <p>Here you'll find all the game projects I've put online!</p>
        {#each games as game}
            {@render gameSummary({ game: game })}
        {/each}
    </div>

</ContentSidebar>

{#snippet gameSummary({
    game
}: {
    game: Project;
})}
    <div>
        <h3 id="{game.id}">{game.title}</h3>
        {#if game.subtitle}
        <p class="project-subtitle">» {game.subtitle}</p>
        {/if}
        {#if game.banner}
        <img class="project-banner" src="{game.banner}">
        {/if}
        {#if game.icon}
        <img class="project-icon" src="{game.icon}">
        {/if}
        {#each game.paragraphs as paragraph}
            <p>{@html paragraph}</p>
        {/each}
        <LinkList entries={game.links} />
    </div>
{/snippet}