commit b7d61fa03e83bf6fa4c06b816eb70ba41df35229 · ptr.pet/endpoint

+4 -13

src/components/note.svelte

···

       25
       25
        
       </script>

     

       26
       26
        
       <script lang="ts">

     

       27
       27
        
       	import Token from "./token.svelte";

     

       28
       28
       +
           import {renderDate, renderRelativeDate} from '$lib/dateFmt';

     

       28
       29
        
       

     

       29
       30
        
           interface Props {

     

       30
       31
        
               note: NoteData;

     
···

       39
       40
        
               onlyContent = false,

     

       40
       41
        
               showOutgoing = true

     

       41
       42
        
           }: Props = $props();

     

       42
       42
       -
           

     

       43
       43
       -
           const renderDate = (timestamp: number) => {

     

       44
       44
       -
               return (new Date(timestamp)).toLocaleString("en-GB", {

     

       45
       45
       -
                   year: "2-digit",

     

       46
       46
       -
                   month: "2-digit",

     

       47
       47
       -
                   day: "2-digit",

     

       48
       48
       -
                   hour: "2-digit",

     

       49
       49
       -
                   minute: "2-digit",

     

       50
       50
       -
               })

     

       51
       51
       -
           }

     

       52
       43
        
       

     

       53
       44
        
           const getOutgoingLink = (name: string, link: string) => {

     

       54
       45
        
               if (name === "bsky") {

     
···

       65
       56
        
           }

     

       66
       57
        
       </script>

     

       67
       58
        
       

     

       68
       68
       -
       <div class="text-wrap break-words max-w-[70ch] leading-tight">

     

       69
       69
       -
       {#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>

     

       59
       59
       +
       <p class="m-0 max-w-[70ch] text-wrap break-words leading-tight align-middle">

     

       60
       60
       +
       {#if !onlyContent}<Token title={renderDate(note.published)} v={renderRelativeDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>

     

       70
       61
        
       {#if note.hasMedia}<Token v="-contains media-" keywd small/>{/if}

     

       71
       62
        
       {#if note.hasQuote}<Token v="-contains quote-" keywd small/>{/if}

     

       72
       63
        
       {#if showOutgoing}

     
···

       75
       66
        
       <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>

     

       76
       67
        
       {/each}

     

       77
       68
        
       {/if}

     

       78
       78
       -
       </div>
     

       69
       69
       +
       </p>

+3 -1

src/components/token.svelte

···

       8
       8
        
               str?: boolean;

     

       9
       9
        
               small?: boolean;

     

       10
       10
        
               v: string;

     

       11
       11
       +
               title?: string;

     

       11
       12
        
           }

     

       12
       13
        
       

     

       13
       14
        
           let {

     
···

       16
       17
        
               funct = false,

     

       17
       18
        
               str = false,

     

       18
       19
        
               small = false,

     

       20
       20
       +
               title,

     

       19
       21
        
               v

     

       20
       22
        
           }: Props = $props();

     

       21
       23
        
       

     
···

       27
       29
        
               : ""

     

       28
       30
        
       </script>

     

       29
       31
        
       

     

       30
       30
       -
       <span class="align-middle token {ty} {small ? "text-sm" : ""}">{v}</span>
     

       32
       32
       +
       <span {title} class="token {ty} {small ? "text-sm" : ""}">{v}</span>

+25

src/lib/dateFmt.ts

···

       1
       1
       +
       export const renderRelativeDate = (timestamp: number) => {

     

       2
       2
       +
           const elapsed = timestamp - (new Date()).getTime()

     

       3
       3
       +
           const units: Record<string, number> = {

     

       4
       4
       +
               year  : 24 * 60 * 60 * 1000 * 365,

     

       5
       5
       +
               month : 24 * 60 * 60 * 1000 * 365/12,

     

       6
       6
       +
               day   : 24 * 60 * 60 * 1000,

     

       7
       7
       +
               hour  : 60 * 60 * 1000,

     

       8
       8
       +
               minute: 60 * 1000,

     

       9
       9
       +
               second: 1000

     

       10
       10
       +
           }

     

       11
       11
       +
           const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })

     

       12
       12
       +
           for (var unit in units)

     

       13
       13
       +
               if (Math.abs(elapsed) > units[unit] || unit == 'second')

     

       14
       14
       +
                   return rtf.format(Math.round(elapsed / units[unit]), unit as Intl.RelativeTimeFormatUnit)

     

       15
       15
       +
           return ""

     

       16
       16
       +
       }

     

       17
       17
       +
       export const renderDate = (timestamp: number) => {

     

       18
       18
       +
           return (new Date(timestamp)).toLocaleString("en-GB", {

     

       19
       19
       +
               year: "2-digit",

     

       20
       20
       +
               month: "2-digit",

     

       21
       21
       +
               day: "2-digit",

     

       22
       22
       +
               hour: "2-digit",

     

       23
       23
       +
               minute: "2-digit",

     

       24
       24
       +
           })

     

       25
       25
       +
       }

+8 -2

src/lib/lastfm.ts

···

       2
       2
        
       

     

       3
       3
        
       const GET_RECENT_TRACKS_ENDPOINT = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=yusdacra&api_key=da1911d405b5b37383e200b8f36ee9ec&format=json&limit=1"

     

       4
       4
        
       

     

       5
       5
       -
       type LastTrack = {name: string, artist: string, image: string | null, link: string}

     

       5
       5
       +
       type LastTrack = {

     

       6
       6
       +
           name: string,

     

       7
       7
       +
           artist: string,

     

       8
       8
       +
           image: string | null,

     

       9
       9
       +
           link: string,

     

       10
       10
       +
           when: number,

     

       11
       11
       +
       }

     

       6
       12
        
       const lastTrack = writable<LastTrack | null>(null)

     

       7
       13
        
       

     

       8
       14
        
       export const lastFmUpdateNowPlaying = async () => {

     
···

       17
       23
        
                   artist: track.artist['#text'],

     

       18
       24
        
                   image: track.image[2]['#text'] ?? null,

     

       19
       25
        
                   link: track.url,

     

       26
       26
       +
                   when: Date.now(),

     

       20
       27
        
               }

     

       21
       28
        
               lastTrack.set(data)

     

       22
       29
        
           } catch(why) {

     

       23
       30
        
               console.log("could not fetch last fm: ", why)

     

       24
       24
       -
               lastTrack.set(null)

     

       25
       31
        
           }

     

       26
       32
        
       }

     

       27
       33

+8 -2

src/lib/steam.ts

···

       5
       5
        
       const STEAM_ID = "76561198106829949"

     

       6
       6
        
       const GET_PLAYER_SUMMARY_ENDPOINT = `http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${env.STEAM_API_KEY}&steamids=${STEAM_ID}&format=json`

     

       7
       7
        
       

     

       8
       8
       -
       type LastGame = {name: string, link: string, icon: string, pfp: string}

     

       8
       8
       +
       type LastGame = {

     

       9
       9
       +
           name: string,

     

       10
       10
       +
           link: string,

     

       11
       11
       +
           icon: string,

     

       12
       12
       +
           pfp: string,

     

       13
       13
       +
           when: number,

     

       14
       14
       +
       }

     

       9
       15
        
       

     

       10
       16
        
       const steamgriddbClient = writable<SGDB | null>(null)

     

       11
       17
        
       const lastGame = writable<LastGame | null>(null)

     
···

       28
       34
        
                   link: `https://store.steampowered.com/app/${profile.gameid}`,

     

       29
       35
        
                   icon: icons[0].thumb.toString(),

     

       30
       36
        
                   pfp: profile.avatarmedium,

     

       37
       37
       +
                   when: Date.now(),

     

       31
       38
        
               }

     

       32
       39
        
               lastGame.set(game)

     

       33
       40
        
           } catch(why) {

     

       34
       41
        
               console.log("could not fetch steam: ", why)

     

       35
       35
       -
               lastGame.set(null)

     

       36
       42
        
           }

     

       37
       43
        
       }

     

       38
       44

