finished phew

This commit is contained in:
Satria 2024-11-02 23:16:20 +07:00
commit 9901fb06f0
18 changed files with 4336 additions and 0 deletions

21
.gitignore vendored Normal file
View file

@ -0,0 +1,21 @@
node_modules
# Output
.output
.vercel
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
.npmrc Normal file
View file

@ -0,0 +1 @@
engine-strict=true

38
README.md Normal file
View file

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

3802
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

28
package.json Normal file
View file

@ -0,0 +1,28 @@
{
"name": "5th-site",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"svelte": "^4.2.7",
"svelte-check": "^4.0.0",
"tailwindcss": "^3.4.14",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module",
"dependencies": {
"@sveltejs/adapter-cloudflare": "^4.7.4"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

32
src/app.css Normal file
View 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
View 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
View 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
View 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/",
}
}

View 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
View 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
View 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">
&copy; {new Date().getFullYear()} {data.legal}. All rights reserved.
</p>
</footer>

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

12
svelte.config.js Normal file
View file

@ -0,0 +1,12 @@
import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter()
}
};
export default config;

8
tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};

19
tsconfig.json Normal file
View file

@ -0,0 +1,19 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

6
vite.config.ts Normal file
View file

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});