@plutocms/pluto 0.13.0 → 0.14.1

package/app/components/Pluto/Dashboard/PlutoDashboardContentActivity.vue

@@ -7,11 +7,12 @@
 const WEEKS = 12
 
 const { data: series, status, refresh } = usePlutoContentActivity(WEEKS)
+const { t, n, d } = usePlutoI18n()
+const texts = usePlutoContentTexts()
 
-const number = new Intl.NumberFormat()
 // The week starts are UTC dates. Format them in UTC so a viewer west of
 // UTC does not see the previous day.
-const weekLabel = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+const weekLabel = (start: string) => d(new Date(`${start}T00:00:00Z`), { month: 'short', day: 'numeric', timeZone: 'UTC' })
 
 const rows = computed(() => {
   const first = series.value[0]
@@ -19,7 +20,7 @@ const rows = computed(() => {
     return []
   }
   return first.points.map((point, index) => {
-    const row: Record<string, string | number> = { week: weekLabel.format(new Date(`${point.start}T00:00:00Z`)) }
+    const row: Record<string, string | number> = { week: weekLabel(point.start) }
     for (const entry of series.value) {
       row[entry.name] = entry.points[index]?.count ?? 0
     }
@@ -27,7 +28,9 @@ const rows = computed(() => {
   })
 })
 
-const categories = computed(() => series.value.map((entry) => ({ key: entry.name, label: entry.labelPlural })))
+// The series carry the English labels. The content text resolves the keys.
+const seriesLabel = (entry: PlutoContentActivitySeries) => texts(entry.name).labelPlural
+const categories = computed(() => series.value.map((entry) => ({ key: entry.name, label: seriesLabel(entry) })))
 
 const total = computed(() =>
   series.value.reduce((sum, entry) => sum + entry.points.reduce((acc, point) => acc + point.count, 0), 0)
@@ -45,12 +48,12 @@ function retry() {
     <template #header>
       <div class="flex items-start justify-between gap-4">
         <div>
-          <h3 class="text-highlighted font-semibold">Content activity</h3>
-          <p class="text-muted text-sm">Items created per week, last {{ WEEKS }} weeks</p>
+          <h3 class="text-highlighted font-semibold">{{ t('pluto.dashboard.activity.title') }}</h3>
+          <p class="text-muted text-sm">{{ t('pluto.dashboard.activity.subtitle', { weeks: WEEKS }) }}</p>
         </div>
         <div v-if="status === 'success' && series.length" class="text-right">
-          <p class="text-highlighted text-2xl font-semibold tabular-nums">{{ number.format(total) }}</p>
-          <p class="text-muted text-xs">created</p>
+          <p class="text-highlighted text-2xl font-semibold tabular-nums">{{ n(total) }}</p>
+          <p class="text-muted text-xs">{{ t('pluto.dashboard.activity.created', total) }}</p>
         </div>
       </div>
     </template>
@@ -59,26 +62,26 @@ function retry() {
 
     <UAlert
       v-else-if="status === 'error'"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.dashboard.activity.loadFailed')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
-      title="Could not load the activity"
     />
 
     <UEmpty
       v-else-if="!series.length"
+      :title="t('pluto.dashboard.activity.unavailable')"
+      :description="t('pluto.dashboard.activity.unavailableHint')"
       icon="lucide:chart-line"
-      title="Activity is not available"
-      description="The content backend cannot count items by creation date yet."
       variant="naked"
     />
 
     <UEmpty
       v-else-if="total === 0"
-      :title="`Nothing created in the last ${WEEKS} weeks`"
+      :title="t('pluto.dashboard.activity.none', { weeks: WEEKS })"
+      :description="t('pluto.dashboard.activity.noneHint')"
       icon="lucide:chart-line"
-      description="New items show up here week by week."
       variant="naked"
     />
 
@@ -88,18 +91,18 @@ function retry() {
         :data="rows"
         :categories="categories"
         :height="256"
-        :format="(value: number) => number.format(value)"
-        :aria-label="`Items created per week, last ${WEEKS} weeks`"
+        :format="(value: number) => n(value)"
+        :aria-label="t('pluto.dashboard.activity.subtitle', { weeks: WEEKS })"
         index="week"
         curve="monotone"
       />
 
       <table class="sr-only">
-        <caption>Items created per week, last {{ WEEKS }} weeks</caption>
+        <caption>{{ t('pluto.dashboard.activity.subtitle', { weeks: WEEKS }) }}</caption>
         <thead>
           <tr>
-            <th scope="col">Week of</th>
-            <th v-for="entry in series" :key="entry.name" scope="col">{{ entry.labelPlural }}</th>
+            <th scope="col">{{ t('pluto.dashboard.activity.weekOf') }}</th>
+            <th v-for="entry in series" :key="entry.name" scope="col">{{ seriesLabel(entry) }}</th>
           </tr>
         </thead>
         <tbody>

package/app/components/Pluto/Dashboard/PlutoDashboardContentOverview.vue

@@ -9,7 +9,8 @@ const { items: contentTypes } = usePlutoContentTypes()
 const { stats, pending, error, refresh } = usePlutoContentStats()
 const { data: activity } = usePlutoContentActivity()
 
-const number = new Intl.NumberFormat()
+const { t, n } = usePlutoI18n()
+const texts = usePlutoContentTexts()
 
 function retry() {
   refresh().catch(() => {})
@@ -26,14 +27,14 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
 </script>
 
 <template>
-  <section v-if="contentTypes.length" aria-label="Content overview">
+  <section v-if="contentTypes.length" :aria-label="t('pluto.dashboard.overview.label')">
     <UAlert
       v-if="error && !stats.length"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.dashboard.overview.loadFailed')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
-      title="Could not load the content counts"
     />
 
     <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
@@ -57,7 +58,7 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
         <UCard class="group-hover:ring-accented h-full transition-shadow group-hover:shadow-sm">
           <div class="flex flex-col gap-3">
             <div class="flex items-start justify-between gap-3">
-              <p class="text-muted text-sm font-medium">{{ stat.labelPlural }}</p>
+              <p class="text-muted text-sm font-medium">{{ texts(stat.name).labelPlural }}</p>
               <span class="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md">
                 <UIcon :name="stat.icon ?? 'lucide:file'" class="size-4" />
               </span>
@@ -65,14 +66,14 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
 
             <div class="flex items-baseline gap-2">
               <p class="text-highlighted text-3xl font-semibold tracking-tight tabular-nums">
-                {{ number.format(stat.total) }}
+                {{ n(stat.total) }}
               </p>
               <p v-if="thisWeek(stat) !== undefined" class="text-sm">
                 <template v-if="thisWeek(stat)">
-                  <span class="text-success font-medium tabular-nums">+{{ number.format(thisWeek(stat)!) }}</span>
-                  <span class="text-muted"> this week</span>
+                  <span class="text-success font-medium tabular-nums">+{{ n(thisWeek(stat)!) }}</span>
+                  <span class="text-muted"> {{ t('pluto.dashboard.overview.thisWeek') }}</span>
                 </template>
-                <span v-else class="text-dimmed">none new this week</span>
+                <span v-else class="text-dimmed">{{ t('pluto.dashboard.overview.noneThisWeek') }}</span>
               </p>
             </div>
 
@@ -80,7 +81,7 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
               <div
                 :aria-valuenow="stat.published"
                 :aria-valuemax="stat.total"
-                :aria-label="`${stat.published} of ${stat.total} ${stat.labelPlural.toLowerCase()} published`"
+                :aria-label="t('pluto.dashboard.overview.meter', { published: stat.published, total: stat.total, labelPlural: texts(stat.name).labelPluralLower })"
                 role="meter"
                 aria-valuemin="0"
                 class="bg-accented flex h-1.5 overflow-hidden rounded-full"
@@ -89,10 +90,10 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
               </div>
 
               <p class="text-muted text-sm">
-                <span class="text-highlighted font-medium tabular-nums">{{ number.format(stat.published) }}</span>
-                published ·
-                <span class="tabular-nums">{{ number.format(stat.drafts ?? 0) }}</span>
-                {{ stat.drafts === 1 ? 'draft' : 'drafts' }}
+                <span class="text-highlighted font-medium tabular-nums">{{ n(stat.published) }}</span>
+                {{ t('pluto.dashboard.overview.published', stat.published) }} ·
+                <span class="tabular-nums">{{ n(stat.drafts ?? 0) }}</span>
+                {{ t('pluto.dashboard.overview.drafts', stat.drafts ?? 0) }}
               </p>
             </template>
           </div>

package/app/components/Pluto/Dashboard/PlutoDashboardQuickActions.vue

@@ -3,13 +3,14 @@
 // the two never disagree: every "New <label>" command the user can run, and
 // a few admin destinations.
 const groups = usePlutoCommandPalette()
+const { t } = usePlutoI18n()
 
 const create = computed(() => groups.value.find((group) => group.id === 'pluto-create')?.items ?? [])
 
 const goTo = computed(() =>
   (groups.value.find((group) => group.id === 'pluto-go-to')?.items ?? [])
     // Home is the page this widget is on.
-    .filter((item) => item.label !== 'Home')
+    .filter((item) => item.label !== t('pluto.nav.home'))
     .slice(0, 4)
 )
 
@@ -23,12 +24,12 @@ function run(item: {
 <template>
   <UCard class="h-full">
     <template #header>
-      <h3 class="text-highlighted font-semibold">Quick actions</h3>
+      <h3 class="text-highlighted font-semibold">{{ t('pluto.dashboard.quickActions.title') }}</h3>
       <p class="text-muted text-sm">
-        Press
+        {{ t('pluto.dashboard.quickActions.pressBefore') }}
         <UKbd value="meta" size="sm" />
         <UKbd value="k" size="sm" />
-        to search everything.
+        {{ t('pluto.dashboard.quickActions.pressAfter') }}
       </p>
     </template>
 
@@ -49,7 +50,7 @@ function run(item: {
       </div>
 
       <div v-if="goTo.length" class="flex flex-col gap-1">
-        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">Go to</p>
+        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">{{ t('pluto.palette.goTo') }}</p>
         <UButton
           v-for="item in goTo"
           :key="item.label"

package/app/components/Pluto/PlutoDashboardWidgets.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { items } = usePlutoDashboardWidgets()
+const { t } = usePlutoI18n()
 </script>
 
 <template>
@@ -15,7 +16,7 @@ const { items } = usePlutoDashboardWidgets()
 
   <UCard v-else>
     <p class="text-muted text-sm">
-      No dashboard widgets are registered yet. A layer can add one with
+      {{ t('pluto.dashboard.noWidgets') }}
       <code>definePlutoExtension</code>.
     </p>
   </UCard>

package/app/components/Pluto/PlutoRoot.vue

@@ -1,10 +1,27 @@
 <script setup lang="ts">
 const { component: navbar } = usePlutoNavbarShell()
+
+// One Nuxt UI locale per page: the admin's on /admin routes, the site's on the
+// rest. The admin navbar on a public page keeps the site locale for Nuxt UI
+// text, but its own labels use the admin locale through usePlutoI18n().
+const route = useRoute()
+const admin = usePlutoI18n()
+const site = usePlutoSiteI18n()
+const isAdmin = computed(() => route.path === '/admin' || route.path.startsWith('/admin/'))
+const active = computed(() => (isAdmin.value ? admin : site))
+const uiLocale = computed(() => active.value.uiLocale.value)
+
+useHead({
+  htmlAttrs: {
+    lang: computed(() => active.value.locale.value),
+    dir: computed(() => uiLocale.value?.dir ?? 'ltr'),
+  },
+})
 </script>
 
 <template>
   <div class="flex min-h-0 min-w-0 w-full grow flex-col">
-    <UApp class="flex min-h-0 min-w-0 w-full grow flex-col">
+    <UApp :locale="uiLocale" class="flex min-h-0 min-w-0 w-full grow flex-col">
       <NuxtRouteAnnouncer />
       <NuxtLoadingIndicator />
 

package/app/components/Pluto/Settings/PlutoSettingsLanguage.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getLanguageName } from '../../../composables/internal/i18n-core'
+
+// The select cannot hold null, so Automatic uses this value. It is not a
+// valid locale code, so it never clashes with one.
+const AUTOMATIC = '__automatic__'
+
+const { t, locales, preference, setLocale } = usePlutoI18n()
+const toast = useToast()
+
+const items = computed(() => [
+  { label: t('pluto.settings.language.automatic'), value: AUTOMATIC },
+  // Each language is named in its own language, so a user finds it.
+  ...locales.value.map((code) => ({ label: getLanguageName(code), value: code })),
+])
+
+const selected = computed(() => preference.value ?? AUTOMATIC)
+
+async function onChange(value: string) {
+  try {
+    await setLocale(value === AUTOMATIC ? null : value)
+    toast.add({ title: t('pluto.settings.language.saved'), color: 'success' })
+  } catch (error) {
+    // The switch stays on this device. Only the save failed.
+    toast.add({
+      title: t('pluto.settings.language.saveFailed'),
+      description: t('pluto.settings.language.saveFailedDescription', {
+        reason: error instanceof Error ? error.message : String(error),
+      }),
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-semibold">{{ t('pluto.settings.language.cardTitle') }}</h2>
+    </template>
+
+    <UFormField :label="t('pluto.settings.language.label')" :description="t('pluto.settings.language.description')">
+      <USelect
+        :model-value="selected"
+        :items="items"
+        class="w-full sm:w-64"
+        @update:model-value="onChange"
+      />
+    </UFormField>
+  </UCard>
+</template>

package/app/components/modal/ModalHeader.vue

@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['close'])
 
+const { t } = usePlutoI18n()
+
 const closeModel = defineModel<() => void>('close')
 
 const resolvedClasses = computed(() => {
@@ -56,7 +58,7 @@ function closeModal() {
 
       <div v-if="props.hideCloseButton === false">
         <UButton size="sm" variant="ghost" square @click="closeModal">
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ t('pluto.common.close') }}</span>
 
           <Icon name="lucide:x" class="text-xl" />
         </UButton>

package/app/composables/internal/content-text.ts

@@ -0,0 +1,111 @@
+// Pure part of `usePlutoContentText`. It does not use Nuxt auto-imports, so
+// plain Vitest can import it, and so a composable can call it for each type
+// inside one `computed`.
+import type { PlutoContentType, PlutoField } from '../../../shared/types/content'
+import type { MessageParams } from './i18n-core'
+
+/** The part of `usePlutoI18n()` that content text needs. */
+export interface ContentTextI18n {
+  t: (key: string, params?: MessageParams | number) => string
+  te: (key: string) => boolean
+  locale: {
+ readonly value: string
+}
+}
+
+export interface PlutoContentText {
+  /** The singular label: the key `content.<name>.label`, else `type.label`. */
+  readonly label: string
+  /** The plural label: the key `content.<name>.labelPlural`, else `type.labelPlural`. */
+  readonly labelPlural: string
+  /** The label in lowercase, for use inside a sentence. */
+  readonly labelLower: string
+  /** The plural label in lowercase, for use inside a sentence. */
+  readonly labelPluralLower: string
+  /** The "New <label>" text: the key `content.<name>.new`, else the core phrase. */
+  readonly newLabel: string
+  /** The label of a field: the key `content.<name>.fields.<field>.label`, else `field.label`. */
+  fieldLabel: (field: PlutoField) => string
+  /** A copy of a field with translated label, description, placeholder and option labels. */
+  field: <F extends PlutoField>(field: F) => F
+  /** The label of a status value: the key `content.<name>.status.<value>`, else `literal`, else the value. */
+  statusLabel: (value: string, literal?: string) => string
+}
+
+/**
+ * Resolves the convention keys of one content type, with the English literal
+ * of the type as the fallback. A key is used only when it exists, so a type
+ * that has no key keeps its English text.
+ *
+ * `getType` runs on each read, so a locale switch or a changed type shows at
+ * once when the caller reads inside a reactive scope.
+ */
+export function createContentText(getType: () => PlutoContentType | undefined, i18n: ContentTextI18n): PlutoContentText {
+  const prefix = () => `content.${getType()?.name ?? ''}`
+
+  /** The translation when the key exists, else the literal. */
+  function pick<L extends string | undefined>(key: string, literal: L): string | L {
+    return i18n.te(key) ? i18n.t(key) : literal
+  }
+
+  const lower = (value: string) => value.toLocaleLowerCase(i18n.locale.value)
+  const label = () => pick(`${prefix()}.label`, getType()?.label ?? '')
+  const labelPlural = () => pick(`${prefix()}.labelPlural`, getType()?.labelPlural ?? '')
+
+  function fieldLabel(field: PlutoField): string {
+    return pick(`${prefix()}.fields.${field.name}.label`, field.label)
+  }
+
+  function field<F extends PlutoField>(source: F): F {
+    const base = `${prefix()}.fields.${source.name}`
+    const copy: Record<string, unknown> = { ...source, label: fieldLabel(source) }
+
+    const description = pick(`${base}.description`, source.description)
+    if (description !== undefined) {
+      copy.description = description
+    }
+
+    const placeholder = pick(`${base}.placeholder`, (source as {
+ placeholder?: string
+}).placeholder)
+    if (placeholder !== undefined) {
+      copy.placeholder = placeholder
+    }
+
+    if (source.type === 'select') {
+      copy.options = source.options.map((option) => ({
+        ...option,
+        label: pick(`${base}.options.${option.value}`, option.label),
+      }))
+    }
+
+    return copy as F
+  }
+
+  return {
+    get label() {
+      return label()
+    },
+    get labelPlural() {
+      return labelPlural()
+    },
+    get labelLower() {
+      return lower(label())
+    },
+    get labelPluralLower() {
+      return lower(labelPlural())
+    },
+    get newLabel() {
+      const key = `${prefix()}.new`
+      return i18n.te(key) ? i18n.t(key) : i18n.t('pluto.content.new', { label: label() })
+    },
+    fieldLabel,
+    field,
+    statusLabel: (value, literal) => pick(`${prefix()}.status.${value}`, literal ?? value),
+  }
+}
+
+/** Same as `createContentText`, for a type that is already in hand. */
+export function contentTextFor(type: PlutoContentType, i18n: ContentTextI18n): PlutoContentText {
+  return createContentText(() => type, i18n)
+}

package/app/composables/internal/error-text.ts

@@ -0,0 +1,62 @@
+// Pure part of `usePlutoErrorText`. It does not use Nuxt auto-imports.
+import type { MessageParams } from './i18n-core'
+
+/** The fallback key when the caller passes none. */
+export const DEFAULT_ERROR_KEY = 'pluto.errors.unknown'
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : undefined
+}
+
+function nonEmpty(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() !== '' ? value : undefined
+}
+
+/**
+ * Finds the `{ key, params }` that a `createPlutoError` call put in the
+ * response. A `$fetch` error holds the whole response body in `data`, so the
+ * pair sits in `data.data.i18n`. An error that Nuxt creates on the client
+ * holds it in `data.i18n`.
+ */
+function findTag(data: Record<string, unknown> | undefined): {
+ key: string
+params?: MessageParams
+} | undefined {
+  for (const candidate of [asRecord(data?.i18n), asRecord(asRecord(data?.data)?.i18n)]) {
+    if (candidate && typeof candidate.key === 'string') {
+      return { key: candidate.key, params: asRecord(candidate.params) }
+    }
+  }
+  return undefined
+}
+
+/**
+ * Turns an error into text for an admin. Order:
+ *
+ * 1. The translated `data.i18n` of a server `createPlutoError`.
+ * 2. The `statusMessage`, then the `message`, of the response body
+ *    (English). Then the `statusMessage` of the error itself. A `$fetch`
+ *    error copies that one from the HTTP status text. The status text can
+ *    be a generic phrase ("Unsupported Media Type") and is empty over
+ *    HTTP/2, so the body comes first.
+ * 3. The translated fallback key.
+ */
+export function resolveErrorText(
+  error: unknown,
+  fallbackKey: string,
+  i18n: {
+ t: (key: string, params?: MessageParams) => string
+te: (key: string) => boolean
+}
+): string {
+  const source = asRecord(error)
+  const data = asRecord(source?.data)
+
+  const tag = findTag(data)
+  if (tag && i18n.te(tag.key)) {
+    return i18n.t(tag.key, tag.params)
+  }
+
+  const server = nonEmpty(data?.statusMessage) ?? nonEmpty(data?.message) ?? nonEmpty(source?.statusMessage)
+  return server ?? i18n.t(fallbackKey)
+}