left column done

This commit is contained in:
liyunze 2026-11-05 17:39:35 +08:00
parent 829093e64a
commit 614bd04405
15 changed files with 494 additions and 208 deletions

View file

@ -42,6 +42,6 @@ If you have state that's important to retain within a component, consider creati
```ts ```ts
// store.ts // store.ts
// An extremely simple external store // An extremely simple external store
import { writable } from 'svelte/store' import { writable } from "svelte/store";
export default writable(0) export default writable(0);
``` ```

View file

@ -4,10 +4,15 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Media kit and audience stats for RythonDev." /> <meta
name="description"
content="Media kit and audience stats for RythonDev."
/>
<title>RythonDev — Media Kit</title> <title>RythonDev — Media Kit</title>
</head> </head>
<body class="bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-50"> <body
class="bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-50"
>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

View file

@ -0,0 +1,47 @@
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="48"
height="48"
rx="24"
fill="url(#paint0_radial_973_2817)"
></rect>
<path
d="M19.2632 12C15.263 12 12 15.263 12 19.2632V28.7368C12 32.7365 15.2629 36 19.2632 36H28.7368C32.7366 36 36 32.7366 36 28.7368V19.2632C36 15.2629 32.7365 12 28.7368 12H19.2632ZM19.2632 13.8947H28.7368C31.7124 13.8947 34.1053 16.287 34.1053 19.2632V28.7368C34.1053 31.7122 31.7122 34.1053 28.7368 34.1053H19.2632C16.287 34.1053 13.8947 31.7124 13.8947 28.7368V19.2632C13.8947 16.2869 16.2869 13.8947 19.2632 13.8947ZM30.3158 16.4211C29.6179 16.4211 29.0526 16.9863 29.0526 17.6842C29.0526 18.3821 29.6179 18.9474 30.3158 18.9474C31.0137 18.9474 31.5789 18.3821 31.5789 17.6842C31.5789 16.9863 31.0137 16.4211 30.3158 16.4211ZM24 17.6842C20.5233 17.6842 17.6842 20.5233 17.6842 24C17.6842 27.4767 20.5233 30.3158 24 30.3158C27.4767 30.3158 30.3158 27.4767 30.3158 24C30.3158 20.5233 27.4767 17.6842 24 17.6842ZM24 19.5789C26.4525 19.5789 28.4211 21.5475 28.4211 24C28.4211 26.4525 26.4525 28.4211 24 28.4211C21.5475 28.4211 19.5789 26.4525 19.5789 24C19.5789 21.5475 21.5475 19.5789 24 19.5789Z"
fill="white"></path>
<defs>
<radialGradient
id="paint0_radial_973_2817"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.8439 48.0346) scale(59.8337 59.8337)"
>
<stop stop-color="#FFDD55"></stop>
<stop
offset="0.328"
stop-color="#FF543F"></stop>
<stop
offset="0.348"
stop-color="#FC5245"></stop>
<stop
offset="0.504"
stop-color="#E64771"></stop>
<stop
offset="0.643"
stop-color="#D53E91"></stop>
<stop
offset="0.761"
stop-color="#CC39A4"></stop>
<stop
offset="0.841"
stop-color="#C837AB"></stop>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -0,0 +1,29 @@
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
id="note"
d="M369 377C165 377 0 520 0 704C0 880 143 1031 320 1031C497 1031 638 880 638 704L638 347C700 400 790 425 878 432L878 252C740 240 650 120 638 0L462 0L462 720C462 810 390 890 301 890C213 890 140 818 140 729C140 640 215 567 300 567L369 567Z"
></path>
<clipPath id="noteClip">
<use href="#note"></use>
</clipPath>
</defs>
<rect
width="48"
height="48"
rx="24"
fill="#000000"></rect>
<g transform="translate(13.72 12) scale(0.024)">
<use href="#note" fill="#25F4EE"></use>
<use href="#note" fill="#FE2C55" transform="translate(41 43)"></use>
<g clip-path="url(#noteClip)">
<use href="#note" fill="#FFFFFF" transform="translate(41 43)"></use>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 957 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,22 @@
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="48"
height="48"
rx="24"
fill="#8C44F7"></rect>
<path
d="M20.2022 37.5H23.231L26.2598 34.7227H30.8083L36.7926 28.3192L36.6249 13.5H15.9262L14.0502 18.3838V34.5236H20.2022V37.5ZM17.3935 31.7149V15.2607H35.252V27.1664L30.8712 31.7149H25.7044L22.6755 33.8109V31.7149H17.3935Z"
fill="white"></path>
<path
d="M24.6671 19.5994H26.3231V25.5H24.6671V19.5994Z"
fill="white"></path>
<path
d="M29.006 19.5994H30.662V25.5H29.006V19.5994Z"
fill="white"></path>
</svg>

