@aureuma/svelta 0.0.1 → 0.1.0

package/packages/blogkit/package.json

@@ -1,66 +0,0 @@
-{
-  "name": "@aureuma/blogkit",
-  "version": "0.1.0",
-  "private": false,
-  "type": "module",
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./server": {
-      "types": "./dist/server/index.d.ts",
-      "default": "./dist/server/index.js"
-    },
-    "./theme": {
-      "types": "./dist/theme/index.d.ts",
-      "svelte": "./dist/theme/index.js",
-      "default": "./dist/theme/index.js"
-    }
-  },
-  "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
-  "svelte": "./dist/index.js",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/Aureuma/svelta.git",
-    "directory": "packages/blogkit"
-  },
-  "bugs": {
-    "url": "https://github.com/Aureuma/svelta/issues"
-  },
-  "homepage": "https://github.com/Aureuma/svelta/tree/main/packages/blogkit#readme",
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "blog",
-    "markdown",
-    "mdsvex",
-    "shiki",
-    "tailwind"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "svelte-package --tsconfig ./tsconfig.json",
-    "prepack": "npm run build"
-  },
-  "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0"
-  },
-  "dependencies": {
-    "esm-env": "^1.2.2",
-    "gray-matter": "^4.0.3",
-    "reading-time": "^1.5.0",
-    "zod": "^4.3.6"
-  }
-}

package/packages/blogkit/src/lib/components/blog/Avatar.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	export let src: string;
-	export let alt: string;
-	export let size: number = 48;
-</script>
-
-<img
-	src={src}
-	alt={alt}
-	width={size}
-	height={size}
-	class="shrink-0 rounded-full border border-border-soft/10 bg-background-soft object-cover"
-	style="width: {size}px; height: {size}px;"
-	loading="lazy"
-/>

package/packages/blogkit/src/lib/components/blog/BackLink.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	export let href: string = '/blog';
-	export let label: string = 'Back to blog';
-</script>
-
-<a
-	href={href}
-	class="inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-sub transition hover:text-text-main"
->
-	<svg
-		class="size-4"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		aria-hidden="true"
-	>
-		<path d="M15 18l-6-6 6-6" />
-	</svg>
-	<span>{label}</span>
-</a>

package/packages/blogkit/src/lib/components/blog/BlogCard.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import type { BlogPost } from '../../types/blog';
-	import Avatar from './Avatar.svelte';
-
-	export let post: BlogPost;
-	export let variant: 'default' | 'suggestion' = 'default';
-	$: thumbHeight = variant === 'suggestion' ? 'h-[190px]' : 'h-[280px]';
-</script>
-
-<a href={`/blog/${post.slug}`} class="group block" data-testid="blog-card">
-	<div class="relative overflow-hidden rounded-2xl border border-border-soft/10 bg-background-soft {thumbHeight}">
-		<img
-			src={post.cover}
-			alt={post.title}
-			class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
-			loading="lazy"
-		/>
-	</div>
-
-	<div class="mt-4">
-		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
-		<h3
-			class="mt-1 text-xl font-medium leading-[30px] tracking-tight underline-offset-[6px] decoration-border-soft/30 group-hover:underline"
-		>
-			{post.title}
-		</h3>
-		<p class="mt-2 text-sm leading-6 text-text-sub">{post.excerpt}</p>
-
-		<div class="mt-4 flex items-center gap-3">
-			<Avatar src={post.author.avatar} alt={post.author.name} size={24} />
-			<div class="leading-tight">
-				<div class="text-sm font-medium tracking-tight text-text-main">{post.author.name}</div>
-				<div class="text-xs text-text-muted">{post.author.title}</div>
-			</div>
-		</div>
-	</div>
-</a>

