@aureuma/svelta 0.0.1 → 0.1.1

package/src/lib/content/authors.ts

@@ -1,28 +0,0 @@
-import type { BlogAuthor } from '$lib/types/blog';
-
-export const AUTHORS: Record<string, BlogAuthor> = {
-	shawn: {
-		id: 'shawn',
-		name: 'Shawn',
-		title: 'Builder at svelta',
-		avatar: '/blog/authors/shawn.svg'
-	},
-	alex: {
-		id: 'alex',
-		name: 'Alex Kim',
-		title: 'Product Engineer',
-		avatar: '/blog/authors/alex.svg'
-	},
-	maria: {
-		id: 'maria',
-		name: 'Maria Santos',
-		title: 'Design Lead',
-		avatar: '/blog/authors/maria.svg'
-	}
-};
-
-export function getAuthor(id: string): BlogAuthor {
-	const author = AUTHORS[id];
-	if (!author) throw new Error(`Unknown author id: ${id}`);
-	return author;
-}

package/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

package/src/lib/server/blog.ts

@@ -1,22 +0,0 @@
-import { createBlog } from '@aureuma/blogkit/server';
-import { getAuthor } from '$lib/content/authors';
-import type { BlogPostFull } from '$lib/types/blog';
-
-type CompiledModule = { default: BlogPostFull['component'] };
-
-const compiledModules = import.meta.glob('/src/content/blog/*.md') as Record<
-	string,
-	() => Promise<CompiledModule>
->;
-const rawModules = import.meta.glob('/src/content/blog/*.md', {
-	query: '?raw',
-	import: 'default'
-}) as Record<string, () => Promise<string>>;
-
-export const blog = createBlog({
-	compiledModules,
-	rawModules,
-	getAuthor
-});
-
-export const { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero } = blog;

package/src/lib/server/rss.ts

