@aureuma/svelta 0.0.1

package/tailwind.config.cjs

@@ -0,0 +1,133 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts,md}',
+		'./src/content/**/*.{md}',
+		'./packages/blogkit/src/**/*.{svelte,ts}',
+		'./packages/blogkit/dist/**/*.{js,ts,svelte}'
+	],
+	theme: {
+		extend: {
+			colors: {
+				background: {
+					main: 'rgb(var(--c-background-main) / <alpha-value>)',
+					soft: 'rgb(var(--c-background-soft) / <alpha-value>)',
+					invert: 'rgb(var(--c-background-invert) / <alpha-value>)'
+				},
+				text: {
+					main: 'rgb(var(--c-text-main) / <alpha-value>)',
+					sub: 'rgb(var(--c-text-sub) / <alpha-value>)',
+					muted: 'rgb(var(--c-text-muted) / <alpha-value>)',
+					invert: 'rgb(var(--c-text-invert) / <alpha-value>)'
+				},
+				border: {
+					soft: 'rgb(var(--c-border-soft) / <alpha-value>)'
+				},
+				brand: {
+					DEFAULT: 'rgb(var(--c-brand) / <alpha-value>)',
+					soft: 'rgb(var(--c-brand-soft) / <alpha-value>)'
+				}
+			},
+			fontFamily: {
+				sans: [
+					'Inter',
+					'ui-sans-serif',
+					'system-ui',
+					'-apple-system',
+					'Segoe UI',
+					'Roboto',
+					'Helvetica',
+					'Arial',
+					'Apple Color Emoji',
+					'Segoe UI Emoji'
+				],
+				mono: [
+					'Geist Mono',
+					'ui-monospace',
+					'SFMono-Regular',
+					'Menlo',
+					'Monaco',
+					'Consolas',
+					'Liberation Mono',
+					'Courier New',
+					'monospace'
+				]
+			},
+			boxShadow: {
+				'drop-md': '0 18px 60px rgba(15, 23, 42, 0.16)'
+			},
+			typography: () => ({
+				DEFAULT: {
+					css: {
+						'--tw-prose-body': 'rgb(var(--c-text-main))',
+						'--tw-prose-headings': 'rgb(var(--c-text-main))',
+						'--tw-prose-lead': 'rgb(var(--c-text-sub))',
+						'--tw-prose-links': 'rgb(var(--c-text-main))',
+						'--tw-prose-bold': 'rgb(var(--c-text-main))',
+						'--tw-prose-counters': 'rgb(var(--c-text-muted))',
+						'--tw-prose-bullets': 'rgb(var(--c-border-soft) / 0.35)',
+						'--tw-prose-hr': 'rgb(var(--c-border-soft) / 0.12)',
+						'--tw-prose-quotes': 'rgb(var(--c-text-main))',
+						'--tw-prose-quote-borders': 'rgb(var(--c-border-soft) / 0.2)',
+						'--tw-prose-captions': 'rgb(var(--c-text-muted))',
+						'--tw-prose-code': 'rgb(var(--c-text-main))',
+						'--tw-prose-pre-code': 'rgb(var(--c-text-main))',
+						'--tw-prose-pre-bg': 'transparent',
+						'--tw-prose-th-borders': 'rgb(var(--c-border-soft) / 0.12)',
+						'--tw-prose-td-borders': 'rgb(var(--c-border-soft) / 0.12)',
+						maxWidth: 'none',
+						fontSize: '16px',
+						lineHeight: '24px',
+						letterSpacing: '-0.01em',
+						a: {
+							textDecoration: 'underline',
+							textDecorationColor: 'rgb(var(--c-border-soft) / 0.35)',
+							textUnderlineOffset: '3px'
+						},
+						'a:hover': {
+							textDecorationColor: 'rgb(var(--c-brand) / 0.85)'
+						},
+						h2: {
+							fontWeight: '500',
+							fontSize: '24px',
+							lineHeight: '31.2px',
+							letterSpacing: '-0.24px',
+							scrollMarginTop: '96px'
+						},
+						h3: {
+							fontWeight: '500',
+							fontSize: '20px',
+							lineHeight: '26px',
+							letterSpacing: '-0.24px',
+							scrollMarginTop: '96px'
+						},
+						code: {
+							fontWeight: '500',
+							backgroundColor: 'rgb(var(--c-background-soft))',
+							padding: '0.2em 0.35em',
+							borderRadius: '6px'
+						},
+						'code::before': { content: '""' },
+						'code::after': { content: '""' },
+						pre: {
+							background: 'transparent',
+							padding: '0',
+							margin: '0'
+						},
+						blockquote: {
+							borderLeftColor: 'rgb(var(--c-border-soft) / 0.35)'
+						},
+						'blockquote p:first-of-type::before': { content: '""' },
+						'blockquote p:last-of-type::after': { content: '""' },
+						img: {
+							borderRadius: '10px',
+							border: '1px solid rgb(var(--c-border-soft) / 0.07)'
+						}
+					}
+				}
+			})
+		}
+	},
+	plugins: [require('@tailwindcss/typography')]
+};