After

Width:  |  Height:  |  Size: 679 B

View file

@ -0,0 +1,16 @@
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="48"
height="48"
rx="24"
fill="#F10000"></rect>
<path
d="M35.469 18.429L35.499 18.625C35.209 17.596 34.426 16.802 33.431 16.513L33.41 16.508C31.5391 16 24.0101 16 24.0101 16C24.0101 16 16.5002 15.99 14.6103 16.508C13.5963 16.802 12.8123 17.596 12.5273 18.604L12.5223 18.625C11.8233 22.2759 11.8183 26.6629 12.5533 30.5718L12.5223 30.3738C12.8123 31.4028 13.5953 32.1968 14.5903 32.4858L14.6113 32.4908C16.4802 32.9998 24.0111 32.9998 24.0111 32.9998C24.0111 32.9998 31.5201 32.9998 33.411 32.4908C34.426 32.1968 35.21 31.4028 35.495 30.3948L35.5 30.3738C35.818 28.6759 36 26.7219 36 24.7259C36 24.6529 36 24.5789 35.999 24.5049C36 24.4369 36 24.3559 36 24.2749C36 22.2779 35.818 20.324 35.469 18.429ZM21.6082 28.1509V20.858L27.8741 24.5099L21.6082 28.1509Z"
fill="white"></path>
</svg>

After

Width:  |  Height:  |  Size: 970 B

View file

@ -33,6 +33,7 @@
font-display: swap; font-display: swap;
} }
html, body { html,
body {
font-family: Montserrat; font-family: Montserrat;
} }

View file

@ -1,78 +1,85 @@
import type { AdminState, MediaKit, Platform } from './types' import type { AdminState, MediaKit, Platform } from "./types";
const TOKEN_KEY = 'rythondev_admin_token' const TOKEN_KEY = "rythondev_admin_token";
function authHeaders(): Record<string, string> { function authHeaders(): Record<string, string> {
const token = localStorage.getItem(TOKEN_KEY) const token = localStorage.getItem(TOKEN_KEY);
return token ? { Authorization: `Basic ${token}` } : {} return token ? { Authorization: `Basic ${token}` } : {};
} }
export function getStoredToken(): string | null { export function getStoredToken(): string | null {
return localStorage.getItem(TOKEN_KEY) return localStorage.getItem(TOKEN_KEY);
} }
export function clearStoredToken(): void { export function clearStoredToken(): void {
localStorage.removeItem(TOKEN_KEY) localStorage.removeItem(TOKEN_KEY);
} }
export async function fetchMediaKit(): Promise<MediaKit> { export async function fetchMediaKit(): Promise<MediaKit> {
const res = await fetch('/api/media-kit') const res = await fetch("/api/media-kit");
if (!res.ok) throw new Error('Failed to load media kit') if (!res.ok) throw new Error("Failed to load media kit");
return res.json() return res.json();
} }
export async function verifyAdmin(username: string, password: string): Promise<boolean> { export async function verifyAdmin(
const token = btoa(`${username}:${password}`) username: string,
const res = await fetch('/api/admin/verify', { password: string,
): Promise<boolean> {
const token = btoa(`${username}:${password}`);
const res = await fetch("/api/admin/verify", {
headers: { Authorization: `Basic ${token}` }, headers: { Authorization: `Basic ${token}` },
}) });
if (!res.ok) return false if (!res.ok) return false;
localStorage.setItem(TOKEN_KEY, token) localStorage.setItem(TOKEN_KEY, token);
return true return true;
} }
export async function fetchAdminState(): Promise<AdminState> { export async function fetchAdminState(): Promise<AdminState> {
const res = await fetch('/api/admin/state', { headers: authHeaders() }) const res = await fetch("/api/admin/state", { headers: authHeaders() });
if (res.status === 401) { if (res.status === 401) {
clearStoredToken() clearStoredToken();
throw new Error('unauthorized') throw new Error("unauthorized");
} }
if (!res.ok) throw new Error('Failed to load admin state') if (!res.ok) throw new Error("Failed to load admin state");
return res.json() return res.json();
} }
export async function updateContent(content: Record<string, string>): Promise<Record<string, string>> { export async function updateContent(
const res = await fetch('/api/admin/content', { content: Record<string, string>,
method: 'PUT', ): Promise<Record<string, string>> {
headers: { 'Content-Type': 'application/json', ...authHeaders() }, const res = await fetch("/api/admin/content", {
method: "PUT",
headers: { "Content-Type": "application/json", ...authHeaders() },
body: JSON.stringify(content), body: JSON.stringify(content),
}) });
if (res.status === 401) { if (res.status === 401) {
clearStoredToken() clearStoredToken();
throw new Error('unauthorized') throw new Error("unauthorized");
} }
if (!res.ok) throw new Error('Failed to save content') if (!res.ok) throw new Error("Failed to save content");
const data = await res.json() const data = await res.json();
return data.content return data.content;
} }
export async function updatePlatforms(platforms: Platform[]): Promise<Platform[]> { export async function updatePlatforms(
const res = await fetch('/api/admin/platforms', { platforms: Platform[],
method: 'PUT', ): Promise<Platform[]> {
headers: { 'Content-Type': 'application/json', ...authHeaders() }, const res = await fetch("/api/admin/platforms", {
method: "PUT",
headers: { "Content-Type": "application/json", ...authHeaders() },
body: JSON.stringify(platforms), body: JSON.stringify(platforms),
}) });
if (res.status === 401) { if (res.status === 401) {
clearStoredToken() clearStoredToken();
throw new Error('unauthorized') throw new Error("unauthorized");
} }
if (!res.ok) throw new Error('Failed to save platforms') if (!res.ok) throw new Error("Failed to save platforms");
const data = await res.json() const data = await res.json();
return data.platforms return data.platforms;
} }

