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

<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import Banner2 from "$lib/banner2.svelte";
    import TableOfContents from "$lib/components/table-of-contents.svelte";

    export let data;
</script>

<svelte:head>
    <title>Art Feed | denizk0461</title>
</svelte:head>

{#snippet pageButtons(currentIndex: number)}
    <div class="page-button-container blurred-background">
        {#if currentIndex == 1}
            <p class="page-button page-button-left">x</p>
        {:else}
            <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
        {/if}

        {#each { length: data.maxPages }, index}
            <a class="page-index" href="?p={index + 1}">{index + 1}</a>
        {/each}

        {#if currentIndex == data.maxPages}
            <p class="page-button page-button-right">x</p>
        {:else}
            <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
        {/if}
    </div>
{/snippet}

<Content>
    <Banner2
        title="Art & Project Feed"
        banner="banner.webp"
        bannerAlt="Mirror picture of me, pixelated beyond recognition"
        subtitle="subtitle missing"
    />

    {@render pageButtons(data.currentPage)}

    <p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>

    <p>This page is intended to offer a shared space for all my projects without the need to create strictly-separated pages for each hobby. Some other pages on this website have been merged into this one; namely the "Small Projects" and "Drawing Gallery" pages, so don't be surprised if content from those pages shows up here.</p>

    <p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>

    <p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>

    <TableOfContents />
    
    {#each data.feedEntries as entry}
        <h2>{entry.title}</h2>
        <p class="subtitle">{entry.subtitle}</p>
        <p class="subtitle">{entry.date}</p>
        <svelte:component this={entry.content} />
    {/each}

</Content>

<style>
    .page-button-container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        overflow: hidden;
        width: fit-content;
        margin: 12px auto;
        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }

    .page-button, .page-index {
        font-family: var(--font-mono);
        padding: 8px 18px;
        font-weight: 600;
        margin: 0;
        transition: background-color var(--duration-animation) var(--anim-curve);
    }

    .page-button {
        color: var(--color-text);
    }
    .page-button-left {
        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }
    .page-button-right {
        border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }
    .page-button-clickable:hover {
        cursor: pointer;
    }

    .page-index:link, .page-index:visited {
        color: var(--color-text)
    }

    .page-index:hover, .page-button-clickable:hover {
        text-decoration: none;
        background-color: var(--color-background-highlight-alt);
    }

    .subtitle {
        font-family: var(--font-mono);
        margin: 0;
        font-size: 1rem;
        line-height: 1.4rem;
        font-style: italic;
        font-weight: 700;
        color: var(--color-highlight-alt);
    }

    .subtitle::before {
        content: "<!-- ";
    }

    .subtitle::after {
        content: " -->";
    }
</style>