gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases 1 Activity

feat: show latest log in hoe
All checks were successful
create archive with lfs / tag (push) Successful in 5s
Details

Browse Source
This commit is contained in:
dusk 2025-01-16 18:47:43 +03:00
parent 747b648c12
commit 3764639d11
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
5 changed files with 133 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/note.svelte Normal file
View File

@ -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>

5
src/routes/+page.server.ts
View File

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

144
src/routes/+page.svelte
View File

@ -1,10 +1,21 @@
<script> <script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public'; import { PUBLIC_BASE_URL } from '$env/static/public';
import Note from '../components/note.svelte';
import Tooltip from '../components/tooltip.svelte'; import Tooltip from '../components/tooltip.svelte';
import Window from '../components/window.svelte'; import Window from '../components/window.svelte';
import LatestStuff from './lateststuff.md'; import LatestStuff from './lateststuff.md';
export let data; 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> </script>
<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card"> <div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
@ -131,83 +142,88 @@
<li> <li>
<a href="https://pmart.gaze.systems">random project moon art</a> <a href="https://pmart.gaze.systems">random project moon art</a>
</li> </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> </ul>
</div> </div>
</Window> </Window>
<Window title="now happening" style="mt-auto" removePadding> <Window title="status" style="mt-auto" removePadding>
{#if data.lastTrack} <div class="m-1.5 flex flex-col font-monospace">
<div class="flex flex-row m-2 border-4 border-double"> <div
<!-- svelte-ignore a11y-missing-attribute --> class="prose prose-ralsei items-center p-1 border-4 text-sm font-bold bg-ralsei-black"
{#if data.lastTrack.image} style="border-style: double double none double;"
<img >
class="border-4 w-16 h-16" <a href="/entries">last log</a>
style="border-style: none double none none;" <span class="border-4 pl-[1ch]" style="border-style: none none none double;">published on {renderDate(data.lastNote.published)}</span>
width="64"
height="64"
src={data.lastTrack.image}
/>
{:else}
<img
class="border-4 w-16 h-16 p-2"
style="border-style: none double none none; image-rendering: pixelated;"
src="/icons/cd_audio.png"
/>
{/if}
<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
<p
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>
<a
title={data.lastTrack.name}
href="https://www.last.fm/user/yusdacra"
class="hover:underline">{data.lastTrack.name}</a
>
</p>
<p
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-shadow-white text-ralsei-white">by</span>
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
</p>
</div>
</div> </div>
{/if} <div class="mt-0 p-1 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
{#if data.lastGame} <Note id={data.lastNoteId} note={data.lastNote} onlyContent/>
<div class="flex flex-row m-2 border-4 border-double"> </div>
<!-- svelte-ignore a11y-missing-attribute --> </div>
{#if data.lastTrack}
<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 <img
class="border-4 w-16 h-16" class="border-4 w-16 h-16"
style="border-style: none double none none;" style="border-style: none double none none;"
width="64" width="64"
height="64" height="64"
src={data.lastGame.icon} src={data.lastTrack.image}
/> />
<div class="flex flex-col max-w-[40ch] p-2 gap-1 overflow-hidden"> {:else}
<p <img
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]" class="border-4 w-16 h-16 p-2"
> style="border-style: none double none none; image-rendering: pixelated;"
<span class="text-sm text-shadow-white text-ralsei-white">playing</span> src="/icons/cd_audio.png"
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link} />
>{data.lastGame.name}</a {/if}
> <div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
</p> <p
<!-- svelte-ignore a11y-missing-attribute --> class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>
<a <a
href="https://steamcommunity.com/id/yusdacra" title={data.lastTrack.name}
class="text-xs hover:underline text-shadow-green text-ralsei-green-light" href="https://www.last.fm/user/yusdacra"
><img class="inline w-4" src={data.lastGame.pfp} /> class="hover:underline">{data.lastTrack.name}</a
<span class="align-middle">steam profile</span></a
> >
</div> </p>
<p
class="text-shadow-pink text-ralsei-pink-regular text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-shadow-white text-ralsei-white">by</span>
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
</p>
</div> </div>
</div>
{/if} {/if}
{#if !data.lastGame && !data.lastTrack} {#if data.lastGame}
<p class="text-xl m-2">nothing, apparently.</p> <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"
style="border-style: none double none none;"
width="64"
height="64"
src={data.lastGame.icon}
/>
<div class="flex flex-col max-w-[40ch] p-2 gap-1 overflow-hidden">
<p
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white">playing</span>
<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}
>{data.lastGame.name}</a
>
</p>
<!-- svelte-ignore a11y-missing-attribute -->
<a
href="https://steamcommunity.com/id/yusdacra"
class="text-xs hover:underline text-shadow-green text-ralsei-green-light"
><img class="inline w-4" src={data.lastGame.pfp} />
<span class="align-middle">steam profile</span></a
>
</div>
</div>
{/if} {/if}
</Window> </Window>
</div> </div>

40
src/routes/log/+page.svelte
View File

@ -1,37 +1,11 @@
<script lang="ts"> <script lang="ts">
import Window from '../../components/window.svelte'; import Window from '../../components/window.svelte';
import Token from '../../components/token.svelte'; import Token from '../../components/token.svelte';
import Note from '../../components/note.svelte';
export let data; 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 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> </script>
<svelte:head> <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/> <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>
<br> <br>
{#each data.notes as [noteId, note], index} {#each data.notes as [id, note], index}
{@const isHighlighted = noteId === data.highlightedNote} {@const isHighlighted = id === data.highlightedNote}
<div class="text-wrap break-words max-w-[70ch] leading-none"> <Note {id} {note} {isHighlighted}/>
<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>
{#if index < data.notes.size - 1} {#if index < data.notes.size - 1}
<div class="mt-3"/> <div class="mt-3"/>
{/if} {/if}