@pyreon/create-zero 0.14.0 → 0.16.0

package/templates/blog/src/lib/posts.ts

@@ -0,0 +1,45 @@
+import type { ComponentFn } from "@pyreon/core"
+
+export interface PostMeta {
+  title: string
+  date: string
+  description: string
+  tags?: string[]
+}
+
+export interface Post extends PostMeta {
+  slug: string
+  Component: ComponentFn<unknown>
+}
+
+interface PostModule {
+  meta: PostMeta
+  default: ComponentFn<unknown>
+}
+
+/**
+ * Enumerate all `.tsx` posts in `src/content/posts/` at build time. Eagerly
+ * loads modules so SSG renders see frontmatter immediately. The slug is the
+ * filename without extension (`welcome.tsx` → `welcome`).
+ */
+const modules = import.meta.glob<PostModule>("../content/posts/*.tsx", {
+  eager: true,
+})
+
+export const posts: Post[] = Object.entries(modules)
+  .map(([path, mod]) => {
+    const slug = path
+      .split("/")
+      .pop()!
+      .replace(/\.tsx$/, "")
+    return { ...mod.meta, slug, Component: mod.default }
+  })
+  .sort((a, b) => (a.date < b.date ? 1 : -1))
+
+export function postBySlug(slug: string): Post | undefined {
+  return posts.find((p) => p.slug === slug)
+}
+
+export function postSlugs(): string[] {
+  return posts.map((p) => p.slug)
+}

package/templates/blog/src/routes/_layout.tsx

@@ -0,0 +1,40 @@
+import { RouterView } from "@pyreon/router"
+import { Link } from "@pyreon/zero/link"
+import { ThemeToggle } from "@pyreon/zero/theme"
+
+export function layout() {
+  return (
+    <>
+      <header class="site-header">
+        <div class="site-header-inner">
+          <Link href="/" class="site-logo">
+            Blog
+          </Link>
+          <nav class="site-nav">
+            <Link href="/" prefetch="hover" exactActiveClass="nav-active">
+              Home
+            </Link>
+            <Link href="/blog" prefetch="hover" activeClass="nav-active">
+              All posts
+            </Link>
+            <Link href="/about" prefetch="hover" exactActiveClass="nav-active">
+              About
+            </Link>
+            <a href="/api/rss" title="RSS feed">
+              RSS
+            </a>
+            <ThemeToggle />
+          </nav>
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="site-main-inner">
+          <RouterView />
+        </div>
+      </main>
+
+      <footer class="site-footer">Built with Pyreon Zero.</footer>
+    </>
+  )
+}

package/templates/blog/src/routes/about.tsx

@@ -0,0 +1,28 @@
+import { useHead } from "@pyreon/head"
+
+export const meta = {
+  title: "About",
+  description: "About this blog.",
+}
+
+export default function About() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        This is a Pyreon Zero blog. Edit <code>src/routes/about.tsx</code> to replace this
+        with your bio.
+      </p>
+      <p>
+        The blog renders statically — every page on this site is plain HTML on disk after{" "}
+        <code>bun run build</code>. Posts live in <code>src/content/posts/</code>; drop a new
+        TSX file there and it auto-appears in the listings and RSS feed.
+      </p>
+    </>
+  )
+}

package/templates/blog/src/routes/api/rss.ts

