@pyreon/create-zero 0.1.1

package/templates/default/src/routes/posts/[id].tsx

@@ -0,0 +1,97 @@
+import { useHead } from '@pyreon/head'
+import { useLoaderData } from '@pyreon/router'
+import type { LoaderContext } from '@pyreon/zero'
+import { Link } from '@pyreon/zero/link'
+
+interface Post {
+  id: number
+  title: string
+  excerpt: string
+  body: string
+  author: string
+  date: string
+}
+
+const POSTS: Record<string, Post> = {
+  '1': {
+    id: 1,
+    title: 'Getting Started with Pyreon Zero',
+    excerpt: 'Learn how to build your first app.',
+    body: "Pyreon Zero makes it incredibly easy to build modern web applications. Start by creating a new project with `bun create zero my-app`, then drop your first route file into `src/routes/`. The file-based router automatically picks up new files and generates the route tree for you.\n\nEvery route can export a `loader` for server-side data fetching, a `guard` for navigation protection, and `meta` for SEO metadata. The component itself uses JSX with Pyreon's signal-based reactivity — no virtual DOM overhead, just surgical DOM updates.",
+    author: 'Zero Team',
+    date: '2026-03-01',
+  },
+  '2': {
+    id: 2,
+    title: 'Understanding Signals',
+    excerpt: 'Deep dive into fine-grained reactivity.',
+    body: "Signals are the foundation of Pyreon's reactivity system. Unlike the virtual DOM approach used by React, signals track exactly which DOM nodes depend on which pieces of state. When a signal changes, only the precise text nodes or attributes that reference it are updated.\n\nThis means your app does zero diffing, zero reconciliation, and zero unnecessary re-renders. A counter component that updates a number on screen? Only that one text node is touched. Everything else stays completely untouched.",
+    author: 'Zero Team',
+    date: '2026-03-05',
+  },
+  '3': {
+    id: 3,
+    title: 'Server-Side Rendering Made Simple',
+    excerpt: 'Pick the right strategy for every page.',
+    body: 'Zero supports four rendering strategies out of the box: SSR (server-side rendering), SSG (static site generation), ISR (incremental static regeneration), and SPA (single-page application). You can set a default mode in your config and override it per-route.\n\nSSR renders fresh HTML on every request. SSG pre-renders pages at build time. ISR combines both — serving cached static pages while revalidating in the background. SPA skips server rendering entirely for fully client-side pages.',
+    author: 'Zero Team',
+    date: '2026-03-08',
+  },
+  '4': {
+    id: 4,
+    title: 'Deploying to Production',
+    excerpt: 'From build to production with any platform.',
+    body: "Zero's adapter system makes deployment straightforward. Choose your target platform — Node.js, Bun, Vercel, Cloudflare Workers, or Netlify — and Zero generates the right output for that platform.\n\nThe Node adapter creates a standalone HTTP server. The Bun adapter leverages Bun.serve() for maximum performance. The static adapter exports a fully pre-rendered site ready for any CDN or static hosting platform.",
+    author: 'Zero Team',
+    date: '2026-03-10',
+  },
+  '5': {
+    id: 5,
+    title: 'Optimizing Performance',
+    excerpt: 'Built-in performance features.',
+    body: 'Zero includes a comprehensive performance toolkit. The font plugin automatically optimizes Google Fonts with preconnect hints and font-display:swap. The <Image> component provides lazy loading with IntersectionObserver, responsive srcset, and blur-up placeholders.\n\nThe <Link> component prefetches routes on hover or viewport entry, making navigation feel instant. Built-in cache middleware sets optimal Cache-Control headers — immutable caching for hashed assets, stale-while-revalidate for pages.',
+    author: 'Zero Team',
+    date: '2026-03-12',
+  },
+}
+
+export async function loader(ctx: LoaderContext) {
+  await new Promise((r) => setTimeout(r, 50))
+  const post = POSTS[ctx.params.id]
+  if (!post) throw new Error('Post not found')
+  return { post }
+}
+
+export default function PostDetail() {
+  const data = useLoaderData<{ post: Post }>()
+  const post = data.post
+
+  useHead({
+    title: `${post.title} — Pyreon Zero`,
+    meta: [{ name: 'description', content: post.excerpt }],
+  })
+
+  return (
+    <article class="post-detail">
+      <Link
+        href="/posts"
+        style="color: var(--c-text-muted); font-size: 0.85rem; display: inline-block; margin-bottom: var(--space-lg);"
+      >
+        ← Back to Posts
+      </Link>
+
+      <h1>{post.title}</h1>
+
+      <div class="post-meta">
+        <span>{post.author}</span>
+        <span>{post.date}</span>
+      </div>
+
+      <div class="post-body">
+        {post.body.split('\n\n').map((paragraph) => (
+          <p style="margin-bottom: var(--space-lg);">{paragraph}</p>
+        ))}
+      </div>
+    </article>
+  )
+}