package/packages/blogkit/src/lib/components/blog/BlogHeroCard.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { BlogPost } from '../../types/blog';
-
-	export let post: BlogPost;
-</script>
-
-<a
-	href={`/blog/${post.slug}`}
-	data-testid="blog-hero"
-	class="group relative my-12 block h-[480px] overflow-hidden rounded-3xl shadow-drop-md"
->
-	<img
-		src={post.cover}
-		alt={post.title}
-		class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
-		loading="eager"
-	/>
-
-	<div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/25 to-black/0"></div>
-
-	<div class="relative flex h-full flex-col justify-end p-8">
-		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
-		<h2
-			class="mt-2 max-w-3xl text-3xl font-semibold leading-tight tracking-[-0.8px] text-white md:text-4xl"
-		>
-			{post.title}
-		</h2>
-		<p class="mt-3 max-w-2xl text-base leading-6 text-white/80">{post.excerpt}</p>
-
-		<div class="mt-6 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-white/70">
-			<span>{post.dateShort}</span>
-			<span class="text-white/35" aria-hidden="true">•</span>
-			<span>{post.readingTimeShort}</span>
-		</div>
-	</div>
-</a>

package/packages/blogkit/src/lib/components/blog/Container.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	export let size: '4xl' | '5xl' = '5xl';
-	$: max = size === '4xl' ? 'max-w-4xl' : 'max-w-5xl';
-</script>
-
-<div class="mx-auto w-full {max} px-6">
-	<slot />
-</div>

