@tiniestcloud/create 0.0.0-stage → 0.1.6

package/templates/app/src/lib/tiny.tsx

@@ -0,0 +1,59 @@
+/**
+ * React helpers over the Tiniest Cloud SDK. `tiny` itself is a global — its types are in
+ * src/tiny.d.ts — so anything not wrapped here is called directly: `await tiny.db.set(key, value)`.
+ */
+import { useEffect, useState } from "react"
+
+/** The signed-in person: undefined while loading, null when signed out. */
+export function useMe(): Tiny.User | null | undefined {
+  const [me, setMe] = useState<Tiny.User | null | undefined>(undefined)
+  useEffect(() => {
+    let live = true
+    tiny.me().then(
+      (user) => live && setMe(user),
+      () => live && setMe(null)
+    )
+    return () => {
+      live = false
+    }
+  }, [])
+  return me
+}
+
+/**
+ * Every entry under a prefix, kept live: re-renders within a second of any change, from any
+ * device. `entries` is undefined until the first load.
+ *
+ *   const { entries } = useEntries<Customer>("customer:", { where: { status: "active" } })
+ *   const { entries: latest } = useEntries<Order>("order:", { order: "-$created_at", limit: 20 })
+ */
+export function useEntries<T>(prefix: string, options?: Tiny.Filter & Tiny.Ordered & { limit?: number }) {
+  const [entries, setEntries] = useState<Tiny.Entry<T>[] | undefined>(undefined)
+  const [error, setError] = useState<Tiny.TinyError | null>(null)
+  const where = JSON.stringify(options?.where ?? null)
+  const order = options?.order
+  const limit = options?.limit
+  useEffect(() => {
+    setError(null)
+    return tiny.db.watch<T>(prefix, setEntries, {
+      where: JSON.parse(where) ?? undefined,
+      order,
+      limit,
+      onError: setError,
+    })
+  }, [prefix, where, order, limit])
+  return { entries, error }
+}
+
+/** Shown when the page is opened anywhere but Tiniest Cloud, e.g. by `npm run dev`. */
+export function NotOnTiniestCloud() {
+  return (
+    <main className="mx-auto flex min-h-svh max-w-md flex-col justify-center gap-2 p-6 text-sm">
+      <h1 className="text-base font-medium">This app runs on Tiniest Cloud</h1>
+      <p className="text-muted-foreground">
+        Sign-in, data and AI come from the platform, so they only work once the app is
+        deployed. Build it, deploy the dist folder, and open the app&apos;s link.
+      </p>
+    </main>
+  )
+}

package/templates/app/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn"

package/templates/app/src/main.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import "./index.css"
+import App from "./App.tsx"
+import { NotOnTiniestCloud } from "@/lib/tiny"
+import { startTheme } from "@/lib/theme"
+
+// Light, dark or the device's setting, as the person chose (src/lib/theme.ts); the colours
+// themselves live in index.css.
+startTheme()
+
+// `tiny` exists only where Tiniest Cloud serves the app. Anywhere else — `npm run dev` included —
+// say so, rather than let every screen fail on its first call.
+const onPlatform = typeof window.tiny !== "undefined"
+if (onPlatform && "serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js")
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>{onPlatform ? <App /> : <NotOnTiniestCloud />}</StrictMode>
+)

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

@@ -0,0 +1,10 @@
+/**
+ * The first screen. Every screen is a file in src/pages; App.tsx frames them and, once there is
+ * more than one, routes to each (React Router). Lay this one out for what it holds: a sidebar for
+ * several areas, a grid of cards for things people browse, a table for records, a list with its
+ * detail beside it; a narrow centred column only for one focused task. Pieces it shares with
+ * other screens go in src/components, its own hooks in src/hooks.
+ */
+export default function Home() {
+  return <div />
+}

package/templates/app/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/app/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/app/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/app/vite.config.ts

