@askrjs/cli 0.0.2

package/templates/ssg/src/components/counter.tsx

@@ -0,0 +1,30 @@
+import { state, derive } from '@askrjs/askr';
+import { Button } from '@askrjs/ui';
+import { Box, Stack } from '@askrjs/themes/components';
+import Badge from './badge';
+
+export default function Counter() {
+  const [count, setCount] = state(0);
+  const parity = derive(() => (count() % 2 === 0 ? 'even' : 'odd'));
+
+  return (
+    <Box class="card counter">
+      <Stack gap="3">
+        <h2>Hydration check</h2>
+        <p class="text-muted">
+          This counter should still feel live after static generation.
+        </p>
+        <div class="counter-value">{count()}</div>
+        <div>
+          <Badge>{parity()}</Badge>
+        </div>
+        <div class="counter-controls">
+          <Button onPress={() => setCount((c) => Math.max(0, c - 1))}>
+            - Decrement
+          </Button>
+          <Button onPress={() => setCount((c) => c + 1)}>+ Increment</Button>
+        </div>
+      </Stack>
+    </Box>
+  );
+}

package/templates/ssg/src/components/site-shell.tsx

@@ -0,0 +1,111 @@
+import { Link } from '@askrjs/askr/router';
+import { Header } from '@askrjs/themes/components';
+import {
+  Block,
+  Box,
+  Container,
+  Section,
+  Stack,
+} from '@askrjs/themes/components';
+import { Nav, NavLink } from '@askrjs/themes/components';
+import Badge from './badge';
+
+export const navItems = [
+  { href: '/', label: 'Home' },
+  { href: '/workflow', label: 'Workflow' },
+  { href: '/content', label: 'Content' },
+  { href: '/preview', label: 'Preview' },
+] as const;
+
+export function SiteHeader() {
+  return (
+    <Header position="sticky">
+      <Container size="xl" paddingY="md">
+        <Box class="navbar-shell">
+          <Box class="navbar-brand">
+            <Link class="brand" href="/">
+              <strong>{'{{appName}}'}</strong>
+              <span>Static site generation sample</span>
+            </Link>
+          </Box>
+
+          <Nav
+            as="div"
+            aria-label="Primary navigation"
+            class="navbar-group"
+            data-align="end"
+          >
+            {navItems.map((item) => (
+              <NavLink href={item.href}>{item.label}</NavLink>
+            ))}
+          </Nav>
+        </Box>
+      </Container>
+    </Header>
+  );
+}
+
+export function PageFrame({ children }: { children?: unknown }) {
+  return (
+    <Container size="xl" paddingY="2xl">
+      <Stack gap="8">{children}</Stack>
+    </Container>
+  );
+}
+
+export function SectionHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+  actions?: unknown;
+}) {
+  return (
+    <Section class="section-header" paddingY="xl">
+      <Block gap="md">
+        <Stack gap="3" class="section-header-copy">
+          <Badge>{eyebrow}</Badge>
+          <h1>{title}</h1>
+          <p class="section-header-description">{description}</p>
+        </Stack>
+
+        {actions ?? null}
+      </Block>
+    </Section>
+  );
+}
+
+export function CardGrid({ children }: { children?: unknown }) {
+  return <Box class="card-grid">{children}</Box>;
+}
+
+export function Card({
+  eyebrow,
+  title,
+  description,
+  children,
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  children?: unknown;
+}) {
+  return (
+    <Box class="card">
+      <Stack gap="3">
+        {eyebrow ? <Badge>{eyebrow}</Badge> : null}
+        <h2>{title}</h2>
+        {description ? <p>{description}</p> : null}
+        {children}
+      </Stack>
+    </Box>
+  );
+}
+
+export function ActionRow({ children }: { children?: unknown }) {
+  return <Box class="action-row">{children}</Box>;
+}

package/templates/ssg/src/jsx.d.ts

@@ -0,0 +1,23 @@
+import type { JSXElement } from '@askrjs/askr/foundations';
+
+declare global {
+  namespace JSX {
+    interface Element extends JSXElement {
+      readonly __askrSsgJsxElementBrand?: never;
+    }
+
+    interface IntrinsicElements {
+      [elem: string]: Record<string, unknown>;
+    }
+
+    interface ElementAttributesProperty {
+      props: Record<string, unknown>;
+    }
+
+    interface ElementChildrenAttribute {
+      children: unknown;
+    }
+  }
+}
+
+export {};

