create-mikstack 0.1.22 → 0.1.24

package/dist/index.js

@@ -145,11 +145,13 @@ async function runPrompts(projectName, packageManager) {
 
 //#endregion
 //#region src/template-engine.ts
-const CONDITIONAL_BLOCK_RE = /^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{#if:(\w+)\}\}[^\S\n]*(?:-->)?[^\S\n]*\n([\s\S]*?)^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{\/if:\1\}\}[^\S\n]*(?:-->)?[^\S\n]*\n?/gm;
+const CONDITIONAL_BLOCK_RE = /^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{#if:(!?\w+)\}\}[^\S\n]*(?:-->)?[^\S\n]*\n([\s\S]*?)^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{\/if:\1\}\}[^\S\n]*(?:-->)?[^\S\n]*\n?/gm;
 const VARIABLE_RE = /\{\{(\w+)\}\}/g;
 function renderTemplate(content, context) {
 	let result = content.replace(CONDITIONAL_BLOCK_RE, (_match, name, body) => {
-		if (context[name]) return body;
+		const negated = name.startsWith("!");
+		const value = context[negated ? name.slice(1) : name];
+		if (negated ? !value : value) return body;
 		return "";
 	});
 	result = result.replace(VARIABLE_RE, (_match, name) => {
@@ -368,10 +370,13 @@ async function cli() {
 					"pipe"
 				]
 			});
+			const cols = process.stdout.columns || 80;
 			const handleData = (data) => {
 				if (!onLine) return;
 				const line = data.toString().trim().split("\n").pop();
-				if (line) onLine(line);
+				if (!line) return;
+				const maxLen = cols - 5;
+				onLine(line.length > maxLen ? line.slice(0, maxLen - 1) + "…" : line);
 			};
 			child.stdout.on("data", handleData);
 			child.stderr.on("data", handleData);

package/package.json

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

package/templates/adapters/node/docker-compose.prod.yml

@@ -10,6 +10,26 @@ services:
     volumes:
       - pgdata:/var/lib/postgresql/data
 
+  zero-cache:
+    image: rocicorp/zero:${ZERO_VERSION}
+    restart: always
+    ports:
+      - 4848:4848
+    environment:
+      ZERO_UPSTREAM_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}
+      ZERO_CVR_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}_cvr
+      ZERO_CHANGE_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}_cdb
+      ZERO_REPLICA_FILE: /data/sync-replica.db
+      ZERO_PUSH_URL: http://app:3000/api/zero/mutate
+      ZERO_QUERY_URL: http://app:3000/api/zero/get-queries
+      ZERO_QUERY_FORWARD_COOKIES: "true"
+      ZERO_MUTATE_FORWARD_COOKIES: "true"
+      ZERO_AUTH_SECRET: ${BETTER_AUTH_SECRET}
+    volumes:
+      - zero-data:/data
+    depends_on:
+      - db
+
   app:
     build: .
     restart: always
@@ -20,8 +40,11 @@ services:
       BETTER_AUTH_SECRET: ${BETTER_AUTH_SECRET}
       BETTER_AUTH_URL: ${BETTER_AUTH_URL}
       ORIGIN: ${BETTER_AUTH_URL}
+      PUBLIC_SERVER: http://zero-cache:4848
     depends_on:
       - db
+      - zero-cache
 
 volumes:
   pgdata:
+  zero-data:

package/templates/base/src/lib/server/db/schema.ts

@@ -2,114 +2,114 @@ import { boolean, integer, jsonb, pgTable, text, timestamp } from "drizzle-orm/p
 
 // better-auth tables (managed by better-auth, do not insert/update directly)
 export const user = pgTable("user", {
-  id: text("id").primaryKey(),
-  name: text("name").notNull(),
-  email: text("email").notNull().unique(),
-  emailVerified: boolean("email_verified").notNull().default(false),
-  image: text("image"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  id: text().primaryKey(),
+  name: text().notNull(),
+  email: text().notNull().unique(),
+  emailVerified: boolean().notNull().default(false),
+  image: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const session = pgTable("session", {
-  id: text("id").primaryKey(),
-  expiresAt: timestamp("expires_at").notNull(),
-  token: text("token").notNull().unique(),
-  ipAddress: text("ip_address"),
-  userAgent: text("user_agent"),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  expiresAt: timestamp().notNull(),
+  token: text().notNull().unique(),
+  ipAddress: text(),
+  userAgent: text(),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const account = pgTable("account", {
-  id: text("id").primaryKey(),
-  accountId: text("account_id").notNull(),
-  providerId: text("provider_id").notNull(),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  accountId: text().notNull(),
+  providerId: text().notNull(),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  accessToken: text("access_token"),
-  refreshToken: text("refresh_token"),
-  idToken: text("id_token"),
-  accessTokenExpiresAt: timestamp("access_token_expires_at"),
-  refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
-  scope: text("scope"),
-  password: text("password"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  accessToken: text(),
+  refreshToken: text(),
+  idToken: text(),
+  accessTokenExpiresAt: timestamp(),
+  refreshTokenExpiresAt: timestamp(),
+  scope: text(),
+  password: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const verification = pgTable("verification", {
-  id: text("id").primaryKey(),
-  identifier: text("identifier").notNull(),
-  value: text("value").notNull(),
-  expiresAt: timestamp("expires_at").notNull(),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  id: text().primaryKey(),
+  identifier: text().notNull(),
+  value: text().notNull(),
+  expiresAt: timestamp().notNull(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 // Notification tables (managed by @mikstack/notifications)
 export const notificationDelivery = pgTable("notification_delivery", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id").references(() => user.id),
-  type: text("type").notNull(),
-  channel: text("channel").notNull(),
-  status: text("status", { enum: ["pending", "sent", "delivered", "failed"] })
+  userId: text().references(() => user.id),
+  type: text().notNull(),
+  channel: text().notNull(),
+  status: text({ enum: ["pending", "sent", "delivered", "failed"] })
     .notNull()
     .default("pending"),
-  content: jsonb("content"),
-  error: text("error"),
-  retryOf: text("retry_of"),
-  retriesLeft: integer("retries_left").notNull().default(0),
-  recipientEmail: text("recipient_email"),
-  externalId: text("external_id"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  content: jsonb(),
+  error: text(),
+  retryOf: text(),
+  retriesLeft: integer().notNull().default(0),
+  recipientEmail: text(),
+  externalId: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const inAppNotification = pgTable("in_app_notification", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id")
+  userId: text()
     .notNull()
     .references(() => user.id),
-  type: text("type").notNull(),
-  title: text("title").notNull(),
-  body: text("body"),
-  url: text("url"),
-  icon: text("icon"),
-  read: boolean("read").notNull().default(false),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
+  type: text().notNull(),
+  title: text().notNull(),
+  body: text(),
+  url: text(),
+  icon: text(),
+  read: boolean().notNull().default(false),
+  createdAt: timestamp().notNull().defaultNow(),
 });
 
 export const notificationPreference = pgTable("notification_preference", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id")
+  userId: text()
     .notNull()
     .references(() => user.id),
-  notificationType: text("notification_type").notNull(),
-  channel: text("channel").notNull(),
-  enabled: boolean("enabled").notNull(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  notificationType: text().notNull(),
+  channel: text().notNull(),
+  enabled: boolean().notNull(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 // Application tables
 
 export const note = pgTable("note", {
-  id: text("id").primaryKey(),
-  title: text("title").notNull(),
-  content: text("content").notNull().default(""),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  title: text().notNull(),
+  content: text().notNull().default(""),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  createdAt: timestamp("created_at").notNull(),
-  updatedAt: timestamp("updated_at").notNull(),
+  createdAt: timestamp().notNull(),
+  updatedAt: timestamp().notNull(),
 });

package/templates/base/src/routes/(app)/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import NotePencil from "phosphor-svelte/lib/NotePencil";
-  import PencilSimple from "phosphor-svelte/lib/PencilSimple";
-  import Plus from "phosphor-svelte/lib/Plus";
-  import SignOut from "phosphor-svelte/lib/SignOut";
-  import Trash from "phosphor-svelte/lib/Trash";
-  import X from "phosphor-svelte/lib/X";
+  import NotePencilIcon from "phosphor-svelte/lib/NotePencilIcon";
+  import PencilSimpleIcon from "phosphor-svelte/lib/PencilSimpleIcon";
+  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
+  import SignOutIcon from "phosphor-svelte/lib/SignOutIcon";
+  import TrashIcon from "phosphor-svelte/lib/TrashIcon";
+  import XIcon from "phosphor-svelte/lib/XIcon";
   import Button from "{{uiPrefix}}/Button";
   import FormField from "{{uiPrefix}}/FormField";
   import Input from "{{uiPrefix}}/Input";
@@ -18,6 +18,11 @@
   import { get_z } from "$lib/z.svelte";
   import { queries } from "$lib/zero/queries";
   import { mutators } from "$lib/zero/mutators";
+  // {{#if:i18n}}
+  import { useLingui } from "@mikstack/svelte-lingui";
+  import LocaleSwitcher from "$lib/LocaleSwitcher.svelte";
+  const { t } = useLingui();
+  // {{/if:i18n}}
 
   let { data } = $props();
 
@@ -39,7 +44,12 @@
   let editingId = $state<string | null>(null);
 
   const noteSchema = v.object({
+    // {{#if:i18n}}
+    title: v.pipe(v.string(), v.minLength(1, t`Title is required`)),
+    // {{/if:i18n}}
+    // {{#if:!i18n}}
     title: v.pipe(v.string(), v.minLength(1, "Title is required")),
+    // {{/if:!i18n}}
     content: v.string(),
   });
 
@@ -103,13 +113,26 @@
 <div class="container">
   <header class="header">
     <div class="header-title">
-      <NotePencil size={24} weight="duotone" />
+      <NotePencilIcon size={24} weight="duotone" />
+      <!-- {{#if:i18n}} -->
+      <h1>{t`Notes`}</h1>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <h1>Notes</h1>
+      <!-- {{/if:!i18n}} -->
     </div>
     <div class="header-actions">
+      <!-- {{#if:i18n}} -->
+      <LocaleSwitcher />
+      <!-- {{/if:i18n}} -->
       <span class="email">{data.user.email}</span>
       <Button variant="ghost" onclick={signOut}>
-        <SignOut size={16} weight="bold" /> Sign out
+        <!-- {{#if:i18n}} -->
+        <SignOutIcon size={16} weight="bold" /> {t`Sign out`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
+        <SignOutIcon size={16} weight="bold" /> Sign out
+        <!-- {{/if:!i18n}} -->
       </Button>
     </div>
   </header>
@@ -117,13 +140,28 @@
   <Separator />
 
   <section>
+    <!-- {{#if:i18n}} -->
+    <h2>{t`New note`}</h2>
+    <!-- {{/if:i18n}} -->
+    <!-- {{#if:!i18n}} -->
     <h2>New note</h2>
+    <!-- {{/if:!i18n}} -->
     <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
       <FormField for={createNoteForm.fields.title.as("text").id}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Title`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Title</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
+        <!-- {{#if:i18n}} -->
+        <Input {...createNoteForm.fields.title.as("text")} placeholder={t`Note title`} />
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         <Input {...createNoteForm.fields.title.as("text")} placeholder="Note title" />
+        <!-- {{/if:!i18n}} -->
         {#snippet error(attrs)}
           {#each createNoteForm.fields.title.issues() as issue (issue.message)}
             <p {...attrs}>{issue.message}</p>
@@ -133,8 +171,24 @@
 
       <FormField for={`${createNoteForm.id}-content`}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Content`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Content</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
+        <!-- {{#if:i18n}} -->
+        <Textarea
+          name={createNoteForm.fields.content.name()}
+          id="{createNoteForm.id}-content"
+          oninput={(e) =>
+            createNoteForm.fields.content.set((e.target as HTMLTextAreaElement).value)}
+          value={createNoteForm.fields.content.value() as string}
+          placeholder={t`Write something...`}
+        />
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         <Textarea
           name={createNoteForm.fields.content.name()}
           id="{createNoteForm.id}-content"
@@ -143,6 +197,7 @@
           value={createNoteForm.fields.content.value() as string}
           placeholder="Write something..."
         />
+        <!-- {{/if:!i18n}} -->
       </FormField>
 
       {#if createNoteForm.error}
@@ -150,8 +205,13 @@
       {/if}
 
       <Button type="submit" disabled={createNoteForm.pending}>
-        <Plus size={16} weight="bold" />
+        <PlusIcon size={16} weight="bold" />
+        <!-- {{#if:i18n}} -->
+        {createNoteForm.pending ? t`Creating...` : t`Create note`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         {createNoteForm.pending ? "Creating..." : "Create note"}
+        <!-- {{/if:!i18n}} -->
         {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
       </Button>
     </form>
@@ -160,9 +220,19 @@
   <Separator />
 
   <section>
+    <!-- {{#if:i18n}} -->
+    <h2>{t`Your notes`}</h2>
+    <!-- {{/if:i18n}} -->
+    <!-- {{#if:!i18n}} -->
     <h2>Your notes</h2>
+    <!-- {{/if:!i18n}} -->
     {#if notes.length === 0}
+      <!-- {{#if:i18n}} -->
+      <p class="empty">{t`No notes yet. Create one above!`}</p>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <p class="empty">No notes yet. Create one above!</p>
+      <!-- {{/if:!i18n}} -->
     {:else}
       <ul class="note-list">
         {#each notes as note (note.id)}
@@ -171,7 +241,12 @@
               <form id={editForm.id} onsubmit={editForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
                 <FormField for={editForm.fields.title.as("text").id}>
                   {#snippet label(attrs)}
+                    <!-- {{#if:i18n}} -->
+                    <label {...attrs}>{t`Title`}</label>
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     <label {...attrs}>Title</label>
+                    <!-- {{/if:!i18n}} -->
                   {/snippet}
                   <Input {...editForm.fields.title.as("text")} />
                   {#snippet error(attrs)}
@@ -183,7 +258,12 @@
 
                 <FormField for={`${editForm.id}-content`}>
                   {#snippet label(attrs)}
+                    <!-- {{#if:i18n}} -->
+                    <label {...attrs}>{t`Content`}</label>
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     <label {...attrs}>Content</label>
+                    <!-- {{/if:!i18n}} -->
                   {/snippet}
                   <Textarea
                     name={editForm.fields.content.name()}
@@ -201,11 +281,21 @@
 
                 <div class="actions">
                   <Button type="submit" disabled={editForm.pending}>
+                    <!-- {{#if:i18n}} -->
+                    {editForm.pending ? t`Saving...` : t`Save`}
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     {editForm.pending ? "Saving..." : "Save"}
+                    <!-- {{/if:!i18n}} -->
                     {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
                   </Button>
                   <Button variant="ghost" type="button" onclick={cancelEdit}>
-                    <X size={16} weight="bold" /> Cancel
+                    <!-- {{#if:i18n}} -->
+                    <XIcon size={16} weight="bold" /> {t`Cancel`}
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
+                    <XIcon size={16} weight="bold" /> Cancel
+                    <!-- {{/if:!i18n}} -->
                   </Button>
                 </div>
               </form>
@@ -218,10 +308,20 @@
               </div>
               <div class="actions">
                 <Button variant="ghost" onclick={() => startEdit(note)}>
-                  <PencilSimple size={16} /> Edit
+                  <!-- {{#if:i18n}} -->
+                  <PencilSimpleIcon size={16} /> {t`Edit`}
+                  <!-- {{/if:i18n}} -->
+                  <!-- {{#if:!i18n}} -->
+                  <PencilSimpleIcon size={16} /> Edit
+                  <!-- {{/if:!i18n}} -->
                 </Button>
                 <Button variant="danger" onclick={() => deleteNote(note.id)}>
-                  <Trash size={16} /> Delete
+                  <!-- {{#if:i18n}} -->
+                  <TrashIcon size={16} /> {t`Delete`}
+                  <!-- {{/if:i18n}} -->
+                  <!-- {{#if:!i18n}} -->
+                  <TrashIcon size={16} /> Delete
+                  <!-- {{/if:!i18n}} -->
                 </Button>
               </div>
             {/if}

package/templates/base/src/routes/(public)/sign-in/+page.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
-  import EnvelopeSimple from "phosphor-svelte/lib/EnvelopeSimple";
-  import CheckCircle from "phosphor-svelte/lib/CheckCircle";
+  import EnvelopeSimpleIcon from "phosphor-svelte/lib/EnvelopeSimpleIcon";
+  import CheckCircleIcon from "phosphor-svelte/lib/CheckCircleIcon";
   import Button from "{{uiPrefix}}/Button";
   import FormField from "{{uiPrefix}}/FormField";
   import Input from "{{uiPrefix}}/Input";
   import { createForm } from "@mikstack/form";
   import * as v from "valibot";
   import { authClient } from "$lib/auth-client";
+  // {{#if:i18n}}
+  import { useLingui } from "@mikstack/svelte-lingui";
+  import LocaleSwitcher from "$lib/LocaleSwitcher.svelte";
+  const { t } = useLingui();
+  // {{/if:i18n}}
 
   const form = createForm({
     schema: v.object({
+      // {{#if:i18n}}
+      email: v.pipe(v.string(), v.email(t`Please enter a valid email address`)),
+      // {{/if:i18n}}
+      // {{#if:!i18n}}
       email: v.pipe(v.string(), v.email("Please enter a valid email address")),
+      // {{/if:!i18n}}
     }),
     initialValues: { email: "" },
     async onSubmit(data) {
@@ -27,18 +37,36 @@
 </script>
 
 <div class="sign-in">
+  <!-- {{#if:i18n}} -->
+  <div class="locale-bar">
+    <LocaleSwitcher />
+  </div>
+  <h1>{t`Sign in to {{projectName}}`}</h1>
+  <!-- {{/if:i18n}} -->
+  <!-- {{#if:!i18n}} -->
   <h1>Sign in to {{projectName}}</h1>
+  <!-- {{/if:!i18n}} -->
 
   {#if form.result}
     <div class="success">
-      <CheckCircle size={24} weight="duotone" />
+      <CheckCircleIcon size={24} weight="duotone" />
+      <!-- {{#if:i18n}} -->
+      <p>{t`Check your email for a magic link to sign in.`}</p>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <p>Check your email for a magic link to sign in.</p>
+      <!-- {{/if:!i18n}} -->
     </div>
   {:else}
     <form id={form.id} onsubmit={form.onsubmit} class="sign-in-form">
       <FormField for={emailField.as("email").id}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Email`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Email</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
         <Input {...emailField.as("email")} placeholder="you@example.com" />
         {#snippet error(attrs)}
@@ -53,8 +81,13 @@
       {/if}
 
       <Button type="submit" disabled={form.pending}>
-        <EnvelopeSimple size={16} weight="bold" />
+        <EnvelopeSimpleIcon size={16} weight="bold" />
+        <!-- {{#if:i18n}} -->
+        {form.pending ? t`Sending magic link...` : t`Sign in with magic link`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         {form.pending ? "Sending magic link..." : "Sign in with magic link"}
+        <!-- {{/if:!i18n}} -->
       </Button>
     </form>
   {/if}
@@ -70,6 +103,11 @@
     gap: var(--space-5);
   }
 
+  .locale-bar {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   h1 {
     font-size: var(--text-2xl);
   }

package/templates/i18n/lingui.config.ts

@@ -2,7 +2,7 @@ import { extractor } from "@mikstack/svelte-lingui/extractor";
 import type { LinguiConfig } from "@lingui/conf";
 
 const config: LinguiConfig = {
-  locales: ["en"],
+  locales: ["en", "fi"],
   sourceLocale: "en",
   catalogs: [
     {

package/templates/i18n/src/lib/LocaleSwitcher.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { locales, getLocale, setLocale } from "$lib/i18n";
+
+  let currentLocale = $state(getLocale());
+
+  function switchLocale(locale: string) {
+    setLocale(locale);
+    currentLocale = locale;
+  }
+</script>
+
+<div class="locale-switcher">
+  {#each locales as locale (locale)}
+    <button
+      class:active={locale === currentLocale}
+      disabled={locale === currentLocale}
+      onclick={() => switchLocale(locale)}
+    >
+      {locale.toUpperCase()}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .locale-switcher {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--text-2);
+    cursor: pointer;
+  }
+
+  button:hover:not(:disabled) {
+    background-color: var(--surface-2);
+  }
+
+  button.active {
+    color: var(--text-1);
+    font-weight: 700;
+    cursor: default;
+  }
+</style>

package/templates/i18n/src/lib/i18n.ts

@@ -1,10 +1,29 @@
 import { setupI18n } from "@lingui/core";
 import { setI18n } from "@mikstack/svelte-lingui";
-import { messages } from "../locales/en.po";
+import { messages as enMessages } from "../locales/en.po";
+import { messages as fiMessages } from "../locales/fi.po";
+
+const allMessages: Record<string, typeof enMessages> = {
+  en: enMessages,
+  fi: fiMessages,
+};
 
 const i18n = setupI18n();
 
-export function initI18n(): void {
-  i18n.loadAndActivate({ locale: "en", messages });
+export function initI18n(locale = "en"): void {
+  i18n.loadAndActivate({ locale, messages: allMessages[locale] });
   setI18n(i18n);
 }
+
+export function setLocale(locale: string): void {
+  const messages = allMessages[locale];
+  if (messages) {
+    i18n.loadAndActivate({ locale, messages });
+  }
+}
+
+export function getLocale(): string {
+  return i18n.locale;
+}
+
+export const locales = Object.keys(allMessages);

package/templates/i18n/src/locales/en.po

@@ -4,3 +4,95 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+
+#: src/routes/(app)/+page.svelte
+msgid "Cancel"
+msgstr "Cancel"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Check your email for a magic link to sign in."
+msgstr "Check your email for a magic link to sign in."
+
+#: src/routes/(app)/+page.svelte
+msgid "Content"
+msgstr "Content"
+
+#: src/routes/(app)/+page.svelte
+msgid "Create note"
+msgstr "Create note"
+
+#: src/routes/(app)/+page.svelte
+msgid "Creating..."
+msgstr "Creating..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Delete"
+msgstr "Delete"
+
+#: src/routes/(app)/+page.svelte
+msgid "Edit"
+msgstr "Edit"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Email"
+msgstr "Email"
+
+#: src/routes/(app)/+page.svelte
+msgid "New note"
+msgstr "New note"
+
+#: src/routes/(app)/+page.svelte
+msgid "No notes yet. Create one above!"
+msgstr "No notes yet. Create one above!"
+
+#: src/routes/(app)/+page.svelte
+msgid "Note title"
+msgstr "Note title"
+
+#: src/routes/(app)/+page.svelte
+msgid "Notes"
+msgstr "Notes"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Please enter a valid email address"
+msgstr "Please enter a valid email address"
+
+#: src/routes/(app)/+page.svelte
+msgid "Save"
+msgstr "Save"
+
+#: src/routes/(app)/+page.svelte
+msgid "Saving..."
+msgstr "Saving..."
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sending magic link..."
+msgstr "Sending magic link..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Sign out"
+msgstr "Sign out"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sign in to {{projectName}}"
+msgstr "Sign in to {{projectName}}"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sign in with magic link"
+msgstr "Sign in with magic link"
+
+#: src/routes/(app)/+page.svelte
+msgid "Title"
+msgstr "Title"
+
+#: src/routes/(app)/+page.svelte
+msgid "Title is required"
+msgstr "Title is required"
+
+#: src/routes/(app)/+page.svelte
+msgid "Write something..."
+msgstr "Write something..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Your notes"
+msgstr "Your notes"

package/templates/i18n/src/locales/fi.po

@@ -0,0 +1,98 @@
+msgid ""
+msgstr ""
+"Language: fi\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/routes/(app)/+page.svelte
+msgid "Cancel"
+msgstr "Peruuta"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Check your email for a magic link to sign in."
+msgstr "Tarkista sähköpostisi kirjautumislinkin varalta."
+
+#: src/routes/(app)/+page.svelte
+msgid "Content"
+msgstr "Sisältö"
+
+#: src/routes/(app)/+page.svelte
+msgid "Create note"
+msgstr "Luo muistiinpano"
+
+#: src/routes/(app)/+page.svelte
+msgid "Creating..."
+msgstr "Luodaan..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Delete"
+msgstr "Poista"
+
+#: src/routes/(app)/+page.svelte
+msgid "Edit"
+msgstr "Muokkaa"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Email"
+msgstr "Sähköposti"
+
+#: src/routes/(app)/+page.svelte
+msgid "New note"
+msgstr "Uusi muistiinpano"
+
+#: src/routes/(app)/+page.svelte
+msgid "No notes yet. Create one above!"
+msgstr "Ei vielä muistiinpanoja. Luo ensimmäinen yllä!"
+
+#: src/routes/(app)/+page.svelte
+msgid "Note title"
+msgstr "Muistiinpanon otsikko"
+
+#: src/routes/(app)/+page.svelte
+msgid "Notes"
+msgstr "Muistiinpanot"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Please enter a valid email address"
+msgstr "Syötä kelvollinen sähköpostiosoite"
+
+#: src/routes/(app)/+page.svelte
+msgid "Save"
+msgstr "Tallenna"
+
+#: src/routes/(app)/+page.svelte
+msgid "Saving..."
+msgstr "Tallennetaan..."
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sending magic link..."
+msgstr "Lähetetään kirjautumislinkkiä..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Sign out"
+msgstr "Kirjaudu ulos"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sign in to {{projectName}}"
+msgstr "Kirjaudu palveluun {{projectName}}"
+
+#: src/routes/(public)/sign-in/+page.svelte
+msgid "Sign in with magic link"
+msgstr "Kirjaudu kirjautumislinkillä"
+
+#: src/routes/(app)/+page.svelte
+msgid "Title"
+msgstr "Otsikko"
+
+#: src/routes/(app)/+page.svelte
+msgid "Title is required"
+msgstr "Otsikko on pakollinen"
+
+#: src/routes/(app)/+page.svelte
+msgid "Write something..."
+msgstr "Kirjoita jotain..."
+
+#: src/routes/(app)/+page.svelte
+msgid "Your notes"
+msgstr "Muistiinpanosi"