restored feed page

2026-04-13 16:54:50 +02:00
parent c076be1d5e
commit 188363d049
5 changed files with 188 additions and 0 deletions
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -0,0 +1,119 @@
+<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 be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</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>