create-caspian-app 1.6.4 → 1.8.1

package/dist/src/app/error.py

@@ -1,95 +1,94 @@
-from typing import Optional
-from casp.component_decorator import html
-from casp.layout import Metadata
-
-
-metadata = Metadata(
-    title="Application Error",
-    description="An unexpected error occurred.",
-    extra={"robots": "noindex, nofollow"},
-)
-
-
-def page(error_message: str, error_trace: Optional[str] = None):
-    return html(r"""
-<main class="container py-10">
-  <div class="mx-auto max-w-2xl rounded bg-white p-6 shadow-sm">
-    <div class="flex items-start gap-4">
-      <svg class="h-10 w-10 text-red-600"
-           viewBox="0 0 24 24"
-           fill="none"
-           xmlns="http://www.w3.org/2000/svg"
-           aria-hidden="true">
-        <path d="M11.001 2a1 1 0 0 1 .998 0L21 7v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7l8.001-5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M12 8v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M12 16h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-
-      <div class="flex-1">
-        <h1 class="text-2xl font-semibold text-red-600">Something went wrong</h1>
-        <p class="mt-2 text-sm text-gray-600">
-          We're sorry—an unexpected error occurred. Try reloading or return to
-          the homepage.
-        </p>
-        <p class="mt-3 text-sm text-gray-700">{{ error_message }}</p>
-
-        <div class="mt-4 flex flex-wrap gap-2">
-          <a href="/"
-             class="inline-block rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800 hover:bg-gray-200">
-            Home
-          </a>
-          <button class="inline-block rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
-                  onclick="window.location.reload()">Reload</button>
-          {% if error_trace %}
-            <button class="inline-block rounded border border-gray-200 bg-transparent px-3 py-1.5 text-sm text-black"
-                    onclick="setShowTrace(current => !current)">{showTrace ? "Hide details" : "Show details"}</button>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-
-    {% if error_trace %}
-      <section class="mt-4" hidden="{!showTrace}">
-        <div class="mb-2 flex items-center justify-between">
-          <div class="text-xs text-gray-500">Error details (development only)</div>
-          <div class="flex gap-2">
-            <button class="rounded border bg-gray-100 px-2 py-1 text-xs text-black"
-                    onclick="copyTrace()">{traceCopied ? "Copied" : "Copy"}</button>
-            <button class="rounded border bg-gray-100 px-2 py-1 text-xs text-black"
-                    onclick="downloadTrace()">Download</button>
-          </div>
-        </div>
-        <pre pp-ref="{tracePre}"
-             class="overflow-auto rounded bg-gray-100 p-4 text-xs text-black">{{ error_trace }}</pre>
-      </section>
-    {% endif %}
-
-    <script>
-      const [showTrace, setShowTrace] = pp.state(false);
-      const [traceCopied, setTraceCopied] = pp.state(false);
-      const tracePre = pp.ref(null);
-
-      async function copyTrace() {
-        if (!tracePre.current) return;
-        await navigator.clipboard.writeText(tracePre.current.innerText);
-        setTraceCopied(true);
-        setTimeout(() => setTraceCopied(false), 2000);
-      }
-
-      function downloadTrace() {
-        if (!tracePre.current) return;
-        const blob = new Blob([tracePre.current.innerText], { type: "text/plain" });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = "error_trace.txt";
-        link.click();
-        URL.revokeObjectURL(url);
-      }
-    </script>
-  </div>
-</main>
-""",
-        error_message=error_message,
-        error_trace=error_trace,
-    )
+from casp.component_decorator import html
+from casp.errors import ErrorInfo
+from casp.layout import Metadata
+
+
+metadata = Metadata(
+    title="Application Error",
+    description="An unexpected error occurred.",
+    extra={"robots": "noindex, nofollow"},
+)
+
+
+def page(error: ErrorInfo):
+    return html(r"""
+<main class="container py-10">
+  <div class="mx-auto max-w-2xl rounded bg-white p-6 shadow-sm">
+    <div class="flex items-start gap-4">
+      <svg class="h-10 w-10 text-red-600"
+           viewBox="0 0 24 24"
+           fill="none"
+           xmlns="http://www.w3.org/2000/svg"
+           aria-hidden="true">
+        <path d="M11.001 2a1 1 0 0 1 .998 0L21 7v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7l8.001-5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M12 8v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M12 16h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+
+      <div class="flex-1">
+        <p class="text-xs font-medium uppercase tracking-wide text-gray-500">{{ error.status }} · {{ error.reason }}</p>
+        <h1 class="mt-1 text-2xl font-semibold text-red-600">Something went wrong</h1>
+        <p class="mt-3 text-sm text-gray-700">{{ error.message }}</p>
+        {% if error.request_id %}
+          <p class="mt-2 text-xs text-gray-500">Reference: {{ error.request_id }}</p>
+        {% endif %}
+
+        <div class="mt-4 flex flex-wrap gap-2">
+          <a href="/"
+             class="inline-block rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800 hover:bg-gray-200">
+            Home
+          </a>
+          <button class="inline-block rounded bg-blue-600 px-3 py-1.5 text-sm text-white"
+                  onclick="window.location.reload()">Reload</button>
+          {% if error.trace %}
+            <button class="inline-block rounded border border-gray-200 bg-transparent px-3 py-1.5 text-sm text-black"
+                    onclick="setShowTrace(current => !current)">{showTrace ? "Hide details" : "Show details"}</button>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    {% if error.trace %}
+      <section class="mt-4" hidden="{!showTrace}">
+        <div class="mb-2 flex items-center justify-between">
+          <div class="text-xs text-gray-500">Error details (development only)</div>
+          <div class="flex gap-2">
+            <button class="rounded border bg-gray-100 px-2 py-1 text-xs text-black"
+                    onclick="copyTrace()">{traceCopied ? "Copied" : "Copy"}</button>
+            <button class="rounded border bg-gray-100 px-2 py-1 text-xs text-black"
+                    onclick="downloadTrace()">Download</button>
+          </div>
+        </div>
+        <pre pp-ref="{tracePre}"
+             class="overflow-auto rounded bg-gray-100 p-4 text-xs text-black">{{ error.trace }}</pre>
+      </section>
+    {% endif %}
+
+    <script>
+      const [showTrace, setShowTrace] = pp.state(false);
+      const [traceCopied, setTraceCopied] = pp.state(false);
+      const tracePre = pp.ref(null);
+
+      async function copyTrace() {
+        if (!tracePre.current) return;
+        await navigator.clipboard.writeText(tracePre.current.innerText);
+        setTraceCopied(true);
+        setTimeout(() => setTraceCopied(false), 2000);
+      }
+
+      function downloadTrace() {
+        if (!tracePre.current) return;
+        const blob = new Blob([tracePre.current.innerText], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "error_trace.txt";
+        link.click();
+        URL.revokeObjectURL(url);
+      }
+    </script>
+  </div>
+</main>
+""",
+        error=error,
+    )

