@aureuma/svelta 0.0.1 → 0.1.1

package/packages/blogkit/CHANGELOG.md

@@ -1,6 +0,0 @@
-# @aureuma/blogkit Changelog
-
-All notable changes to this package will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
-

package/packages/blogkit/README.md

@@ -1,93 +0,0 @@
-# @aureuma/blogkit
-
-A Mintlify-inspired blog UI + content pipeline helpers for SvelteKit + mdsvex.
-
-This repo keeps `svelta` as a demo app, and exposes the reusable parts as a local workspace package under `packages/blogkit`.
-
-## What you get
-
-- Blog UI components: hero card, post cards, tag tabs, share buttons, summary card, more-posts grid, image lightbox.
-- Server helpers: `createBlog()` to load Markdown posts (frontmatter, excerpt, reading-time, categories, hero).
-- Theme helper: `createThemeController()` and a simple theme switcher component.
-
-### Compatibility
-
-- Component source is compatible with Svelte 4 and Svelte 5 (no runes required).
-- If you already have an existing frontmatter schema, use `mapFrontmatter` to adapt it to BlogKit's expected fields.
-
-## Use In Another Repo
-
-### Install from npm
-
-```sh
-npm i @aureuma/blogkit
-```
-
-### Option A: mono-repo / workspaces (recommended)
-
-1. Add this repo as a submodule (or subtree) inside your project:
-
-```sh
-git submodule add git@github.com:Aureuma/svelta.git packages/svelta
-```
-
-2. Point your workspace config at the package:
-
-```json
-{
-  "workspaces": ["packages/*", "packages/svelta/packages/*"]
-}
-```
-
-3. Import and use:
-
-```ts
-import { BlogCard } from '@aureuma/blogkit';
-import { createBlog } from '@aureuma/blogkit/server';
-```
-
-### Option B: publish to npm
-
-1. Set `"private": false` in `packages/blogkit/package.json`.
-2. From `packages/blogkit`, run `npm publish`.
-
-## Integration Steps (SvelteKit)
-
-1. mdsvex: configure Markdown compilation (`.md`) and Shiki/anchors (see this repo's `svelte.config.js`).
-2. Content:
-   - posts: `src/content/blog/*.md` with YAML frontmatter
-   - assets: `static/blog/covers/*` and `static/blog/authors/*`
-3. Blog loader glue:
-
-```ts
-// src/lib/server/blog.ts
-import { createBlog } from '@aureuma/blogkit/server';
-import { getAuthor } from '$lib/content/authors';
-import type { BlogPostFull } from '@aureuma/blogkit';
-
-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, getPostBySlug, getCategories, pickHero } = blog;
-```
-
-4. Tailwind: ensure your `content` globs include the package so class names are not purged.
-   - If installed from npm: include `./node_modules/@aureuma/blogkit/dist/**/*`.
-
-5. Routes: copy the blog routes from this repo:
-   - `src/routes/blog/*`
-   - `src/routes/feed.xml/*`
-
-## Notes
-
-- `createBlog()` builds the index from raw Markdown only (fast), and imports the compiled mdsvex component only for individual post pages.
-- This package is intended for SvelteKit. UI uses Tailwind utility classes and expects your app to provide the CSS variables/tokens.

package/packages/blogkit/dist/server/blog.d.ts

@@ -1,39 +0,0 @@
-import type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '../types/blog';
-import { z } from 'zod';
-declare const frontmatterSchema: z.ZodObject<{
-    title: z.ZodString;
-    date: z.ZodString;
-    category: z.ZodString;
-    author: z.ZodString;
-    cover: z.ZodString;
-    excerpt: z.ZodOptional<z.ZodString>;
-    summaryAI: z.ZodOptional<z.ZodString>;
-    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
-    featured: z.ZodOptional<z.ZodBoolean>;
-    draft: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strip>;
-export type BlogFrontmatter = z.infer<typeof frontmatterSchema>;
-export type BlogFrontmatterAdapter = (args: {
-    data: unknown;
-    content: string;
-    slug: string;
-    path: string;
-}) => BlogFrontmatter;
-type CompiledModule = {
-    default: BlogPostFull['component'];
-};
-export type BlogCreateConfig = {
-    compiledModules: Record<string, () => Promise<CompiledModule>>;
-    rawModules: Record<string, () => Promise<string>>;
-    getAuthor: (id: string) => BlogAuthor;
-    categoryOrder?: string[];
-    mapFrontmatter?: BlogFrontmatterAdapter;
-};
-export declare function createBlog(config: BlogCreateConfig): {
-    getAllPosts: () => Promise<BlogPost[]>;
-    getAllPostsFull: () => Promise<BlogPostFull[]>;
-    getPostBySlug: (slug: string) => Promise<BlogPostFull | null>;
-    getCategories: () => Promise<BlogCategory[]>;
-    pickHero: (posts?: BlogPost[]) => Promise<BlogPost>;
-};
-export {};

package/packages/blogkit/dist/server/blog.js

@@ -1,222 +0,0 @@
-import { DEV } from 'esm-env';
-import matter from 'gray-matter';
-import readingTime from 'reading-time';
-import { z } from 'zod';
-const frontmatterSchema = z.object({
-    title: z.string(),
-    date: z.string(),
-    category: z.string(),
-    author: z.string(),
-    cover: z.string(),
-    excerpt: z.string().optional(),
-    summaryAI: z.string().optional(),
-    tags: z.array(z.string()).optional(),
-    featured: z.boolean().optional(),
-    draft: z.boolean().optional()
-});
-const DEFAULT_CATEGORY_ORDER = [
-    'all',
-    'ai-trends',
-    'announcements',
-    'for-founders',
-    'engineering',
-    'design',
-    'best-practices'
-];
-function slugify(input) {
-    return input
-        .toLowerCase()
-        .trim()
-        .replace(/['"]/g, '')
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-}
-function normalizeCategory(label) {
-    const slug = slugify(label);
-    return { label, slug };
-}
-function parseISODate(date) {
-    // Prefer stable UTC parsing for YYYY-MM-DD.
-    if (/^\\d{4}-\\d{2}-\\d{2}$/.test(date)) {
-        const d = new Date(`${date}T00:00:00Z`);
-        if (!Number.isNaN(d.getTime()))
-            return d;
-    }
-    const d = new Date(date);
-    if (Number.isNaN(d.getTime()))
-        throw new Error(`Invalid date: ${date}`);
-    return d;
-}
-const fmtLong = new Intl.DateTimeFormat('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-    timeZone: 'UTC'
-});
-const fmtShort = new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-    timeZone: 'UTC'
-});
-function stripForExcerpt(markdown) {
-    return (markdown
-        // remove fenced code blocks
-        .replace(/```[\s\S]*?```/g, '')
-        // remove images
-        .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
-        // remove links but keep text
-        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
-        // remove headings markers
-        .replace(/^#{1,6}\s+/gm, '')
-        // remove blockquote markers
-        .replace(/^>\s+/gm, '')
-        // remove emphasis markers
-        .replace(/[*_`]/g, '')
-        // collapse whitespace
-        .replace(/\s+/g, ' ')
-        .trim());
-}
-function excerptFromContent(content) {
-    const text = stripForExcerpt(content);
-    if (!text)
-        return '';
-    return text.length > 180 ? `${text.slice(0, 177).trimEnd()}...` : text;
-}
-function minutesToLabels(minutes) {
-    const m = Math.max(1, Math.round(minutes));
-    const unit = m === 1 ? 'minute' : 'minutes';
-    return {
-        minutes: m,
-        short: `${m} min read`,
-        long: `${m} ${unit} read`
-    };
-}
-export function createBlog(config) {
-    const categoryOrder = config.categoryOrder ?? DEFAULT_CATEGORY_ORDER;
-    let cachedMetaIndex = null;
-    let cachedFullIndex = null;
-    let cachedSlugToPath = null;
-    function getSlugToPath() {
-        if (!DEV && cachedSlugToPath)
-            return cachedSlugToPath;
-        const m = new Map();
-        const paths = Object.keys(config.rawModules).sort();
-        for (const path of paths) {
-            const file = path.split('/').pop();
-            const slug = file?.replace(/\.md(?:\?.*)?$/, '');
-            if (!slug)
-                continue;
-            m.set(slug, path);
-        }
-        if (!DEV)
-            cachedSlugToPath = m;
-        return m;
-    }
-    async function buildMetaIndex() {
-        if (!DEV && cachedMetaIndex)
-            return cachedMetaIndex;
-        const posts = [];
-        const paths = Object.keys(config.rawModules).sort();
-        for (const path of paths) {
-            const file = path.split('/').pop();
-            // Glob keys can include query strings depending on bundler usage; normalize aggressively.
-            const slug = file?.replace(/\.md(?:\?.*)?$/, '');
-            if (!slug)
-                continue;
-            const rawFn = config.rawModules[path];
-            if (!rawFn)
-                continue;
-            const raw = await rawFn();
-            const { data, content } = matter(raw);
-            const metadata = config.mapFrontmatter
-                ? config.mapFrontmatter({ data, content, slug, path })
-                : frontmatterSchema.parse(data);
-            if (metadata.draft)
-                continue;
-            const dateObj = parseISODate(metadata.date);
-            const rt = minutesToLabels(readingTime(content).minutes);
-            const category = normalizeCategory(metadata.category);
-            const excerpt = metadata.excerpt?.trim() || excerptFromContent(content);
-            posts.push({
-                slug,
-                title: metadata.title.trim(),
-                excerpt,
-                category,
-                tags: metadata.tags ?? [],
-                author: config.getAuthor(metadata.author),
-                date: metadata.date,
-                dateLong: fmtLong.format(dateObj),
-                dateShort: fmtShort.format(dateObj),
-                readingMinutes: rt.minutes,
-                readingTimeShort: rt.short,
-                readingTimeLong: rt.long,
-                cover: metadata.cover,
-                summaryAI: metadata.summaryAI,
-                featured: Boolean(metadata.featured)
-            });
-        }
-        posts.sort((a, b) => parseISODate(b.date).getTime() - parseISODate(a.date).getTime());
-        if (!DEV)
-            cachedMetaIndex = posts;
-        return posts;
-    }
-    async function getAllPosts() {
-        return buildMetaIndex();
-    }
-    async function getAllPostsFull() {
-        if (!DEV && cachedFullIndex)
-            return cachedFullIndex;
-        const meta = await buildMetaIndex();
-        const slugToPath = getSlugToPath();
-        const full = [];
-        for (const post of meta) {
-            const path = slugToPath.get(post.slug);
-            const compiledFn = path ? config.compiledModules[path] : undefined;
-            if (!compiledFn)
-                continue;
-            const compiled = await compiledFn();
-            full.push({ ...post, component: compiled.default });
-        }
-        if (!DEV)
-            cachedFullIndex = full;
-        return full;
-    }
-    async function getPostBySlug(slug) {
-        const meta = await buildMetaIndex();
-        const post = meta.find((p) => p.slug === slug) ?? null;
-        if (!post)
-            return null;
-        const path = getSlugToPath().get(slug);
-        const compiledFn = path ? config.compiledModules[path] : undefined;
-        if (!compiledFn)
-            return null;
-        const compiled = await compiledFn();
-        return { ...post, component: compiled.default };
-    }
-    async function getCategories() {
-        const posts = await getAllPosts();
-        const map = new Map();
-        for (const p of posts)
-            map.set(p.category.slug, p.category.label);
-        return Array.from(map.entries())
-            .map(([slug, label]) => ({ slug, label }))
-            .sort((a, b) => {
-            const ai = categoryOrder.indexOf(a.slug);
-            const bi = categoryOrder.indexOf(b.slug);
-            if (ai === -1 && bi === -1)
-                return a.label.localeCompare(b.label);
-            if (ai === -1)
-                return 1;
-            if (bi === -1)
-                return -1;
-            return ai - bi;
-        });
-    }
-    async function pickHero(posts) {
-        const list = posts ?? (await getAllPosts());
-        const featured = list.filter((p) => p.featured);
-        return (featured[0] ?? list[0]);
-    }
-    return { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero };
-}

package/packages/blogkit/dist/server/index.d.ts

@@ -1 +0,0 @@
-export { createBlog, type BlogCreateConfig } from './blog';

package/packages/blogkit/dist/server/index.js

@@ -1 +0,0 @@
-export { createBlog } from './blog';

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>