updated services
This commit is contained in:
liyunze
parent
e51f83aa8c
commit
0f5155811d
5 changed files with 743 additions and 636 deletions
|
|
@ -1,106 +1,106 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Motion,
|
||||
useTransform,
|
||||
AnimatePresence,
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
} from "svelte-motion";
|
||||
import {
|
||||
Motion,
|
||||
useTransform,
|
||||
AnimatePresence,
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
} from "svelte-motion";
|
||||
|
||||
export let items: {
|
||||
id: number;
|
||||
name: string;
|
||||
image: string;
|
||||
url: string;
|
||||
}[];
|
||||
export let items: {
|
||||
id: number;
|
||||
name: string;
|
||||
image: string;
|
||||
url: string;
|
||||
}[];
|
||||
|
||||
let hoveredIndex: number | null = null;
|
||||
const springConfig = { stiffness: 100, damping: 5 };
|
||||
const x = useMotionValue(0); // going to set this value on mouse move
|
||||
// rotate the tooltip
|
||||
const rotate = useSpring(
|
||||
useTransform(x, [-100, 100], [-45, 45]),
|
||||
springConfig,
|
||||
);
|
||||
// translate the tooltip
|
||||
const translateX = useSpring(
|
||||
useTransform(x, [-100, 100], [-50, 50]),
|
||||
springConfig,
|
||||
);
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// @ts-ignore
|
||||
const halfWidth = event.target?.offsetWidth / 2;
|
||||
x.set(event.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
|
||||
};
|
||||
let hoveredIndex: number | null = null;
|
||||
const springConfig = { stiffness: 100, damping: 5 };
|
||||
const x = useMotionValue(0); // going to set this value on mouse move
|
||||
// rotate the tooltip
|
||||
const rotate = useSpring(
|
||||
useTransform(x, [-100, 100], [-45, 45]),
|
||||
springConfig,
|
||||
);
|
||||
// translate the tooltip
|
||||
const translateX = useSpring(
|
||||
useTransform(x, [-100, 100], [-50, 50]),
|
||||
springConfig,
|
||||
);
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// @ts-ignore
|
||||
const halfWidth = event.target?.offsetWidth / 2;
|
||||
x.set(event.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="group flex flex-row pl-2">
|
||||
{#each items as item, idx (item.name)}
|
||||
<div class="relative mr-5">
|
||||
<AnimatePresence show={true}>
|
||||
{#if hoveredIndex === item.id}
|
||||
<Motion
|
||||
let:motion
|
||||
initial={{ opacity: 0, y: 20, scale: 0.6 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 260,
|
||||
damping: 10,
|
||||
},
|
||||
}}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.6 }}
|
||||
style={{
|
||||
translateX: translateX,
|
||||
rotate: rotate,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
use:motion
|
||||
id="tooltip-{item.id}"
|
||||
role="tooltip"
|
||||
class="absolute left-1/2 -top-10 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-gray-700 px-4 py-2 text-xs shadow-xl"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent"
|
||||
></div>
|
||||
<div
|
||||
class="relative z-30 whitespace-nowrap text-base font-bold text-white"
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
</Motion>
|
||||
{/if}
|
||||
</AnimatePresence>
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
class="relative m-0 h-14 w-14 cursor-pointer rounded-full border-0 bg-transparent p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
|
||||
on:mousemove={handleMouseMove}
|
||||
on:mouseenter={() => (hoveredIndex = item.id)}
|
||||
on:mouseleave={() => (hoveredIndex = null)}
|
||||
on:focus={() => (hoveredIndex = item.id)}
|
||||
on:blur={() => (hoveredIndex = null)}
|
||||
aria-describedby={hoveredIndex === item.id
|
||||
? `tooltip-${item.id}`
|
||||
: undefined}
|
||||
>
|
||||
<img
|
||||
height={100}
|
||||
width={100}
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
class="m-0! h-10 w-10 rounded-lg object-cover object-top p-0!"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
{#each items as item, idx (item.name)}
|
||||
<div class="relative mr-5">
|
||||
<AnimatePresence show={true}>
|
||||
{#if hoveredIndex === item.id}
|
||||
<Motion
|
||||
let:motion
|
||||
initial={{ opacity: 0, y: 20, scale: 0.6 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 260,
|
||||
damping: 10,
|
||||
},
|
||||
}}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.6 }}
|
||||
style={{
|
||||
translateX: translateX,
|
||||
rotate: rotate,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
use:motion
|
||||
id="tooltip-{item.id}"
|
||||
role="tooltip"
|
||||
class="absolute left-1/2 -top-10 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-gray-700 px-4 py-2 text-xs shadow-xl"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent"
|
||||
></div>
|
||||
<div
|
||||
class="relative z-30 whitespace-nowrap text-base font-bold text-white"
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
</Motion>
|
||||
{/if}
|
||||
</AnimatePresence>
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
class="relative m-0 h-14 w-14 cursor-pointer rounded-full border-0 bg-transparent p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
|
||||
on:mousemove={handleMouseMove}
|
||||
on:mouseenter={() => (hoveredIndex = item.id)}
|
||||
on:mouseleave={() => (hoveredIndex = null)}
|
||||
on:focus={() => (hoveredIndex = item.id)}
|
||||
on:blur={() => (hoveredIndex = null)}
|
||||
aria-describedby={hoveredIndex === item.id
|
||||
? `tooltip-${item.id}`
|
||||
: undefined}
|
||||
>
|
||||
<img
|
||||
height={100}
|
||||
width={100}
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
class="m-0! h-10 w-10 rounded-lg object-cover object-top p-0!"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,3 +83,4 @@ export async function updatePlatforms(
|
|||
const data = await res.json();
|
||||
return data.platforms;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,275 +1,316 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import {
|
||||
clearStoredToken,
|
||||
fetchAdminState,
|
||||
getStoredToken,
|
||||
updateContent,
|
||||
updatePlatforms,
|
||||
verifyAdmin,
|
||||
} from '../lib/api'
|
||||
import type { Platform } from '../lib/types'
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
clearStoredToken,
|
||||
fetchAdminState,
|
||||
getStoredToken,
|
||||
updateContent,
|
||||
updatePlatforms,
|
||||
verifyAdmin,
|
||||
} from "../lib/api";
|
||||
import type { Platform } from "../lib/types";
|
||||
|
||||
let authed = $state(false)
|
||||
let loading = $state(true)
|
||||
let message = $state('')
|
||||
let error = $state('')
|
||||
let username = $state('')
|
||||
let password = $state('')
|
||||
let authed = $state(false);
|
||||
let loading = $state(true);
|
||||
let message = $state("");
|
||||
let error = $state("");
|
||||
let username = $state("");
|
||||
let password = $state("");
|
||||
|
||||
let content = $state<Record<string, string>>({})
|
||||
let platforms = $state<Platform[]>([])
|
||||
let content = $state<Record<string, string>>({});
|
||||
let platforms = $state<Platform[]>([]);
|
||||
|
||||
onMount(async () => {
|
||||
if (getStoredToken()) {
|
||||
await loadState()
|
||||
} else {
|
||||
loading = false
|
||||
}
|
||||
})
|
||||
onMount(async () => {
|
||||
if (getStoredToken()) {
|
||||
await loadState();
|
||||
} else {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function titleCase(key: string): string {
|
||||
return key
|
||||
.split('_')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ')
|
||||
}
|
||||
function titleCase(key: string): string {
|
||||
return key
|
||||
.split("_")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
async function loadState() {
|
||||
loading = true
|
||||
error = ''
|
||||
try {
|
||||
const state = await fetchAdminState()
|
||||
content = state.content
|
||||
platforms = state.platforms
|
||||
authed = true
|
||||
} catch (err) {
|
||||
authed = false
|
||||
error = err instanceof Error ? err.message : 'Unable to load admin state'
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
async function loadState() {
|
||||
loading = true;
|
||||
error = "";
|
||||
try {
|
||||
const state = await fetchAdminState();
|
||||
content = state.content;
|
||||
platforms = state.platforms;
|
||||
authed = true;
|
||||
} catch (err) {
|
||||
authed = false;
|
||||
error =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Unable to load admin state";
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogin(event: SubmitEvent) {
|
||||
event.preventDefault()
|
||||
error = ''
|
||||
message = ''
|
||||
async function handleLogin(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
error = "";
|
||||
message = "";
|
||||
|
||||
if (await verifyAdmin(username, password)) {
|
||||
password = ''
|
||||
await loadState()
|
||||
} else {
|
||||
error = 'Invalid credentials'
|
||||
}
|
||||
}
|
||||
if (await verifyAdmin(username, password)) {
|
||||
password = "";
|
||||
await loadState();
|
||||
} else {
|
||||
error = "Invalid credentials";
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
clearStoredToken()
|
||||
authed = false
|
||||
content = {}
|
||||
platforms = []
|
||||
message = ''
|
||||
error = ''
|
||||
}
|
||||
function handleLogout() {
|
||||
clearStoredToken();
|
||||
authed = false;
|
||||
content = {};
|
||||
platforms = [];
|
||||
message = "";
|
||||
error = "";
|
||||
}
|
||||
|
||||
async function handleSaveContent() {
|
||||
error = ''
|
||||
message = ''
|
||||
try {
|
||||
content = await updateContent(content)
|
||||
message = 'Content saved'
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Unable to save content'
|
||||
}
|
||||
}
|
||||
async function handleSaveContent() {
|
||||
error = "";
|
||||
message = "";
|
||||
try {
|
||||
content = await updateContent(content);
|
||||
message = "Content saved";
|
||||
} catch (err) {
|
||||
error =
|
||||
err instanceof Error ? err.message : "Unable to save content";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSavePlatforms() {
|
||||
error = ''
|
||||
message = ''
|
||||
try {
|
||||
const payload = platforms.map((platform) => ({
|
||||
...platform,
|
||||
followers: Number(platform.followers) || 0,
|
||||
}))
|
||||
platforms = await updatePlatforms(payload)
|
||||
message = 'Platforms saved'
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Unable to save platforms'
|
||||
}
|
||||
}
|
||||
async function handleSavePlatforms() {
|
||||
error = "";
|
||||
message = "";
|
||||
try {
|
||||
const payload = platforms.map((platform) => ({
|
||||
...platform,
|
||||
followers: Number(platform.followers) || 0,
|
||||
}));
|
||||
platforms = await updatePlatforms(payload);
|
||||
message = "Platforms saved";
|
||||
} catch (err) {
|
||||
error =
|
||||
err instanceof Error ? err.message : "Unable to save platforms";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="mx-auto w-full max-w-[920px] px-6 pt-12 pb-[72px]">
|
||||
<header class="flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<p 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
|
||||
</h1>
|
||||
</div>
|
||||
<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="#/">
|
||||
View media kit
|
||||
</a>
|
||||
{#if authed}
|
||||
<button
|
||||
class="cursor-pointer rounded-[10px] border border-gray-200 bg-transparent px-4 py-2.5 text-sm font-medium text-neutral-900 transition-opacity hover:opacity-85 dark:border-zinc-800 dark:text-neutral-50"
|
||||
onclick={handleLogout}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
|
||||
<header class="flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<p
|
||||
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
|
||||
</h1>
|
||||
</div>
|
||||
<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="#/"
|
||||
>
|
||||
View media kit
|
||||
</a>
|
||||
{#if authed}
|
||||
<button
|
||||
class="cursor-pointer rounded-[10px] border border-gray-200 bg-transparent px-4 py-2.5 text-sm font-medium text-neutral-900 transition-opacity hover:opacity-85 dark:border-zinc-800 dark:text-neutral-50"
|
||||
onclick={handleLogout}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
|
||||
{:else if !authed}
|
||||
<form class="mt-10 max-w-[400px]" onsubmit={handleLogin}>
|
||||
<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>
|
||||
{#if loading}
|
||||
<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
|
||||
{:else if !authed}
|
||||
<form class="mt-10 max-w-100" onsubmit={handleLogin}>
|
||||
<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>
|
||||
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Username</span>
|
||||
<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"
|
||||
bind:value={username}
|
||||
autocomplete="username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>Username</span>
|
||||
<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"
|
||||
bind:value={username}
|
||||
autocomplete="username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Password</span>
|
||||
<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"
|
||||
bind:value={password}
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>Password</span>
|
||||
<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"
|
||||
bind:value={password}
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
{#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">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
{#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"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<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"
|
||||
type="submit"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<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">
|
||||
<div class="mb-5 flex items-center justify-between gap-4">
|
||||
<h2 class="text-xl font-semibold tracking-tight">Text content</h2>
|
||||
<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"
|
||||
onclick={handleSaveContent}
|
||||
>
|
||||
Save content
|
||||
</button>
|
||||
</div>
|
||||
<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"
|
||||
type="submit"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<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">
|
||||
<div class="mb-5 flex items-center justify-between gap-4">
|
||||
<h2 class="text-xl font-semibold tracking-tight">
|
||||
Text content
|
||||
</h2>
|
||||
<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"
|
||||
onclick={handleSaveContent}
|
||||
>
|
||||
Save content
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{#each Object.keys(content) as key}
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>{titleCase(key)}</span>
|
||||
{#if key === 'about'}
|
||||
<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"
|
||||
rows="4"
|
||||
bind:value={content[key]}
|
||||
></textarea>
|
||||
{:else if key === 'profile_image_url'}
|
||||
<div class="flex items-start gap-4">
|
||||
<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"
|
||||
bind:value={content[key]}
|
||||
/>
|
||||
{#if content[key]}
|
||||
<img
|
||||
class="h-16 w-16 shrink-0 rounded-full border border-gray-200 object-cover dark:border-zinc-800"
|
||||
src={content[key]}
|
||||
alt="Profile preview"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<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"
|
||||
bind:value={content[key]}
|
||||
/>
|
||||
{/if}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{#each Object.keys(content) as key}
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>{titleCase(key)}</span>
|
||||
{#if key === "about" || key === "services"}
|
||||
<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"
|
||||
rows={key === "services" ? 6 : 4}
|
||||
bind:value={content[key]}></textarea>
|
||||
{:else if key === "profile_image_url"}
|
||||
<div class="flex items-start gap-4">
|
||||
<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"
|
||||
bind:value={content[key]}
|
||||
/>
|
||||
{#if content[key]}
|
||||
<img
|
||||
class="h-16 w-16 shrink-0 rounded-full border border-gray-200 object-cover dark:border-zinc-800"
|
||||
src={content[key]}
|
||||
alt="Profile preview"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<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"
|
||||
bind:value={content[key]}
|
||||
/>
|
||||
{/if}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
|
||||
<div class="mb-5 flex items-center justify-between gap-4">
|
||||
<h2 class="text-xl font-semibold tracking-tight">Follower counts</h2>
|
||||
<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"
|
||||
onclick={handleSavePlatforms}
|
||||
>
|
||||
Save platforms
|
||||
</button>
|
||||
</div>
|
||||
<section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
|
||||
<div class="mb-5 flex items-center justify-between gap-4">
|
||||
<h2 class="text-xl font-semibold tracking-tight">
|
||||
Follower counts
|
||||
</h2>
|
||||
<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"
|
||||
onclick={handleSavePlatforms}
|
||||
>
|
||||
Save platforms
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5">
|
||||
{#each platforms as platform, index (platform.name)}
|
||||
<div
|
||||
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="grid grid-cols-1 gap-4">
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Handle</span>
|
||||
<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"
|
||||
bind:value={platform.handle}
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>URL</span>
|
||||
<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"
|
||||
bind:value={platform.url}
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Followers</span>
|
||||
<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"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
bind:value={platform.followers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5"
|
||||
>
|
||||
{#each platforms as platform, index (platform.name)}
|
||||
<div
|
||||
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="grid grid-cols-1 gap-4">
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>Handle</span>
|
||||
<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"
|
||||
bind:value={platform.handle}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>URL</span>
|
||||
<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"
|
||||
bind:value={platform.url}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>Followers</span>
|
||||
<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"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
bind:value={platform.followers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{#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">
|
||||
{message}
|
||||
</div>
|
||||
{/if}
|
||||
{#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">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#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"
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
{/if}
|
||||
{#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"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,196 +1,231 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { fetchMediaKit } from "../lib/api";
|
||||
import type { MediaKit } from "../lib/types";
|
||||
import Card from "../components/Card.svelte";
|
||||
import Collabs from "../components/Collabs.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { fetchMediaKit } from "../lib/api";
|
||||
import type { MediaKit } from "../lib/types";
|
||||
import Card from "../components/Card.svelte";
|
||||
import Collabs from "../components/Collabs.svelte";
|
||||
|
||||
let data = $state<MediaKit | null>(null);
|
||||
let error = $state("");
|
||||
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";
|
||||
}
|
||||
});
|
||||
onMount(async () => {
|
||||
try {
|
||||
data = await fetchMediaKit();
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : "Something went wrong";
|
||||
}
|
||||
});
|
||||
|
||||
let content = $derived(data?.content ?? {});
|
||||
let platforms = $derived(data?.platforms ?? []);
|
||||
let twitch = $derived(data?.twitch);
|
||||
// let twitchLogin = $derived(twitch?.login ?? "");
|
||||
let content = $derived(data?.content ?? {});
|
||||
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 twitchLogin = $derived(twitch?.login ?? "");
|
||||
|
||||
type platformDecoType = {
|
||||
image: string;
|
||||
color?: string | null;
|
||||
};
|
||||
type platformDecoType = {
|
||||
image: string;
|
||||
color?: string | null;
|
||||
};
|
||||
|
||||
let platformImageMap: Record<string, platformDecoType> = {
|
||||
twitch: {
|
||||
image: "/images/logos/twitch.svg",
|
||||
color: "#8E60F5",
|
||||
},
|
||||
youtube: {
|
||||
image: "/images/logos/youtube.svg",
|
||||
color: "#FF0000",
|
||||
},
|
||||
instagram: {
|
||||
image: "/images/logos/instagram.svg",
|
||||
color: "#E1306C",
|
||||
},
|
||||
tiktok: {
|
||||
image: "/images/logos/tiktok.svg",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
};
|
||||
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();
|
||||
}
|
||||
let platformImageMap: Record<string, platformDecoType> = {
|
||||
twitch: {
|
||||
image: "/images/logos/twitch.svg",
|
||||
color: "#8E60F5",
|
||||
},
|
||||
youtube: {
|
||||
image: "/images/logos/youtube.svg",
|
||||
color: "#FF0000",
|
||||
},
|
||||
instagram: {
|
||||
image: "/images/logos/instagram.svg",
|
||||
color: "#E1306C",
|
||||
},
|
||||
tiktok: {
|
||||
image: "/images/logos/tiktok.svg",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
};
|
||||
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>
|
||||
<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>
|
||||
<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 max-w-6xl mx-auto pt-20 pb-10 gap-10">
|
||||
<div class="">
|
||||
<div class="px-5">
|
||||
<div class="flex justify-end items-start">
|
||||
{#if content.profile_image_url}
|
||||
<img
|
||||
class="shrink-0 rounded-xl object-cover shadow-cyan-300 shadow-lg"
|
||||
src={content.profile_image_url}
|
||||
alt={content.brand_name ?? "Profile image"}
|
||||
width="300"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-2 gap-4">
|
||||
<!-- Twitch -->
|
||||
<Card
|
||||
className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
|
||||
href={`https://twitch.tv/${twitch?.login}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color={platformImageMap["twitch"].color}
|
||||
>
|
||||
<div
|
||||
class="flex flex-row justify-start items-start gap-3"
|
||||
>
|
||||
<img
|
||||
src={platformImageMap["twitch"].image}
|
||||
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>
|
||||
</Card>
|
||||
{#each platforms as platform (platform.name)}
|
||||
<Card
|
||||
className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
|
||||
href={platform.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color={platformImageMap[platform.name]?.color}
|
||||
>
|
||||
<div
|
||||
class="flex flex-row justify-start items-start gap-3"
|
||||
>
|
||||
<img
|
||||
src={platformImageMap[platform.name].image}
|
||||
alt="Twitch"
|
||||
width="48"
|
||||
/>
|
||||
<div>
|
||||
<span
|
||||
class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
|
||||
>
|
||||
{platform.name}
|
||||
</span>
|
||||
<br />
|
||||
<span class="text-base"
|
||||
>{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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2nd column -->
|
||||
<div class="flex flex-col justify-start items-start gap-5">
|
||||
<div
|
||||
class="border-cyan-300 border-2 rounded-lg translate-y-2 w-fit"
|
||||
>
|
||||
<div
|
||||
class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl -translate-y-2"
|
||||
>
|
||||
Hi there, I'm <br />
|
||||
<b>RythonDev</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div class="text-white font-bold text-4xl mb-2">About Me</div>
|
||||
<p>
|
||||
{content.about ?? ""}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-bold text-4xl mb-2">
|
||||
Collaborations
|
||||
</div>
|
||||
<Collabs />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main class="grid grid-cols-2 max-w-6xl mx-auto pt-20 pb-10 gap-10">
|
||||
<div class="">
|
||||
<div class="px-5">
|
||||
<div class="flex justify-end items-start">
|
||||
{#if content.profile_image_url}
|
||||
<img
|
||||
class="shrink-0 rounded-xl object-cover shadow-cyan-300 shadow-lg"
|
||||
src={content.profile_image_url}
|
||||
alt={content.brand_name ?? "Profile image"}
|
||||
width="300"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-2 gap-4">
|
||||
<!-- Twitch -->
|
||||
<Card
|
||||
className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
|
||||
href={`https://twitch.tv/${twitch?.login}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color={platformImageMap["twitch"].color}
|
||||
>
|
||||
<div
|
||||
class="flex flex-row justify-start items-start gap-3"
|
||||
>
|
||||
<img
|
||||
src={platformImageMap["twitch"].image}
|
||||
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>
|
||||
</Card>
|
||||
{#each platforms as platform (platform.name)}
|
||||
<Card
|
||||
className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
|
||||
href={platform.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
color={platformImageMap[platform.name]?.color}
|
||||
>
|
||||
<div
|
||||
class="flex flex-row justify-start items-start gap-3"
|
||||
>
|
||||
<img
|
||||
src={platformImageMap[platform.name].image}
|
||||
alt="Twitch"
|
||||
width="48"
|
||||
/>
|
||||
<div>
|
||||
<span
|
||||
class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
|
||||
>
|
||||
{platform.name}
|
||||
</span>
|
||||
<br />
|
||||
<span class="text-base"
|
||||
>{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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2nd column -->
|
||||
<div class="flex flex-col justify-start items-start gap-5">
|
||||
<div
|
||||
class="border-cyan-300 border-2 rounded-lg translate-y-2 w-fit"
|
||||
>
|
||||
<div
|
||||
class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl -translate-y-2"
|
||||
>
|
||||
Hi there, I'm <br />
|
||||
<b>RythonDev</b>
|
||||
</div>
|
||||
{#if content.tagline}
|
||||
<p class="text-xl px-5 text-cyan-300 pb-2">
|
||||
{content.tagline}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div class="text-white font-bold text-4xl mb-2">About Me</div>
|
||||
<p>
|
||||
{content.about ?? ""}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-bold text-4xl mb-2">
|
||||
Collaborations
|
||||
</div>
|
||||
<Collabs />
|
||||
</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>
|
||||
</main>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,117 +1,147 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { fetchMediaKit } from '../lib/api'
|
||||
import type { MediaKit } from '../lib/types'
|
||||
import { onMount } from "svelte";
|
||||
import { fetchMediaKit } from "../lib/api";
|
||||
import type { MediaKit } from "../lib/types";
|
||||
|
||||
let data = $state<MediaKit | null>(null)
|
||||
let error = $state('')
|
||||
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'
|
||||
}
|
||||
})
|
||||
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 ?? '')
|
||||
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()
|
||||
}
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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">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">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>
|
||||
<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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue