ecopages 0.2.0-alpha.31 → 0.2.0-alpha.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecopages",
-  "version": "0.2.0-alpha.31",
+  "version": "0.2.0-alpha.33",
   "description": "CLI utilities for Ecopages",
   "type": "module",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "ecopages": "bin/cli.js"
   },
   "dependencies": {
-    "@ecopages/core": "0.2.0-alpha.31",
+    "@ecopages/core": "0.2.0-alpha.33",
     "@ecopages/logger": "^0.2.2",
     "citty": "^0.1.6",
     "giget": "^2.0.0",

package/templates/blog-jsx/.env.example

@@ -0,0 +1,4 @@
+ECOPAGES_BASE_URL=http://localhost:3000
+ECOPAGES_HOSTNAME=localhost
+ECOPAGES_PORT=3000
+ECOPAGES_LOGGER_DEBUG=false

package/templates/blog-jsx/app.ts

@@ -0,0 +1,6 @@
+import { EcopagesApp } from '@ecopages/core/create-app';
+import appConfig from './eco.config';
+
+const app = new EcopagesApp({ appConfig });
+
+await app.start();

package/templates/blog-jsx/eco.config.ts

@@ -0,0 +1,45 @@
+import path from 'node:path';
+import { ConfigBuilder } from '@ecopages/core/config-builder';
+import { kitajsPlugin } from '@ecopages/kitajs';
+import { mdxPlugin } from '@ecopages/mdx';
+import { imageProcessorPlugin } from '@ecopages/image-processor';
+import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
+import { tailwindV4Preset } from '@ecopages/postcss-processor/presets/tailwind-v4';
+
+const config = await new ConfigBuilder()
+	.setRootDir(process.cwd())
+	.setBaseUrl(process.env.ECOPAGES_BASE_URL || 'http://localhost:3000')
+	.setIntegrations([
+		kitajsPlugin(),
+		mdxPlugin({
+			compilerOptions: {
+				jsxImportSource: '@kitajs/html',
+			},
+		}),
+	])
+	.setProcessors([
+		imageProcessorPlugin({
+			options: {
+				sourceDir: path.resolve(process.cwd(), 'src/images'),
+				outputDir: path.resolve(process.cwd(), 'dist/images'),
+				publicPath: '/images',
+				acceptedFormats: ['jpg', 'jpeg', 'png', 'webp'],
+				quality: 80,
+				format: 'webp',
+				sizes: [
+					{ width: 320, label: 'sm' },
+					{ width: 768, label: 'md' },
+					{ width: 1024, label: 'lg' },
+					{ width: 1920, label: 'xl' },
+				],
+			},
+		}),
+		postcssProcessorPlugin(
+			tailwindV4Preset({
+				referencePath: path.resolve(process.cwd(), 'src/styles/tailwind.css'),
+			}),
+		),
+	])
+	.build();
+
+export default config;

package/templates/blog-jsx/modules.d.ts

@@ -0,0 +1,4 @@
+import '@ecopages/core/declarations';
+import '@ecopages/core/env';
+import '@ecopages/mdx/declarations';
+import '@ecopages/image-processor/types';

package/templates/blog-jsx/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "blog-jsx",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "start": "ecopages start",
+    "dev": "ecopages dev",
+    "build": "ecopages build",
+    "preview": "ecopages preview",
+    "dev:watch": "ecopages dev:watch"
+  },
+  "devDependencies": {
+    "ecopages": "0.2.0-alpha.33",
+    "@ecopages/core": "0.2.0-alpha.33",
+    "@ecopages/kitajs": "0.2.0-alpha.33",
+    "@ecopages/lit": "0.2.0-alpha.33",
+    "@ecopages/mdx": "0.2.0-alpha.33",
+    "@ecopages/image-processor": "0.2.0-alpha.33",
+    "@ecopages/postcss-processor": "0.2.0-alpha.33",
+    "@ecopages/browser-router": "0.2.0-alpha.33",
+    "@ecopages/scripts-injector": "latest",
+    "@kitajs/html": "^4.2.13",
+    "@tailwindcss/postcss": "^4.1.18",
+    "tailwindcss": "^4.1.18",
+    "@ecopages/radiant": "0.3.0-alpha.16"
+  }
+}

package/templates/blog-jsx/src/components/icons.kita.tsx

@@ -0,0 +1,46 @@
+type IconProps = {
+	class?: string;
+	size?: number;
+};
+
+export const Moon = ({ class: className, size = 24 }: IconProps) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+	</svg>
+);
+
+export const Sun = ({ class: className, size = 24 }: IconProps) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<circle cx="12" cy="12" r="4" />
+		<path d="M12 2v2" />
+		<path d="M12 20v2" />
+		<path d="m4.93 4.93 1.41 1.41" />
+		<path d="m17.66 17.66 1.41 1.41" />
+		<path d="M2 12h2" />
+		<path d="M20 12h2" />
+		<path d="m6.34 17.66-1.41 1.41" />
+		<path d="m19.07 4.93-1.41 1.41" />
+	</svg>
+);

package/templates/blog-jsx/src/components/theme-toggle.css

@@ -0,0 +1,33 @@
+.theme-toggle {
+	appearance: none;
+	border: 1px solid var(--color-border);
+	background: var(--color-surface-elevated);
+	border-radius: 0.375rem;
+	padding: 0.375rem 0.625rem;
+	font-size: var(--text-base);
+	cursor: pointer;
+	transition:
+		border-color 0.15s ease,
+		background-color 0.2s ease;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.theme-toggle:hover {
+	border-color: var(--color-accent);
+}
+
+.dark .theme-toggle-sun {
+	display: inline-flex;
+}
+.dark .theme-toggle-moon {
+	display: none;
+}
+
+.theme-toggle-sun {
+	display: none;
+}
+.theme-toggle-moon {
+	display: inline-flex;
+}

package/templates/blog-jsx/src/components/theme-toggle.kita.tsx

@@ -0,0 +1,22 @@
+import { eco } from '@ecopages/core';
+import { Moon, Sun } from './icons.kita';
+
+export const ThemeToggle = eco.component({
+	dependencies: {
+		stylesheets: ['./theme-toggle.css'],
+		scripts: ['./theme-toggle.script.ts'],
+	},
+
+	render: () => {
+		return (
+			<theme-toggle class="theme-toggle" aria-label="Toggle theme" data-eco-persist="theme-toggle">
+				<span class="theme-toggle-sun">
+					<Sun size={18} />
+				</span>
+				<span class="theme-toggle-moon">
+					<Moon size={18} />
+				</span>
+			</theme-toggle>
+		);
+	},
+});

package/templates/blog-jsx/src/components/theme-toggle.script.ts

@@ -0,0 +1,39 @@
+import { customElement } from '@ecopages/radiant/decorators/custom-element';
+import { RadiantElement } from '@ecopages/radiant';
+
+@customElement('theme-toggle')
+export class ThemeToggleElement extends RadiantElement {
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.initTheme();
+		this.addEventListener('click', this.handleClick.bind(this));
+	}
+
+	handleClick() {
+		const isDark = document.documentElement.classList.contains('dark');
+		const next = !isDark;
+		this.updateTheme(next);
+		localStorage.setItem('theme', next ? 'dark' : 'light');
+	}
+
+	initTheme() {
+		const storedTheme = localStorage.getItem('theme');
+		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		const isDark = storedTheme ? storedTheme === 'dark' : prefersDark;
+		this.updateTheme(isDark);
+	}
+
+	updateTheme(isDark: boolean) {
+		document.documentElement.classList.toggle('dark', isDark);
+		document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+		this.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+	}
+}
+
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			'theme-toggle': HtmlTag;
+		}
+	}
+}

package/templates/blog-jsx/src/includes/head.kita.tsx

