restored feed page

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>

src/routes/feed/+page.ts

@@ -0,0 +1,50 @@
+import { entries } from './feed';
+
+interface FeedEntry {
+    content: any;
+    title: string;
+    subtitle: string;
+    date: string;
+}
+
+let entriesPerPage = 8;
+
+export async function load({ params, url }) {
+    // Get page index
+    let pageIndex = Number(url.searchParams.get('p'));
+    if (pageIndex == 0) {
+        pageIndex = 1;
+    }
+
+    // TODO check if index exceeds maximum permitted and redirect (to max page?)
+
+    let feedEntries: FeedEntry[] = [];
+    let start = (pageIndex - 1) * entriesPerPage;
+
+    for (let i = start; i < start + entriesPerPage; i += 1) {
+        // Stop iterating when end reached
+        if (i >= entries.length) {
+            break;
+        }
+        // Vite complains if I don't do this even though it's stupid
+        const path = entries[i].split("/");
+        const page = await import(`./${path[0]}/${path[1]}.md`);
+        const md = page.metadata;
+        
+        feedEntries.push({
+            content: page.default,
+            title: md.title,
+            subtitle: md.subtitle,
+            date: md.date,
+        });
+    }
+
+    let currentPage = pageIndex;
+    let maxPages = Math.ceil(entries.length / entriesPerPage);
+
+    return {
+        currentPage,
+        maxPages,
+        feedEntries,
+    };
+}

src/routes/feed/drawings/2026-march.md

@@ -0,0 +1,5 @@
+---
+title: asdf
+subtitle: asd
+date: aaa
+---

src/routes/feed/drawings/mossig-gender.md

@@ -0,0 +1,5 @@
+---
+title: asdf
+subtitle: asd
+date: aaa
+---

src/routes/feed/feed.ts

@@ -0,0 +1,9 @@
+export let entries: string[] = [
+    // 2026
+    // "misc/lightyears-font",
+    "drawings/mossig-gender",
+    "drawings/2026-march",
+    // 2024
+    // "electronics/3ds-usb-c",
+    // "electronics/deej0461",
+];