a bit of a redesign
This commit is contained in:
satr14
parent
c20d0b9b79
commit
597304e3e3
8 changed files with 186 additions and 262 deletions
24
src/app.css
24
src/app.css
|
|
@ -3,30 +3,30 @@
|
|||
@tailwind utilities;
|
||||
|
||||
* { @apply transition-all duration-300 ease-in-out; }
|
||||
body { @apply bg-slate-950 text-gray-400 max-w-3xl mx-auto my-8 px-4; }
|
||||
body { @apply bg-ctp-crust text-ctp-text max-w-3xl mx-auto my-8 px-4; }
|
||||
h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
|
||||
h2 { @apply text-2xl md:text-3xl font-bold my-4; }
|
||||
h3 { @apply text-xl md:text-2xl font-bold my-4; }
|
||||
h4 { @apply text-lg md:text-xl font-bold my-4; }
|
||||
h5 { @apply text-base md:text-lg font-bold my-4; }
|
||||
h6 { @apply text-sm md:text-base font-bold my-4; }
|
||||
a { @apply text-sky-300 hover:text-sky-100 underline; }
|
||||
article { @apply p-2 sm:p-4 text-slate-300; }
|
||||
a { @apply text-ctp-sapphire hover:text-ctp-sky underline; }
|
||||
article { @apply p-2 sm:p-4 text-ctp-subtext0; }
|
||||
p { @apply my-4 text-sm sm:text-base; }
|
||||
code { @apply bg-slate-800 p-0.5 rounded-md; }
|
||||
pre { @apply bg-slate-800 p-4 rounded-md my-4 overflow-x-auto; }
|
||||
blockquote { @apply bg-slate-800 text-gray-400 p-4; }
|
||||
hr { @apply my-4 border-gray-700; }
|
||||
code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }
|
||||
pre { @apply bg-ctp-overlay0 p-4 rounded-md my-4 overflow-x-auto; }
|
||||
blockquote { @apply bg-ctp-overlay0 p-4; }
|
||||
hr { @apply my-4 border-ctp-overlay1; }
|
||||
ul { @apply list-disc ml-6; }
|
||||
ol { @apply list-decimal ml-6; }
|
||||
header { @apply flex flex-col justify-between items-center gap-4; }
|
||||
nav { @apply flex gap-4; }
|
||||
img { @apply object-cover object-center; }
|
||||
form { @apply my-4 flex flex-col justify-center items-start; }
|
||||
input { @apply m-1 py-1 px-2 w-full border bg-gray-700 text-gray-300; }
|
||||
button { @apply m-1 py-1 px-2 w-full bg-gray-400 text-slate-900; }
|
||||
input { @apply m-1 py-1 px-2 w-full border bg-ctp-overlay1 text-ctp-subtext1; }
|
||||
button { @apply m-1 py-1 px-2 w-full text-base; }
|
||||
footer { @apply my-4 text-center; }
|
||||
table { @apply w-full my-4; }
|
||||
thead { @apply bg-slate-800 text-gray-400; }
|
||||
tbody { @apply bg-slate-900 text-slate-300; }
|
||||
tr, th, td { @apply p-1 border border-gray-700; }
|
||||
thead { @apply bg-ctp-overlay0; }
|
||||
tbody { @apply bg-ctp-base text-ctp-subtext0; }
|
||||
tr, th, td { @apply p-1 border border-ctp-overlay1; }
|
||||
|
|
@ -1,26 +1,12 @@
|
|||
import type { Handle } from '@sveltejs/kit';
|
||||
import info, { daysUntilBirthday, getTimeIn } from '$lib';
|
||||
import info from '$lib';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const days = daysUntilBirthday(info.birthday);
|
||||
const time = getTimeIn(info.timezone);
|
||||
|
||||
if (!event.request.headers.get('user-agent')?.includes('curl')) return await resolve(event);
|
||||
else return new Response(`\
|
||||
\x1b[2J\x1b[3J\x1b[H
|
||||
export const handle: Handle = async ({ event, resolve }) => !event.request.headers.get('user-agent')?.includes('curl') ? await resolve(event) : new Response(`\
|
||||
\
|
||||
\x1b[2J\x1b[3J\x1b[H\
|
||||
\x1b[1m${info.subtitle}\x1b[0m
|
||||
${info.description}
|
||||
|
||||
\x1b[1m${days || 'Today'}\x1b[0m ${ days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' } \
|
||||
Its \x1b[1m${time}\x1b[0m in ${info.timezone}.
|
||||
|
||||
\x1b[3m${info.skills.join('\x1b[0m, \x1b[3m')}\x1b[0m
|
||||
|
||||
${Object.entries(info.links).map(([key, value]) => `- \x1b[1m${key}\x1b[0m: \x1b[4m${value}\x1b[0m`).join('\n')}
|
||||
|
||||
\x1b[1m\ github\x1b[0m: ${info.github}
|
||||
\x1b[1m\ discord\x1b[0m: ${info.discord}
|
||||
\x1b[1m\ blog\x1b[0m: ${info.blog.main}
|
||||
|
||||
\x1b[2;3m${info.title} - ${event.request.headers.get('user-agent')} version ;)\x1b[0m\n`);
|
||||
};
|
||||
\x1b[2;3m${info.title} - ${event.request.headers.get('user-agent')} version ;)\x1b[0m\n\
|
||||
\
|
||||
`);
|
||||
|
|
|
|||
250
src/lib/index.ts
250
src/lib/index.ts
|
|
@ -1,116 +1,116 @@
|
|||
export function blog(api: string, base?: string) {
|
||||
return fetch(`${api}/api/collections/blogs/records?page=1&perPage=1&fields=collectionId,id,title,desc,created,thumbnail&sort=-created`)
|
||||
.then(res => res.json())
|
||||
.then((data: {
|
||||
items: {
|
||||
collectionId: string,
|
||||
id: string,
|
||||
title: string,
|
||||
desc: string,
|
||||
created: number,
|
||||
thumbnail: string,
|
||||
}[]
|
||||
}) => {
|
||||
const blog = data.items[0];
|
||||
// export function blog(api: string, base?: string) {
|
||||
// return fetch(`${api}/api/collections/blogs/records?page=1&perPage=1&fields=collectionId,id,title,desc,created,thumbnail&sort=-created`)
|
||||
// .then(res => res.json())
|
||||
// .then((data: {
|
||||
// items: {
|
||||
// collectionId: string,
|
||||
// id: string,
|
||||
// title: string,
|
||||
// desc: string,
|
||||
// created: number,
|
||||
// thumbnail: string,
|
||||
// }[]
|
||||
// }) => {
|
||||
// const blog = data.items[0];
|
||||
|
||||
return {
|
||||
title: blog.title,
|
||||
desc: blog.desc,
|
||||
created: blog.created,
|
||||
// thumbnail: `${api}/api/files/${blog.collectionId}/${blog.id}/${blog.thumbnail}?thumb=320x160`,
|
||||
url: !base ? '' : `${base}/${blog.id}`,
|
||||
};
|
||||
});
|
||||
}
|
||||
// return {
|
||||
// title: blog.title,
|
||||
// desc: blog.desc,
|
||||
// created: blog.created,
|
||||
// // thumbnail: `${api}/api/files/${blog.collectionId}/${blog.id}/${blog.thumbnail}?thumb=320x160`,
|
||||
// url: !base ? '' : `${base}/${blog.id}`,
|
||||
// };
|
||||
// });
|
||||
// }
|
||||
|
||||
export function github(max: number, user: string) {
|
||||
return fetch(`https://api.github.com/users/${user}/repos?per_page=${max}?type=owner&sort=created`)
|
||||
.then(res => res.json())
|
||||
.then((data:
|
||||
{
|
||||
fork: boolean,
|
||||
name: string,
|
||||
description: string,
|
||||
html_url: string,
|
||||
stargazers_count: number,
|
||||
language: string,
|
||||
}[]
|
||||
) => data.filter(repo => !repo.fork).slice(0, max).map(repo => ({
|
||||
name: repo.name,
|
||||
desc: repo.description,
|
||||
url: repo.html_url,
|
||||
stars: repo.stargazers_count,
|
||||
lang: repo.language,
|
||||
}))).catch((e) => [
|
||||
{ name: 'Error', desc: e.message, url: '', stars: 0, lang: '' },
|
||||
]);
|
||||
}
|
||||
// export function github(max: number, user: string) {
|
||||
// return fetch(`https://api.github.com/users/${user}/repos?per_page=${max}?type=owner&sort=created`)
|
||||
// .then(res => res.json())
|
||||
// .then((data:
|
||||
// {
|
||||
// fork: boolean,
|
||||
// name: string,
|
||||
// description: string,
|
||||
// html_url: string,
|
||||
// stargazers_count: number,
|
||||
// language: string,
|
||||
// }[]
|
||||
// ) => data.filter(repo => !repo.fork).slice(0, max).map(repo => ({
|
||||
// name: repo.name,
|
||||
// desc: repo.description,
|
||||
// url: repo.html_url,
|
||||
// stars: repo.stargazers_count,
|
||||
// lang: repo.language,
|
||||
// }))).catch((e) => [
|
||||
// { name: 'Error', desc: e.message, url: '', stars: 0, lang: '' },
|
||||
// ]);
|
||||
// }
|
||||
|
||||
export function discord(id: string) {
|
||||
return fetch(`https://api.lanyard.rest/v1/users/${id}`)
|
||||
.then(res => res.json())
|
||||
.then(({data}: {
|
||||
data: {
|
||||
discord_user: {
|
||||
id: string,
|
||||
username: string,
|
||||
avatar: string,
|
||||
},
|
||||
discord_status: string,
|
||||
spotify: {
|
||||
album_art_url: string,
|
||||
track_id: string,
|
||||
song: string,
|
||||
artist: string,
|
||||
},
|
||||
activities: {
|
||||
type: number,
|
||||
name: string,
|
||||
created_at: number,
|
||||
state: string,
|
||||
details: string,
|
||||
assets: {
|
||||
large_image: string,
|
||||
small_image: string,
|
||||
},
|
||||
application_id: string,
|
||||
}[],
|
||||
}
|
||||
success: boolean,
|
||||
}) => ({
|
||||
// avatar: `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${data.discord_user.avatar}.png?size=128`,
|
||||
username: data.discord_user.username,
|
||||
status: data.discord_status,
|
||||
spotify: {
|
||||
art: data?.spotify?.album_art_url,
|
||||
link: `https://open.spotify.com/intl-id/track/${data?.spotify?.track_id}`,
|
||||
song: data?.spotify?.song,
|
||||
artist: data?.spotify?.artist,
|
||||
},
|
||||
activity: data?.activities.filter((a: {type:number}) =>a.type===0).map((activity:
|
||||
{name: string, created_at: number, state: string, details: string, assets: {large_image: string, small_image: string}, application_id: string}
|
||||
) => ({
|
||||
name: activity.name,
|
||||
started: activity.created_at,
|
||||
state: activity.state,
|
||||
details: activity.details,
|
||||
images: {
|
||||
large: !activity?.assets?.large_image ? '' : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity?.assets?.large_image}.png?size=256`,
|
||||
small: !activity?.assets?.small_image ? '' : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity?.assets?.small_image}.png?size=256`,
|
||||
},
|
||||
})).sort((a: {started:number}, b: {started:number}) => b.started - a.started) || [],
|
||||
})).catch(() => ({
|
||||
username: 'Error',
|
||||
status: 'Error',
|
||||
spotify: {
|
||||
art: '',
|
||||
link: '',
|
||||
song: '',
|
||||
artist: '',
|
||||
},
|
||||
activity: [],
|
||||
}));
|
||||
}
|
||||
// export function discord(id: string) {
|
||||
// return fetch(`https://api.lanyard.rest/v1/users/${id}`)
|
||||
// .then(res => res.json())
|
||||
// .then(({data}: {
|
||||
// data: {
|
||||
// discord_user: {
|
||||
// id: string,
|
||||
// username: string,
|
||||
// avatar: string,
|
||||
// },
|
||||
// discord_status: string,
|
||||
// spotify: {
|
||||
// album_art_url: string,
|
||||
// track_id: string,
|
||||
// song: string,
|
||||
// artist: string,
|
||||
// },
|
||||
// activities: {
|
||||
// type: number,
|
||||
// name: string,
|
||||
// created_at: number,
|
||||
// state: string,
|
||||
// details: string,
|
||||
// assets: {
|
||||
// large_image: string,
|
||||
// small_image: string,
|
||||
// },
|
||||
// application_id: string,
|
||||
// }[],
|
||||
// }
|
||||
// success: boolean,
|
||||
// }) => ({
|
||||
// // avatar: `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${data.discord_user.avatar}.png?size=128`,
|
||||
// username: data.discord_user.username,
|
||||
// status: data.discord_status,
|
||||
// spotify: {
|
||||
// art: data?.spotify?.album_art_url,
|
||||
// link: `https://open.spotify.com/intl-id/track/${data?.spotify?.track_id}`,
|
||||
// song: data?.spotify?.song,
|
||||
// artist: data?.spotify?.artist,
|
||||
// },
|
||||
// activity: data?.activities.filter((a: {type:number}) =>a.type===0).map((activity:
|
||||
// {name: string, created_at: number, state: string, details: string, assets: {large_image: string, small_image: string}, application_id: string}
|
||||
// ) => ({
|
||||
// name: activity.name,
|
||||
// started: activity.created_at,
|
||||
// state: activity.state,
|
||||
// details: activity.details,
|
||||
// images: {
|
||||
// large: !activity?.assets?.large_image ? '' : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity?.assets?.large_image}.png?size=256`,
|
||||
// small: !activity?.assets?.small_image ? '' : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity?.assets?.small_image}.png?size=256`,
|
||||
// },
|
||||
// })).sort((a: {started:number}, b: {started:number}) => b.started - a.started) || [],
|
||||
// })).catch(() => ({
|
||||
// username: 'Error',
|
||||
// status: 'Error',
|
||||
// spotify: {
|
||||
// art: '',
|
||||
// link: '',
|
||||
// song: '',
|
||||
// artist: '',
|
||||
// },
|
||||
// activity: [],
|
||||
// }));
|
||||
// }
|
||||
|
||||
export function daysUntilBirthday(date: number[]): number {
|
||||
const today = new Date();
|
||||
|
|
@ -180,18 +180,30 @@ export default {
|
|||
birthday: [12,6],
|
||||
timezone: "Asia/Jakarta",
|
||||
links: {
|
||||
"NixOS Flake": "https://github.com/SX-9/nix-conf",
|
||||
"Project part-of.my.id": "https://part-of.my.id/",
|
||||
"part-of.my.id": "https://part-of.my.id/",
|
||||
"fetch.sh": "https://fetch.satr14.my.id/",
|
||||
"NixOS Flakes": "https://github.com/SX-9/nix-conf",
|
||||
"Forever Maze": "https://forever-maze.satr14.my.id/",
|
||||
"Chess from scratch": "https://sx-9.github.io/chess-from-scratch/",
|
||||
"CDN": "https://cdn.satr14.my.id/",
|
||||
},
|
||||
communities: {
|
||||
"part-of.my.id": {
|
||||
icon: "https://avatars.githubusercontent.com/u/184933425?s=200&v=4",
|
||||
role: "Founder",
|
||||
url: "https://part-of.my.id/",
|
||||
},
|
||||
"is-a.dev": {
|
||||
icon: "https://avatars.githubusercontent.com/u/72358814?s=200&v=4",
|
||||
role: "Maintainer",
|
||||
url: "https://is-a.dev/",
|
||||
},
|
||||
"Hack Club": {
|
||||
icon: "https://assets.hackclub.com/icon-square.png",
|
||||
role: "Member",
|
||||
url: "https://hackclub.com/",
|
||||
},
|
||||
},
|
||||
discord: "882595027132493864",
|
||||
github: "SX-9",
|
||||
blog: {
|
||||
api: "https://blog.satr14.my.id/pb",
|
||||
base: "https://blog.satr14.my.id/post",
|
||||
main: "https://blog.satr14.my.id/",
|
||||
},
|
||||
nixwebring: 'satr14',
|
||||
blog: "https://blog.satr14.my.id/",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,9 @@ import type { LayoutLoad } from './$types';
|
|||
import info, { blog, discord, github } from '$lib';
|
||||
|
||||
export const ssr = true;
|
||||
// export const csr = true;
|
||||
export const csr = false;
|
||||
export const load = (async () => {
|
||||
return {
|
||||
...info,
|
||||
fetched: {
|
||||
discord: await discord(info.discord).catch((err) => ({
|
||||
username: '',
|
||||
status: '',
|
||||
activity: [],
|
||||
spotify: {
|
||||
song: '',
|
||||
art: '',
|
||||
link: '',
|
||||
artist: '',
|
||||
},
|
||||
})),
|
||||
github: await github(7, info.github).catch((err) => ([])),
|
||||
blog: await blog(info.blog.api, info.blog.base).catch((err) => ({
|
||||
title: 'Error',
|
||||
desc: err,
|
||||
url: info.blog.base,
|
||||
created: new Date(),
|
||||
})),
|
||||
},
|
||||
};
|
||||
}) satisfies LayoutLoad;
|
||||
|
|
@ -5,21 +5,23 @@
|
|||
|
||||
let days = daysUntilBirthday(data.birthday);
|
||||
let time = getTimeIn(data.timezone);
|
||||
let created = new Date(data.fetched.blog.created);
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="group border-2 border-slate-700 hover:border-slate-500 rounded-xl w-full h-32 overflow-hidden flex justify-center items-center shadow-lg">
|
||||
<div class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-slate-500 group-hover:text-slate-700">
|
||||
<div class="group border-2 border-ctp-base hover:border-ctp-overlay1 rounded-xl w-full h-32 overflow-hidden flex justify-center items-center shadow-lg">
|
||||
<div class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 group-hover:text-ctp-base">
|
||||
<span>{randomStr(30)}<br>{randomStr(40)}</span>
|
||||
<span class="group-hover:py-4 block">{randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-slate-300 group-hover:text-slate-100">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}</span>
|
||||
<span class="group-hover:py-4 block">{randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}</span>
|
||||
<span>{randomStr(40)}<br>{randomStr(30)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex justify-center gap-4 text-lg max-w-full overflow-y-auto text-nowrap">
|
||||
<a href={'https://github.com/'+data.github} target="_blank">github</a>
|
||||
<a href={'https://discordapp.com/users/'+data.discord} target="_blank">discord</a>
|
||||
<a href={data.blog.main} target="_blank">blog</a>
|
||||
<nav class="flex justify-between items-center gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href={'https://github.com/'+data.github} target="_blank">github</a>
|
||||
<a href={'https://discordapp.com/users/'+data.discord} target="_blank">discord</a>
|
||||
<a href={data.blog} target="_blank">blog</a>
|
||||
</div>
|
||||
<p class="text-center m-0 font-mono italic">curl https://satr14.my.id</p>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
@ -28,98 +30,30 @@
|
|||
<h1>{data.subtitle}</h1>
|
||||
<p>{data.description}</p>
|
||||
<p class="text-sm"><i>
|
||||
It's <b>{time}</b> in <b>{data.timezone}</b>.
|
||||
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
|
||||
It's <b>{time}</b> for me.
|
||||
</i></p>
|
||||
<p class="flex flex-wrap gap-2 text-sm">
|
||||
{#each data.skills as skill}
|
||||
<a href={'https://google.com/search?q='+skill} target="_blank" class="bg-slate-900 text-sky-100 hover:bg-slate-800 px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
|
||||
<a href={'https://google.com/search?q='+skill} target="_blank" class="bg-ctp-mantle text-ctp-text hover:bg-ctp-base px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
|
||||
{/each}
|
||||
</p>
|
||||
<p class="flex flex-wrap gap-1">
|
||||
{#each Object.entries(data.links) as link, i}
|
||||
{#if i > 0}<span class="text-slate-300">~</span>{/if}
|
||||
{#if i > 0}<span class="text-ctp-subtext1">~</span>{/if}
|
||||
<a href={link[1]} target="_blank">{link[0]}</a>
|
||||
{/each}
|
||||
</p>
|
||||
</article>
|
||||
<section>
|
||||
<h2 class="text-sm sm:text-base italic m-0">Latest blog post</h2>
|
||||
<h1 class="m-0 font-normal"><a class="no-underline" href={data.fetched.blog.url} target="_blank">{data.fetched.blog.title}</a></h1>
|
||||
<p class="text-lg m-0">{months[created.getMonth()]} {created.getDate()}, {created.getFullYear()} - {data.fetched.blog.desc}</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-sm sm:text-base italic m-0 mt-8">GitHub repositories</h2>
|
||||
<div class="flex flex-col gap-4 mt-2">
|
||||
{#each data.fetched.github as repo, i}
|
||||
<div class="flex justify-between items-center ">
|
||||
<div>
|
||||
<h3 class="m-0 font-normal"><a class="no-underline" href={repo.url} target="_blank">{repo.name}</a></h3>
|
||||
<p class="m-0">{repo.desc}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{#if repo.lang}<i>{repo.lang}</i>{/if}<br>
|
||||
{#if repo.stars}<span class="text-yellow-200"><b>{repo.stars}</b> star{repo.stars>1?'s':''}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="italic font-normal mt-8 text-base sm:text-lg flex justify-between items-center">
|
||||
<span>@<u>{data.fetched.discord.username}</u></span>
|
||||
<span class="data-[status=idle]:text-yellow-200 data-[status=dnd]:text-red-200 data-[status=online]:text-green-200" data-status={data.fetched.discord.status}><b>{data.fetched.discord.status}</b></span>
|
||||
</h2>
|
||||
<div class="flex flex-wrap sm:justify-evenly my-4">
|
||||
{#if data.fetched.discord.spotify.song}
|
||||
<div class="m-4">
|
||||
<span class="italic text-sm">Listening to <b>Spotify</b></span>
|
||||
<div class="flex gap-2 items-center">
|
||||
<img class="size-12 rounded-md" src={data.fetched.discord.spotify.art} alt="album art">
|
||||
<div class="max-w-64 truncate">
|
||||
<h3 class="my-0 inline"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h3>
|
||||
<br><i>{data.fetched.discord.spotify.artist}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#each data.fetched.discord.activity as activity}
|
||||
<div class="m-4">
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="relative">
|
||||
{#if activity.images.large}
|
||||
<img class="size-12 rounded-md" src={activity.images.large} alt="large">
|
||||
{/if}
|
||||
{#if activity.images.small}
|
||||
<img class="size-6 rounded-full absolute -bottom-1 -right-1" src={activity.images.small} alt="small">
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-sm">
|
||||
<h3 class="my-0 inline text-lg"><b>{activity.name}</b></h3>
|
||||
<i>
|
||||
{#if activity.state}
|
||||
<br>{activity.state}
|
||||
{/if}
|
||||
{#if activity.details}
|
||||
<br>{activity.details}
|
||||
{/if}
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-sm"><i>Started {timeAgo(activity.started)}</i></span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<footer class=" mt-8">
|
||||
<nav class="flex justify-center items-center gap-4 text-lg">
|
||||
<a class="no-underline px-2" href={'https://nixwebr.ing/prev/'+data.nixwebring}><</a>
|
||||
<a class="no-underline px-2" href="https://nixwebr.ing">nixwebr.ing:</a>
|
||||
<a class="no-underline px-2" href="https://nixwebr.ing/prev/satr14"><</a>
|
||||
<a class="no-underline px-2" href="https://nixwebr.ing/rand">*</a>
|
||||
<a class="no-underline px-2" href={'https://nixwebr.ing/next/'+data.nixwebring}>></a>
|
||||
<a class="no-underline px-2" href="https://nixwebr.ing">?</a>
|
||||
<a class="no-underline px-2" href="https://nixwebr.ing/next/satr14">></a>
|
||||
</nav>
|
||||
<p class="text-center m-0 font-mono italic">
|
||||
curl https://satr14.my.id
|
||||
</p>
|
||||
</footer>
|
||||
Loading…
Add table
Add a link
Reference in a new issue