create-nextblock 0.14.1 → 0.14.4

package/templates/nextblock-template/components/submit-button.tsx

@@ -1,23 +1,23 @@
-"use client";
-
-import { Button } from "@nextblock-cms/ui";
-import { type ComponentProps } from "react";
-import { useFormStatus } from "react-dom";
-
-type Props = ComponentProps<typeof Button> & {
-  pendingText?: string;
-};
-
-export function SubmitButton({
-  children,
-  pendingText = "Submitting...",
-  ...props
-}: Props) {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button type="submit" aria-disabled={pending} {...props}>
-      {pending ? pendingText : children}
-    </Button>
-  );
-}
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import { type ComponentProps } from "react";
+import { useFormStatus } from "react-dom";
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export function SubmitButton({
+  children,
+  pendingText = "Submitting...",
+  ...props
+}: Props) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+}

package/templates/nextblock-template/components/theme-icon.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Aperture,
+  Atom,
+  Blend,
+  Brush,
+  Cloud,
+  Contrast,
+  Droplet,
+  Feather,
+  Flame,
+  Gem,
+  Ghost,
+  Leaf,
+  Moon,
+  Mountain,
+  Palette,
+  Rocket,
+  Snowflake,
+  Sparkles,
+  Star,
+  Sun,
+  Sunrise,
+  Sunset,
+  Waves,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+
+/**
+ * Curated icon set offered to themes.
+ *
+ * A fixed map rather than a dynamic lucide lookup: the icon name comes from the
+ * database, and importing lucide dynamically by string would either pull the
+ * whole icon set into the bundle or break tree-shaking.
+ */
+export const THEME_ICONS: Record<string, LucideIcon> = {
+  Sun,
+  Moon,
+  Zap,
+  Sparkles,
+  Palette,
+  Flame,
+  Droplet,
+  Leaf,
+  Star,
+  Cloud,
+  Snowflake,
+  Waves,
+  Mountain,
+  Sunrise,
+  Sunset,
+  Contrast,
+  Blend,
+  Brush,
+  Aperture,
+  Atom,
+  Feather,
+  Gem,
+  Ghost,
+  Rocket,
+};
+
+export const THEME_ICON_NAMES = Object.keys(THEME_ICONS);
+
+export function ThemeIcon({
+  name,
+  size = 16,
+  className,
+}: {
+  name: string;
+  size?: number;
+  className?: string;
+}) {
+  const Icon = THEME_ICONS[name] ?? Palette;
+  return <Icon size={size} className={className} />;
+}

package/templates/nextblock-template/components/theme-switcher.tsx

