vela 0.13.4 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vela",
-	"version": "0.13.4",
+	"version": "0.14.0",
 	"type": "module",
 	"description": "A CLI for creating and updating SvelteKit projects",
 	"license": "MIT",
@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@clack/prompts": "^1.7.0",
 		"@faker-js/faker": "^10.6.0",
-		"@velastack/patterns": "^0.2.11",
+		"@velastack/patterns": "^0.3.0",
 		"@velastack/pocketbase-codegen": "^0.1.0",
 		"annotate-json-schema": "^0.1.0",
 		"commander": "^13.1.0",
@@ -49,7 +49,7 @@
 		"package-manager-detector": "^1.8.0",
 		"picocolors": "^1.1.1",
 		"pocketbase": "^0.28.0",
-		"pocketbase-server": "^0.40.5-beta.1",
+		"pocketbase-server": "^0.40.5-beta.2",
 		"stripe": "^19.3.0",
 		"svelte": "^5.56.10",
 		"tar": "^7.5.22",

package/templates/minimal/package.template.json

@@ -25,7 +25,7 @@
 		"@types/node": "^26.4.1",
 		"@types/supertest": "^6.0.3",
 		"@velastack/kit": "^0.3.0",
-		"@velastack/pocketbase": "^0.2.2",
+		"@velastack/pocketbase": "^0.3.0",
 		"clsx": "^2.1.1",
 		"croner": "^10.0.1",
 		"formsnap": "^2.0.1",

package/templates/minimal/src/lib/site.template.ts

@@ -0,0 +1,12 @@
+/**
+ * Site-wide metadata, and the one place the app's name and public URL live.
+ *
+ * Set `url` to where the site is deployed: canonical links, Open Graph images
+ * and feeds are built from it, including in prerendered pages. With a backend,
+ * `vela dev` and `vela deploy` copy `name` into PocketBase's application name
+ * for the emails it sends, so change it here rather than in the admin panel.
+ */
+export const site = {
+	name: '~APP_NAME~',
+	url: '~SITE_URL~'
+};

package/templates/minimal/src/routes/(public)/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
-
-	let { data } = $props();
+	import { site } from '$lib/site';
 </script>
 
 <main class="flex-1">
@@ -13,11 +12,11 @@
 				>
 					<img src={favicon} alt="logo" class="size-4" />
 				</span>
-				{data.meta.appName}
+				{site.name}
 			</a>
 
 			<h1 class="mt-6 text-4xl font-semibold tracking-tight sm:text-5xl">
-				{data.meta.appName} is running on VelaStack
+				{site.name} is running on VelaStack
 			</h1>
 			<p class="text-muted-foreground mt-4 text-lg">
 				A SvelteKit app with a PocketBase backend already migrated behind it, and types synced from

package/templates/minimal/src/routes/(public)/root-layout.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import favicon from '$lib/assets/favicon.svg';
+	import { site } from '$lib/site';
 
 	import { toggleMode } from 'mode-watcher';
 	import * as Navbar from '$lib/components/ui/navbar';
 	import { Button } from '$lib/components/ui/button';
 
-	let { children, data } = $props();
+	// Layout data is passed through for navbar items a feature adds; enable auth
+	// reads the signed-in user from it.
+	let { children }: { children?: Snippet; data?: any } = $props();
 </script>
 
 <div class="min-h-dvh grid grid-rows-[max-content_1fr_max-content] root-layout">
@@ -33,7 +37,7 @@
 		>
 			<p class="text-muted-foreground text-sm">
 				&copy; {new Date().getFullYear()}
-				{data.meta.appName}. All rights reserved.
+				{site.name}. All rights reserved.
 			</p>
 			<nav class="flex items-center gap-4 text-sm">
 				<Button onclick={toggleMode} variant="ghost" size="icon">

package/templates/minimal/src/routes/+layout.server.ts

@@ -1,12 +1,16 @@
 import { loadFlash } from 'sveltekit-flash-message/server';
 import { defineBaseMetaTags } from 'svelte-meta-tags';
+import { site } from '$lib/site';
 
