rythondev/media-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated services

Browse source
This commit is contained in:
liyunze 2026-11-05 22:52:40 +08:00
parent e51f83aa8c
commit 0f5155811d
5 changed files with 743 additions and 636 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/lib/api.ts
View file

@ -83,3 +83,4 @@ export async function updatePlatforms(
const data = await res.json(); const data = await res.json();
return data.platforms; return data.platforms;
} }

185
frontend/src/routes/Admin.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte' import { onMount } from "svelte";
import { import {
clearStoredToken, clearStoredToken,
fetchAdminState, fetchAdminState,
@ -7,109 +7,123 @@
updateContent, updateContent,
updatePlatforms, updatePlatforms,
verifyAdmin, verifyAdmin,
} from '../lib/api' } from "../lib/api";
import type { Platform } from '../lib/types' import type { Platform } from "../lib/types";
let authed = $state(false) let authed = $state(false);
let loading = $state(true) let loading = $state(true);
let message = $state('') let message = $state("");
let error = $state('') let error = $state("");
let username = $state('') let username = $state("");
let password = $state('') let password = $state("");
let content = $state<Record<string, string>>({}) let content = $state<Record<string, string>>({});
let platforms = $state<Platform[]>([]) let platforms = $state<Platform[]>([]);
onMount(async () => { onMount(async () => {
if (getStoredToken()) { if (getStoredToken()) {
await loadState() await loadState();
} else { } else {
loading = false loading = false;
} }
}) });
function titleCase(key: string): string { function titleCase(key: string): string {
return key return key
.split('_') .split("_")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ') .join(" ");
} }
async function loadState() { async function loadState() {
loading = true loading = true;
error = '' error = "";
try { try {
const state = await fetchAdminState() const state = await fetchAdminState();
content = state.content content = state.content;
platforms = state.platforms platforms = state.platforms;
authed = true authed = true;
} catch (err) { } catch (err) {
authed = false authed = false;
error = err instanceof Error ? err.message : 'Unable to load admin state' error =
err instanceof Error
? err.message
: "Unable to load admin state";
} finally { } finally {
loading = false loading = false;
} }
} }
async function handleLogin(event: SubmitEvent) { async function handleLogin(event: SubmitEvent) {
event.preventDefault() event.preventDefault();
error = '' error = "";
message = '' message = "";
if (await verifyAdmin(username, password)) { if (await verifyAdmin(username, password)) {
password = '' password = "";
await loadState() await loadState();
} else { } else {
error = 'Invalid credentials' error = "Invalid credentials";
} }
} }
function handleLogout() { function handleLogout() {
clearStoredToken() clearStoredToken();
authed = false authed = false;
content = {} content = {};
platforms = [] platforms = [];
message = '' message = "";
error = '' error = "";
} }
async function handleSaveContent() { async function handleSaveContent() {
error = '' error = "";
message = '' message = "";
try { try {
content = await updateContent(content) content = await updateContent(content);
message = 'Content saved' message = "Content saved";
} catch (err) { } catch (err) {
error = err instanceof Error ? err.message : 'Unable to save content' error =
err instanceof Error ? err.message : "Unable to save content";
} }
} }
async function handleSavePlatforms() { async function handleSavePlatforms() {
error = '' error = "";
message = '' message = "";
try { try {
const payload = platforms.map((platform) => ({ const payload = platforms.map((platform) => ({
...platform, ...platform,
followers: Number(platform.followers) || 0, followers: Number(platform.followers) || 0,
})) }));
platforms = await updatePlatforms(payload) platforms = await updatePlatforms(payload);
message = 'Platforms saved' message = "Platforms saved";
} catch (err) { } catch (err) {
error = err instanceof Error ? err.message : 'Unable to save platforms' error =
err instanceof Error ? err.message : "Unable to save platforms";
} }
} }
</script> </script>
<main class="mx-auto w-full max-w-[920px] px-6 pt-12 pb-[72px]"> <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
<header class="flex items-start justify-between gap-6"> <header class="flex items-start justify-between gap-6">
<div> <div>
<p class="mb-3 text-xs font-semibold tracking-[0.14em] uppercase text-gray-500 dark:text-gray-400">CMS</p> <p
<h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"> class="mb-3 text-xs font-semibold tracking-[0.14em] uppercase text-gray-500 dark:text-gray-400"
>
CMS
</p>
<h1
class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"
>
RythonDev media kit RythonDev media kit
</h1> </h1>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a class="text-sm text-gray-500 hover:text-neutral-900 dark:text-gray-400 dark:hover:text-neutral-50" href="#/"> <a
class="text-sm text-gray-500 hover:text-neutral-900 dark:text-gray-400 dark:hover:text-neutral-50"
href="#/"
>
View media kit View media kit
</a> </a>
{#if authed} {#if authed}
@ -126,11 +140,15 @@
{#if loading} {#if loading}
<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>
{:else if !authed} {:else if !authed}
<form class="mt-10 max-w-[400px]" onsubmit={handleLogin}> <form class="mt-10 max-w-100" onsubmit={handleLogin}>
<h2 class="mb-2 text-xl font-semibold tracking-tight">Sign in</h2> <h2 class="mb-2 text-xl font-semibold tracking-tight">Sign in</h2>
<p class="text-gray-500 dark:text-gray-400">Enter the admin credentials configured for this instance.</p> <p class="text-gray-500 dark:text-gray-400">
Enter the admin credentials configured for this instance.
</p>
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>Username</span> <span>Username</span>
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
@ -140,7 +158,9 @@
/> />
</label> </label>
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>Password</span> <span>Password</span>
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
@ -152,7 +172,9 @@
</label> </label>
{#if error} {#if error}
<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>
{/if} {/if}
@ -168,7 +190,9 @@
<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 md:items-start"> <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 md:items-start">
<section class="border-t border-gray-200 pt-8 dark:border-zinc-800"> <section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
<div class="mb-5 flex items-center justify-between gap-4"> <div class="mb-5 flex items-center justify-between gap-4">
<h2 class="text-xl font-semibold tracking-tight">Text content</h2> <h2 class="text-xl font-semibold tracking-tight">
Text content
</h2>
<button <button
class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950" class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
onclick={handleSaveContent} onclick={handleSaveContent}
@ -179,15 +203,16 @@
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
{#each Object.keys(content) as key} {#each Object.keys(content) as key}
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>{titleCase(key)}</span> <span>{titleCase(key)}</span>
{#if key === 'about'} {#if key === "about" || key === "services"}
<textarea <textarea
class="w-full resize-y rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full resize-y rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
rows="4" rows={key === "services" ? 6 : 4}
bind:value={content[key]} bind:value={content[key]}></textarea>
></textarea> {:else if key === "profile_image_url"}
{:else if key === 'profile_image_url'}
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
@ -214,7 +239,9 @@
<section class="border-t border-gray-200 pt-8 dark:border-zinc-800"> <section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
<div class="mb-5 flex items-center justify-between gap-4"> <div class="mb-5 flex items-center justify-between gap-4">
<h2 class="text-xl font-semibold tracking-tight">Follower counts</h2> <h2 class="text-xl font-semibold tracking-tight">
Follower counts
</h2>
<button <button
class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950" class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
onclick={handleSavePlatforms} onclick={handleSavePlatforms}
@ -223,28 +250,38 @@
</button> </button>
</div> </div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5"> <div
class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5"
>
{#each platforms as platform, index (platform.name)} {#each platforms as platform, index (platform.name)}
<div <div
class="rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900" class="rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
> >
<div class="mb-4 text-sm font-semibold">{titleCase(platform.name)}</div> <div class="mb-4 text-sm font-semibold">
{titleCase(platform.name)}
</div>
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-4">
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>Handle</span> <span>Handle</span>
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
bind:value={platform.handle} bind:value={platform.handle}
/> />
</label> </label>
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>URL</span> <span>URL</span>
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
bind:value={platform.url} bind:value={platform.url}
/> />
</label> </label>
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"> <label
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
>
<span>Followers</span> <span>Followers</span>
<input <input
class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400" class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
@ -262,12 +299,16 @@
</div> </div>
{#if message} {#if message}
<div class="mt-6 rounded-[10px] bg-green-600/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"> <div
class="mt-6 rounded-[10px] bg-green-600/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"
>
{message} {message}
</div> </div>
{/if} {/if}
{#if error} {#if error}
<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>
{/if} {/if}

35
frontend/src/routes/MediaKit.svelte
View file

@ -18,6 +18,13 @@
let content = $derived(data?.content ?? {}); let content = $derived(data?.content ?? {});
let platforms = $derived(data?.platforms ?? []); let platforms = $derived(data?.platforms ?? []);
let services = $derived(
(content.services ?? "")
.split("\n")
.map((service) => service.trim())
.filter(Boolean)
.slice(0, 6),
);
let twitch = $derived(data?.twitch); let twitch = $derived(data?.twitch);
// let twitchLogin = $derived(twitch?.login ?? ""); // let twitchLogin = $derived(twitch?.login ?? "");
@ -176,6 +183,11 @@
Hi there, I'm <br /> Hi there, I'm <br />
<b>RythonDev</b> <b>RythonDev</b>
</div> </div>
{#if content.tagline}
<p class="text-xl px-5 text-cyan-300 pb-2">
{content.tagline}
</p>
{/if}
</div> </div>
<div class="mt-5"> <div class="mt-5">
<div class="text-white font-bold text-4xl mb-2">About Me</div> <div class="text-white font-bold text-4xl mb-2">About Me</div>
@ -189,6 +201,29 @@
</div> </div>
<Collabs /> <Collabs />
</div> </div>
{#if services.length}
<section class="w-full">
<div class="mb-3 text-4xl font-bold text-white">
Services
</div>
<div class="grid grid-cols-2 gap-x-8">
<ul
class="list-disc space-y-2 pl-5 marker:text-cyan-300"
>
{#each services.slice(0, 3) as service}
<li>{service}</li>
{/each}
</ul>
<ul
class="list-disc space-y-2 pl-5 marker:text-cyan-300"
>
{#each services.slice(3, 6) as service}
<li>{service}</li>
{/each}
</ul>
</div>
</section>
{/if}
</div> </div>
</main> </main>
{/if} {/if}

102
frontend/src/routes/MediaKit_copy.svelte
View file

@ -1,41 +1,43 @@
<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 } 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 ?? {}) const content = $derived(data?.content ?? {});
const platforms = $derived(data?.platforms ?? []) const platforms = $derived(data?.platforms ?? []);
const twitch = $derived(data?.twitch ?? null) const twitch = $derived(data?.twitch ?? null);
const twitchLogin = $derived(twitch?.login ?? '') const twitchLogin = $derived(twitch?.login ?? "");
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>
@ -45,28 +47,38 @@
</main> </main>
{:else} {:else}
<main class="grid grid-cols-2"> <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"> <div
class="flex flex-col items-start gap-6 pt-6 pb-2 sm:flex-row sm:items-center"
>
{#if content.profile_image_url} {#if content.profile_image_url}
<img <img
class="h-24 w-24 shrink-0 rounded-md object-cover" class="h-24 w-24 shrink-0 rounded-md object-cover"
src={content.profile_image_url} src={content.profile_image_url}
alt={content.brand_name ?? 'Profile image'} alt={content.brand_name ?? "Profile image"}
/> />
{/if} {/if}
<div> <div>
<h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"> <h1
{content.brand_name ?? 'RythonDev'} class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"
>
{content.brand_name ?? "RythonDev"}
</h1> </h1>
{#if content.tagline} {#if content.tagline}
<p class="mt-4 text-xl text-gray-500 dark:text-gray-400">{content.tagline}</p> <p class="mt-4 text-xl text-gray-500 dark:text-gray-400">
{content.tagline}
</p>
{/if} {/if}
</div> </div>
</div> </div>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"> <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> <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"> <p
{content.about ?? ''} class="mt-4 max-w-160 text-lg leading-relaxed text-gray-500 dark:text-gray-400"
>
{content.about ?? ""}
</p> </p>
{#if content.email} {#if content.email}
<a <a
@ -76,25 +88,39 @@
{/if} {/if}
</section> </section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"> <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> <h2 class="text-xl font-semibold tracking-tight">Twitch</h2>
{#if twitch?.configured && twitch?.found} {#if twitch?.configured && twitch?.found}
<div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4"> <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-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-sm text-gray-500 dark:text-gray-400"
<span class="text-3xl font-semibold tracking-tight">{formatCount(twitch?.followers)}</span> >Followers</span
>
<span class="text-3xl font-semibold tracking-tight"
>{formatCount(twitch?.followers)}</span
>
</div> </div>
</div> </div>
{:else} {:else}
<p class="text-gray-500 dark:text-gray-400">{twitch?.message ?? 'Twitch stats are unavailable.'}</p> <p class="text-gray-500 dark:text-gray-400">
{twitch?.message ?? "Twitch stats are unavailable."}
</p>
{/if} {/if}
</section> </section>
<section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"> <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> <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"> <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,11 +128,15 @@
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"> <span
class="text-sm font-semibold tracking-[0.08em] uppercase text-gray-500 dark:text-gray-400"
>
{platform.name} {platform.name}
</span> </span>
<span class="text-base">{platform.handle}</span> <span class="text-base">{platform.handle}</span>
<span class="mt-2 text-2xl font-semibold tracking-tight"> <span
class="mt-2 text-2xl font-semibold tracking-tight"
>
{formatCount(platform.followers)} followers {formatCount(platform.followers)} followers
</span> </span>
</a> </a>