@@ -0,0 +1,20 @@
+import { eco } from '@ecopages/core';
+import type { PageHeadProps } from '@ecopages/core';
+import { Seo } from '@/includes/seo.kita';
+
+export const Head = eco.component<PageHeadProps>({
+	dependencies: {
+		stylesheets: ['../styles/tailwind.css'],
+	},
+
+	render: ({ metadata, children }) => {
+		return (
+			<head>
+				<meta charset="UTF-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Seo {...metadata} />
+				{children}
+			</head>
+		);
+	},
+});

package/templates/blog-jsx/src/includes/html.kita.tsx

@@ -0,0 +1,31 @@
+import { eco } from '@ecopages/core';
+import type { HtmlTemplateProps } from '@ecopages/core';
+import { Head } from '@/includes/head.kita';
+
+const themeScript = `(function(){const t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t);if(t==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}})();`;
+
+const HtmlTemplate = eco.component<HtmlTemplateProps>({
+	dependencies: {
+		components: [Head],
+	},
+
+	render: ({ children, metadata, headContent, language = 'en' }) => {
+		return (
+			<html lang={language}>
+				<Head metadata={metadata}>
+					{
+						(
+							<>
+								<script>{themeScript}</script>
+								{headContent}
+							</>
+						) as 'safe'
+					}
+				</Head>
+				<body>{children as 'safe'}</body>
+			</html>
+		);
+	},
+});
+
+export default HtmlTemplate;

package/templates/blog-jsx/src/includes/seo.kita.tsx

@@ -0,0 +1,28 @@
+import type { PageMetadataProps } from '@ecopages/core';
+
+const baseUrl = process.env.ECOPAGES_BASE_URL ?? 'http://localhost:3000';
+const withBaseUrl = (path: string) => `${baseUrl}/${path.replace(/^\//u, '')}`;
+
+export function Seo({
+	title,
+	description,
+	image = '/assets/images/default-og.webp',
+	url,
+	keywords,
+}: PageMetadataProps) {
+	return (
+		<>
+			<title>{title}</title>
+			<link rel="icon" type="image/x-icon" href="/assets/favicon.svg" />
+			<link rel="robots" href="/robots.txt" />
+			<meta name="description" content={description} />
+			{keywords?.length ? <meta name="keywords" content={keywords.join(',')} /> : null}
+			<meta property="og:title" content={title} />
+			<meta property="og:description" content={description} />
+			<meta property="og:image" content={withBaseUrl(image)} />
+			<meta name="twitter:title" content={title} />
+			<meta name="twitter:description" content={description} />
+			{url ? <link rel="canonical" href={withBaseUrl(url)} /> : null}
+		</>
+	);
+}

package/templates/blog-jsx/src/layouts/base-layout/base-layout.css

@@ -0,0 +1,27 @@
+.layout-container {
+	@apply min-h-screen bg-surface text-text font-sans antialiased selection:bg-accent-subtle selection:text-accent flex flex-col;
+}
+
+.site-header {
+	@apply max-w-3xl mx-auto w-full border-border border-b bg-surface/80 backdrop-blur-sm sticky top-0 z-50 transition-all duration-300;
+}
+
+.header-content {
+	@apply max-w-3xl mx-auto px-6 h-16 flex items-center justify-between;
+}
+
+.logo {
+	@apply font-serif text-xl font-bold tracking-tight text-text no-underline;
+}
+
+.main-content {
+	@apply max-w-3xl mx-auto px-6 py-12 w-full grow;
+}
+
+.site-footer {
+	@apply max-w-3xl mx-auto px-6 py-8 w-full border-t border-border mt-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-text-muted;
+}
+
+.footer-link {
+	@apply hover:text-link transition-colors;
+}

package/templates/blog-jsx/src/layouts/base-layout/base-layout.kita.tsx

