@nuraly/lumenjs 0.1.1 → 0.1.3

package/dist/dev-server/plugins/vite-plugin-loaders.js

@@ -15,7 +15,6 @@ import { installDomShims } from '../../shared/dom-shims.js';
  *     return { item: data, timestamp: Date.now() };
  *   }
  *
- *   @customElement('page-item')
  *   export class PageItem extends LitElement {
  *     @property({ type: Object }) loaderData = {};
  *     render() {
@@ -31,6 +30,78 @@ export function lumenLoadersPlugin(pagesDir) {
     return {
         name: 'lumenjs-loaders',
         configureServer(server) {
+            // SSE subscribe middleware
+            server.middlewares.use(async (req, res, next) => {
+                if (!req.url?.startsWith('/__nk_subscribe/')) {
+                    return next();
+                }
+                const [pathname, queryString] = req.url.split('?');
+                // Parse query params
+                const query = {};
+                if (queryString) {
+                    for (const pair of queryString.split('&')) {
+                        const [key, val] = pair.split('=');
+                        query[decodeURIComponent(key)] = decodeURIComponent(val || '');
+                    }
+                }
+                // Handle layout subscribe: /__nk_subscribe/__layout/?__dir=<dir>
+                if (pathname === '/__nk_subscribe/__layout/' || pathname === '/__nk_subscribe/__layout') {
+                    const dir = query.__dir || '';
+                    await handleLayoutSubscribe(server, pagesDir, dir, query, req, res);
+                    return;
+                }
+                const pagePath = pathname.replace('/__nk_subscribe', '') || '/';
+                // Parse URL params
+                let params = {};
+                if (query.__params) {
+                    try {
+                        params = JSON.parse(query.__params);
+                    }
+                    catch { /* ignore */ }
+                    delete query.__params;
+                }
+                const filePath = resolvePageFile(pagesDir, pagePath);
+                if (!filePath) {
+                    res.statusCode = 404;
+                    res.end();
+                    return;
+                }
+                if (Object.keys(params).length === 0) {
+                    Object.assign(params, extractRouteParams(pagesDir, pagePath, filePath));
+                }
+                try {
+                    installDomShims();
+                    const mod = await server.ssrLoadModule(filePath);
+                    if (!mod.subscribe || typeof mod.subscribe !== 'function') {
+                        res.statusCode = 204;
+                        res.end();
+                        return;
+                    }
+                    // Set SSE headers
+                    res.writeHead(200, {
+                        'Content-Type': 'text/event-stream',
+                        'Cache-Control': 'no-cache',
+                        'Connection': 'keep-alive',
+                    });
+                    const locale = query.__locale;
+                    const push = (data) => {
+                        res.write(`data: ${JSON.stringify(data)}\n\n`);
+                    };
+                    const cleanup = mod.subscribe({ params, push, headers: req.headers, locale });
+                    res.on('close', () => {
+                        if (typeof cleanup === 'function')
+                            cleanup();
+                    });
+                }
+                catch (err) {
+                    console.error(`[LumenJS] Subscribe error for ${pagePath}:`, err);
+                    if (!res.headersSent) {
+                        res.statusCode = 500;
+                        res.end();
+                    }
+                }
+            });
+            // Loader middleware
             server.middlewares.use(async (req, res, next) => {
                 if (!req.url?.startsWith('/__nk_loader/')) {
                     return next();
@@ -126,45 +197,26 @@ export function lumenLoadersPlugin(pagesDir) {
             // Apply to page files and layout files within the pages directory
             if (!id.startsWith(pagesDir) || !id.endsWith('.ts'))
                 return;
-            if (!code.includes('export') || !code.includes('loader'))
-                return;
-            const hasLoader = /export\s+(async\s+)?function\s+loader\s*\(/.test(code);
-            if (!hasLoader)
-                return;
-            // Find the loader function by tracking brace depth
-            const match = code.match(/export\s+(async\s+)?function\s+loader\s*\(/);
-            if (!match)
+            const hasLoader = code.includes('export') && code.includes('loader') && /export\s+(async\s+)?function\s+loader\s*\(/.test(code);
+            const hasSubscribe = code.includes('export') && code.includes('subscribe') && /export\s+(async\s+)?function\s+subscribe\s*\(/.test(code);
+            if (!hasLoader && !hasSubscribe)
                 return;
-            const startIdx = match.index;
-            // Skip past the function signature's closing parenthesis (handles nested braces in type annotations)
-            let parenDepth = 1;
-            let sigIdx = startIdx + match[0].length;
-            while (sigIdx < code.length && parenDepth > 0) {
-                if (code[sigIdx] === '(')
-                    parenDepth++;
-                else if (code[sigIdx] === ')')
-                    parenDepth--;
-                sigIdx++;
+            let result = code;
+            // Strip loader function
+            if (hasLoader) {
+                result = stripServerFunction(result, 'loader');
             }
-            // Find the opening brace of the function body (after the closing paren and optional return type)
-            let braceStart = code.indexOf('{', sigIdx);
-            if (braceStart === -1)
-                return;
-            let depth = 1;
-            let i = braceStart + 1;
-            while (i < code.length && depth > 0) {
-                if (code[i] === '{')
-                    depth++;
-                else if (code[i] === '}')
-                    depth--;
-                i++;
+            // Strip subscribe function
+            if (hasSubscribe) {
+                result = stripServerFunction(result, 'subscribe');
+            }
+            if (hasLoader) {
+                result += '\nexport const __nk_has_loader = true;\n';
+            }
+            if (hasSubscribe) {
+                result += '\nexport const __nk_has_subscribe = true;\n';
             }
-            // Replace the entire loader function
-            const transformed = code.substring(0, startIdx)
-                + '// loader() — runs server-side only'
-                + code.substring(i);
-            const withFlag = transformed + '\nexport const __nk_has_loader = true;\n';
-            return { code: withFlag, map: null };
+            return { code: result, map: null };
         },
     };
 }
@@ -310,6 +362,90 @@ function findDynamicPage(baseDir, segments) {
     }
     return null;
 }
+/**
+ * Strip a named server-side function (loader/subscribe) from client code using brace-depth tracking.
+ */
+function stripServerFunction(code, fnName) {
+    const regex = new RegExp(`export\\s+(async\\s+)?function\\s+${fnName}\\s*\\(`);
+    const match = code.match(regex);
+    if (!match)
+        return code;
+    const startIdx = match.index;
+    let parenDepth = 1;
+    let sigIdx = startIdx + match[0].length;
+    while (sigIdx < code.length && parenDepth > 0) {
+        if (code[sigIdx] === '(')
+            parenDepth++;
+        else if (code[sigIdx] === ')')
+            parenDepth--;
+        sigIdx++;
+    }
+    let braceStart = code.indexOf('{', sigIdx);
+    if (braceStart === -1)
+        return code;
+    let depth = 1;
+    let i = braceStart + 1;
+    while (i < code.length && depth > 0) {
+        if (code[i] === '{')
+            depth++;
+        else if (code[i] === '}')
+            depth--;
+        i++;
+    }
+    return code.substring(0, startIdx)
+        + `// ${fnName}() — runs server-side only`
+        + code.substring(i);
+}
+/**
+ * Handle layout subscribe requests in dev mode.
+ * GET /__nk_subscribe/__layout/?__dir=<dir>
+ */
+async function handleLayoutSubscribe(server, pagesDir, dir, query, req, res) {
+    const layoutDir = path.join(pagesDir, dir);
+    let layoutFile = null;
+    for (const ext of ['.ts', '.js']) {
+        const p = path.join(layoutDir, `_layout${ext}`);
+        if (fs.existsSync(p)) {
+            layoutFile = p;
+            break;
+        }
+    }
+    if (!layoutFile) {
+        res.statusCode = 204;
+        res.end();
+        return;
+    }
+    try {
+        installDomShims();
+        const mod = await server.ssrLoadModule(layoutFile);
+        if (!mod.subscribe || typeof mod.subscribe !== 'function') {
+            res.statusCode = 204;
+            res.end();
+            return;
+        }
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+        });
+        const locale = query.__locale;
+        const push = (data) => {
+            res.write(`data: ${JSON.stringify(data)}\n\n`);
+        };
+        const cleanup = mod.subscribe({ params: {}, push, headers: req.headers, locale });
+        res.on('close', () => {
+            if (typeof cleanup === 'function')
+                cleanup();
+        });
+    }
+    catch (err) {
+        console.error(`[LumenJS] Layout subscribe error for dir=${dir}:`, err);
+        if (!res.headersSent) {
+            res.statusCode = 500;
+            res.end();
+        }
+    }
+}
 /**
  * Extract dynamic route params by comparing URL segments against [param] file path segments.
  */

package/dist/dev-server/plugins/vite-plugin-routes.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { dirToLayoutTagName, fileHasLoader, filePathToRoute, filePathToTagName } from '../../shared/utils.js';
+import { dirToLayoutTagName, fileHasLoader, fileHasSubscribe, filePathToRoute, filePathToTagName } from '../../shared/utils.js';
 const VIRTUAL_MODULE_ID = 'virtual:lumenjs-routes';
 const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 /**
@@ -98,18 +98,20 @@ export function lumenRoutesPlugin(pagesDir) {
                 const routeArray = routes
                     .map(r => {
                     const hasLoader = fileHasLoader(r.componentPath);
+                    const hasSubscribe = fileHasSubscribe(r.componentPath);
                     const componentPath = r.componentPath.replace(/\\/g, '/');
                     const chain = getLayoutChain(r.componentPath, layouts);
                     let layoutsStr = '';
                     if (chain.length > 0) {
                         const items = chain.map(l => {
                             const lHasLoader = fileHasLoader(l.filePath);
+                            const lHasSubscribe = fileHasSubscribe(l.filePath);
                             const lPath = l.filePath.replace(/\\/g, '/');
-                            return `{ tagName: ${JSON.stringify(l.tagName)}, loaderPath: ${JSON.stringify(l.dir)}${lHasLoader ? ', hasLoader: true' : ''}, load: () => import('${lPath}') }`;
+                            return `{ tagName: ${JSON.stringify(l.tagName)}, loaderPath: ${JSON.stringify(l.dir)}${lHasLoader ? ', hasLoader: true' : ''}${lHasSubscribe ? ', hasSubscribe: true' : ''}, load: () => import('${lPath}') }`;
                         });
                         layoutsStr = `, layouts: [${items.join(', ')}]`;
                     }
-                    return `  { path: ${JSON.stringify(r.path)}, tagName: ${JSON.stringify(r.tagName)}${hasLoader ? ', hasLoader: true' : ''}, load: () => import('${componentPath}')${layoutsStr} }`;
+                    return `  { path: ${JSON.stringify(r.path)}, tagName: ${JSON.stringify(r.tagName)}${hasLoader ? ', hasLoader: true' : ''}${hasSubscribe ? ', hasSubscribe: true' : ''}, load: () => import('${componentPath}')${layoutsStr} }`;
                 })
                     .join(',\n');
                 return `export const routes = [\n${routeArray}\n];\n`;

package/dist/dev-server/server.js

@@ -17,6 +17,7 @@ import { sourceAnnotatorPlugin } from './plugins/vite-plugin-source-annotator.js
 import { virtualModulesPlugin } from './plugins/vite-plugin-virtual-modules.js';
 import { i18nPlugin, loadTranslationsFromDisk } from './plugins/vite-plugin-i18n.js';
 import { resolveLocale } from './middleware/locale.js';
+import { setProjectDir } from '../db/context.js';
 // Re-export for backwards compatibility
 export { readProjectConfig, readProjectTitle, getLumenJSNodeModules, getLumenJSDirs } from './config.js';
 export { getNuralyUIAliases, resolveNuralyUIPaths } from './nuralyui-aliases.js';
@@ -82,6 +83,7 @@ export function getSharedViteConfig(projectDir, options) {
 }
 export async function createDevServer(options) {
     const { projectDir, port, editorMode = false, base = '/' } = options;
+    setProjectDir(projectDir);
     const pagesDir = path.join(projectDir, 'pages');
     const apiDir = path.join(projectDir, 'api');
     const publicDir = path.join(projectDir, 'public');
@@ -110,6 +112,17 @@ export async function createDevServer(options) {
                 name: 'lumenjs-index-html',
                 configureServer(server) {
                     server.middlewares.use((req, res, next) => {
+                        // Guard against malformed percent-encoded URLs that crash Vite's transformIndexHtml
+                        if (req.url) {
+                            try {
+                                decodeURIComponent(req.url);
+                            }
+                            catch {
+                                res.statusCode = 400;
+                                res.end('Bad Request');
+                                return;
+                            }
+                        }
                         if (req.url && !req.url.startsWith('/@') && !req.url.startsWith('/node_modules') &&
                             !req.url.startsWith('/api/') && !req.url.startsWith('/__nk_loader/') &&
                             !req.url.startsWith('/__nk_i18n/') &&

package/dist/runtime/router-data.d.ts

@@ -1,3 +1,5 @@
 export declare function fetchLoaderData(pathname: string, params: Record<string, string>): Promise<any>;
 export declare function fetchLayoutLoaderData(dir: string): Promise<any>;
+export declare function connectSubscribe(pathname: string, params: Record<string, string>): EventSource;
+export declare function connectLayoutSubscribe(dir: string): EventSource;
 export declare function render404(pathname: string): string;

package/dist/runtime/router-data.js

@@ -33,6 +33,26 @@ export async function fetchLayoutLoaderData(dir) {
         return undefined;
     return data;
 }
+export function connectSubscribe(pathname, params) {
+    const url = new URL(`/__nk_subscribe${pathname}`, location.origin);
+    if (Object.keys(params).length > 0) {
+        url.searchParams.set('__params', JSON.stringify(params));
+    }
+    const config = getI18nConfig();
+    if (config) {
+        url.searchParams.set('__locale', getLocale());
+    }
+    return new EventSource(url.toString());
+}
+export function connectLayoutSubscribe(dir) {
+    const url = new URL('/__nk_subscribe/__layout/', location.origin);
+    url.searchParams.set('__dir', dir);
+    const config = getI18nConfig();
+    if (config) {
+        url.searchParams.set('__locale', getLocale());
+    }
+    return new EventSource(url.toString());
+}
 export function render404(pathname) {
     return `<div style="display:flex;align-items:center;justify-content:center;min-height:80vh;font-family:system-ui,-apple-system,sans-serif;padding:2rem">
   <div style="text-align:center;max-width:400px">

package/dist/runtime/router.d.ts

@@ -1,6 +1,7 @@
 export interface LayoutInfo {
     tagName: string;
     hasLoader?: boolean;
+    hasSubscribe?: boolean;
     load?: () => Promise<any>;
     loaderPath?: string;
 }
@@ -8,6 +9,7 @@ export interface Route {
     path: string;
     tagName: string;
     hasLoader?: boolean;
+    hasSubscribe?: boolean;
     load?: () => Promise<any>;
     layouts?: LayoutInfo[];
     pattern?: RegExp;
@@ -23,14 +25,17 @@ export declare class NkRouter {
     private outlet;
     private currentTag;
     private currentLayoutTags;
+    private subscriptions;
     params: Record<string, string>;
     constructor(routes: Route[], outlet: HTMLElement, hydrate?: boolean);
     private compilePattern;
+    private cleanupSubscriptions;
     navigate(pathname: string, pushState?: boolean): Promise<void>;
     private matchRoute;
     private renderRoute;
     private buildLayoutTree;
     private createPageElement;
+    private findPageElement;
     private handleLinkClick;
     /** Strip locale prefix from a path for internal route matching. */
     private stripLocale;

package/dist/runtime/router.js

@@ -1,4 +1,4 @@
-import { fetchLoaderData, fetchLayoutLoaderData, render404 } from './router-data.js';
+import { fetchLoaderData, fetchLayoutLoaderData, connectSubscribe, connectLayoutSubscribe, render404 } from './router-data.js';
 import { hydrateInitialRoute } from './router-hydration.js';
 import { getI18nConfig, getLocale, stripLocalePrefix, buildLocalePath } from './i18n.js';
 /**
@@ -12,6 +12,7 @@ export class NkRouter {
         this.outlet = null;
         this.currentTag = null;
         this.currentLayoutTags = [];
+        this.subscriptions = [];
         this.params = {};
         this.outlet = outlet;
         this.routes = routes.map(r => ({
@@ -43,7 +44,14 @@ export class NkRouter {
         });
         return { pattern: new RegExp(`^${pattern}$`), paramNames };
     }
+    cleanupSubscriptions() {
+        for (const es of this.subscriptions) {
+            es.close();
+        }
+        this.subscriptions = [];
+    }
     async navigate(pathname, pushState = true) {
+        this.cleanupSubscriptions();
         const match = this.matchRoute(pathname);
         if (!match) {
             if (this.outlet)
@@ -55,6 +63,7 @@ export class NkRouter {
         if (pushState) {
             const localePath = this.withLocale(pathname);
             history.pushState(null, '', localePath);
+            window.scrollTo(0, 0);
         }
         this.params = match.params;
         // Lazy-load the page component if not yet registered
@@ -96,6 +105,28 @@ export class NkRouter {
             }
         }
         this.renderRoute(match.route, loaderData, layouts, layoutDataList);
+        // Set up SSE subscriptions for page
+        if (match.route.hasSubscribe) {
+            const es = connectSubscribe(pathname, match.params);
+            es.onmessage = (e) => {
+                const pageEl = this.findPageElement(match.route.tagName);
+                if (pageEl)
+                    pageEl.liveData = JSON.parse(e.data);
+            };
+            this.subscriptions.push(es);
+        }
+        // Set up SSE subscriptions for layouts
+        for (const layout of layouts) {
+            if (layout.hasSubscribe) {
+                const es = connectLayoutSubscribe(layout.loaderPath || '');
+                es.onmessage = (e) => {
+                    const layoutEl = this.outlet?.querySelector(layout.tagName);
+                    if (layoutEl)
+                        layoutEl.liveData = JSON.parse(e.data);
+                };
+                this.subscriptions.push(es);
+            }
+        }
     }
     matchRoute(pathname) {
         for (const route of this.routes) {
@@ -194,6 +225,11 @@ export class NkRouter {
         }
         return el;
     }
+    findPageElement(tagName) {
+        if (!this.outlet)
+            return null;
+        return this.outlet.querySelector(tagName) ?? this.outlet.querySelector(`${tagName}:last-child`);
+    }
     handleLinkClick(event) {
         const path = event.composedPath();
         const anchor = path.find((el) => el instanceof HTMLElement && el.tagName === 'A');

package/dist/shared/types.d.ts

@@ -2,11 +2,13 @@ export interface ManifestLayout {
     dir: string;
     module: string;
     hasLoader: boolean;
+    hasSubscribe: boolean;
 }
 export interface ManifestRoute {
     path: string;
     module: string;
     hasLoader: boolean;
+    hasSubscribe: boolean;
     tagName?: string;
     layouts?: string[];
 }

package/dist/shared/utils.d.ts

@@ -14,7 +14,7 @@ export declare function stripOuterLitMarkers(html: string): string;
 export declare function dirToLayoutTagName(dir: string): string;
 /**
  * Find the custom element tag name from a page module.
- * Pages use @customElement('page-xxx') which registers the element.
+ * Pages are auto-registered by the auto-define plugin based on file path.
  */
 export declare function findTagName(mod: Record<string, any>): string | null;
 /**
@@ -43,6 +43,10 @@ export declare function escapeHtml(text: string): string;
  * Check if a page/layout file exports a loader() function.
  */
 export declare function fileHasLoader(filePath: string): boolean;
+/**
+ * Check if a page/layout file exports a subscribe() function.
+ */
+export declare function fileHasSubscribe(filePath: string): boolean;
 /**
  * Convert a file path (relative to pages/) to a route path.
  */

package/dist/shared/utils.js

@@ -29,7 +29,7 @@ export function dirToLayoutTagName(dir) {
 }
 /**
  * Find the custom element tag name from a page module.
- * Pages use @customElement('page-xxx') which registers the element.
+ * Pages are auto-registered by the auto-define plugin based on file path.
  */
 export function findTagName(mod) {
     for (const key of Object.keys(mod)) {
@@ -109,6 +109,18 @@ export function fileHasLoader(filePath) {
         return false;
     }
 }
+/**
+ * Check if a page/layout file exports a subscribe() function.
+ */
+export function fileHasSubscribe(filePath) {
+    try {
+        const content = fs.readFileSync(filePath, 'utf-8');
+        return /export\s+(async\s+)?function\s+subscribe\s*\(/.test(content);
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Convert a file path (relative to pages/) to a route path.
  */

package/package.json

@@ -1,20 +1,28 @@
 {
   "name": "@nuraly/lumenjs",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Full-stack Lit web component framework with file-based routing, server loaders, SSR, and API routes",
   "type": "module",
   "main": "dist/cli.js",
   "bin": {
     "lumenjs": "dist/cli.js"
   },
+  "exports": {
+    ".": "./dist/cli.js",
+    "./db": "./dist/db/index.js"
+  },
   "files": [
     "dist",
+    "templates",
     "README.md"
   ],
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "prepublishOnly": "tsc"
+    "prepublishOnly": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "keywords": [
     "lit",
@@ -38,14 +46,18 @@
   "author": "labidiaymen <labidi@aymen.co>",
   "license": "MIT",
   "dependencies": {
-    "vite": "^5.4.0",
-    "lit": "^3.1.0",
     "@lit-labs/ssr": "^3.2.0",
-    "glob": "^10.3.0"
+    "better-sqlite3": "^11.0.0",
+    "glob": "^10.3.0",
+    "lit": "^3.1.0",
+    "vite": "^5.4.0"
   },
   "devDependencies": {
+    "@types/better-sqlite3": "^7.6.0",
+    "@types/node": "^20.14.2",
+    "@vitest/coverage-v8": "^4.0.18",
     "typescript": "^5.4.5",
-    "@types/node": "^20.14.2"
+    "vitest": "^4.0.18"
   },
   "engines": {
     "node": ">=18"

package/templates/blog/api/posts.ts

@@ -0,0 +1,20 @@
+import { useDb } from '@nuraly/lumenjs/db';
+
+export function GET() {
+  const db = useDb();
+  const posts = db.all('SELECT id, title, slug, content, date FROM posts ORDER BY date DESC');
+  return { posts };
+}
+
+export function POST(req: { body: any }) {
+  const { title, slug, content } = req.body;
+  if (!title || !slug || !content) {
+    throw { status: 400, message: 'title, slug, and content are required' };
+  }
+  const db = useDb();
+  const result = db.run(
+    'INSERT INTO posts (title, slug, content) VALUES (?, ?, ?)',
+    title, slug, content
+  );
+  return { id: result.lastInsertRowid, title, slug, content };
+}

package/templates/blog/data/migrations/001_init.sql

@@ -0,0 +1,12 @@
+CREATE TABLE IF NOT EXISTS posts (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  title TEXT NOT NULL,
+  slug TEXT NOT NULL UNIQUE,
+  content TEXT NOT NULL,
+  date TEXT NOT NULL DEFAULT (date('now'))
+);
+
+INSERT INTO posts (title, slug, content, date) VALUES
+  ('Hello World', 'hello-world', 'Welcome to your new LumenJS blog! This post was loaded from SQLite.', '2025-01-15'),
+  ('Getting Started with LumenJS', 'getting-started', 'LumenJS makes it easy to build full-stack web apps with Lit web components and file-based routing.', '2025-01-20'),
+  ('SQLite Persistence', 'sqlite-persistence', 'LumenJS includes built-in SQLite support via better-sqlite3. Just use useDb() in your loaders and API routes.', '2025-01-25');

package/templates/blog/pages/index.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { useDb } from '@nuraly/lumenjs/db';
+
+export function loader() {
+  const db = useDb();
+  const posts = db.all('SELECT id, title, slug, content, date FROM posts ORDER BY date DESC');
+  return { posts };
+}
+
+@customElement('page-home')
+export class PageHome extends LitElement {
+  @property({ type: Object }) data: any;
+
+  static styles = css`
+    :host { display: block; max-width: 720px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif; }
+    h1 { font-size: 2rem; margin-bottom: 1.5rem; }
+    .post { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; }
+    .post h2 { margin: 0 0 0.25rem; }
+    .post a { color: #0066cc; text-decoration: none; }
+    .post a:hover { text-decoration: underline; }
+    .post .date { color: #666; font-size: 0.875rem; }
+    .post p { color: #333; margin: 0.5rem 0 0; }
+  `;
+
+  render() {
+    const posts = this.data?.posts || [];
+    return html`
+      <h1>Blog</h1>
+      ${posts.map((post: any) => html`
+        <div class="post">
+          <h2><a href="/posts/${post.slug}">${post.title}</a></h2>
+          <span class="date">${post.date}</span>
+          <p>${post.content}</p>
+        </div>
+      `)}
+    `;
+  }
+}