package/dist/src/app/layout.py

@@ -1,47 +1,43 @@
-from casp.component_decorator import html
-
-
-def layout():
-    return html(r"""
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport"
-        content="width=device-width, initial-scale=1.0" />
-  <title>{{ metadata.title | default("Caspian App") }}</title>
-  <meta name="description"
-        content="{{ metadata.description | default('Powered by Caspian Framework') }}" />
-  {#
-    Everything a page put in `Metadata(extra={...})` -- robots, canonical,
-    Open Graph, Twitter cards. The page pipeline already merges `extra` into
-    this dict; without this loop it collected those values and dropped them,
-    so `extra` silently did nothing. Open Graph is keyed by `property`, every
-    other vocabulary by `name`.
-  #}
-  {% for meta_name, meta_content in (metadata | default({})).items()
-     if meta_name not in ("title", "description") and meta_content %}
-  {% if meta_name.startswith("og:") %}
-  <meta property="{{ meta_name }}" content="{{ meta_content }}" />
-  {% else %}
-  <meta name="{{ meta_name }}" content="{{ meta_content }}" />
-  {% endif %}
-  {% endfor %}
-  <link rel="icon"
-        href="/favicon.ico"
-        type="image/x-icon"
-        sizes="16x16" />
-</head>
-
-<body style="
-      opacity: 0;
-      pointer-events: none;
-      user-select: none;
-      transition: opacity 0.18s ease-out;
-    ">
-  <slot />
-</body>
-
-</html>
-""")
+from casp.component_decorator import html
+from casp.layout import Metadata
+
+# Root defaults, inherited by every page unless overridden. A page title can be
+# formatted for the whole app with `title_template="%s | My App"`.
+metadata = Metadata(description="Powered by Caspian Framework")
+
+
+def layout():
+    return html(r"""
+<!DOCTYPE html>
+<html lang="{{ current_locale() }}">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0" />
+  <title>{{ metadata.title | default("Caspian App") }}</title>
+  {#
+    Description, canonical, robots, keywords, Open Graph, Twitter, and every
+    `Metadata(extra={...})` entry. Each tag carries `data-pp-meta` so SPA
+    navigation replaces the set for the next page.
+  #}
+  {{ metadata_tags(metadata | default({})) }}
+  <link rel="icon"
+        href="/favicon.ico"
+        type="image/x-icon"
+        sizes="16x16" />
+  <link href="/css/styles.css" rel="stylesheet" />
+  <script type="module" src="/js/main.js"></script>
+</head>
+
+<body style="
+      opacity: 0;
+      pointer-events: none;
+      user-select: none;
+      transition: opacity 0.18s ease-out;
+    ">
+  <slot />
+</body>
+
+</html>
+""")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-caspian-app",
-  "version": "1.6.4",
+  "version": "1.8.1",
   "description": "Scaffold a new Caspian project (FastAPI-powered reactive Python framework).",
   "main": "dist/index.js",
   "type": "module",