@@ -0,0 +1,42 @@
+import { eco } from '@ecopages/core';
+import { ThemeToggle } from '@/components/theme-toggle.kita';
+
+export type BaseLayoutProps = {
+	children: JSX.Element | JSX.Element[];
+	id?: string;
+};
+
+export const BaseLayout = eco.component<BaseLayoutProps>({
+	dependencies: {
+		stylesheets: ['./base-layout.css'],
+		scripts: ['./base-layout.script.ts'],
+		components: [ThemeToggle],
+	},
+
+	render: ({ children }) => {
+		return (
+			<div class="layout-container">
+				<header class="site-header">
+					<div class="header-content">
+						<a href="/" class="logo">
+							EcoBlog
+						</a>
+						<ThemeToggle />
+					</div>
+				</header>
+				<main class="main-content">{children as 'safe'}</main>
+				<footer class="site-footer">
+					<p>{'© ' + new Date().getFullYear()} EcoBlog. Built with EcoPages.</p>
+					<a
+						href="https://github.com/ecopages/ecopages"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="footer-link"
+					>
+						GitHub
+					</a>
+				</footer>
+			</div>
+		);
+	},
+});

package/templates/blog-jsx/src/layouts/base-layout/base-layout.script.ts

@@ -0,0 +1,5 @@
+import { createRouter } from '@ecopages/browser-router/client';
+
+createRouter({
+	viewTransitions: true,
+});

package/templates/blog-jsx/src/pages/404.css

@@ -0,0 +1,27 @@
+.error404 {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--space);
+	padding: var(--space-lg);
+	margin: var(--space-lg) auto;
+	max-width: fit-content;
+	background: var(--color-surface-elevated);
+	border: 1px solid var(--color-border);
+	border-radius: 0.5rem;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
+}
+
+.error404 h1 {
+	margin-bottom: 0;
+}
+
+.error404 p {
+	margin-bottom: 0;
+	padding: var(--space);
+	background: var(--color-surface-muted);
+	border-radius: 0.375rem;
+}

package/templates/blog-jsx/src/pages/404.kita.tsx

@@ -0,0 +1,21 @@
+import { eco } from '@ecopages/core';
+import type { Error404TemplateProps } from '@ecopages/core';
+import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
+
+export default eco.page<Error404TemplateProps>({
+	dependencies: {
+		stylesheets: ['./404.css'],
+		components: [BaseLayout],
+	},
+
+	render: () => {
+		return (
+			<BaseLayout>
+				<div class="error404">
+					<h1>404 - Page Not Found</h1>
+					<p>The page you are looking for does not exist.</p>
+				</div>
+			</BaseLayout>
+		);
+	},
+});

package/templates/blog-jsx/src/pages/about.kita.tsx

@@ -0,0 +1,31 @@
+import { eco } from '@ecopages/core';
+import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
+
+export default eco.page({
+	layout: BaseLayout,
+
+	metadata: () => ({
+		title: 'About | Blog',
+		description: 'About the EcoPages Browser Router project',
+	}),
+
+	render: () => {
+		return (
+			<>
+				<a href="/" class="back-link">
+					← Back to Blog
+				</a>
+
+				<article class="post-content">
+					<h1>About This Project</h1>
+					<p>
+						This is a proof-of-concept for SPA navigation in EcoPages using the Browser Router. We fetch
+						full HTML, morph the DOM, and support View Transitions without a full page reload.
+					</p>
+				</article>
+
+				<div style="margin-top: 3rem"></div>
+			</>
+		);
+	},
+});

package/templates/blog-jsx/src/pages/index.css

@@ -0,0 +1,43 @@
+.post-card {
+	@apply my-6;
+}
+
+.post-card-link {
+	@apply flex flex-col sm:flex-row gap-4 no-underline text-inherit items-start transition-opacity duration-200;
+}
+
+.post-card-link:hover {
+	@apply opacity-80;
+}
+
+.post-card-link img {
+	@apply transition-transform duration-300;
+}
+
+.post-card-link:hover img {
+	@apply scale-105;
+}
+
+.post-card-image {
+	@apply shrink-0 w-full h-[240px] sm:w-[200px] sm:h-[140px] overflow-hidden rounded-lg shadow-sm;
+}
+
+.post-card-image img {
+	@apply w-full h-full object-cover;
+}
+
+.post-card-text {
+	@apply flex flex-col gap-2;
+}
+
+.post-card h2 {
+	@apply m-0 text-xl font-bold tracking-tight text-text transition-colors duration-200;
+}
+
+.post-card-link:hover h2 {
+	@apply text-accent-hover;
+}
+
+.post-card p {
+	@apply m-0 text-sm text-text-muted leading-relaxed;
+}