@@ -0,0 +1,14 @@
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "./src"),
+    },
+  },
+})

package/templates/site/AGENTS.md

@@ -0,0 +1,23 @@
+# This website runs on Tiniest Cloud
+
+Astro and Tailwind CSS, built to static pages and deployed to Tiniest Cloud.
+
+- Every file in src/pages is a page: src/pages/pricing.astro is served at /pricing/. Link to pages
+  with a trailing slash. Keep Astro's static output; there is no server to render on request.
+- Where files go: pages in `src/pages/`, the frame they share in `src/layouts/`, pieces several
+  pages use in `src/components/`, styles in `src/styles/`, images and icons in `public/`. A file
+  past about 300 lines is doing too much: move its parts into components.
+- `npm run build` writes the site to `dist`; deploy this folder with `dist` built inside (no
+  node_modules, no .env files): `dist` is served, and the rest is kept as the source. When
+  starting the dev server, use `astro dev --background` (`astro dev stop` to end it).
+- A form that keeps what visitors send (sign-ups, contact requests) uses Tiniest Cloud's storage:
+  add `<script is:inline src="/sdk.js"></script>` to the layout's head, and see the Tiniest
+  Cloud guide on visitors with no account. Types for it are at /sdk.d.ts on the platform.
+- Logic that must run on the server (checking or pricing what a form sends) is a backend function:
+  `public/_functions/<name>.js`, called from the page with `tiny.call("<name>", input)`. See the
+  Tiniest Cloud guide, "Server code".
+- Design: before the first page, read the tiny-design skill — `.agents/skills/tiny-design/`
+  (the same files are in `.claude/skills/` for Claude Code): SKILL.md, then website.md. Where
+  that folder is missing, `tiny_guide` with topic `website` returns the same. If the person has
+  a brand or design standards of their own, those come first.
+- Astro's docs: https://docs.astro.build

package/templates/site/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/site/README.md

@@ -0,0 +1,10 @@
+# Site
+
+Built with Astro and Tailwind CSS, and hosted on Tiniest Cloud.
+
+    npm install
+    npm run dev       # work on it locally
+    npm run build     # the site is in dist/
+
+Deploy this folder, with `dist` built inside, to Tiniest Cloud: `dist` is served, and the rest is
+kept as the project's source.

package/templates/site/astro.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()]
+  }
+});

package/templates/site/gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

package/templates/site/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "site",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^7.3.5",
+    "tailwindcss": "^4.3.3"
+  },
+  "allowScripts": {
+    "esbuild": true
+  }
+}

package/templates/site/src/layouts/Layout.astro

@@ -0,0 +1,30 @@
+---
+import "../styles/global.css";
+
+interface Props {
+	title: string;
+	description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>{title}</title>
+		{description && <meta name="description" content={description} />}
+	</head>
+	<body class="bg-white text-neutral-900 antialiased">
+		<header class="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
+			<a href="/" class="font-medium">Site</a>
+			<nav class="flex gap-6 text-sm text-neutral-600">
+				<a href="/about/" class="hover:text-neutral-900">About</a>
+			</nav>
+		</header>
+		<main class="mx-auto max-w-6xl px-6 pb-24">
+			<slot />
+		</main>
+	</body>
+</html>

package/templates/site/src/pages/about.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="About · Site">
+	<section class="py-16">
+		<h1 class="text-3xl font-semibold tracking-tight">About</h1>
+		<p class="mt-4 max-w-xl text-neutral-600">This page is src/pages/about.astro, served at /about/.</p>
+	</section>
+</Layout>

package/templates/site/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Site" description="A website on Tiniest Cloud.">
+	<section class="py-16">
+		<h1 class="text-4xl font-semibold tracking-tight">Site</h1>
+		<p class="mt-4 max-w-xl text-lg text-neutral-600">Every file in src/pages becomes a page.</p>
+	</section>
+</Layout>

package/templates/site/src/styles/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/site/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}