package/tests/blog.spec.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+test('blog index renders hero, tags, and paginates', async ({ page }) => {
+	await page.goto('/blog');
+
+	await expect(page.getByTestId('blog-hero')).toBeVisible();
+	await expect(page.getByTestId('blog-tags')).toBeVisible();
+
+	const cards = page.getByTestId('blog-card');
+	await expect(cards).toHaveCount(8);
+
+	// Trigger infinite scroll: scroll near bottom and wait for additional cards.
+	await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+	await expect.poll(async () => cards.count()).toBeGreaterThan(8);
+});
+
+test('post page renders summary, shiki blocks, and more posts', async ({ page }) => {
+	await page.goto('/blog/ai-summary-cards-with-frontmatter');
+
+	await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
+	await expect(page.getByTestId('blog-summary')).toBeVisible();
+	await expect.poll(async () => page.locator('pre.shiki').count()).toBeGreaterThan(0);
+
+	// Heading anchors from rehype-autolink-headings should exist.
+	await expect
+		.poll(async () => page.locator('.blog-prose .heading-anchor').count())
+		.toBeGreaterThan(0);
+
+	await expect(page.getByTestId('blog-more-posts')).toBeVisible();
+});
+
+test('theme toggling applies the expected html class', async ({ page }) => {
+	await page.goto('/');
+	await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+	const darkBtn = page.getByRole('button', { name: 'Dark' });
+	await darkBtn.click();
+
+	// If hydration/event binding is broken, this will never flip.
+	await expect(darkBtn).toHaveAttribute('aria-pressed', 'true');
+	await expect(page.locator('html')).toHaveClass(/dark/);
+});
+
+test('rss feed is valid xml-ish and links do not include .md', async ({ request }) => {
+	const res = await request.get('/feed.xml');
+	expect(res.ok()).toBeTruthy();
+
+	const ct = res.headers()['content-type'] ?? '';
+	expect(ct).toContain('application/rss+xml');
+
+	const body = await res.text();
+	expect(body).toContain('<rss');
+	expect(body).toContain('<channel>');
+	expect(body).toContain('/blog/ai-summary-cards-with-frontmatter');
+	expect(body).not.toContain('.md</link>');
+});
+
+test('mobile layout folds share UI into the content column', async ({ page }) => {
+	await page.setViewportSize({ width: 390, height: 844 });
+	await page.goto('/blog/ai-summary-cards-with-frontmatter');
+
+	await expect(page.getByTestId('blog-share-mobile')).toBeVisible();
+	await expect(page.getByTestId('blog-share-desktop')).toBeHidden();
+});

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	},
+	"exclude": ["packages/**/dist/**"]
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import path from 'node:path';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			// Allow local workspace packages to be served in dev.
+			strict: false,
+			allow: [path.resolve('./packages'), path.resolve('./src'), path.resolve('./node_modules')]
+		}
+	}
+});