package/templates/ssg/src/main.tsx

@@ -0,0 +1,8 @@
+import './styles.css';
+import { createSPA } from '@askrjs/askr/boot';
+import { pageRegistry } from './routes';
+
+await createSPA({
+  root: document.getElementById('app')!,
+  registry: pageRegistry,
+});

package/templates/ssg/src/pages/about.tsx

@@ -0,0 +1,82 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui';
+import {
+  ActionRow,
+  Card,
+  CardGrid,
+  SectionHeader,
+} from '../components/site-shell';
+
+const steps = [
+  {
+    number: '01',
+    title: 'Start the dev server',
+    command: 'npm run dev',
+    body: 'Vite runs the sample as a SPA while you edit, so page changes feel immediate.',
+  },
+  {
+    number: '02',
+    title: 'Edit a page',
+    command: 'src/pages/*.tsx',
+    body: 'Each page is a plain component. Keep view code, layout, and copy close together.',
+  },
+  {
+    number: '03',
+    title: 'Keep the route map explicit',
+    command: 'ssg.config.ts',
+    body: 'The static route list mirrors the pages the sample site actually ships.',
+  },
+  {
+    number: '04',
+    title: 'Generate and preview',
+    command: 'npm run generate && npm run preview',
+    body: 'Render the site to dist/static and verify the production output before you ship it.',
+  },
+];
+
+export default function Workflow() {
+  return (
+    <>
+      <SectionHeader
+        eyebrow="Workflow"
+        title="The authoring loop stays short."
+        description="This sample keeps the daily work obvious: edit a page, update the route map, generate static HTML, and preview the result."
+        actions={
+          <ActionRow>
+            <Button asChild>
+              <Link href="/content">See the route map</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/preview">Open the preview</Link>
+            </Button>
+          </ActionRow>
+        }
+      />
+
+      <CardGrid>
+        {steps.map((step) => (
+          <Card
+            eyebrow={step.number}
+            title={step.title}
+            description={step.body}
+          >
+            <p>
+              <code>{step.command}</code>
+            </p>
+          </Card>
+        ))}
+      </CardGrid>
+
+      <Card
+        title="Why this feels good"
+        description="There is no hidden router magic. The generated site and the dev server read the same route definitions, so the UI you edit is the UI you ship."
+      >
+        <p>
+          <code>npm run dev</code>, <code>npm run generate</code>, and{' '}
+          <code>npm run preview</code> are the only commands you need to
+          remember.
+        </p>
+      </Card>
+    </>
+  );
+}

package/templates/ssg/src/pages/content.tsx

@@ -0,0 +1,63 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui';
+import {
+  ActionRow,
+  Card,
+  CardGrid,
+  SectionHeader,
+} from '../components/site-shell';
+
+const routeMap = [
+  {
+    path: '/',
+    title: 'Home',
+    note: 'Start here and link out to the rest of the sample.',
+  },
+  {
+    path: '/workflow',
+    title: 'Workflow',
+    note: 'Show the edit, generate, and preview loop.',
+  },
+  {
+    path: '/content',
+    title: 'Content',
+    note: 'Keep the route list visible and easy to extend.',
+  },
+  {
+    path: '/preview',
+    title: 'Preview',
+    note: 'Keep one interactive page to confirm hydration.',
+  },
+] as const;
+
+export default function Content() {
+  return (
+    <>
+      <SectionHeader
+        eyebrow="Content"
+        title="Four routes, one clear source of truth."
+        description="Keep the starter small and predictable. Add more routes when the app actually needs them."
+        actions={
+          <ActionRow>
+            <Button asChild>
+              <Link href="/workflow">Read the workflow</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/preview">Open the preview</Link>
+            </Button>
+          </ActionRow>
+        }
+      />
+
+      <CardGrid>
+        {routeMap.map((route) => (
+          <Card
+            eyebrow={route.path}
+            title={route.title}
+            description={route.note}
+          />
+        ))}
+      </CardGrid>
+    </>
+  );
+}

package/templates/ssg/src/pages/example.tsx

@@ -0,0 +1,97 @@
+import { state } from '@askrjs/askr';
+import { Link } from '@askrjs/askr/router';
+import { Button, Input } from '@askrjs/ui';
+import Counter from '../components/counter';
+import {
+  ActionRow,
+  Card,
+  CardGrid,
+  SectionHeader,
+} from '../components/site-shell';
+
+const sampleUsers: Record<
+  number,
+  { name: string; email: string; note: string }
+> = {
+  1: {
+    name: 'User 1',
+    email: 'user1@example.com',
+    note: 'Replace this with your own content or connect it to real data later.',
+  },
+  2: {
+    name: 'User 2',
+    email: 'user2@example.com',
+    note: 'This stays simple on purpose so the starter remains easy to delete or extend.',
+  },
+  3: {
+    name: 'User 3',
+    email: 'user3@example.com',
+    note: 'Interactive state still hydrates after static generation without adding async complexity.',
+  },
+};
+
+export default function Preview() {
+  const [userId, setUserId] = state(1);
+  const user = sampleUsers[userId()] ?? {
+    name: `User ${userId()}`,
+    email: `user${userId()}@example.com`,
+    note: 'Use this route as a safe place to try small interactive changes.',
+  };
+
+  return (
+    <>
+      <SectionHeader
+        eyebrow="Preview"
+        title="Interactive parts still work after static generation."
+        description="Keep one page interactive so you can verify hydration, state, and resource loading without turning the template into an app."
+        actions={
+          <ActionRow>
+            <Button asChild>
+              <Link href="/workflow">Read the workflow</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/content">Review the routes</Link>
+            </Button>
+          </ActionRow>
+        }
+      />
+
+      <CardGrid>
+        <Counter />
+
+        <Card
+          eyebrow="Interactive state"
+          title="State still hydrates after generation"
+          description="Change the user id to prove the generated page still responds in the browser."
+        >
+          <div class="preview-controls">
+            <Input
+              type="number"
+              min="1"
+              step="1"
+              value={String(userId())}
+              onInput={(event: Event) => {
+                const nextValue = Number.parseInt(
+                  (event.target as HTMLInputElement).value,
+                  10
+                );
+
+                setUserId(Number.isNaN(nextValue) ? 1 : Math.max(1, nextValue));
+              }}
+            />
+          </div>
+
+          <div class="resource-panel">
+            <div class="resource-status">
+              <span class="badge">Ready</span>
+              <span>Hydrated preview</span>
+            </div>
+            <h3>{user.name}</h3>
+            <p>{user.email}</p>
+            <p class="text-muted">{user.note}</p>
+          </div>
+        </Card>
+      </CardGrid>
+    </>
+  );
+}

package/templates/ssg/src/pages/home.tsx

@@ -0,0 +1,51 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui';
+import {
+  ActionRow,
+  Card,
+  CardGrid,
+  SectionHeader,
+} from '../components/site-shell';
+
+const highlights = [
+  {
+    title: 'Fast feedback',
+    body: 'Run npm run dev and edit a page to stay in a SPA-style authoring loop.',
+  },
+  {
+    title: 'Deterministic output',
+    body: 'Keep one explicit route registry in src/routes.tsx so dev and generated output cannot drift.',
+  },
+  {
+    title: 'Hydrated preview',
+    body: 'Keep one interactive route so you can verify static output and browser behavior together.',
+  },
+];
+
+export default function Home() {
+  return (
+    <>
+      <SectionHeader
+        eyebrow="Static site generation"
+        title="Build a multi-page site, then ship it as plain HTML."
+        description="This sample keeps the loop small: author routes, preview in the SPA dev server, generate static files, and inspect the output."
+        actions={
+          <ActionRow>
+            <Button asChild>
+              <Link href="/workflow">See the workflow</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/preview">Open the preview</Link>
+            </Button>
+          </ActionRow>
+        }
+      />
+
+      <CardGrid>
+        {highlights.map((highlight) => (
+          <Card title={highlight.title} description={highlight.body} />
+        ))}
+      </CardGrid>
+    </>
+  );
+}

package/templates/ssg/src/resources/user.ts

@@ -0,0 +1,15 @@
+import { resource } from '@askrjs/askr/resources';
+
+export function fetchUser(id: number) {
+  return resource(
+    async ({ signal }: { signal: AbortSignal }) => {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      if (signal.aborted) {
+        throw new DOMException('Request aborted', 'AbortError');
+      }
+      return { id, name: `User ${id}`, email: `user${id}@example.com` };
+    },
+    [id]
+  );
+}

package/templates/ssg/src/routes.tsx

