added text updates for project n5 devlog; added wide option for alt title banner

src/lib/banner-title-alt.svelte

@@ -8,6 +8,7 @@
         banner = "",
         bannerAlt = "",
         pixelated,
+        wide,
     }: {
         title: string;
         date?: string;
@@ -15,11 +16,28 @@
         banner?: string;
         bannerAlt?: string;
         pixelated?: boolean;
+        wide?: boolean;
     } = $props();
 
 </script>
 
 <div class="container">
+    {#if wide}
+    <div class="subcontainer">
+        <div class="img-container-wide">
+            {#if pixelated}
+            <img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
+            {:else}
+            <img src="{banner}" alt="{bannerAlt}">
+            {/if}
+            <div class="text-container-wide">
+                <div class="text-align-container-wide">
+                    {@render titles({title, subtitle, date})}
+                </div>
+            </div>
+        </div>
+    </div>
+    {:else}
     <div class="subcontainer">
         <div class="img-container">
             {#if pixelated}
@@ -29,17 +47,22 @@
             {/if}
         </div>
         <div class="text-container">
-            <h1 class="title">{title}</h1>
+            {@render titles({title, subtitle, date})}
-            {#if subtitle}
-            <p class="subtitle">[ {subtitle} ]</p>
-            {/if}
-            {#if date}
-            <p class="date">» {date}</p>
-            {/if}
         </div>
     </div>
+    {/if}
 </div>
 
+{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
+<h1 class="title">{title}</h1>
+{#if subtitle}
+<p class="subtitle">[ {subtitle} ]</p>
+{/if}
+{#if date}
+<p class="date">» {date}</p>
+{/if}
+{/snippet}
+
 <SeparatorLine />
 
 <style>
@@ -62,6 +85,26 @@
         width: 50%;
     }
 
+    .img-container-wide {
+        width: 100%;
+        position: relative;
+    }
+
+    .text-align-container-wide {
+        margin: auto 24px;
+        height: fit-content;
+    }
+
+    .text-container-wide {
+        position: absolute;
+        display: flex;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 50%;
+        background-color: #000000bb;
+    }
+
     .text-container {
         width: 48%;
         margin: auto 24px;

src/routes/admin/devlog/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Content from "$lib/content.svelte";
+
+    let text = $state("");
+    let secret = $state("");
+
+    let sendUpdate = function() {
+        var timestamp = Date.now();
+        console.log(text);
+        console.log(timestamp);
+        
+        // var xhr = new XMLHttpRequest();
+        // xhr.open("POST", "https://server.denizk0461.dev:2761/newEntry", true);
+        // xhr.setRequestHeader('Content-Type', 'application/json');
+        // xhr.send(JSON.stringify({
+        //     Timestamp: timestamp,
+        //     Text: text,
+        //     Secret: secret,
+        // }));
+        fetch(
+            "https://server.denizk0461.dev:2761/newEntry",
+            {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json',
+                    "Accept": "application/json",
+                },
+                body: JSON.stringify({    
+                    Timestamp: timestamp,
+                    Text: text,
+                    Secret: secret,
+                })
+            }
+        )
+    };
+</script>
+
+<svelte:head>
+    <title>Devlog Admin Page | denizk0461</title>
+</svelte:head>
+
+<BannerTitleAlt
+    title="Devlog Admin Page"
+    banner="/common/me/a.webp"
+    subtitle="plant mothers only!"
+/>
+
+<Content>
+    <input bind:value="{text}">
+    <input type="password" bind:value="{secret}">
+    <button onclick={sendUpdate}>asdf</button>
+</Content>

src/routes/projects/projectn5/devlog/+page.svelte

@@ -1,44 +1,147 @@
 <script lang="ts">
-    import BannerTitle from "$lib/banner-title.svelte";
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
-    import Content from "$lib/content.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
     import type { DevlogPost } from "$lib/devlog-posts";
     import { posts } from "$lib/devlog-posts";
+    import { onMount } from 'svelte';
+
+    interface DevlogLiveEntry {
+        timestamp: string;
+        text: string;
+    }
+
+    let entries: DevlogLiveEntry[] = $state([]);
+
+	onMount(() => {
+        getRecentEntries();
+    });
+
+    async function getRecentEntries() {
+        let response = await fetch("https://server.denizk0461.dev:2761/recentEntries")
+        let data = await response.json();
+        data.forEach(datum => {
+            var date = new Date(datum.Timestamp)
+            console.log(datum.Timestamp)
+            entries.push({
+                timestamp: `${date.getFullYear()}-${leftpad(date.getMonth() + 1)}-${leftpad(date.getDate())} ${leftpad(date.getHours())}:${leftpad(date.getMinutes())}`,
+                text: datum.Text,
+            })
+        });
+        console.log(data)
+    };
+
+    // Leftpads a single-digit number to two digits
+    function leftpad(n: number): String {
+        var result = n.toString();
+        if (n < 10) {
+            result = "0" + result
+        }
+        return result;
+    }
 </script>
 
+
 <svelte:head>
     <title>Project N5 Devlog | denizk0461</title> 
 </svelte:head>
 
-<Content>
+<BannerTitleAlt
-    <BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp" />
+    title="Project N5; Development Log"
+    banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp"
+    wide
+/>
 
-    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
+<ContentSidebar>
 
-    <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
+    <div slot="side-left" class="live-devlog-panel">
-
+        <h2>*New* Small Updates!</h2>
-    <div class="post-container">
+        <p>Here I'll post some smaller text only updates about the game's progress!</p>
-        {#each posts as post, index}
+        <div class="live-devlog-container">
-        {@render devlogPost({post, index})}
+            {#each entries as entry}
-        {/each}
+                {@render liveUpdate({entry})}
+            {/each}
+        </div>
     </div>
-</Content>
+
+    <div slot="main">
+        <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
+
+        <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
+
+        <div class="post-container">
+            {#each posts as post, index}
+            {@render devlogPost({post, index})}
+            {/each}
+        </div>
+    </div>
+</ContentSidebar>
+
+{#snippet liveUpdate({entry}: {entry: DevlogLiveEntry})}
+<div class="live-devlog-entry notched-small">
+    <p class="live-devlog-entry-time">{entry.timestamp}</p>
+    <p class="live-devlog-entry-content">{entry.text}</p>
+</div>
+{/snippet}
 
 {#snippet devlogPost({post, index}: {post: DevlogPost, index: number})}
-<a href="/projects/projectn5/devlog/{post.date}/" class="post">
+<div class="post-supercontainer">
-    <div class="post-img-container">
+    <a href="/projects/projectn5/devlog/{post.date}/" class="post">
-        <img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
+        <div class="post-img-container">
-        <p class="post-number">#{posts.length - index}</p>
+            <img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
-    </div>
+            <p class="post-number">#{posts.length - index}</p>
-    <div class="post-text-container">
+        </div>
-        <p class="post-date">{post.subtitle}</p>
+        <div class="post-text-container">
-        <p class="post-title">{post.title}</p>
+            <p class="post-date">{post.subtitle}</p>
-    </div>
+            <p class="post-title">{post.title}</p>
-</a>
+        </div>
+    </a>
+</div>
 {/snippet}
 
 <style>
+    :root {
+        --color-laura: #C76668CC;
+        --color-laura-darker: #A55051CC;
+    }
+    /* Live update list */
+    .live-devlog-panel {
+        margin: 16px;
+    }
+    .live-devlog-container {
+        display: flex;
+        gap: 4px;
+        margin: 0 16px;
+        flex-direction: column;
+    }
+
+    .live-devlog-entry {
+        background-color: var(--color-background-highlight-hover);
+    }
+
+    .live-devlog-entry-time {
+        font-family: var(--font-mono);
+        font-size: 0.8rem;
+        font-weight: 700;
+        width: 100%;
+        background-color: #00000066;
+    }
+
+    .live-devlog-entry-content, .live-devlog-entry-time {
+        padding: 8px 16px;
+        margin: 0;
+    }
+
+    .live-devlog-entry-content {
+        font-size: 1.0rem;
+    }
+
+    /* Post list */
+    .post-supercontainer {
+        width: 30%;
+    }
+
     .post-container {
-        max-width: 1200px;
+        max-width: 1600px;
         margin-left: auto;
         margin-right: auto;
         display: flex;
@@ -48,7 +151,6 @@
     }
 
     .post {
-        width: 40%;
         text-decoration: none;
         background-color: #00000044;
         display: flex;
@@ -153,4 +255,16 @@
         padding: 0;
         line-height: 1rem;
     }
+
+    @media screen and (max-width: 1700px) {
+        .post-supercontainer {
+            width: 50% !important;
+        }
+    }
+
+    @media screen and (max-width: 1200px) {
+        .post-supercontainer {
+            width: 100% !important;
+        }
+    }
 </style>