@@ -1,58 +0,0 @@
-import type { BlogPost } from '$lib/types/blog';
-
-function escapeXml(input: string) {
-	return input
-		.replace(/&/g, '&')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;')
-		.replace(/'/g, '&apos;');
-}
-
-function toPubDate(iso: string) {
-	const d = /^\d{4}-\d{2}-\d{2}$/.test(iso) ? new Date(`${iso}T00:00:00Z`) : new Date(iso);
-	return d.toUTCString();
-}
-
-export function buildRss(opts: {
-	baseUrl: URL;
-	posts: BlogPost[];
-	siteTitle: string;
-	description: string;
-	maxItems?: number;
-}) {
-	const siteLink = new URL('/blog', opts.baseUrl).toString();
-	const selfLink = new URL('/feed.xml', opts.baseUrl).toString();
-	const maxItems = Math.max(1, Math.min(200, opts.maxItems ?? 50));
-
-	const items = opts.posts
-		.slice(0, maxItems)
-		.map((post) => {
-			const link = new URL(`/blog/${post.slug}`, opts.baseUrl).toString();
-			return [
-				'<item>',
-				`<title>${escapeXml(post.title)}</title>`,
-				`<description>${escapeXml(post.excerpt)}</description>`,
-				`<link>${escapeXml(link)}</link>`,
-				`<guid isPermaLink="true">${escapeXml(link)}</guid>`,
-				`<pubDate>${escapeXml(toPubDate(post.date))}</pubDate>`,
-				`<category>${escapeXml(post.category.label)}</category>`,
-				`<author>${escapeXml(post.author.name)}</author>`,
-				'</item>'
-			].join('');
-		})
-		.join('');
-
-	return `<?xml version="1.0" encoding="UTF-8"?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>${escapeXml(opts.siteTitle)}</title>
-    <link>${escapeXml(siteLink)}</link>
-    <atom:link href="${escapeXml(selfLink)}" rel="self" type="application/rss+xml" />
-    <description>${escapeXml(opts.description)}</description>
-    <language>en-us</language>
-    ${items}
-  </channel>
-</rss>`;
-}
-

package/src/lib/server/seo.ts

@@ -1,31 +0,0 @@
-import type { BlogPost } from '$lib/types/blog';
-
-export type PostSeo = {
-	title: string;
-	description: string;
-	canonicalUrl: string;
-	og: {
-		title: string;
-		description: string;
-		type: 'article';
-		url: string;
-	};
-};
-
-export function buildPostSeo(post: BlogPost, canonicalUrl: string): PostSeo {
-	const title = `${post.title} | svelta Blog`;
-	const description = post.excerpt;
-
-	return {
-		title,
-		description,
-		canonicalUrl,
-		og: {
-			title: post.title,
-			description,
-			type: 'article',
-			url: canonicalUrl
-		}
-	};
-}
-

package/src/lib/stores/theme.ts

@@ -1,10 +0,0 @@
-import { createThemeController, type ThemeController, type ThemeMode } from '@aureuma/blogkit/theme';
-
-// Keep the storage key stable for this app (also used in `src/app.html`).
-export const theme: ThemeController = createThemeController({ storageKey: 'svelta-theme' });
-
-export const themeMode = theme.themeMode;
-export const initTheme = theme.initTheme;
-export const setThemeMode = theme.setThemeMode;
-
-export type { ThemeMode };

package/src/lib/types/blog.ts

@@ -1 +0,0 @@
-export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '@aureuma/blogkit';

package/src/routes/+layout.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
-	import '@fontsource/inter/400.css';
-	import '@fontsource/inter/500.css';
-	import '@fontsource/inter/600.css';
-	import '@fontsource/geist-mono/400.css';
-	import '@fontsource/geist-mono/500.css';
-	import '../app.css';
-	import SiteFooter from '$lib/components/site/SiteFooter.svelte';
-	import SiteHeader from '$lib/components/site/SiteHeader.svelte';
-	import { initTheme } from '$lib/stores/theme';
-	import { onMount } from 'svelte';
-
-	let { children } = $props();
-
-	onMount(() => {
-		const cleanup = initTheme();
-		return cleanup;
-	});
-</script>
-
-<svelte:head>
-	<link rel="icon" href={favicon} />
-	<link rel="alternate" type="application/rss+xml" title="svelta Blog" href="/feed.xml" />
-</svelte:head>
-
-<div class="min-h-dvh bg-background-main text-text-main">
-	<SiteHeader />
-	<main class="flex-1">{@render children()}</main>
-	<SiteFooter />
-</div>

package/src/routes/+page.svelte

@@ -1,44 +0,0 @@
-<section class="mx-auto w-full max-w-5xl px-6 py-20">
-	<div class="max-w-2xl">
-		<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">svelta</p>
-		<h1 class="mt-3 text-4xl font-semibold leading-[44px] tracking-[-0.8px]">
-			A Mintlify-inspired blog system, built in SvelteKit.
-		</h1>
-		<p class="mt-4 text-base leading-6 text-text-sub">
-			Markdown posts, Shiki code highlighting, tag filtering, infinite scroll, author profiles, share
-			widgets, AI summary cards, and an RSS feed.
-		</p>
-
-		<div class="mt-8 flex items-center gap-3">
-			<a
-				href="/blog"
-				class="inline-flex items-center justify-center rounded-full bg-text-main px-5 py-2 text-sm font-medium text-text-invert transition hover:opacity-90"
-			>
-				Go to Blog
-			</a>
-			<a
-				href="/feed.xml"
-				class="inline-flex items-center justify-center rounded-full border border-border-soft/15 bg-background-soft px-5 py-2 text-sm font-medium text-text-main transition hover:bg-background-main/60"
-			>
-				RSS Feed
-			</a>
-		</div>
-	</div>
-
-	<div class="mt-16 grid grid-cols-1 gap-5 md:grid-cols-2">
-		<div class="rounded-3xl border border-border-soft/10 bg-background-soft p-8">
-			<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Design</p>
-			<p class="mt-2 text-lg font-medium tracking-tight">Proportions first</p>
-			<p class="mt-2 text-sm leading-6 text-text-sub">
-				Containers, spacing, and typography scale tuned to match the Mintlify blog’s feel.
-			</p>
-		</div>
-		<div class="rounded-3xl border border-border-soft/10 bg-background-soft p-8">
-			<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Engineering</p>
-			<p class="mt-2 text-lg font-medium tracking-tight">Fast content pipeline</p>
-			<p class="mt-2 text-sm leading-6 text-text-sub">
-				mdsvex + Shiki + reading-time on the server, with incremental loading on the client.
-			</p>
-		</div>
-	</div>
-</section>

package/src/routes/blog/+page.server.ts

@@ -1,28 +0,0 @@
-import { getAllPosts, getCategories, pickHero } from '$lib/server/blog';
-import type { PageServerLoad } from './$types';
-
-const PAGE_SIZE = 8;
-
-export const load: PageServerLoad = async ({ url }) => {
-	const [all, categories] = await Promise.all([getAllPosts(), getCategories()]);
-	const hero = await pickHero(all);
-
-	const selected = url.searchParams.get('category') ?? '';
-	const validSelected = selected && categories.some((c) => c.slug === selected) ? selected : '';
-
-	const rest = all.filter((p) => p.slug !== hero.slug);
-	const filtered = validSelected ? rest.filter((p) => p.category.slug === validSelected) : rest;
-
-	const initialPosts = filtered.slice(0, PAGE_SIZE);
-
-	return {
-		hero,
-		categories,
-		selectedCategory: validSelected,
-		initialPosts,
-		pageSize: PAGE_SIZE,
-		hasMore: filtered.length > initialPosts.length,
-		total: filtered.length
-	};
-};
-

package/src/routes/blog/+page.svelte

@@ -1,122 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { BlogCard, BlogHeroCard, Container, TagTabs } from '@aureuma/blogkit';
-	import type { BlogPost } from '$lib/types/blog';
-	import { onMount } from 'svelte';
-
-	let { data } = $props<{
-		data: {
-			hero: BlogPost;
-			categories: { label: string; slug: string }[];
-			selectedCategory: string;
-			initialPosts: BlogPost[];
-			pageSize: number;
-			hasMore: boolean;
-			total: number;
-		};
-	}>();
-
-	let posts = $state<BlogPost[]>([]);
-	let offset = $state(0);
-	let hasMore = $state(false);
-	let loading = $state(false);
-	let sentinel: HTMLDivElement | null = $state(null);
-
-	$effect(() => {
-		posts = data.initialPosts;
-		offset = data.initialPosts.length;
-		hasMore = data.hasMore;
-		loading = false;
-	});
-
-	function selectCategory(slug: string) {
-		const u = new URL($page.url);
-		if (!slug) u.searchParams.delete('category');
-		else u.searchParams.set('category', slug);
-		goto(`${u.pathname}${u.searchParams.toString() ? `?${u.searchParams.toString()}` : ''}`);
-	}
-
-	async function loadMore() {
-		if (!hasMore || loading) return;
-		loading = true;
-
-		const u = new URL('/blog/posts.json', $page.url.origin);
-		u.searchParams.set('offset', String(offset));
-		u.searchParams.set('limit', String(data.pageSize));
-		if (data.selectedCategory) u.searchParams.set('category', data.selectedCategory);
-
-		const res = await fetch(u);
-		if (!res.ok) {
-			loading = false;
-			return;
-		}
-
-		const payload = (await res.json()) as { posts: BlogPost[]; hasMore: boolean };
-		posts = [...posts, ...payload.posts];
-		offset += payload.posts.length;
-		hasMore = payload.hasMore;
-		loading = false;
-	}
-
-	onMount(() => {
-		if (!sentinel) return;
-		const io = new IntersectionObserver(
-			(entries) => {
-				if (entries.some((e) => e.isIntersecting)) loadMore();
-			},
-			{ rootMargin: '800px 0px' }
-		);
-		io.observe(sentinel);
-		return () => io.disconnect();
-	});
-</script>
-
-<Container>
-	<BlogHeroCard post={data.hero} />
-
-	<div class="flex items-center justify-between gap-4">
-		<div class="min-w-0 flex-1">
-			<TagTabs
-				categories={data.categories}
-				selected={data.selectedCategory}
-				onSelect={selectCategory}
-			/>
-		</div>
-
-		<a
-			href="/feed.xml"
-			class="inline-flex size-9 shrink-0 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			aria-label="RSS feed"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M6.18 17.82a2.18 2.18 0 1 1 0 4.36 2.18 2.18 0 0 1 0-4.36ZM2 8.5v3.1c5.7 0 10.4 4.7 10.4 10.4h3.1C15.5 14.6 9.4 8.5 2 8.5Zm0-6v3.1c9.1 0 16.4 7.3 16.4 16.4H22C22 11.2 12.8 2 2 2Z"
-				/>
-			</svg>
-		</a>
-	</div>
-
-	<section class="pb-32 pt-8">
-		<div class="grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
-			{#if posts.length === 0}
-				<p class="text-sm leading-6 text-text-sub">No posts in this category yet.</p>
-			{:else}
-				{#each posts as post (post.slug)}
-					<BlogCard post={post} />
-				{/each}
-			{/if}
-		</div>
-
-		<div class="mt-16 flex items-center justify-center">
-			<div bind:this={sentinel} class="h-10 w-full" aria-hidden="true"></div>
-		</div>
-
-		{#if loading}
-			<p class="mt-6 text-center text-xs font-mono uppercase tracking-[0.6px] text-text-muted">
-				Loading…
-			</p>
-		{/if}
-	</section>
-</Container>

package/src/routes/blog/[slug]/+page.server.ts

@@ -1,39 +0,0 @@
-import { getAllPosts, getPostBySlug } from '$lib/server/blog';
-import { buildPostSeo } from '$lib/server/seo';
-import { error } from '@sveltejs/kit';
-import { render } from 'svelte/server';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params, url }) => {
-	const found = await getPostBySlug(params.slug);
-	if (!found) throw error(404, 'Post not found');
-
-	const { component, ...post } = found;
-	const rendered = render(component);
-
-	const all = await getAllPosts();
-	const candidates = all.filter((p) => p.slug !== post.slug);
-
-	const sameCategory = candidates.filter((p) => p.category.slug === post.category.slug);
-	const morePosts: typeof candidates = [];
-
-	for (const p of sameCategory) {
-		if (morePosts.length >= 2) break;
-		morePosts.push(p);
-	}
-	for (const p of candidates) {
-		if (morePosts.length >= 2) break;
-		if (morePosts.some((x) => x.slug === p.slug)) continue;
-		morePosts.push(p);
-	}
-
-	const canonicalUrl = new URL(`/blog/${post.slug}`, url).toString();
-
-	return {
-		post,
-		contentHtml: rendered.html,
-		morePosts,
-		canonicalUrl,
-		seo: buildPostSeo(post, canonicalUrl)
-	};
-};

package/src/routes/blog/[slug]/+page.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { Avatar, BackLink, Container, ImageLightbox, MorePosts, ShareButtons, SummaryCard } from '@aureuma/blogkit';
-	import type { BlogPost } from '$lib/types/blog';
-
-	let { data } = $props<{
-		data: {
-			post: BlogPost;
-			contentHtml: string;
-			morePosts: BlogPost[];
-			canonicalUrl: string;
-			seo: {
-				title: string;
-				description: string;
-				canonicalUrl: string;
-				og: { title: string; description: string; type: 'article'; url: string };
-			};
-		};
-	}>();
-
-	let lightbox = $state<{ src: string; alt: string } | null>(null);
-	let articleEl = $state<HTMLElement | null>(null);
-
-	$effect(() => {
-		// Re-bind image zoom handlers when content changes (e.g. client-side navigation).
-		const _ = data.contentHtml;
-		if (!articleEl) return;
-
-		const imgs = Array.from(articleEl.querySelectorAll('img'));
-		const onClick = (e: Event) => {
-			const img = e.currentTarget as HTMLImageElement;
-			lightbox = { src: img.currentSrc || img.src, alt: img.alt || data.post.title };
-		};
-
-		for (const img of imgs) img.addEventListener('click', onClick);
-		return () => {
-			for (const img of imgs) img.removeEventListener('click', onClick);
-		};
-	});
-</script>
-
-<svelte:head>
-	<title>{data.seo.title}</title>
-	<meta name="description" content={data.seo.description} />
-	<link rel="canonical" href={data.seo.canonicalUrl} />
-	<meta property="og:title" content={data.seo.og.title} />
-	<meta property="og:description" content={data.seo.og.description} />
-	<meta property="og:type" content={data.seo.og.type} />
-	<meta property="og:url" content={data.seo.og.url} />
-</svelte:head>
-
-<Container size="4xl">
-	<div class="mt-[4.5rem] pb-[7.5rem]">
-		<BackLink />
-
-		<header class="mt-8 border-b border-border-soft/10 pb-8">
-			<div class="flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px]">
-				<span class="text-brand">{data.post.category.label}</span>
-				<span class="text-text-muted" aria-hidden="true">/</span>
-				<span class="text-text-muted">{data.post.readingTimeLong}</span>
-			</div>
-
-			<h1 class="mt-4 text-4xl font-semibold leading-[44px] tracking-[-0.8px] text-text-main">
-				{data.post.title}
-			</h1>
-
-			<p class="mt-4 text-xs font-mono uppercase tracking-[0.6px] text-text-muted">
-				{data.post.dateLong}
-			</p>
-		</header>
-
-		<div class="mt-10 grid grid-cols-1 gap-x-16 md:grid-cols-[minmax(0,628px)_160px]">
-			<div class="min-w-0">
-				<div class="overflow-hidden rounded-3xl border border-border-soft/10 bg-background-soft">
-					<img src={data.post.cover} alt={data.post.title} class="h-[360px] w-full object-cover" />
-				</div>
-
-				{#if data.post.summaryAI}
-					<div class="mt-6">
-						<SummaryCard summary={data.post.summaryAI} />
-					</div>
-				{/if}
-
-				<div class="mt-8 flex flex-col gap-6 md:hidden">
-					<div class="flex items-center gap-3">
-						<Avatar src={data.post.author.avatar} alt={data.post.author.name} size={48} />
-						<div class="leading-tight">
-							<div class="text-sm font-medium tracking-tight text-text-main">
-								{data.post.author.name}
-							</div>
-							<div class="text-xs text-text-muted">{data.post.author.title}</div>
-						</div>
-					</div>
-					<ShareButtons title={data.post.title} url={data.canonicalUrl} testId="blog-share-mobile" />
-				</div>
-
-				<article bind:this={articleEl} class="blog-prose prose mt-10">
-					{@html data.contentHtml}
-				</article>
-
-				<MorePosts posts={data.morePosts} />
-			</div>
-
-			<aside class="sticky top-20 hidden self-start md:flex md:flex-col md:gap-8">
-				<div class="flex items-center gap-3">
-					<Avatar src={data.post.author.avatar} alt={data.post.author.name} size={48} />
-					<div class="leading-tight">
-						<div class="text-sm font-medium tracking-tight text-text-main">{data.post.author.name}</div>
-						<div class="text-xs text-text-muted">{data.post.author.title}</div>
-					</div>
-				</div>
-
-				<ShareButtons title={data.post.title} url={data.canonicalUrl} testId="blog-share-desktop" />
-			</aside>
-		</div>
-	</div>
-</Container>
-
-<ImageLightbox image={lightbox} onClose={() => (lightbox = null)} />

package/src/routes/blog/posts.json/+server.ts

@@ -1,32 +0,0 @@
-import { getAllPosts, getCategories, pickHero } from '$lib/server/blog';
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-
-const DEFAULT_LIMIT = 8;
-const MAX_LIMIT = 24;
-
-export const GET: RequestHandler = async ({ url }) => {
-	const offset = Math.max(0, Number.parseInt(url.searchParams.get('offset') ?? '0', 10) || 0);
-	const limitRaw =
-		Number.parseInt(url.searchParams.get('limit') ?? String(DEFAULT_LIMIT), 10) || DEFAULT_LIMIT;
-	const limit = Math.min(MAX_LIMIT, Math.max(1, limitRaw));
-
-	const [all, categories] = await Promise.all([getAllPosts(), getCategories()]);
-	const hero = await pickHero(all);
-
-	const requestedCategory = url.searchParams.get('category') ?? '';
-	const category =
-		requestedCategory && categories.some((c) => c.slug === requestedCategory)
-			? requestedCategory
-			: '';
-
-	const rest = all.filter((p) => p.slug !== hero.slug);
-	const filtered = category ? rest.filter((p) => p.category.slug === category) : rest;
-	const posts = filtered.slice(offset, offset + limit);
-
-	return json({
-		posts,
-		hasMore: filtered.length > offset + posts.length
-	});
-};
-

package/src/routes/feed.xml/+server.ts

@@ -1,21 +0,0 @@
-import { getAllPosts } from '$lib/server/blog';
-import { buildRss } from '$lib/server/rss';
-import type { RequestHandler } from './$types';
-
-export const GET: RequestHandler = async ({ url }) => {
-	const posts = await getAllPosts();
-
-	const rss = buildRss({
-		baseUrl: url,
-		posts,
-		siteTitle: 'svelta Blog',
-		description: 'Engineering, design, and product notes from svelta.'
-	});
-
-	return new Response(rss, {
-		headers: {
-			'content-type': 'application/rss+xml; charset=utf-8',
-			'cache-control': 'max-age=0, s-maxage=3600'
-		}
-	});
-};

package/static/blog/authors/alex.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#fb7185"/>
-      <stop offset="1" stop-color="#f59e0b"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="64" fill="url(#g)"/>
-  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.23)"/>
-  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.23)"/>
-  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">A</text>
-</svg>
-

package/static/blog/authors/maria.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#a78bfa"/>
-      <stop offset="1" stop-color="#22c55e"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="64" fill="url(#g)"/>
-  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.23)"/>
-  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.23)"/>
-  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">M</text>
-</svg>
-

package/static/blog/authors/shawn.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
-  <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#22c55e"/>
-      <stop offset="1" stop-color="#0ea5e9"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="64" fill="url(#g)"/>
-  <circle cx="64" cy="58" r="22" fill="rgba(255,255,255,0.25)"/>
-  <path d="M26 116c10-22 26-32 38-32s28 10 38 32" fill="rgba(255,255,255,0.25)"/>
-  <text x="64" y="76" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" fill="rgba(255,255,255,0.92)">S</text>
-</svg>
-