+19 -35

src/routes/+page.svelte

···

       3
       3
        
       	import Note from '../components/note.svelte';

     

       4
       4
        
       	import Window from '../components/window.svelte';

     

       5
       5
        
       	import LatestStuff from './lateststuff.md';

     

       6
       6
       +
       	import {renderDate, renderRelativeDate} from '$lib/dateFmt';

     

       6
       7
        
       

     

       7
       8
        
       	interface Props {

     

       8
       9
        
       		data: any;

     

       9
       10
        
       	}

     

       10
       11
        
       

     

       11
       12
        
       	let { data }: Props = $props();

     

       12
       12
       -
       

     

       13
       13
       -
           const renderDate = (timestamp: number) => {

     

       14
       14
       -
               return (new Date(timestamp)).toLocaleString("en-GB", {

     

       15
       15
       -
                   year: "2-digit",

     

       16
       16
       -
                   month: "2-digit",

     

       17
       17
       -
                   day: "2-digit",

     

       18
       18
       -
                   hour: "2-digit",

     

       19
       19
       -
                   minute: "2-digit",

     

       20
       20
       -
               })

     

       21
       21
       -
           }

     

       22
       22
       -
       	const renderRelativeDate = (timestamp: number) => {

     

       23
       23
       -
       		const elapsed = timestamp - (new Date()).getTime()

     

       24
       24
       -
       		const units: Record<string, number> = {

     

       25
       25
       -
       			year  : 24 * 60 * 60 * 1000 * 365,

     

       26
       26
       -
       			month : 24 * 60 * 60 * 1000 * 365/12,

     

       27
       27
       -
       			day   : 24 * 60 * 60 * 1000,

     

       28
       28
       -
       			hour  : 60 * 60 * 1000,

     

       29
       29
       -
       			minute: 60 * 1000,

     

       30
       30
       -
       			second: 1000

     

       31
       31
       -
       		}

     

       32
       32
       -
       		const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })

     

       33
       33
       -
       		for (var unit in units)

     

       34
       34
       -
       			if (Math.abs(elapsed) > units[unit] || unit == 'second')

     

       35
       35
       -
       				return rtf.format(Math.round(elapsed / units[unit]), unit as Intl.RelativeTimeFormatUnit)

     

       36
       36
       -
       	}

     

       37
       13
        
       </script>

     

       38
       14
        
       

     

       39
       15
        
       <div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">

     
