@plutocms/pluto 0.13.0 → 0.14.0

package/app/composables/pluto-i18n.ts

@@ -0,0 +1,171 @@
+import type { MessageParams } from './internal/i18n-core'
+import {
+  createTranslator,
+  formatDate,
+  formatNumber,
+} from './internal/i18n-core'
+import {
+  ADMIN_LOCALE_COOKIE,
+  detectAdminLocale,
+  getConfig,
+  loadPlutoLocale,
+  messageCache,
+  readAdminPreference,
+  SITE_LOCALE_COOKIE,
+  uiLocaleCache,
+  useLocaleCookie,
+} from './internal/i18n-runtime'
+
+/** Missing keys already reported. Shared, so a key warns once per process. */
+const warnedKeys = new Set<string>()
+
+function warnOnce(message: string) {
+  if (import.meta.dev && !warnedKeys.has(message)) {
+    warnedKeys.add(message)
+    console.warn(message)
+  }
+}
+
+/**
+ * The state both scopes share: the active locale, the translator, the
+ * formatters, and the Nuxt UI locale object. The admin and the site keep a
+ * separate active locale and a shared message cache.
+ */
+function useLocaleScope(scope: 'admin' | 'site') {
+  const config = getConfig()
+  const state = useState<string>(`pluto-${scope}-locale`, () => config.defaultLocale)
+  const locales = scope === 'admin' ? config.adminLocales : config.siteLocales
+
+  const { t, te, tx } = createTranslator({
+    locale: () => state.value,
+    fallbackLocale: 'en',
+    messages: (code) => messageCache.get(code),
+    warn: warnOnce,
+  })
+
+  return {
+    state,
+    locales,
+    locale: computed(() => state.value),
+    uiLocale: computed(() => uiLocaleCache.get(state.value) ?? uiLocaleCache.get('en')),
+    t: (key: string, params?: MessageParams | number) => t(key, params),
+    tx: (value: string, params?: MessageParams | number) => tx(value, params),
+    te,
+    n: (value: number, options?: Intl.NumberFormatOptions) => formatNumber(state.value, value, options),
+    d: (value: Date | number | string, options?: Intl.DateTimeFormatOptions) => formatDate(state.value, value, options),
+  }
+}
+
+/**
+ * Translation for the admin. The admin locale is per user: a stored choice
+ * (cookie, and the registered locale driver), else the browser language, else
+ * the default locale.
+ *
+ * `tx(value)` translates a key-or-literal string. It translates only when the
+ * value looks like a key and the key exists. Any other value returns as it is.
+ */
+export function usePlutoI18n() {
+  const scope = useLocaleScope('admin')
+  const registry = usePlutoRegistry()
+  const cookie = useLocaleCookie(ADMIN_LOCALE_COOKIE)
+  const driver = computed(() => registry.localeDrivers.list.value.at(-1) ?? null)
+
+  /** The stored choice. Null means Automatic. */
+  const preference = useState<string | null>('pluto-admin-locale-preference', () => readAdminPreference())
+
+  async function switchTo(code: string) {
+    await loadPlutoLocale(code)
+    scope.state.value = code
+  }
+
+  /**
+   * Switches the admin language at once. A code is an explicit choice. Null is
+   * Automatic: the browser language is detected again. The cookie keeps the
+   * explicit code, or is cleared for Automatic. Then the registered locale
+   * driver, if any, saves the choice. A driver error rejects the promise, and
+   * the switch stays.
+   */
+  async function setLocale(code: string | null) {
+    if (code !== null && !scope.locales.includes(code)) {
+      return
+    }
+    await switchTo(code ?? detectAdminLocale())
+    preference.value = code
+    cookie.value = code
+    await driver.value?.save(code)
+  }
+
+  /**
+   * Reads the user's stored language from the locale driver. A stored code
+   * switches the admin to it and sets the cookie. No stored code means
+   * Automatic: the cookie is cleared, and the browser language applies. With
+   * no driver, or on a driver error, nothing changes.
+   */
+  async function syncUserLocale() {
+    if (!driver.value) {
+      return
+    }
+    let stored: string | null
+    try {
+      stored = await driver.value.load()
+    } catch (error) {
+      warnOnce(`[pluto-i18n] Could not load the user's language: ${error instanceof Error ? error.message : String(error)}`)
+      return
+    }
+    if (stored && scope.locales.includes(stored)) {
+      await switchTo(stored)
+      preference.value = stored
+      cookie.value = stored
+    } else {
+      await switchTo(detectAdminLocale())
+      preference.value = null
+      cookie.value = null
+    }
+  }
+
+  return {
+    locale: scope.locale,
+    locales: computed(() => scope.locales),
+    uiLocale: scope.uiLocale,
+    preference: computed(() => preference.value),
+    t: scope.t,
+    tx: scope.tx,
+    te: scope.te,
+    n: scope.n,
+    d: scope.d,
+    setLocale,
+    syncUserLocale,
+  }
+}
+
+/**
+ * Translation for the public site. The site locale belongs to the app: the
+ * `pluto-site-locale` cookie, else the `plutoI18n.siteLocale` option, else the
+ * default locale. It does not follow the admin language.
+ */
+export function usePlutoSiteI18n() {
+  const scope = useLocaleScope('site')
+  const cookie = useLocaleCookie(SITE_LOCALE_COOKIE)
+
+  /** Switches the site language, and keeps it in the `pluto-site-locale` cookie. */
+  async function setLocale(code: string) {
+    if (!scope.locales.includes(code)) {
+      return
+    }
+    await loadPlutoLocale(code)
+    scope.state.value = code
+    cookie.value = code
+  }
+
+  return {
+    locale: scope.locale,
+    locales: computed(() => scope.locales),
+    uiLocale: scope.uiLocale,
+    t: scope.t,
+    tx: scope.tx,
+    te: scope.te,
+    n: scope.n,
+    d: scope.d,
+    setLocale,
+  }
+}

