feat: show latest log in hoe

src/components/note.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Note } from "$lib/notes";
+	import Token from "./token.svelte";
+
+    export let id: string;
+    export let note: Note;
+    export let isHighlighted = false;
+    export let onlyContent = false;
+    
+    const renderDate = (timestamp: number) => {
+        return (new Date(timestamp)).toLocaleString("en-GB", {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+        })
+    }
+
+    const getOutgoingLink = (name: string, link: string) => {
+        if (name === "bsky") {
+            if (link.startsWith("https://bsky.gaze.systems")) {
+                return link
+            }
+            return `https://bsky.gaze.systems/post/${link.split('/').pop()}`
+        }
+        return link
+    }
+    // this is ASS this should be a tailwind class
+    const getTextShadowStyle = (color: string) => {
+        return `text-shadow: 0 0 1px theme(colors.ralsei.black), 0 0 5px ${color};`
+    }
+    const outgoingLinkColors: Record<string, string> = {
+        bsky: "rgb(0, 133, 255)",
+    }
+</script>
+
+<div class="text-wrap break-words max-w-[70ch] leading-none">
+{#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/> <Token v={id} keywd small={!isHighlighted}/><Token v="#" punct/>&nbsp;&nbsp;{/if}<Token v={note.content} str/>
+{#each note.outgoingLinks ?? [] as {name, link}}
+{@const color = outgoingLinkColors[name]}
+<span class="text-sm"><Token v="(" punct/><a style="color: {color};{getTextShadowStyle(color)}" href={getOutgoingLink(name, link)}>{name}</a><Token v=")" punct/></span>
+{/each}
+</div>

src/routes/+page.server.ts

@@ -1,4 +1,5 @@
 import { lastFmGetNowPlaying } from "$lib/lastfm"
+import { readNote, readNotesList } from "$lib/notes.js"
 import { steamGetNowPlaying } from "$lib/steam"
 
 export const load = async ({}) => {
@@ -9,7 +10,9 @@ export const load = async ({}) => {
         const no = getBannerNo(banners)
         banners.push(no)
     }
-    return {banners, lastTrack, lastGame}
+    const lastNoteId = readNotesList()[0]
+    const lastNote = readNote(lastNoteId)
+    return {banners, lastTrack, lastGame, lastNote, lastNoteId}
 }
 
 const getBannerNo = (others: number[]) => {

src/routes/+page.svelte

@@ -1,10 +1,21 @@
-<script>
+<script lang="ts">
 	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import Note from '../components/note.svelte';
 	import Tooltip from '../components/tooltip.svelte';
 	import Window from '../components/window.svelte';
 	import LatestStuff from './lateststuff.md';
 
 	export let data;
+
+    const renderDate = (timestamp: number) => {
+        return (new Date(timestamp)).toLocaleString("en-GB", {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+        })
+    }
 </script>
 
 <div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
@@ -131,16 +142,24 @@
 					<li>
 						<a href="https://pmart.gaze.systems">random project moon art</a>
 					</li>
-					<li>
-						<a href="https://git.gaze.systems">gitea</a>
-						<span class="text-sm">(if i like you ask me for an acc ;3)</span>
-					</li>
 				</ul>
 			</div>
 		</Window>
-		<Window title="now happening" style="mt-auto" removePadding>
+		<Window title="status" style="mt-auto" removePadding>
+			<div class="m-1.5 flex flex-col font-monospace">
+				<div
+					class="prose prose-ralsei items-center p-1 border-4 text-sm font-bold bg-ralsei-black"
+					style="border-style: double double none double;"
+				>
+					<a href="/entries">last log</a>
+					<span class="border-4 pl-[1ch]" style="border-style: none none none double;">published on {renderDate(data.lastNote.published)}</span>
+				</div>
+				<div class="mt-0 p-1 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
+					<Note id={data.lastNoteId} note={data.lastNote} onlyContent/>
+				</div>
+			</div>
 			{#if data.lastTrack}
-				<div class="flex flex-row m-2 border-4 border-double">
+			<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
 				<!-- svelte-ignore a11y-missing-attribute -->
 				{#if data.lastTrack.image}
 					<img
@@ -178,7 +197,7 @@
 			</div>
 			{/if}
 			{#if data.lastGame}
-				<div class="flex flex-row m-2 border-4 border-double">
+			<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
 				<!-- svelte-ignore a11y-missing-attribute -->
 				<img
 					class="border-4 w-16 h-16"
@@ -206,9 +225,6 @@
 				</div>
 			</div>
 			{/if}
-			{#if !data.lastGame && !data.lastTrack}
-				<p class="text-xl m-2">nothing, apparently.</p>
-			{/if}
 		</Window>
 	</div>
 </div>

src/routes/log/+page.svelte

@@ -1,37 +1,11 @@
 <script lang="ts">
 	import Window from '../../components/window.svelte';
     import Token from '../../components/token.svelte';
+    import Note from '../../components/note.svelte';
 
 	export let data;
 
-    const renderDate = (timestamp: number) => {
-        return (new Date(timestamp)).toLocaleString("en-GB", {
-            year: "2-digit",
-            month: "2-digit",
-            day: "2-digit",
-            hour: "2-digit",
-            minute: "2-digit",
-        })
-    }
-
     const highlightedNote = data.notes.get(data.highlightedNote ?? '') ?? null
-
-    const getOutgoingLink = (name: string, link: string) => {
-        if (name === "bsky") {
-            if (link.startsWith("https://bsky.gaze.systems")) {
-                return link
-            }
-            return `https://bsky.gaze.systems/post/${link.split('/').pop()}`
-        }
-        return link
-    }
-    // this is ASS this should be a tailwind class
-    const getTextShadowStyle = (color: string) => {
-        return `text-shadow: 0 0 1px theme(colors.ralsei.black), 0 0 5px ${color};`
-    }
-    const outgoingLinkColors: Record<string, string> = {
-        bsky: "rgb(0, 133, 255)",
-    }
 </script>
 
 <svelte:head>
@@ -55,15 +29,9 @@
 <Token v="[" punct/>gazesystems <Token v="/" keywd/><Token v="]$" punct/> <Token v="ls" funct/> <Token v="log" /> <Token v="|" punct/> <Token v="each" funct/> <Token v="&#123;" punct/><Token v="|" punct/><Token v="file"/><Token v="|" punct/> <Token v="render" funct/> <Token v="(" punct/><Token v="open" funct/> <Token v="$file.name" /><Token v=")" punct/><Token v="&#125;" punct/>
 <br>
 <br>
-{#each data.notes as [noteId, note], index}
-{@const isHighlighted = noteId === data.highlightedNote}
-<div class="text-wrap break-words max-w-[70ch] leading-none">
-<Token v={renderDate(note.published)} small={!isHighlighted}/> <Token v={noteId} keywd small={!isHighlighted}/><Token v="#" punct/>&nbsp;&nbsp;<Token v={note.content} str/>
-{#each note.outgoingLinks ?? [] as {name, link}}
-{@const color = outgoingLinkColors[name]}
-<span class="text-sm"><Token v="(" punct/><a style="color: {color};{getTextShadowStyle(color)}" href={getOutgoingLink(name, link)}>{name}</a><Token v=")" punct/></span>
-{/each}
-</div>
+{#each data.notes as [id, note], index}
+{@const isHighlighted = id === data.highlightedNote}
+<Note {id} {note} {isHighlighted}/>
 {#if index < data.notes.size - 1}
 <div class="mt-3"/>
 {/if}