From 597304e3e32da823e492e2892e95c7ae48c437a7 Mon Sep 17 00:00:00 2001 From: satr14 <90962949+SX-9@users.noreply.github.com> Date: Thu, 27 Mar 2025 11:33:29 +0700 Subject: [PATCH] a bit of a redesign --- package-lock.json | 11 ++ package.json | 1 + src/app.css | 24 ++-- src/hooks.server.ts | 28 ++--- src/lib/index.ts | 250 +++++++++++++++++++++------------------- src/routes/+layout.ts | 22 +--- src/routes/+page.svelte | 104 +++-------------- tailwind.config.js | 8 +- 8 files changed, 186 insertions(+), 262 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3a49764..5d6e48a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@sveltejs/adapter-cloudflare": "^4.7.4" }, "devDependencies": { + "@catppuccin/tailwindcss": "^0.1.6", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", @@ -48,6 +49,16 @@ "node": ">=6.0.0" } }, + "node_modules/@catppuccin/tailwindcss": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@catppuccin/tailwindcss/-/tailwindcss-0.1.6.tgz", + "integrity": "sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": ">=3.0.0" + } + }, "node_modules/@cloudflare/kv-asset-handler": { "version": "0.3.4", "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.3.4.tgz", diff --git a/package.json b/package.json index 796706a..149f085 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" }, "devDependencies": { + "@catppuccin/tailwindcss": "^0.1.6", "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", diff --git a/src/app.css b/src/app.css index c6e9319..da660e9 100644 --- a/src/app.css +++ b/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; } \ No newline at end of file +thead { @apply bg-ctp-overlay0; } +tbody { @apply bg-ctp-base text-ctp-subtext0; } +tr, th, td { @apply p-1 border border-ctp-overlay1; } \ No newline at end of file diff --git a/src/hooks.server.ts b/src/hooks.server.ts index 9e5d0dc..083f94b 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -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`); -}; \ No newline at end of file +\x1b[2;3m${info.title} - ${event.request.headers.get('user-agent')} version ;)\x1b[0m\n\ +\ +`); diff --git a/src/lib/index.ts b/src/lib/index.ts index 9e149af..57a1b4d 100644 --- a/src/lib/index.ts +++ b/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/", } diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 08fbbf7..d2d06ca 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -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; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0130e16..cdfea45 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,21 +5,23 @@ let days = daysUntilBirthday(data.birthday); let time = getTimeIn(data.timezone); - let created = new Date(data.fetched.blog.created);
-
-
+
+
{randomStr(30)}
{randomStr(40)} - {randomStr(20-data.name.length/2)}{data.name.toUpperCase()}{randomStr(20-data.name.length/2)} + {randomStr(20-data.name.length/2)}{data.name.toUpperCase()}{randomStr(20-data.name.length/2)} {randomStr(40)}
{randomStr(30)}
-
@@ -28,98 +30,30 @@

{data.subtitle}

{data.description}

+ It's {time} in {data.timezone}. {days || 'Today'} { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' } - It's {time} for me.

{#each data.skills as skill} - {skill} + {skill} {/each}

{#each Object.entries(data.links) as link, i} - {#if i > 0}~{/if} + {#if i > 0}~{/if} {link[0]} {/each}

-
-

Latest blog post

-

{data.fetched.blog.title}

-

{months[created.getMonth()]} {created.getDate()}, {created.getFullYear()} - {data.fetched.blog.desc}

-
-
-

GitHub repositories

-
- {#each data.fetched.github as repo, i} -
-
-

{repo.name}

-

{repo.desc}

-
-
- {#if repo.lang}{repo.lang}{/if}
- {#if repo.stars}{repo.stars} star{repo.stars>1?'s':''}{/if} -
-
- {/each} -
-
-
-

- @{data.fetched.discord.username} - {data.fetched.discord.status} -

-
- {#if data.fetched.discord.spotify.song} -
- Listening to Spotify -
- album art -
-

{data.fetched.discord.spotify.song}

-
{data.fetched.discord.spotify.artist} -
-
-
- {/if} - {#each data.fetched.discord.activity as activity} -
-
-
- {#if activity.images.large} - large - {/if} - {#if activity.images.small} - small - {/if} -
- -

{activity.name}

- - {#if activity.state} -
{activity.state} - {/if} - {#if activity.details} -
{activity.details} - {/if} - - -
- Started {timeAgo(activity.started)} -
- {/each} -
-
+ + + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 51fdce5..31c6ef4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: {} - }, - plugins: [] + plugins: [require("@catppuccin/tailwindcss")({ + defaultFlavour: 'mocha', + prefix: 'ctp', + })], }; \ No newline at end of file