@@ -1,5 +1,5 @@
-"use client";
-
+"use client";
+
 import { Button } from "@nextblock-cms/ui";
 import {
   DropdownMenu,
@@ -8,83 +8,78 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@nextblock-cms/ui";
-import { Laptop, Moon, Sun, Zap } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { useTranslations } from "@nextblock-cms/utils";
-
-const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
-  const { t } = useTranslations();
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  const ICON_SIZE = 16;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
-          {theme === "light" ? (
-            <Sun
-              key="light"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : theme === "dark" ? (
-            <Moon
-              key="dark"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : theme === "vibrant" ? (
-            <Zap
-              key="vibrant"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : (
-            <Laptop
-              key="system"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-content" align="start">
-        <DropdownMenuRadioGroup
-          value={theme}
-          onValueChange={(e) => setTheme(e)}
-        >
-          <DropdownMenuRadioItem className="flex gap-2" value="light">
-            <Sun size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_light')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="dark">
-            <Moon size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_dark')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="vibrant">
-            <Zap size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_vibrant')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="system">
-            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_system')}</span>
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-export { ThemeSwitcher };
+import { Laptop } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useThemeCatalog } from "../context/ThemeCatalogContext";
+import { ThemeIcon } from "./theme-icon";
+
+const ICON_SIZE = 16;
+
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const { t } = useTranslations();
+  const themes = useThemeCatalog();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const active = themes.find((entry) => entry.slug === theme);
+
+  /**
+   * Built-in slugs keep their existing translation keys so no copy is lost;
+   * admin-created themes fall back to the name stored on the row.
+   */
+  const labelFor = (slug: string, name: string) => {
+    const builtin: Record<string, string> = {
+      light: "theme_light",
+      dark: "theme_dark",
+      vibrant: "theme_vibrant",
+    };
+    const key = builtin[slug];
+    if (!key) return name;
+    const translated = t(key);
+    return translated === key ? name : translated;
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
+          {active ? (
+            <ThemeIcon name={active.icon} size={ICON_SIZE} className="text-muted-foreground" />
+          ) : (
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(e) => setTheme(e)}
+        >
+          {themes.map((entry) => (
+            <DropdownMenuRadioItem key={entry.slug} className="flex gap-2" value={entry.slug}>
+              <ThemeIcon name={entry.icon} size={ICON_SIZE} className="text-muted-foreground" />{" "}
+              <span>{labelFor(entry.slug, entry.name)}</span>
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem className="flex gap-2" value="system">
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>{t('theme_system')}</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export { ThemeSwitcher };

package/templates/nextblock-template/components/visual-editing/DeferredVisualEditing.tsx

@@ -1,21 +1,21 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-// Defer the visual-editing toolbar (and its heavy editor graph: BlockEditorModal,
-// the per-block editors, and editor.css) out of the public bundle. The layout only
-// renders this in draft/visual-editing mode, but a *static* import would still ship
-// the entire editor graph to every public page. Loading it via next/dynamic with
-// ssr:false keeps it out of the public homepage's render-blocking CSS and JS, and
-// pulls it in client-side only when visual editing is actually active.
-const NextblockVisualEditing = dynamic(
-  () =>
-    import('./NextblockVisualEditing').then(
-      (module) => module.NextblockVisualEditing
-    ),
-  { ssr: false }
-);
-
-export function DeferredVisualEditing() {
-  return <NextblockVisualEditing />;
-}
+'use client';
+
+import dynamic from 'next/dynamic';
+
+// Defer the visual-editing toolbar (and its heavy editor graph: BlockEditorModal,
+// the per-block editors, and editor.css) out of the public bundle. The layout only
+// renders this in draft/visual-editing mode, but a *static* import would still ship
+// the entire editor graph to every public page. Loading it via next/dynamic with
+// ssr:false keeps it out of the public homepage's render-blocking CSS and JS, and
+// pulls it in client-side only when visual editing is actually active.
+const NextblockVisualEditing = dynamic(
+  () =>
+    import('./NextblockVisualEditing').then(
+      (module) => module.NextblockVisualEditing
+    ),
+  { ssr: false }
+);
+
+export function DeferredVisualEditing() {
+  return <NextblockVisualEditing />;
+}

package/templates/nextblock-template/context/AuthContext.tsx

@@ -1,10 +1,10 @@
 // context/AuthContext.tsx
-'use client';
-
-import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import type { User, SupabaseClient } from '@supabase/supabase-js';
-import type { Database } from '@nextblock-cms/db';
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { User, SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
 
 type Profile = Database['public']['Tables']['profiles']['Row'];
 type UserRole = Database['public']['Enums']['user_role'];
@@ -28,17 +28,17 @@ interface AuthContextType {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
-  const [user, setUser] = useState<User | null>(serverUser);
-  const [profile, setProfile] = useState<Profile | null>(serverProfile);
-  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
-  const [isLoading] = useState(false);
-
-  useEffect(() => {
-    setUser(serverUser);
-    setProfile(serverProfile);
-    setRole(serverProfile?.role ?? null);
-  }, [serverUser, serverProfile]);
+export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
+  const [user, setUser] = useState<User | null>(serverUser);
+  const [profile, setProfile] = useState<Profile | null>(serverProfile);
+  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
+  const [isLoading] = useState(false);
+
+  useEffect(() => {
+    setUser(serverUser);
+    setProfile(serverProfile);
+    setRole(serverProfile?.role ?? null);
+  }, [serverUser, serverProfile]);
 
   const isAdmin = role === 'ADMIN';
   const isWriter = role === 'WRITER';
@@ -49,11 +49,11 @@ export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProvid
     profile,
     role,
     isLoading,
-    isAdmin,
-    isWriter,
-    isUserRole,
-    supabase: null,
-  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole]);
+    isAdmin,
+    isWriter,
+    isUserRole,
+    supabase: null,
+  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole]);
 
   return (
     <AuthContext.Provider value={value}>
@@ -68,4 +68,4 @@ export const useAuth = () => {
     throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
-};
+};

package/templates/nextblock-template/context/ThemeCatalogContext.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/** The switcher-facing shape of a row in `site_themes`. */
+export interface ThemeCatalogEntry {
+  slug: string;
+  name: string;
+  /** lucide-react icon name. */
+  icon: string;
+  colorScheme: "light" | "dark";
+}
+
+/**
+ * Themes are read once on the server in app/layout.tsx and handed to the client
+ * through this context, so the switcher never fetches and never hardcodes a
+ * list. Falls back to the palette shipped in libs/ui/src/styles/theme.css when
+ * the table is empty or unreachable.
+ */
+export const FALLBACK_THEME_CATALOG: ThemeCatalogEntry[] = [
+  { slug: "light", name: "Light", icon: "Sun", colorScheme: "light" },
+  { slug: "dark", name: "Dark", icon: "Moon", colorScheme: "dark" },
+  { slug: "vibrant", name: "Vibrant", icon: "Zap", colorScheme: "dark" },
+];
+
+const ThemeCatalogContext = createContext<ThemeCatalogEntry[]>(FALLBACK_THEME_CATALOG);
+
+export function ThemeCatalogProvider({
+  themes,
+  children,
+}: {
+  themes?: ThemeCatalogEntry[];
+  children: ReactNode;
+}) {
+  const value = useMemo(
+    () => (Array.isArray(themes) && themes.length > 0 ? themes : FALLBACK_THEME_CATALOG),
+    [themes],
+  );
+  return <ThemeCatalogContext.Provider value={value}>{children}</ThemeCatalogContext.Provider>;
+}
+
+export function useThemeCatalog(): ThemeCatalogEntry[] {
+  return useContext(ThemeCatalogContext);
+}

package/templates/nextblock-template/context/language-rest-client.ts

@@ -1,32 +1,32 @@
-import type { Database } from '@nextblock-cms/db';
-import { resolveSupabaseAnonKey, resolveSupabaseUrl } from '../lib/setup/env-status';
-
-type Language = Database['public']['Tables']['languages']['Row'];
-
-export async function fetchActiveLanguagesFromRest(): Promise<Language[]> {
-  const supabaseUrl = resolveSupabaseUrl();
-  const supabaseAnonKey = resolveSupabaseAnonKey();
-
-  if (!supabaseUrl || !supabaseAnonKey) {
-    return [];
-  }
-
-  const url = new URL('/rest/v1/languages', supabaseUrl);
-  url.searchParams.set('select', 'id, code, name, is_default, is_active, created_at, updated_at');
-  url.searchParams.set('is_active', 'eq.true');
-  url.searchParams.set('order', 'name.asc');
-
-  const response = await fetch(url.toString(), {
-    headers: {
-      apikey: supabaseAnonKey,
-      Authorization: `Bearer ${supabaseAnonKey}`,
-    },
-  });
-
-  if (!response.ok) {
-    return [];
-  }
-
-  const data = await response.json();
-  return Array.isArray(data) ? data : [];
-}
+import type { Database } from '@nextblock-cms/db';
+import { resolveSupabaseAnonKey, resolveSupabaseUrl } from '../lib/setup/env-status';
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+export async function fetchActiveLanguagesFromRest(): Promise<Language[]> {
+  const supabaseUrl = resolveSupabaseUrl();
+  const supabaseAnonKey = resolveSupabaseAnonKey();
+
+  if (!supabaseUrl || !supabaseAnonKey) {
+    return [];
+  }
+
+  const url = new URL('/rest/v1/languages', supabaseUrl);
+  url.searchParams.set('select', 'id, code, name, is_default, is_active, created_at, updated_at');
+  url.searchParams.set('is_active', 'eq.true');
+  url.searchParams.set('order', 'name.asc');
+
+  const response = await fetch(url.toString(), {
+    headers: {
+      apikey: supabaseAnonKey,
+      Authorization: `Bearer ${supabaseAnonKey}`,
+    },
+  });
+
+  if (!response.ok) {
+    return [];
+  }
+
+  const data = await response.json();
+  return Array.isArray(data) ? data : [];
+}

package/templates/nextblock-template/docker/db/init/99-jwt.sql

@@ -1,6 +1,6 @@
--- Expose the JWT secret to Postgres as a database GUC, matching Supabase's setup. Runs once.
-\set jwt_secret `echo "$JWT_SECRET"`
-\set jwt_exp `echo "$JWT_EXP"`
-
-alter database postgres set "app.settings.jwt_secret" to :'jwt_secret';
-alter database postgres set "app.settings.jwt_exp" to :'jwt_exp';
+-- Expose the JWT secret to Postgres as a database GUC, matching Supabase's setup. Runs once.
+\set jwt_secret `echo "$JWT_SECRET"`
+\set jwt_exp `echo "$JWT_EXP"`
+
+alter database postgres set "app.settings.jwt_secret" to :'jwt_secret';
+alter database postgres set "app.settings.jwt_exp" to :'jwt_exp';

package/templates/nextblock-template/docker/db/init/99-roles.sql

@@ -1,25 +1,25 @@
--- Self-hosted Supabase role passwords. The supabase/postgres image creates the platform roles;
--- GoTrue logs in as supabase_auth_admin and PostgREST as authenticator. Give the roles that exist
--- the generated POSTGRES_PASSWORD (the set varies by image tag, so each is guarded; the password
--- is passed via a session GUC because psql variables aren't interpolated inside a dollar block).
--- Runs once on first init.
-\set pgpass `echo "$POSTGRES_PASSWORD"`
-select set_config('nextblock.pgpass', :'pgpass', false);
-
-do $$
-declare
-  role_name text;
-begin
-  foreach role_name in array array[
-    'authenticator',
-    'pgbouncer',
-    'supabase_auth_admin',
-    'supabase_storage_admin',
-    'supabase_functions_admin',
-    'supabase_read_only_user'
-  ] loop
-    if exists (select 1 from pg_roles where rolname = role_name) then
-      execute format('alter role %I with password %L', role_name, current_setting('nextblock.pgpass'));
-    end if;
-  end loop;
-end $$;
+-- Self-hosted Supabase role passwords. The supabase/postgres image creates the platform roles;
+-- GoTrue logs in as supabase_auth_admin and PostgREST as authenticator. Give the roles that exist
+-- the generated POSTGRES_PASSWORD (the set varies by image tag, so each is guarded; the password
+-- is passed via a session GUC because psql variables aren't interpolated inside a dollar block).
+-- Runs once on first init.
+\set pgpass `echo "$POSTGRES_PASSWORD"`
+select set_config('nextblock.pgpass', :'pgpass', false);
+
+do $$
+declare
+  role_name text;
+begin
+  foreach role_name in array array[
+    'authenticator',
+    'pgbouncer',
+    'supabase_auth_admin',
+    'supabase_storage_admin',
+    'supabase_functions_admin',
+    'supabase_read_only_user'
+  ] loop
+    if exists (select 1 from pg_roles where rolname = role_name) then
+      execute format('alter role %I with password %L', role_name, current_setting('nextblock.pgpass'));
+    end if;
+  end loop;
+end $$;