package/templates/blog-jsx/src/pages/index.kita.tsx

@@ -0,0 +1,83 @@
+import { eco } from '@ecopages/core';
+import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
+import { EcoImage } from '@ecopages/image-processor/component/html';
+import {
+	ezi76Gu53NklsuUnsplashJpg,
+	theodorePoncetQzephogqd7WUnsplashJpg,
+	urbanVintage78A265Wpio4UnsplashJpg,
+} from 'ecopages:images';
+
+const posts = [
+	{
+		slug: 'hello-world',
+		title: 'Hello World',
+		excerpt: 'Welcome to EcoPages!',
+		image: ezi76Gu53NklsuUnsplashJpg,
+	},
+	{
+		slug: 'browser-router',
+		title: 'Building a Browser Router',
+		excerpt: 'How we built SPA navigation.',
+		image: theodorePoncetQzephogqd7WUnsplashJpg,
+	},
+	{
+		slug: 'ssr-benefits',
+		title: 'SSR Benefits',
+		excerpt: 'Why server-side rendering matters.',
+		image: urbanVintage78A265Wpio4UnsplashJpg,
+	},
+];
+
+export default eco.page({
+	layout: BaseLayout,
+
+	dependencies: {
+		stylesheets: ['./index.css'],
+	},
+
+	metadata: () => ({
+		title: 'Blog | EcoPages',
+		description: 'A simple blog built with EcoPages Browser Router',
+	}),
+
+	render: () => {
+		return (
+			<>
+				<h1>Welcome</h1>
+				<p>A minimal blog exploring EcoPages with SPA navigation.</p>
+
+				{posts.map((post) => (
+					<article class="post-card">
+						<a href={`/posts/${post.slug}`} class="post-card-link">
+							<div class="post-card-image" data-view-transition={`hero-image-${post.slug}`}>
+								<EcoImage {...post.image} alt={post.title} />
+							</div>
+							<div class="post-card-content">
+								<h2>{post.title}</h2>
+								<p>{post.excerpt}</p>
+							</div>
+						</a>
+					</article>
+				))}
+				<article class="post-card">
+					<a href="/about" class="post-card-link">
+						<div class="post-card-content">
+							<h2>About This Project</h2>
+							<p>Learn about the EcoPages Browser Router.</p>
+						</div>
+					</a>
+				</article>
+				<article class="post-card">
+					<a href="/mdx-example" class="post-card-link">
+						<div class="post-card-content">
+							<h2>MDX Example</h2>
+							<p>See how MDX works with the Browser Router.</p>
+						</div>
+					</a>
+				</article>
+
+				<div style="margin-top: 3rem"></div>
+			</>
+		);
+	},
+});

package/templates/blog-jsx/src/pages/mdx-example.mdx

@@ -0,0 +1,48 @@
+import { BaseLayout } from '@/layouts/base-layout/base-layout.kita';
+
+export const config = {
+    layout: BaseLayout,
+};
+
+export const getMetadata = () => ({
+    title: 'MDX Example | Blog',
+    description: 'An example MDX page with the EcoPages Browser Router',
+});
+
+<a href="/" class="back-link">← Back to Blog</a>
+
+# Writing with MDX
+
+This page is written in **MDX** - a powerful combination of Markdown and JSX.
+
+## Why MDX?
+
+MDX lets you:
+
+- Write content in familiar Markdown syntax
+- Embed components directly in your content
+- Use JavaScript expressions inline
+
+## Code Example
+
+Here's some code with syntax highlighting:
+
+```tsx
+const greeting = "Hello from MDX!";
+
+export const MyComponent = () => (
+  <div>{greeting}</div>
+);
+```
+
+## Navigation
+
+Check out the other pages:
+
+- [Home](/)
+- [About](/about)
+- [Hello World Post](/posts/hello-world)
+
+---
+
+*This page demonstrates that MDX works seamlessly with the Browser Router SPA navigation.*