···

       182
       158
        
       			</div>

     

       183
       159
        
       			{/if}

     

       184
       160
        
       			{#if data.lastTrack}

     

       185
       185
       -
       			<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">

     

       161
       161
       +
       			<div class="flex flex-row gap-0.5 m-1.5 border-4 border-double bg-ralsei-black">

     

       186
       162
        
       				<!-- svelte-ignore a11y_missing_attribute -->

     

       187
       163
        
       				{#if data.lastTrack.image}

     

       188
       164
        
       					<img

     

       189
       189
       -
       						class="border-4 w-16 h-16"

     

       165
       165
       +
       						class="border-4 w-[4.5rem] h-[4.5rem]"

     

       190
       166
        
       						style="border-style: none double none none;"

     

       191
       191
       -
       						width="64"

     

       192
       192
       -
       						height="64"

     

       193
       167
        
       						src={data.lastTrack.image}

     

       194
       168
        
       					/>

     

       195
       169
        
       				{:else}

     

       196
       170
        
       					<img

     

       197
       197
       -
       						class="border-4 w-16 h-16 p-2"

     

       171
       171
       +
       						class="border-4 w-[4.5rem] h-[4.5rem] p-2"

     

       198
       172
        
       						style="border-style: none double none none; image-rendering: pixelated;"

     

       199
       173
        
       						src="/icons/cd_audio.webp"

     

       200
       174
        
       					/>

     

       201
       175
        
       				{/if}

     

       202
       202
       -
       				<div class="flex flex-col max-w-[40ch] p-2 overflow-hidden">

     

       176
       176
       +
       				<div class="flex flex-col max-w-[40ch] p-2">

     

       203
       177
        
       					<p

     

       204
       204
       -
       						class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       178
       178
       +
       						class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       205
       179
        
       					>

     

       206
       180
        
       						<span class="text-sm text-shadow-white text-ralsei-white">listening to</span>

     

       207
       181
        
       						<a

     
···

       216
       190
        
       						<span class="text-shadow-white text-ralsei-white">by</span>

     

       217
       191
        
       						<span title={data.lastTrack.artist}>{data.lastTrack.artist}</span>

     

       218
       192
        
       					</p>

     

       193
       193
       +
       					<p

     

       194
       194
       +
       						class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       195
       195
       +
       					>

     

       196
       196
       +
       						…{renderRelativeDate(data.lastTrack.when)}

     

       197
       197
       +
       					</p>

     

       219
       198
        
       				</div>

     

       220
       199
        
       			</div>

     

       221
       200
        
       			{/if}

     
···

       223
       202
        
       			<div class="flex flex-row m-1.5 border-4 border-double bg-ralsei-black">

     

       224
       203
        
       				<!-- svelte-ignore a11y_missing_attribute -->

     

       225
       204
        
       				<img

     

       226
       226
       -
       					class="border-4 w-16 h-16"

     

       205
       205
       +
       					class="border-4 w-[4.5rem] h-[4.5rem]"

     

       227
       206
        
       					style="border-style: none double none none;"

     

       228
       207
        
       					width="64"

     

       229
       208
        
       					height="64"

     

       230
       209
        
       					src={data.lastGame.icon}

     

       231
       210
        
       				/>

     

       232
       232
       -
       				<div class="flex flex-col max-w-[40ch] p-2 gap-1 overflow-hidden">

     

       211
       211
       +
       				<div class="flex flex-col max-w-[40ch] p-2 gap-0.5 overflow-hidden">

     

       233
       212
        
       					<p

     

       234
       234
       -
       						class="text-shadow-green text-ralsei-green-light text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       213
       213
       +
       						class="text-shadow-green text-ralsei-green-light text-sm text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       235
       214
        
       					>

     

       236
       215
        
       						<span class="text-sm text-shadow-white text-ralsei-white">playing</span>

     

       237
       216
        
       						<a title={data.lastGame.name} class="hover:underline" href={data.lastGame.link}

     

       238
       217
        
       							>{data.lastGame.name}</a

     

       239
       218
        
       						>

     

       219
       219
       +
       					</p>

     

       220
       220
       +
       					<p

     

       221
       221
       +
       						class="text-shadow-white text-ralsei-white text-xs text-ellipsis text-nowrap overflow-hidden max-w-[30ch]"

     

       222
       222
       +
       					>

     

       223
       223
       +
       						…{renderRelativeDate(data.lastGame.when)}

     

       240
       224
        
       					</p>

     

       241
       225
        
       					<!-- svelte-ignore a11y_missing_attribute -->

     

       242
       226
        
       					<a