@@ -0,0 +1,55 @@
+import { posts } from "../../lib/posts"
+
+/**
+ * Site origin used in feed URLs. Set this to your deployed domain — RSS readers
+ * resolve relative links against it. The placeholder works locally and at any
+ * preview URL but should be updated before publishing.
+ */
+const SITE_ORIGIN = "https://example.com"
+const SITE_TITLE = "Blog"
+const SITE_DESCRIPTION = "A Pyreon Zero blog."
+
+function escape(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;")
+}
+
+function rfc822(date: string): string {
+  // Accepts YYYY-MM-DD; outputs RFC 822 used by RSS readers
+  return new Date(`${date}T00:00:00Z`).toUTCString()
+}
+
+export function GET() {
+  const items = posts
+    .map((p) => {
+      const url = `${SITE_ORIGIN}/blog/${p.slug}`
+      return `    <item>
+      <title>${escape(p.title)}</title>
+      <link>${url}</link>
+      <guid>${url}</guid>
+      <pubDate>${rfc822(p.date)}</pubDate>
+      <description>${escape(p.description)}</description>
+    </item>`
+    })
+    .join("\n")
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escape(SITE_TITLE)}</title>
+    <link>${SITE_ORIGIN}</link>
+    <description>${escape(SITE_DESCRIPTION)}</description>
+    <language>en-us</language>
+${items}
+  </channel>
+</rss>
+`
+
+  return new Response(xml, {
+    headers: { "content-type": "application/rss+xml; charset=utf-8" },
+  })
+}

package/templates/blog/src/routes/blog/[slug].tsx

@@ -0,0 +1,73 @@
+import type { GetStaticPaths } from "@pyreon/zero/server"
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { useRoute } from "@pyreon/router"
+import { postBySlug, postSlugs } from "../../lib/posts"
+
+/**
+ * Enumerate the dynamic `:slug` values at build time. The SSG plugin expands
+ * `/blog/:slug` × this list into one prerendered HTML file per post
+ * (`dist/blog/<slug>/index.html`). Without this export the dynamic route
+ * is silently skipped during SSG auto-detect — only the static `/blog`
+ * index would be prerendered, and `pyreon doctor --check-ssg` warns
+ * about it.
+ */
+export const getStaticPaths: GetStaticPaths<{ slug: string }> = () =>
+  postSlugs().map((slug) => ({ params: { slug } }))
+
+export default function PostPage() {
+  // useRoute() returns an accessor — call it to read the resolved route.
+  const route = useRoute()
+  const slug = route().params.slug
+  const post = postBySlug(slug)
+
+  if (!post) {
+    return (
+      <>
+        <h1>Post not found</h1>
+        <p>
+          No post with slug <code>{slug}</code>.
+        </p>
+        <p>
+          <Link href="/blog">← Back to all posts</Link>
+        </p>
+      </>
+    )
+  }
+
+  useHead({
+    title: post.title,
+    meta: [
+      { name: "description", content: post.description },
+      { property: "og:title", content: post.title },
+      { property: "og:description", content: post.description },
+      { property: "og:type", content: "article" },
+    ],
+  })
+
+  const Body = post.Component
+
+  return (
+    <article>
+      <header class="post-header">
+        <h1>{post.title}</h1>
+        <div class="post-meta">{post.date}</div>
+        {post.tags && post.tags.length > 0 ? (
+          <div class="tags">
+            {post.tags.map((t) => (
+              <span class="tag">#{t}</span>
+            ))}
+          </div>
+        ) : null}
+      </header>
+
+      <Body />
+
+      <hr />
+
+      <p>
+        <Link href="/blog">← Back to all posts</Link>
+      </p>
+    </article>
+  )
+}

package/templates/blog/src/routes/blog/index.tsx

@@ -0,0 +1,43 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { posts } from "../../lib/posts"
+
+export const meta = {
+  title: "All posts",
+  description: "Every post on this blog, newest first.",
+}
+
+export default function BlogIndex() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  return (
+    <>
+      <h1>All posts</h1>
+      <p>{posts.length} posts in total.</p>
+
+      <ul class="post-list">
+        {posts.map((post) => (
+          <li>
+            <h2 class="post-title">
+              <Link href={`/blog/${post.slug}`} prefetch="hover">
+                {post.title}
+              </Link>
+            </h2>
+            <div class="post-meta">{post.date}</div>
+            <p class="post-summary">{post.description}</p>
+            {post.tags && post.tags.length > 0 ? (
+              <div class="tags">
+                {post.tags.map((t) => (
+                  <span class="tag">#{t}</span>
+                ))}
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}

package/templates/blog/src/routes/index.tsx

@@ -0,0 +1,52 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { posts } from "../lib/posts"
+
+export const meta = {
+  title: "Blog",
+  description: "A statically-rendered Pyreon Zero blog.",
+}
+
+export default function Home() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  // Show the 5 most recent posts on the homepage
+  const recent = posts.slice(0, 5)
+
+  return (
+    <>
+      <h1>Blog</h1>
+      <p>Recent writing, statically rendered. Subscribe via <a href="/api/rss">RSS</a>.</p>
+
+      <ul class="post-list">
+        {recent.map((post) => (
+          <li>
+            <h2 class="post-title">
+              <Link href={`/blog/${post.slug}`} prefetch="hover">
+                {post.title}
+              </Link>
+            </h2>
+            <div class="post-meta">{post.date}</div>
+            <p class="post-summary">{post.description}</p>
+            {post.tags && post.tags.length > 0 ? (
+              <div class="tags">
+                {post.tags.map((t) => (
+                  <span class="tag">#{t}</span>
+                ))}
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+
+      {posts.length > recent.length ? (
+        <p>
+          <Link href="/blog">View all {posts.length} posts →</Link>
+        </p>
+      ) : null}
+    </>
+  )
+}

package/templates/blog/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": ["bun", "vite/client"]
+  },
+  "include": ["src", "env.d.ts"]
+}

package/templates/dashboard/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "pyreon": {
+      "command": "bunx",
+      "args": ["@pyreon/mcp"]
+    }
+  }
+}

package/templates/dashboard/CLAUDE.md

@@ -0,0 +1,50 @@
+# Dashboard (Pyreon Zero)
+
+A SaaS-shape application starter. Marketing site at `/`, auth-gated app under `/app/*`, with a built-in invoice export demo using `@pyreon/document-primitives` — the same component tree renders in the browser AND exports to PDF/email.
+
+## Reactivity (Pyreon, not React)
+
+- `signal()` not `useState`; `computed()` not `useMemo`; `effect()` not `useEffect`.
+- Write signals via `signal.set(value)` or `signal.update(fn)`.
+- In JSX, signals auto-call: `{count}` (compiler inserts `()`).
+
+## JSX
+
+- `class=` not `className`; `for=` not `htmlFor`; camelCase events.
+
+## Auth + DB
+
+`src/lib/auth.ts` and `src/lib/db.ts` hold the auth + data layer. They
+ship with **in-memory implementations** so the dashboard runs out of the
+box on a fresh clone — every dev-server restart wipes the data.
+
+To wire a real backend, run:
+
+```bash
+bunx create-pyreon-app --template dashboard --integrations supabase,email
+```
+
+The scaffolder overwrites `auth.ts` + `db.ts` with Supabase-backed
+implementations and writes `src/lib/email.ts` + `src/emails/welcome.tsx`
+for Resend. The exported function signatures stay identical, so no route
+files need to change. On an existing project, you can run the same
+scaffolder flags or hand-edit the two files — the surface is small.
+
+## Routes
+
+- `/` — marketing landing
+- `/login`, `/signup` — auth forms
+- `/app/dashboard` — overview cards
+- `/app/users` — table view of users
+- `/app/invoices` — invoice list
+- `/app/invoices/:id` — invoice detail with **"Export to PDF" / "Send email"** buttons (the headline demo)
+- `/app/settings/*` — account / profile / billing settings
+
+## Commands
+
+```bash
+bun run dev       # dev server
+bun run build     # production build
+bun run preview   # serve build
+bun run doctor    # check for React patterns
+```

package/templates/dashboard/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script>(()=> {try{var t=localStorage.getItem("dashboard-theme");var r=t==="light"?"light":t==="dark"?"dark":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.dataset.theme=r}catch(e){}})()</script>
+    <!--pyreon-head-->
+  </head>
+  <body>
+    <div id="app"><!--pyreon-app--></div>
+    <!--pyreon-scripts-->
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>

package/templates/dashboard/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#6d5cff"/>
+  <path d="M8 22l5-12 5 8 6-4" stroke="#fafafa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/templates/dashboard/src/entry-client.ts

@@ -0,0 +1,5 @@
+import "./global.css"
+import { routes } from "virtual:zero/routes"
+import { startClient } from "@pyreon/zero/client"
+
+startClient({ routes })