package/packages/blogkit/src/lib/components/blog/ImageLightbox.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { BROWSER } from 'esm-env';
-	import { onDestroy, onMount, tick } from 'svelte';
-
-	export let image: { src: string; alt: string } | null;
-	export let onClose: () => void;
-
-	let dialogEl: HTMLDivElement | null = null;
-
-	$: if (BROWSER) {
-		// Prevent background scroll while open.
-		document.body.style.overflow = image ? 'hidden' : '';
-	}
-
-	$: if (BROWSER && image) {
-		// Ensure the dialog is focusable for Escape-to-close and accessibility.
-		void (async () => {
-			await tick();
-			dialogEl?.focus();
-		})();
-	}
-
-	onMount(() => {
-		if (!BROWSER) return;
-		const onKeyDown = (e: KeyboardEvent) => {
-			if (e.key === 'Escape') onClose();
-		};
-		window.addEventListener('keydown', onKeyDown);
-		return () => window.removeEventListener('keydown', onKeyDown);
-	});
-
-	onDestroy(() => {
-		if (!BROWSER) return;
-		document.body.style.overflow = '';
-	});
-</script>
-
-{#if image}
-	<div
-		bind:this={dialogEl}
-		class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-6"
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-	>
-		<button
-			type="button"
-			class="absolute inset-0 cursor-zoom-out"
-			on:click={onClose}
-			aria-label="Close image"
-		></button>
-		<img
-			src={image.src}
-			alt={image.alt}
-			class="relative max-h-[90vh] max-w-[92vw] rounded-2xl border border-white/10 bg-black/10 object-contain"
-		/>
-	</div>
-{/if}

package/packages/blogkit/src/lib/components/blog/MorePosts.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import type { BlogPost } from '../../types/blog';
-	import BlogCard from './BlogCard.svelte';
-
-	export let posts: BlogPost[];
-</script>
-
-<section class="mt-16" data-testid="blog-more-posts">
-	<h2 class="text-lg font-medium tracking-tight text-text-main">More blog posts to read</h2>
-	<div class="mt-8 grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
-		{#each posts as post (post.slug)}
-			<BlogCard post={post} variant="suggestion" />
-		{/each}
-	</div>
-</section>

package/packages/blogkit/src/lib/components/blog/ShareButtons.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-	import { BROWSER } from 'esm-env';
-
-	export let title: string;
-	export let url: string;
-	export let label: string = 'Share this article';
-	export let testId: string | undefined = undefined;
-
-	let copied = false;
-
-	function openShare(href: string) {
-		if (!BROWSER) return;
-		window.open(href, '_blank', 'noopener,noreferrer');
-	}
-
-	async function copyLink() {
-		if (!BROWSER) return;
-		try {
-			await navigator.clipboard.writeText(url);
-			copied = true;
-			window.setTimeout(() => (copied = false), 1200);
-		} catch {
-			// Fallback for older browsers.
-			const ta = document.createElement('textarea');
-			ta.value = url;
-			ta.style.position = 'fixed';
-			ta.style.opacity = '0';
-			document.body.appendChild(ta);
-			ta.select();
-			document.execCommand('copy');
-			document.body.removeChild(ta);
-			copied = true;
-			window.setTimeout(() => (copied = false), 1200);
-		}
-	}
-
-	$: encodedUrl = encodeURIComponent(url);
-	$: encodedTitle = encodeURIComponent(title);
-</script>
-
-<div data-testid={testId}>
-	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{label}</p>
-	<div class="mt-3 flex flex-wrap gap-2">
-		<button
-			type="button"
-			class="inline-flex size-8 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"
-			on:click={() =>
-				openShare(`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`)}
-			aria-label="Share on X"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 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"
-			on:click={() =>
-				openShare(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`)}
-			aria-label="Share on LinkedIn"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 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"
-			on:click={() => openShare(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)}
-			aria-label="Share on Facebook"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 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"
-			on:click={copyLink}
-			aria-label="Copy link"
-		>
-			<svg
-				viewBox="0 0 24 24"
-				class="size-4"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1" />
-				<path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1" />
-			</svg>
-		</button>
-	</div>
-
-	{#if copied}
-		<p class="mt-2 text-xs font-mono uppercase tracking-[0.6px] text-brand">Copied</p>
-	{/if}
-</div>

package/packages/blogkit/src/lib/components/blog/SummaryCard.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	export let summary: string;
-</script>
-
-<section
-	class="rounded-2xl border border-border-soft/10 bg-background-soft p-4"
-	data-testid="blog-summary"
->
-	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">AI SUMMARY</p>
-	<p class="mt-2 text-sm leading-6 text-text-sub">{summary}</p>
-</section>

package/packages/blogkit/src/lib/components/blog/TagTabs.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import type { BlogCategory } from '../../types/blog';
-
-	export let categories: BlogCategory[];
-	export let selected: string; // "" means all
-	export let onSelect: (slug: string) => void;
-	$: items = [{ label: 'All articles', slug: '' }, ...categories];
-</script>
-
-<div class="relative" data-testid="blog-tags">
-	<div
-		class="fade-mask-x no-scrollbar flex gap-2 overflow-x-auto py-2 md:flex-wrap md:overflow-visible md:[-webkit-mask-image:none] md:[mask-image:none]"
-		role="tablist"
-		aria-label="Blog categories"
-	>
-		{#each items as item (item.slug)}
-			<button
-				type="button"
-				role="tab"
-				aria-selected={selected === item.slug}
-				class="h-[31px] whitespace-nowrap rounded-full border px-3 text-xs font-mono uppercase tracking-[0.6px] transition
-					hover:bg-background-main/60
-					{selected === item.slug
-						? 'border-border-soft/15 bg-background-main text-text-main'
-						: 'border-border-soft/10 bg-background-soft text-text-sub'}"
-				on:click={() => onSelect(item.slug)}
-			>
-				{item.label}
-			</button>
-		{/each}
-	</div>
-</div>

package/packages/blogkit/src/lib/index.ts

@@ -1,15 +0,0 @@
-// Components
-export { default as Avatar } from './components/blog/Avatar.svelte';
-export { default as BackLink } from './components/blog/BackLink.svelte';
-export { default as BlogCard } from './components/blog/BlogCard.svelte';
-export { default as BlogHeroCard } from './components/blog/BlogHeroCard.svelte';
-export { default as Container } from './components/blog/Container.svelte';
-export { default as ImageLightbox } from './components/blog/ImageLightbox.svelte';
-export { default as MorePosts } from './components/blog/MorePosts.svelte';
-export { default as ShareButtons } from './components/blog/ShareButtons.svelte';
-export { default as SummaryCard } from './components/blog/SummaryCard.svelte';
-export { default as TagTabs } from './components/blog/TagTabs.svelte';
-
-// Types
-export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from './types/blog';
-