create-mikstack 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mikstack",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/base/package.json.partial

@@ -19,7 +19,7 @@
     "zero:start": "zero-cache-dev"
   },
   "dependencies": {
-    "@mikstack/email": "^0.1.1",
+    "@mikstack/email": "^0.1.2",
     "@mikstack/form": "^0.1.0",
     "@mikstack/notifications": "^0.1.1",
     "@rocicorp/zero": "^0.25.12",
@@ -43,7 +43,8 @@
     "globals": "^17.3.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "typescript-eslint": "^8.54.0"
+    "typescript-eslint": "^8.54.0",
+    "vite-plugin-devtools-json": "^0.2.1"
   },
   "trustedDependencies": [
     "@rocicorp/zero-sqlite3"

package/templates/base/src/lib/server/emails/magic-link.ts

@@ -1,4 +1,4 @@
-import { html, body, section, text, button, spacer, divider, render } from "@mikstack/email";
+import { html, body, section, text, button, link, divider, render } from "@mikstack/email";
 
 export function magicLinkEmail(url: string) {
   const email = html(
@@ -6,62 +6,44 @@ export function magicLinkEmail(url: string) {
       [
         section(
           [
-            text("{{projectName}}", {
+            text("Sign in to {{projectName}}", {
               fontSize: 24,
               fontWeight: "bold",
-              textAlign: "center",
               color: "#111827",
+              marginBottom: 40,
+              marginTop: 40,
             }),
-          ],
-          { padding: [32, 24, 0, 24] },
-        ),
-        section(
-          [
-            text("Sign in to your account", {
-              fontSize: 20,
-              fontWeight: "bold",
-              color: "#111827",
-            }),
-            spacer(8),
-            text("Click the button below to sign in. This link will expire in 10 minutes.", {
-              fontSize: 16,
-              lineHeight: 1.5,
-              color: "#4b5563",
-            }),
-            spacer(24),
-            button("Sign in", {
+            link("Click here to sign in with this magic link", {
               href: url,
-              backgroundColor: "#111827",
-              color: "#ffffff",
-              borderRadius: 6,
-              padding: [12, 32],
-              fontSize: 16,
-              fontWeight: "bold",
-            }),
-            spacer(24),
-            text("Or copy and paste this URL into your browser:", {
+              color: "#2563eb",
               fontSize: 14,
-              color: "#6b7280",
+              textDecoration: "underline",
+              marginBottom: 16,
             }),
-            spacer(4),
-            text(url, {
+            text("Or, copy and paste this temporary login URL:", {
               fontSize: 14,
-              color: "#2563eb",
-              textDecoration: "underline",
+              lineHeight: 1.7,
+              color: "#111827",
+              marginTop: 24,
+              marginBottom: 14,
             }),
-          ],
-          { padding: [24, 24] },
-        ),
-        divider({ borderColor: "#e5e7eb" }),
-        section(
-          [
-            text("If you didn't request this email, you can safely ignore it.", {
+            text(url, {
               fontSize: 13,
-              color: "#9ca3af",
-              textAlign: "center",
+              color: "#111827",
+              backgroundColor: "#f4f4f4",
+              borderRadius: 6,
+              padding: [16, 24],
+              border: "1px solid #eee",
+            }),
+            text("If you didn't try to sign in, you can safely ignore this email.", {
+              fontSize: 14,
+              lineHeight: 1.7,
+              color: "#ababab",
+              marginTop: 14,
+              marginBottom: 38,
             }),
           ],
-          { padding: [16, 24, 32, 24] },
+          { padding: [0, 24] },
         ),
       ],
       { maxWidth: 480, backgroundColor: "#ffffff" },

package/templates/base/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;

package/templates/base/src/routes/api/dev/emails/[id]/+server.ts

@@ -23,7 +23,7 @@ export const GET: RequestHandler = async ({ params }) => {
 
   const wrapper = `<!DOCTYPE html>
 <html>
-<head><meta charset="utf-8">${title}<style>*{margin:0;padding:0}html,body{height:100%}iframe{width:100%;height:100%;border:none}</style></head>
+<head><meta charset="utf-8">${title}<style>*{margin:0;padding:0}html,body{height:100%;background:#e5e7eb}iframe{display:block;max-width:600px;width:100%;height:100%;margin:0 auto;border:none;background:#fff}</style></head>
 <body><iframe srcdoc="${escaped}"></iframe></body>
 </html>`;
 

package/templates/i18n/vite.config.ts

@@ -1,7 +1,8 @@
+import devtoolsJson from "vite-plugin-devtools-json";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { linguiPo } from "@mikstack/svelte-lingui/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [linguiPo(), sveltekit()],
+  plugins: [devtoolsJson(), linguiPo(), sveltekit()],
 });

package/templates/ui/vite.config.ts

@@ -1,6 +1,7 @@
+import devtoolsJson from "vite-plugin-devtools-json";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [devtoolsJson(), sveltekit()],
 });