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

feat: add last updated date to status, instead of not displaying them, fix aligning of stuff

Browse Source
This commit is contained in:
dusk 2025-03-16 13:34:58 +03:00
parent fdbc62ce3c
commit b7d61fa03e
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
6 changed files with 67 additions and 53 deletions

17
src/components/note.svelte

@ -25,6 +25,7 @@
</script>
<script lang="ts">
import Token from "./token.svelte";
import {renderDate, renderRelativeDate} from '$lib/dateFmt';
interface Props {
note: NoteData;
@ -39,16 +40,6 @@
onlyContent = false,
showOutgoing = true
}: Props = $props();
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") {
@ -65,8 +56,8 @@
}
</script>
<div class="text-wrap break-words max-w-[70ch] leading-tight">
{#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>
<p class="m-0 max-w-[70ch] text-wrap break-words leading-tight align-middle">
{#if !onlyContent}<Token title={renderDate(note.published)} v={renderRelativeDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>
{#if note.hasMedia}<Token v="-contains media-" keywd small/>{/if}
{#if note.hasQuote}<Token v="-contains quote-" keywd small/>{/if}
{#if showOutgoing}
@ -75,4 +66,4 @@
<span class="text-sm"><Token v="(" punct/><a class="hover:motion-safe:animate-squiggle hover:underline" style="color: {color};{getTextShadowStyle(color)}" href={getOutgoingLink(name, link)}>{name}</a><Token v=")" punct/></span>
{/each}
{/if}
</div>
</p>

4
src/components/token.svelte

@ -8,6 +8,7 @@
str?: boolean;
small?: boolean;
v: string;
title?: string;
}
let {
@ -16,6 +17,7 @@
funct = false,
str = false,
small = false,
title,
v
}: Props = $props();
@ -27,4 +29,4 @@
: ""
</script>
<span class="align-middle token {ty} {small ? "text-sm" : ""}">{v}</span>
<span {title} class="token {ty} {small ? "text-sm" : ""}">{v}</span>

25
src/lib/dateFmt.ts Normal file

@ -0,0 +1,25 @@
export const renderRelativeDate = (timestamp: number) => {
const elapsed = timestamp - (new Date()).getTime()
const units: Record<string, number> = {
year : 24 * 60 * 60 * 1000 * 365,
month : 24 * 60 * 60 * 1000 * 365/12,
day : 24 * 60 * 60 * 1000,
hour : 60 * 60 * 1000,
minute: 60 * 1000,
second: 1000
}
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
for (var unit in units)
if (Math.abs(elapsed) > units[unit] || unit == 'second')
return rtf.format(Math.round(elapsed / units[unit]), unit as Intl.RelativeTimeFormatUnit)
return ""
}
export 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",
})
}

10
src/lib/lastfm.ts

@ -2,7 +2,13 @@ import { get, writable } from "svelte/store"
const GET_RECENT_TRACKS_ENDPOINT = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=yusdacra&api_key=da1911d405b5b37383e200b8f36ee9ec&format=json&limit=1"
type LastTrack = {name: string, artist: string, image: string | null, link: string}
type LastTrack = {
name: string,
artist: string,
image: string | null,
link: string,
when: number,
}
const lastTrack = writable<LastTrack | null>(null)
export const lastFmUpdateNowPlaying = async () => {
@ -17,11 +23,11 @@ export const lastFmUpdateNowPlaying = async () => {
artist: track.artist['#text'],
image: track.image[2]['#text'] ?? null,
link: track.url,
when: Date.now(),
}
lastTrack.set(data)
} catch(why) {
console.log("could not fetch last fm: ", why)
lastTrack.set(null)
}
}

10
src/lib/steam.ts

@ -5,7 +5,13 @@ import { get, writable } from "svelte/store";
const STEAM_ID = "76561198106829949"
const GET_PLAYER_SUMMARY_ENDPOINT = `http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${env.STEAM_API_KEY}&steamids=${STEAM_ID}&format=json`
type LastGame = {name: string, link: string, icon: string, pfp: string}
type LastGame = {
name: string,
link: string,
icon: string,
pfp: string,
when: number,
}
const steamgriddbClient = writable<SGDB | null>(null)
const lastGame = writable<LastGame | null>(null)
@ -28,11 +34,11 @@ export const steamUpdateNowPlaying = async () => {
link: `https://store.steampowered.com/app/${profile.gameid}`,
icon: icons[0].thumb.toString(),
pfp: profile.avatarmedium,
when: Date.now(),
}
lastGame.set(game)
} catch(why) {
console.log("could not fetch steam: ", why)
lastGame.set(null)
}
}

54
src/routes/+page.svelte

@ -3,37 +3,13 @@
import Note from '../components/note.svelte';
import Window from '../components/window.svelte';
import LatestStuff from './lateststuff.md';
import {renderDate, renderRelativeDate} from '$lib/dateFmt';
interface Props {
data: any;
}
let { data }: Props = $props();
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 renderRelativeDate = (timestamp: number) => {
const elapsed = timestamp - (new Date()).getTime()
const units: Record<string, number> = {
year : 24 * 60 * 60 * 1000 * 365,
month : 24 * 60 * 60 * 1000 * 365/12,
day : 24 * 60 * 60 * 1000,
hour : 60 * 60 * 1000,
minute: 60 * 1000,
second: 1000
}
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
for (var unit in units)
if (Math.abs(elapsed) > units[unit] || unit == 'second')
return rtf.format(Math.round(elapsed / units[unit]), unit as Intl.RelativeTimeFormatUnit)
}
</script>
<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
@ -182,26 +158,24 @@
</div>
{/if}
{#if data.lastTrack}
<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">
<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">
<!-- svelte-ignore a11y_missing_attribute -->
{#if data.lastTrack.image}
<img
class="border-4 w-16 h-16"
class="border-4 w-[4.5rem] h-[4.5rem]"
style="border-style: none double none none;"
width="64"
height="64"
src={data.lastTrack.image}
/>
{:else}
<img
class="border-4 w-16 h-16 p-2"
class="border-4 w-[4.5rem] h-[4.5rem] p-2"
style="border-style: none double none none; image-rendering: pixelated;"
src="/icons/cd_audio.webp"
/>
{/if}
<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">
<div class="flex flex-col max-w-[40ch] p-2">
<p
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>
<a
@ -216,6 +190,11 @@
<span class="text-shadow-white text-ralsei-white">by</span>
<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>
</p>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
…{renderRelativeDate(data.lastTrack.when)}
</p>
</div>
</div>
{/if}
@ -223,21 +202,26 @@
<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"
class="border-4 w-[4.5rem] h-[4.5rem]"
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">
<div class="flex flex-col max-w-[40ch] p-2 gap-0.5 overflow-hidden">
<p
class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
class="text-shadow-green text-ralsei-green-light text-sm 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>
<p
class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"
>
…{renderRelativeDate(data.lastGame.when)}
</p>
<!-- svelte-ignore a11y_missing_attribute -->
<a
href="https://steamcommunity.com/id/yusdacra"