package/app/composables/pluto-permissions.ts

@@ -1,7 +1,21 @@
-/** Capabilities declared by every layer, in registry order. */
+/**
+ * Capabilities declared by every layer, in registry order. The label and the
+ * description are key-or-literal. They resolve with `tx()` inside the
+ * `computed`, so a locale switch updates them.
+ */
 export function usePlutoCapabilities() {
   const registry = usePlutoRegistry()
-  return { items: registry.capabilities.list }
+  const { tx } = usePlutoI18n()
+
+  const items = computed<PlutoCapability[]>(() =>
+    registry.capabilities.list.value.map((capability) => ({
+      ...capability,
+      label: tx(capability.label),
+      description: capability.description === undefined ? undefined : tx(capability.description),
+    }))
+  )
+
+  return { items }
 }
 
 /**

package/app/composables/pluto-registry.ts

@@ -20,6 +20,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       pages: createOwnedRegistry<PlutoAdminPage>(),
       settingsPanels: createOwnedRegistry<PlutoSettingsPanel>(),
       settingsDrivers: createOwnedRegistry<PlutoSettingsDriver>(),
+      localeDrivers: createOwnedRegistry<PlutoLocaleDriver>(),
       dashboardWidgets: createOwnedRegistry<PlutoDashboardWidget>(),
       capabilities: createOwnedRegistry<PlutoCapability>(),
       permissionsDrivers: createOwnedRegistry<PlutoPermissionsDriver>(),

package/app/composables/pluto-settings.ts

@@ -1,7 +1,21 @@
-/** Settings panels registered by every layer, in registry order. */
+/**
+ * Settings panels registered by every layer, in registry order. The title and
+ * the description are key-or-literal. They resolve with `tx()` inside the
+ * `computed`, so a locale switch updates them.
+ */
 export function usePlutoSettingsPanels() {
   const registry = usePlutoRegistry()
-  return { items: registry.settingsPanels.list }
+  const { tx } = usePlutoI18n()
+
+  const items = computed<PlutoSettingsPanel[]>(() =>
+    registry.settingsPanels.list.value.map((panel) => ({
+      ...panel,
+      title: tx(panel.title),
+      description: panel.description === undefined ? undefined : tx(panel.description),
+    }))
+  )
+
+  return { items }
 }
 
 /**

package/app/layouts/admin.vue

@@ -34,6 +34,7 @@ const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
 
 const commandGroups = usePlutoCommandPalette()
+const { t } = usePlutoI18n()
 
 // Keep the consumer app's public-site theme out of the admin.
 usePlutoAdminTheme()
@@ -95,6 +96,6 @@ const groupStyle = { top: 'var(--ui-header-height)' }
     </UDashboardPanel>
 
     <!-- Cmd/Ctrl+K. See usePlutoCommandPalette for the commands. -->
-    <UDashboardSearch :groups="commandGroups" placeholder="Search pages and actions…" />
+    <UDashboardSearch :groups="commandGroups" :placeholder="t('pluto.palette.placeholder')" />
   </UDashboardGroup>
 </template>

package/app/pages/admin/content/[type]/[id].vue

@@ -3,14 +3,16 @@ const route = useRoute()
 const typeName = route.params.type as string
 
 const { byName } = usePlutoContentTypes()
+const { t } = usePlutoI18n()
 const type = byName(typeName)
+const text = usePlutoContentText(type)
 
 if (!type) {
   throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
 }
 
 useHead({
-  title: `Edit ${type.label}`,
+  title: () => t('pluto.content.edit', { label: text.label }),
 })
 </script>
 

package/app/pages/admin/content/[type]/index.vue

@@ -4,13 +4,14 @@ const typeName = route.params.type as string
 
 const { byName } = usePlutoContentTypes()
 const type = byName(typeName)
+const text = usePlutoContentText(type)
 
 if (!type) {
   throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
 }
 
 useHead({
-  title: type.labelPlural,
+  title: () => text.labelPlural,
 })
 </script>
 

package/app/pages/admin/content/[type]/new.vue

@@ -4,13 +4,14 @@ const typeName = route.params.type as string
 
 const { byName } = usePlutoContentTypes()
 const type = byName(typeName)
+const text = usePlutoContentText(type)
 
 if (!type) {
   throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
 }
 
 useHead({
-  title: `New ${type.label}`,
+  title: () => text.newLabel,
 })
 </script>
 

package/app/pages/admin/home.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+const { t, d } = usePlutoI18n()
+
 useHead({
-  title: 'Dashboard',
+  title: () => t('pluto.pages.dashboard'),
 })
 
-const today = new Intl.DateTimeFormat(undefined, { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date())
+const today = computed(() => d(new Date(), { weekday: 'long', month: 'long', day: 'numeric' }))
 
 // The header's Create button reuses the command palette's Create commands.
 const groups = usePlutoCommandPalette()
@@ -21,7 +23,7 @@ function run(item: {
     <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
       <div>
         <p class="text-muted text-sm">{{ today }}</p>
-        <h1 class="text-highlighted text-2xl font-semibold tracking-tight lg:text-3xl">Dashboard</h1>
+        <h1 class="text-highlighted text-2xl font-semibold tracking-tight lg:text-3xl">{{ t('pluto.pages.dashboard') }}</h1>
       </div>
 
       <UButton
@@ -33,7 +35,7 @@ function run(item: {
       />
 
       <UDropdownMenu v-else-if="createItems.length > 1" :items="createItems" :content="{ align: 'end' }">
-        <UButton label="Create" icon="lucide:plus" trailing-icon="lucide:chevron-down" size="md" />
+        <UButton :label="t('pluto.common.create')" icon="lucide:plus" trailing-icon="lucide:chevron-down" size="md" />
       </UDropdownMenu>
     </header>
 

package/app/pages/admin/settings.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Settings',
+  title: () => t('pluto.pages.settings'),
 })
 
 const { items } = usePlutoSettingsPanels()
@@ -16,13 +18,16 @@ onMounted(() => {
 <template>
   <main>
     <AdminView>
-      <h1 class="text-3xl font-bold lg:text-4xl">Settings</h1>
+      <h1 class="text-3xl font-bold lg:text-4xl">{{ t('pluto.pages.settings') }}</h1>
+
+      <!-- Per-user, so it needs no capability and no settings driver. -->
+      <PlutoSettingsLanguage />
 
       <UAlert
         v-if="!hasDriver"
+        :title="t('pluto.settings.noStorage')"
+        :description="t('pluto.settings.noStorageHint')"
         color="warning"
-        title="No settings storage"
-        description="No installed layer provides settings storage yet."
       />
 
       <template v-else>
@@ -37,7 +42,7 @@ onMounted(() => {
 
         <div class="flex">
           <UButton :loading="status === 'saving'" icon="lucide:save" @click="save">
-            Save
+            {{ t('pluto.common.save') }}
           </UButton>
         </div>
       </template>

package/app/plugins/pluto-core-registrations.ts

@@ -14,6 +14,9 @@ import PlutoDashboardQuickActions from '../components/Pluto/Dashboard/PlutoDashb
 // Home/Settings nav entries, so every other layer's nav item sorts between
 // them by default (default order is 100).
 //
+// Labels and titles are translation keys, not English text. The consumer
+// composables resolve them with `tx()`. See the i18n skill.
+//
 // Everything core itself contributes to the registry lives in this one
 // `definePlutoExtension` call — `definePlutoExtension` replaces a layer's
 // whole contribution on every call, not just the buckets that call passes,
@@ -27,12 +30,12 @@ export default defineNuxtPlugin(() => {
   definePlutoExtension({
     id: 'pluto',
     nav: [
-      { id: 'home', order: 0, label: 'Home', icon: 'lucide:house', to: '/admin/home' },
-      { id: 'settings', order: 1000, label: 'Settings', icon: 'lucide:settings', to: '/admin/settings' },
+      { id: 'home', order: 0, label: 'pluto.nav.home', icon: 'lucide:house', to: '/admin/home' },
+      { id: 'settings', order: 1000, label: 'pluto.nav.settings', icon: 'lucide:settings', to: '/admin/settings' },
     ],
     pages: [
-      { id: 'home', path: '/admin/home', title: 'Dashboard', icon: 'lucide:house' },
-      { id: 'settings', path: '/admin/settings', title: 'Settings', icon: 'lucide:settings' },
+      { id: 'home', path: '/admin/home', title: 'pluto.pages.dashboard', icon: 'lucide:house' },
+      { id: 'settings', path: '/admin/settings', title: 'pluto.pages.settings', icon: 'lucide:settings' },
     ],
     contentFieldWidgets: [
       { id: 'text', fieldType: 'text', component: PlutoFieldText },
@@ -52,7 +55,7 @@ export default defineNuxtPlugin(() => {
       {
         id: 'content-overview',
         order: 0,
-        title: 'Content',
+        title: 'pluto.dashboard.overview.title',
         colSpan: 3,
         component: PlutoDashboardContentOverview,
         enabled: () => usePlutoContentTypes().items.value.length > 0,
@@ -62,7 +65,7 @@ export default defineNuxtPlugin(() => {
       {
         id: 'content-activity',
         order: 10,
-        title: 'Content activity',
+        title: 'pluto.dashboard.activity.title',
         colSpan: 2,
         component: PlutoDashboardContentActivity,
         enabled: () => usePlutoContentTypes().items.value.length > 0,
@@ -70,7 +73,7 @@ export default defineNuxtPlugin(() => {
       {
         id: 'quick-actions',
         order: 20,
-        title: 'Quick actions',
+        title: 'pluto.dashboard.quickActions.title',
         colSpan: 1,
         component: PlutoDashboardQuickActions,
       },

package/app/plugins/pluto-i18n.ts

@@ -0,0 +1,20 @@
+import {
+  loadPlutoLocale,
+  resolveAdminLocale,
+  resolveSiteLocale,
+} from '../composables/internal/i18n-runtime'
+
+// Resolves the admin locale and the site locale, and loads their messages and
+// Nuxt UI locale before the first render. The locales live in `useState`, so
+// the client reuses the value the server chose: no mismatch on hydration. The
+// resolve runs only when the state is empty (the server, or a client-only
+// route such as /admin/**).
+export default defineNuxtPlugin({
+  name: 'pluto-i18n',
+  async setup() {
+    const admin = useState<string>('pluto-admin-locale', resolveAdminLocale)
+    const site = useState<string>('pluto-site-locale', resolveSiteLocale)
+
+    await Promise.all([loadPlutoLocale(admin.value), loadPlutoLocale(site.value)])
+  },
+})

package/i18n/locales/en.json

@@ -0,0 +1,137 @@
+{
+  "pluto": {
+    "app": {
+      "name": "Pluto Admin"
+    },
+    "common": {
+      "save": "Save",
+      "cancel": "Cancel",
+      "delete": "Delete",
+      "tryAgain": "Try again",
+      "close": "Close",
+      "loading": "Loading...",
+      "remove": "Remove",
+      "edit": "Edit",
+      "refresh": "Refresh",
+      "settings": "Settings",
+      "create": "Create",
+      "error": "Error",
+      "switchToLightMode": "Switch to light mode",
+      "switchToDarkMode": "Switch to dark mode"
+    },
+    "nav": {
+      "home": "Home",
+      "settings": "Settings"
+    },
+    "pages": {
+      "dashboard": "Dashboard",
+      "settings": "Settings"
+    },
+    "palette": {
+      "goTo": "Go to",
+      "placeholder": "Search pages and actions…"
+    },
+    "content": {
+      "new": "New {label}",
+      "edit": "Edit {label}",
+      "all": "All {labelPlural}",
+      "createNew": "Create new {label}",
+      "typeNotFound": "Content type not found",
+      "typeNotFoundDescription": "No content type named \"{type}\" is registered.",
+      "removeConfirm": "Do you really want to remove this item?"
+    },
+    "form": {
+      "published": "Published",
+      "unpublished": "Unpublished",
+      "saved": "Saved",
+      "updated": "{label} updated successfully.",
+      "saveError": "An error occurred while saving.",
+      "removeError": "An error occurred while removing.",
+      "saveDraft": "Save draft",
+      "update": "Update",
+      "publish": "Publish",
+      "unpublish": "Unpublish",
+      "fixErrors": "Please fix the following before saving",
+      "removeTitle": "Remove {label}"
+    },
+    "list": {
+      "loading": "Loading {labelPlural}…",
+      "loadFailed": "Could not load {labelPlural}",
+      "loadFailedHint": "Check your connection and try again.",
+      "empty": "No {labelPlural} yet",
+      "emptyCanWrite": "Create the first {label} to see it here.",
+      "emptyReadOnly": "There is nothing here yet.",
+      "refreshFailed": "Could not refresh {labelPlural}",
+      "refreshFailedHint": "The list below may be out of date.",
+      "emptyTable": "No items yet.",
+      "removeTitle": "Remove item",
+      "showing": "Showing {loaded} {labelPlural}",
+      "showingOf": "Showing {loaded} of {total} {labelPlural}",
+      "loadingMore": "Loading more…"
+    },
+    "fields": {
+      "noWidget": "No widget registered for field type \"{type}\".",
+      "noOptionsSource": "No options source configured for this reference field."
+    },
+    "dashboard": {
+      "noWidgets": "No dashboard widgets are registered yet. A layer can add one with",
+      "overview": {
+        "title": "Content",
+        "label": "Content overview",
+        "loadFailed": "Could not load the content counts",
+        "thisWeek": "this week",
+        "noneThisWeek": "none new this week",
+        "meter": "{published} of {total} {labelPlural} published",
+        "published": "published | published | published",
+        "drafts": "drafts | draft | drafts"
+      },
+      "activity": {
+        "title": "Content activity",
+        "subtitle": "Items created per week, last {weeks} weeks",
+        "created": "created | created | created",
+        "loadFailed": "Could not load the activity",
+        "unavailable": "Activity is not available",
+        "unavailableHint": "The content backend cannot count items by creation date yet.",
+        "none": "Nothing created in the last {weeks} weeks",
+        "noneHint": "New items show up here week by week.",
+        "weekOf": "Week of"
+      },
+      "quickActions": {
+        "title": "Quick actions",
+        "pressBefore": "Press",
+        "pressAfter": "to search everything."
+      }
+    },
+    "settings": {
+      "noStorage": "No settings storage",
+      "noStorageHint": "No installed layer provides settings storage yet.",
+      "language": {
+        "cardTitle": "Your preferences",
+        "label": "Language",
+        "description": "Choose the language of the admin. It applies to your account only.",
+        "automatic": "Automatic (browser)",
+        "saved": "Language updated",
+        "saveFailed": "Could not save your language",
+        "saveFailedDescription": "The language changed on this device only. {reason}"
+      }
+    },
+    "errors": {
+      "unknown": "Something went wrong.",
+      "contentTypeNotFound": "Content type \"{name}\" not found.",
+      "noContentAdapter": "No content adapter is registered.",
+      "notFound": "Not found.",
+      "bodyNotObject": "Request body must be a JSON object.",
+      "validationFailed": "Validation failed."
+    },
+    "validation": {
+      "required": "\"{label}\" is required.",
+      "number": "\"{label}\" must be a number.",
+      "integer": "\"{label}\" must be an integer.",
+      "min": "\"{label}\" must be at least {min}.",
+      "max": "\"{label}\" must be at most {max}.",
+      "boolean": "\"{label}\" must be a boolean.",
+      "option": "\"{label}\" must be one of the allowed options.",
+      "maxLength": "\"{label}\" must be at most {max} characters."
+    }
+  }
+}