@@ -0,0 +1,15 @@
+import { createRouteRegistry, group, route } from '@askrjs/askr/router';
+import AppLayout from './app';
+import Home from './pages/home';
+import Workflow from './pages/about';
+import Content from './pages/content';
+import Preview from './pages/example';
+
+export const pageRegistry = createRouteRegistry(() => {
+  group({ layout: AppLayout }, () => {
+    route('/', Home);
+    route('/workflow', Workflow);
+    route('/content', Content);
+    route('/preview', Preview);
+  });
+});

package/templates/ssg/src/styles.css

@@ -0,0 +1,89 @@
+@import '@askrjs/themes/default';
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ak-color-fg);
+  font-family: var(--ak-font-family);
+  line-height: 1.5;
+  background: var(--ak-color-bg);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.site-shell {
+  min-height: 100vh;
+}
+
+.site-main {
+  padding-block: clamp(2rem, 4vw, 4rem);
+}
+
+.brand {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.brand strong {
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
+}
+
+.brand span {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-sm);
+}
+
+.card-grid {
+  display: grid;
+  gap: var(--ak-space-lg);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.text-muted {
+  color: var(--ak-color-text-muted);
+}
+
+code {
+  padding: 0.15em 0.4em;
+  border-radius: 0.4rem;
+  background: var(--ak-color-surface-muted);
+  font-size: 0.9em;
+}
+
+.counter-value {
+  font-size: clamp(2rem, 4vw, 3.25rem);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: -0.05em;
+}
+
+.counter-controls,
+.preview-controls,
+.resource-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-sm);
+  align-items: center;
+}
+
+.resource-panel {
+  display: grid;
+  gap: var(--ak-space-sm);
+}

package/templates/ssg/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css' {
+  const css: string;
+
+  export default css;
+}

package/templates/ssg/ssg.config.ts

@@ -0,0 +1,34 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import type { DocumentRenderArgs } from '@askrjs/askr/ssg';
+import { pageRegistry } from './src/routes';
+
+export const outputDir = './dist';
+
+let clientTemplate: string | undefined;
+
+function renderDocument({ appHtml }: DocumentRenderArgs) {
+  clientTemplate ??= readFileSync(
+    resolve(process.cwd(), '.askr/client/index.html'),
+    'utf8'
+  );
+
+  const appRoot = /<div([^>]*\bid=["']app["'][^>]*)>\s*<\/div>/i;
+  if (!appRoot.test(clientTemplate)) {
+    throw new Error('Built client template must contain an empty #app root.');
+  }
+
+  return clientTemplate.replace(appRoot, `<div$1>${appHtml}</div>`);
+}
+
+export const staticConfig = {
+  registry: pageRegistry,
+  outputDir,
+  document: renderDocument,
+  assets: [
+    {
+      from: resolve(process.cwd(), '.askr/client/assets'),
+      to: 'assets',
+    },
+  ],
+};

package/templates/ssg/tests/app.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { navItems } from '../src/app';
+
+describe('App shell', () => {
+  it('exposes the workflow-focused navigation order', () => {
+    expect(navItems.map((item) => item.label)).toEqual([
+      'Home',
+      'Workflow',
+      'Content',
+      'Preview',
+    ]);
+    expect(navItems.map((item) => item.href)).toEqual([
+      '/',
+      '/workflow',
+      '/content',
+      '/preview',
+    ]);
+  });
+});

package/templates/ssg/tests/components/counter.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vite-plus/test';
+import { renderToString } from '@askrjs/askr/ssr';
+import Counter from '../../src/components/counter';
+
+describe('Counter', () => {
+  it('renders the initial hydration check view', () => {
+    const html = renderToString(() => <Counter />);
+
+    expect(html).toContain('Hydration check');
+    expect(html).toContain(
+      'This counter should still feel live after static generation.'
+    );
+    expect(html).toContain('0');
+    expect(html).toContain('even');
+    expect(html).toContain('- Decrement');
+    expect(html).toContain('+ Increment');
+  });
+});

package/templates/ssg/tests/resources.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vite-plus/test';
+import { fetchUser } from '../src/resources/user';
+
+describe('Resources', () => {
+  it('creates a resource for fetching user data', () => {
+    // Resources are called during component render
+    // Here we just verify the function is defined
+    expect(fetchUser).toBeDefined();
+    expect(typeof fetchUser).toBe('function');
+  });
+});