View file

@ -1,32 +1,32 @@
export interface Platform { export interface Platform {
name: string name: string;
handle: string handle: string;
url: string url: string;
followers: number followers: number;
} }
export interface TwitchData { export interface TwitchData {
configured?: boolean configured?: boolean;
found?: boolean found?: boolean;
login?: string login?: string;
display_name?: string display_name?: string;
profile_image_url?: string profile_image_url?: string;
followers?: number followers?: number;
live?: boolean live?: boolean;
title?: string title?: string;
game_name?: string game_name?: string;
viewer_count?: number viewer_count?: number;
updated_at?: number updated_at?: number;
message?: string message?: string;
} }
export interface MediaKit { export interface MediaKit {
content: Record<string, string> content: Record<string, string>;
platforms: Platform[] platforms: Platform[];
twitch: TwitchData | null twitch: TwitchData | null;
} }
export interface AdminState { export interface AdminState {
content: Record<string, string> content: Record<string, string>;
platforms: Platform[] platforms: Platform[];
} }

View file

@ -1,9 +1,9 @@
import { mount } from 'svelte' import { mount } from "svelte";
import './app.css' import "./app.css";
import App from './App.svelte' import App from "./App.svelte";
const app = mount(App, { const app = mount(App, {
target: document.getElementById('app')!, target: document.getElementById("app")!,
}) });
export default app export default app;

View file