package/templates/default/src/routes/posts/index.tsx

@@ -0,0 +1,115 @@
+import { useHead } from '@pyreon/head'
+import { useLoaderData } from '@pyreon/router'
+import type { LoaderContext } from '@pyreon/zero'
+import { Link } from '@pyreon/zero/link'
+
+interface Post {
+  id: number
+  title: string
+  excerpt: string
+}
+
+const POSTS: Post[] = [
+  {
+    id: 1,
+    title: 'Getting Started with Pyreon Zero',
+    excerpt:
+      'Learn how to build your first app with file-based routing, SSR, and signals.',
+  },
+  {
+    id: 2,
+    title: 'Understanding Signals',
+    excerpt:
+      'Deep dive into fine-grained reactivity — how signals replace the virtual DOM.',
+  },
+  {
+    id: 3,
+    title: 'Server-Side Rendering Made Simple',
+    excerpt:
+      'SSR, SSG, ISR — pick the right strategy for every page in your app.',
+  },
+  {
+    id: 4,
+    title: 'Deploying to Production',
+    excerpt:
+      'From bun build to production with Node, Bun, Vercel, or Cloudflare adapters.',
+  },
+  {
+    id: 5,
+    title: 'Optimizing Performance',
+    excerpt:
+      'Font loading, image optimization, smart caching, and link prefetching out of the box.',
+  },
+]
+
+export async function loader(_ctx: LoaderContext) {
+  // Simulate network delay — in a real app, fetch from a database or API
+  await new Promise((r) => setTimeout(r, 100))
+  return { posts: POSTS }
+}
+
+export default function PostsIndex() {
+  const data = useLoaderData<{ posts: Post[] }>()
+
+  useHead({
+    title: 'Posts — Pyreon Zero',
+    meta: [
+      {
+        name: 'description',
+        content: "Example posts showcasing Zero's data loading.",
+      },
+    ],
+  })
+
+  return (
+    <>
+      <div class="page-header">
+        <span class="badge">Data Loading</span>
+        <h1 style="margin-top: var(--space-md);">Posts</h1>
+        <p>
+          Each post is loaded via a <code>loader</code> function — server-side
+          data fetching that runs before the route renders.
+        </p>
+      </div>
+
+      <div class="posts-grid">
+        {data.posts.map((post) => (
+          <Link
+            href={`/posts/${post.id}`}
+            class="card post-card"
+            prefetch="hover"
+          >
+            <span class="post-id">#{post.id}</span>
+            <div>
+              <h3>{post.title}</h3>
+              <p>{post.excerpt}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      <div
+        class="code-block"
+        style="max-width: 520px; margin: var(--space-2xl) auto 0;"
+      >
+        <div class="code-block-header">
+          <span>posts/index.tsx</span>
+        </div>
+        <pre>
+          <code>
+            <span class="cm">{'// Export a loader — runs on the server'}</span>
+            <span class="kw">export async function</span>{' '}
+            <span class="fn">loader</span>(ctx) {'{'}
+            <span class="kw">const</span> posts = <span class="kw">await</span>{' '}
+            db.posts.<span class="fn">findMany</span>()
+            <span class="kw">return</span> {'{'} posts {'}'}
+            {'}'}
+            <span class="cm">{'// Access data in the component'}</span>
+            <span class="kw">const</span> data ={' '}
+            <span class="fn">useLoaderData</span>()
+          </code>
+        </pre>
+      </div>
+    </>
+  )
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "@pyreon/core",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "env.d.ts"]
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,29 @@
+import pyreon from '@pyreon/vite-plugin'
+import zero from '@pyreon/zero'
+import { fontPlugin } from '@pyreon/zero/font'
+import { seoPlugin } from '@pyreon/zero/seo'
+
+export default {
+  plugins: [
+    pyreon(),
+    zero({ mode: 'ssr', ssr: { mode: 'stream' } }),
+
+    // Google Fonts — self-hosted at build time, CDN in dev
+    fontPlugin({
+      google: ['Inter:wght@400;500;600;700;800', 'JetBrains Mono:wght@400'],
+      // Size-adjusted fallbacks to eliminate CLS while fonts load
+      fallbacks: {
+        Inter: { fallback: 'Arial', sizeAdjust: 1.07, ascentOverride: 90 },
+      },
+    }),
+
+    // Generate sitemap.xml and robots.txt at build time
+    seoPlugin({
+      sitemap: { origin: 'https://example.com' },
+      robots: {
+        rules: [{ userAgent: '*', allow: ['/'] }],
+        sitemap: 'https://example.com/sitemap.xml',
+      },
+    }),
+  ],
+}