-export const load = loadFlash(async ({ locals, url }) => {
-	const canonical = new URL(url.pathname, url.origin).href;
+export const load = loadFlash(async ({ url }) => {
+	// Built from `site.url`, not `url.origin`: every deployment and every
+	// prerendered page (where the origin is SvelteKit's placeholder host) should
+	// point at the one address the site is published under.
+	const canonical = new URL(url.pathname, site.url).href;
 
 	const baseTags = defineBaseMetaTags({
 		title: '',
-		titleTemplate: `%s | ${locals.meta.appName}`,
+		titleTemplate: `%s | ${site.name}`,
 		description: '',
 		canonical,
 		openGraph: {
@@ -14,8 +18,8 @@ export const load = loadFlash(async ({ locals, url }) => {
 			url: canonical,
 			images: [
 				{
-					url: `${locals.meta.appURL}/og.jpg`,
-					alt: locals.meta.appName,
+					url: `${site.url}/og.jpg`,
+					alt: site.name,
 					width: 1200,
 					height: 630
 				}
@@ -24,7 +28,6 @@ export const load = loadFlash(async ({ locals, url }) => {
 	});
 
 	return {
-		meta: locals.meta,
 		...baseTags
 	};
 });

package/templates/minimal/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '../app.css';
 
 	import favicon from '$lib/assets/favicon.svg';
+	import { site } from '$lib/site';
 
 	import { ModeWatcher } from 'mode-watcher';
 	import { getFlash } from 'sveltekit-flash-message';
@@ -27,7 +28,7 @@
 </script>
 
 <svelte:head>
-	<title>{data.meta.appName}</title>
+	<title>{site.name}</title>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 

package/templates/static/src/lib/site.template.ts

@@ -1,9 +1,10 @@
 /**
- * Site-wide metadata.
+ * Site-wide metadata, and the one place the app's name and public URL live.
  *
- * A static build has no backend to read this from, so this file is the source of
- * truth. Set `url` to where the site is actually deployed — canonical links and
- * Open Graph image URLs are built from it at prerender time.
+ * Set `url` to where the site is deployed: canonical links, Open Graph images
+ * and feeds are built from it, including in prerendered pages. With a backend,
+ * `vela dev` and `vela deploy` copy `name` into PocketBase's application name
+ * for the emails it sends, so change it here rather than in the admin panel.
  */
 export const site = {
 	name: '~APP_NAME~',

package/templates/static/src/routes/(public)/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
-
-	let { data } = $props();
+	import { site } from '$lib/site';
 </script>
 
 <main class="flex-1">
@@ -13,11 +12,11 @@
 				>
 					<img src={favicon} alt="logo" class="size-4" />
 				</span>
-				{data.meta.appName}
+				{site.name}
 			</a>
 
 			<h1 class="mt-6 text-4xl font-semibold tracking-tight sm:text-5xl">
-				{data.meta.appName} is running on VelaStack
+				{site.name} is running on VelaStack
 			</h1>
 			<p class="text-muted-foreground mt-4 text-lg">
 				A SvelteKit site that prerenders to static HTML, so there is no server to run and nothing to

package/templates/static/src/routes/(public)/root-layout.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import favicon from '$lib/assets/favicon.svg';
+	import { site } from '$lib/site';
 
 	import { toggleMode } from 'mode-watcher';
 	import * as Navbar from '$lib/components/ui/navbar';
 	import { Button } from '$lib/components/ui/button';
 
-	let { children, data } = $props();
+	// Layout data is passed through for navbar items a feature adds; enable auth
+	// reads the signed-in user from it.
+	let { children }: { children?: Snippet; data?: any } = $props();
 </script>
 
 <div class="min-h-dvh grid grid-rows-[max-content_1fr_max-content] root-layout">
@@ -33,7 +37,7 @@
 		>
 			<p class="text-muted-foreground text-sm">
 				&copy; {new Date().getFullYear()}
-				{data.meta.appName}. All rights reserved.
+				{site.name}. All rights reserved.
 			</p>
 			<nav class="flex items-center gap-4 text-sm">
 				<Button onclick={toggleMode} variant="ghost" size="icon">

package/templates/static/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '../app.css';
 
 	import favicon from '$lib/assets/favicon.svg';
+	import { site } from '$lib/site';
 
 	import { ModeWatcher } from 'mode-watcher';
 	import { page } from '$app/state';
@@ -14,7 +15,7 @@
 </script>
 
 <svelte:head>
-	<title>{data.meta.appName}</title>
+	<title>{site.name}</title>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 

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

@@ -29,7 +29,6 @@ export const load: LayoutLoad = ({ url }) => {
 	});
 
 	return {
-		meta: { appName: site.name, appURL: site.url },
 		...baseTags
 	};
 };