@ -1,41 +1,49 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte' import { onMount } from "svelte";
import { fetchMediaKit } from '../lib/api' import { fetchMediaKit } from "../lib/api";
import type { MediaKit } from '../lib/types' import type { MediaKit, Platform } from "../lib/types";
let data = $state<MediaKit | null>(null) let data = $state<MediaKit | null>(null);
let error = $state('') let error = $state("");
onMount(async () => { onMount(async () => {
try { try {
data = await fetchMediaKit() data = await fetchMediaKit();
} catch (err) { } catch (err) {
error = err instanceof Error ? err.message : 'Something went wrong' error = err instanceof Error ? err.message : "Something went wrong";
} }
}) });
const content = $derived(data?.content ?? {}) let content = $derived(data?.content ?? {});
const platforms = $derived(data?.platforms ?? []) let platforms = $derived(data?.platforms ?? []);
const twitch = $derived(data?.twitch ?? null) let twitch = $derived(data?.twitch);
const twitchLogin = $derived(twitch?.login ?? '') // let twitchLogin = $derived(twitch?.login ?? "");
let platformImageMap: Record<string, string> = {
twitch: "/images/logos/twitch.svg",
youtube: "/images/logos/youtube.svg",
instagram: "/images/logos/instagram.svg",
tiktok: "/images/logos/tiktok.svg",
};
function formatCount(value: number | undefined | null): string { function formatCount(value: number | undefined | null): string {
if (value == null) return '—' if (value == null) return "—";
if (value >= 1_000_000) { if (value >= 1_000_000) {
const millions = value / 1_000_000 const millions = value / 1_000_000;
return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, '')}M` return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, "")}M`;
} }
if (value >= 1_000) { if (value >= 1_000) {
const thousands = value / 1_000 const thousands = value / 1_000;
return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, '')}K` return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, "")}K`;
} }
return value.toLocaleString() return value.toLocaleString();
} }
</script> </script>
{#if error} {#if error}
<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18"> <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
<div class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"> <div
class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
>
{error} {error}
</div> </div>
</main> </main>
@ -44,57 +52,52 @@
<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div> <div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
</main> </main>
{:else} {:else}
<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18"> <main class="grid grid-cols-2 max-w-6xl mx-auto pt-20">
<header class="flex flex-col items-start gap-6 pt-6 pb-2 sm:flex-row sm:items-center"> <div class="">
<div class="px-5">
{#if content.profile_image_url} {#if content.profile_image_url}
<img <img
class="h-24 w-24 shrink-0 rounded-md object-cover" class="shrink-0 rounded-xl w-full object-cover shadow-cyan-300 shadow-lg"
src={content.profile_image_url} src={content.profile_image_url}
alt={content.brand_name ?? 'Profile image'} alt={content.brand_name ?? "Profile image"}
width="300"
/> />
{/if} {/if}
<div> <div class="mt-6 grid grid-cols-2 gap-4">
<h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"> <!-- Twitch -->
{content.brand_name ?? 'RythonDev'}
</h1>
{#if content.tagline}
<p class="mt-4 text-xl text-gray-500 dark:text-gray-400">{content.tagline}</p>
{/if}
</div>
</header>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">About</h2>
<p class="mt-4 max-w-160 text-lg leading-relaxed text-gray-500 dark:text-gray-400">
{content.about ?? ''}
</p>
{#if content.email}
<a <a
class="mt-4 inline-block text-violet-600 dark:text-violet-400" class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400"
href="mailto:{content.email}">{content.email}</a href={`https://twitch.tv/${twitch?.login}`}
target="_blank"
rel="noreferrer"
> >
{/if}
</section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">Twitch</h2>
{#if twitch?.configured && twitch?.found}
<div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4">
<div <div
class="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900" class="flex flex-row justify-start items-start gap-3"
> >
<span class="text-sm text-gray-500 dark:text-gray-400">Followers</span> <img
<span class="text-3xl font-semibold tracking-tight">{formatCount(twitch?.followers)}</span> src={platformImageMap["twitch"]}
alt="Twitch"
width="40"
/>
<div>
<span
class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
>
Twitch
</span>
<br />
<span class="text-base"
>{twitch?.display_name}</span
>
<div
class="mt-2 text-2xl font-semibold tracking-tight"
>
{formatCount(twitch?.followers)}
<span class="text-sm">followers</span>
</div> </div>
</div> </div>
{:else} </div>
<p class="text-gray-500 dark:text-gray-400">{twitch?.message ?? 'Twitch stats are unavailable.'}</p> </a>
{/if}
</section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">Platforms</h2>
<div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
{#each platforms as platform (platform.name)} {#each platforms as platform (platform.name)}
<a <a
class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400" class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400"
@ -102,16 +105,55 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<span class="text-sm font-semibold tracking-[0.08em] uppercase text-gray-500 dark:text-gray-400"> <div
class="flex flex-row justify-start items-start gap-3"
>
<img
src={platformImageMap[platform.name]}
alt="Twitch"
width="48"
/>
<div>
<span
class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
>
{platform.name} {platform.name}
</span> </span>
<span class="text-base">{platform.handle}</span> <br />
<span class="mt-2 text-2xl font-semibold tracking-tight"> <span class="text-base"
{formatCount(platform.followers)} followers >{platform.handle}</span
>
<div
class="mt-2 text-2xl font-semibold tracking-tight"
>
{formatCount(platform.followers)}
<span class="text-sm">
{#if platform.name != "youtube"}
followers
{:else}
subscribers
{/if}
</span> </span>
</div>
</div>
</div>
</a> </a>
{/each} {/each}
</div> </div>
</section> </div>
</div>
<div class="">
<div class="border-cyan border-2 rounded-lg py-2 px-2">
<div
class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl"
>
Hi there, I'm <br />
<b>RythonDev</b>
</div>
</div>
</div>
</main> </main>
{/if} {/if}
<style>
</style>

View file

@ -0,0 +1,117 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fetchMediaKit } from '../lib/api'
import type { MediaKit } from '../lib/types'
let data = $state<MediaKit | null>(null)
let error = $state('')
onMount(async () => {
try {
data = await fetchMediaKit()
} catch (err) {
error = err instanceof Error ? err.message : 'Something went wrong'
}
})
const content = $derived(data?.content ?? {})
const platforms = $derived(data?.platforms ?? [])
const twitch = $derived(data?.twitch ?? null)
const twitchLogin = $derived(twitch?.login ?? '')
function formatCount(value: number | undefined | null): string {
if (value == null) return '—'
if (value >= 1_000_000) {
const millions = value / 1_000_000
return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, '')}M`
}
if (value >= 1_000) {
const thousands = value / 1_000
return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, '')}K`
}
return value.toLocaleString()
}
</script>
{#if error}
<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
<div class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
{error}
</div>
</main>
{:else if !data}
<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
</main>
{:else}
<main class="grid grid-cols-2">
<div class="flex flex-col items-start gap-6 pt-6 pb-2 sm:flex-row sm:items-center">
{#if content.profile_image_url}
<img
class="h-24 w-24 shrink-0 rounded-md object-cover"
src={content.profile_image_url}
alt={content.brand_name ?? 'Profile image'}
/>
{/if}
<div>
<h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight">
{content.brand_name ?? 'RythonDev'}
</h1>
{#if content.tagline}
<p class="mt-4 text-xl text-gray-500 dark:text-gray-400">{content.tagline}</p>
{/if}
</div>
</div>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">About</h2>
<p class="mt-4 max-w-160 text-lg leading-relaxed text-gray-500 dark:text-gray-400">
{content.about ?? ''}
</p>
{#if content.email}
<a
class="mt-4 inline-block text-violet-600 dark:text-violet-400"
href="mailto:{content.email}">{content.email}</a
>
{/if}
</section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">Twitch</h2>
{#if twitch?.configured && twitch?.found}
<div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4">
<div
class="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
>
<span class="text-sm text-gray-500 dark:text-gray-400">Followers</span>
<span class="text-3xl font-semibold tracking-tight">{formatCount(twitch?.followers)}</span>
</div>
</div>
{:else}
<p class="text-gray-500 dark:text-gray-400">{twitch?.message ?? 'Twitch stats are unavailable.'}</p>
{/if}
</section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
<h2 class="text-xl font-semibold tracking-tight">Platforms</h2>
<div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
{#each platforms as platform (platform.name)}
<a
class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400"
href={platform.url}
target="_blank"
rel="noreferrer"
>
<span class="text-sm font-semibold tracking-[0.08em] uppercase text-gray-500 dark:text-gray-400">
{platform.name}
</span>
<span class="text-base">{platform.handle}</span>
<span class="mt-2 text-2xl font-semibold tracking-tight">
{formatCount(platform.followers)} followers
</span>
</a>
{/each}
</div>
</section>
</main>
{/if}

View file

@ -1,2 +1,2 @@
/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */ /** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
export default {} export default {};

View file

@ -1,16 +1,16 @@
import { svelte } from '@sveltejs/vite-plugin-svelte' import { svelte } from "@sveltejs/vite-plugin-svelte";
import tailwindcss from '@tailwindcss/vite' import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from 'vite' import { defineConfig } from "vite";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [tailwindcss(), svelte()], plugins: [tailwindcss(), svelte()],
server: { server: {
proxy: { proxy: {
'/api': { "/api": {
target: 'http://localhost:3000', target: "http://localhost:3000",
changeOrigin: true, changeOrigin: true,
}, },
}, },
}, },
}) });