finished phew
This commit is contained in:
Satria
commit
9901fb06f0
18 changed files with 4336 additions and 0 deletions
32
src/app.css
Normal file
32
src/app.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* { @apply transition-all duration-500 ease-in-out; }
|
||||
body { @apply bg-slate-950 text-gray-400 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; }
|
||||
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; }
|
||||
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; }
|
||||
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; }
|
||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
src/app.html
Normal file
12
src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
196
src/lib/index.ts
Normal file
196
src/lib/index.ts
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
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}`,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
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 daysUntilBirthday(date: number[]): number {
|
||||
const today = new Date();
|
||||
const birthday = new Date(today.getFullYear(), date[1] - 1, date[0]);
|
||||
if (today > birthday) {
|
||||
birthday.setFullYear(today.getFullYear() + 1);
|
||||
}
|
||||
// @ts-ignore
|
||||
return Math.ceil((birthday - today) / 86400000);
|
||||
}
|
||||
|
||||
export function getTimeIn(timezone: string): string {
|
||||
const options = { timeZone: timezone, hour12: true, hour: 'numeric', minute: 'numeric' };
|
||||
// @ts-ignore
|
||||
const time = new Date().toLocaleString("en-US", options);
|
||||
return time;
|
||||
}
|
||||
|
||||
export function timeAgo(unixTimestamp: number): string {
|
||||
const date = new Date(unixTimestamp);
|
||||
// @ts-ignore
|
||||
const seconds = Math.floor((new Date() - date) / 1000);
|
||||
let interval = seconds / 31536000;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " years ago";
|
||||
}
|
||||
interval = seconds / 2592000;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " months ago";
|
||||
}
|
||||
interval = seconds / 86400;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " days ago";
|
||||
}
|
||||
interval = seconds / 3600;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " hours ago";
|
||||
}
|
||||
interval = seconds / 60;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " minutes ago";
|
||||
}
|
||||
return Math.floor(seconds) + " seconds ago";
|
||||
}
|
||||
|
||||
export function randomStr(length: number): string {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.toUpperCase();
|
||||
const charactersLength = characters.length;
|
||||
let counter = 0;
|
||||
while (counter < length) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
counter += 1;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export const months = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
export default {
|
||||
title: "satr14's site",
|
||||
subtitle: "Howdy!",
|
||||
name: "satr14",
|
||||
legal: "Satria",
|
||||
description: "I'm Satria (also known as satr14), Im a self-taught hobbyist web developer from Indonesia. I've been programming since 2021 and I love spending my free time working on personal projects and experimenting with new technologies.",
|
||||
skills: ["HTML", "CSS", "JavaScript", "Tailwind", "Svelte", "SvelteKit", "NodeJS", "Express", "PocketBase", "Python", "Linux", "Nginx", "Docker", "Git", "Bash", "Proxmox", "Nix"],
|
||||
birthday: [12,6],
|
||||
timezone: "Asia/Jakarta",
|
||||
links: {
|
||||
"Blog website": "https://blog.satr14.my.id/",
|
||||
"Terminal portfolio": "https://github.com/SX-9/term-port/",
|
||||
"Project part-of.my.id": "https://part-of.my.id/",
|
||||
"DVD logo bounce": "https://sx-9.github.io/dvd-bounce/",
|
||||
"Chess from scratch": "https://sx-9.github.io/chess-from-scratch/",
|
||||
},
|
||||
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/",
|
||||
}
|
||||
}
|
||||
14
src/routes/+layout.server.ts
Normal file
14
src/routes/+layout.server.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import type { LayoutServerLoad } from './$types';
|
||||
import info, { blog, discord, github } from '$lib';
|
||||
|
||||
export const ssr = true;
|
||||
export const load = (async () => {
|
||||
return {
|
||||
...info,
|
||||
fetched: {
|
||||
discord: await discord(info.discord),
|
||||
github: await github(7, info.github),
|
||||
blog: await blog(info.blog.api, info.blog.base),
|
||||
},
|
||||
};
|
||||
}) satisfies LayoutServerLoad;
|
||||
13
src/routes/+layout.svelte
Normal file
13
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
export let data: PageData;
|
||||
import "../app.css";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.title}</title>
|
||||
<meta name="description" content={data.description} />
|
||||
<meta name="theme-color" content="#00e1ff" />
|
||||
</svelte:head>
|
||||
|
||||
<slot />
|
||||
115
src/routes/+page.svelte
Normal file
115
src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<script lang="ts">
|
||||
import { daysUntilBirthday, discord, getTimeIn, months, randomStr, timeAgo } from "$lib";
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
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">
|
||||
<span class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-slate-500 group-hover:text-slate-700">
|
||||
{randomStr(25)}<br>{randomStr(25)}
|
||||
{randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-2 no-underline text-slate-300 group-hover:text-slate-100">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}
|
||||
{randomStr(25)}<br>{randomStr(25)}
|
||||
</span>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>{data.subtitle}</h1>
|
||||
<p>{data.description}</p>
|
||||
<p class="text-sm italic">
|
||||
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
|
||||
It's <b>{time}</b> for me.
|
||||
</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">{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}
|
||||
<a href={link[1]} target="_blank">{link[0]}</a>
|
||||
{/each}
|
||||
</p>
|
||||
</article>
|
||||
<section>
|
||||
<h2 class="text-base italic m-0">Newest 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-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}<span class="italic">{repo.lang}</span>{/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="text-base italic m-0 mt-8">Discord Status</h2>
|
||||
<div class="flex flex-wrap my-4">
|
||||
{#if data.fetched.discord.spotify.song}
|
||||
<div class="m-4">
|
||||
<div class="flex gap-2 items-center">
|
||||
<img class="size-12 rounded-md" src={data.fetched.discord.spotify.art} alt="album art">
|
||||
<div>
|
||||
<h4 class="my-0"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h4>
|
||||
<span class="italic">{data.fetched.discord.spotify.artist}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="italic text-sm">Listening to Spotify</span>
|
||||
</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="italic">
|
||||
Started {timeAgo(activity.started)}
|
||||
{#if activity.state}
|
||||
<br>{activity.state}
|
||||
{/if}
|
||||
{#if activity.details}
|
||||
<br>{activity.details}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<span class="italic text-sm">Playing {activity.name}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<h3 class="italic my-0 font-normal text-xl">@<span class="underline">{data.fetched.discord.username}</span> is <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}>{data.fetched.discord.status}</span> in discord</h3>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="text-center mt-8">
|
||||
© {new Date().getFullYear()} {data.legal}. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
Loading…
Add table
Add a link
Reference in a new issue