feat(i18n): add localized navigation and news translations
This commit is contained in:
@@ -5,6 +5,7 @@ import {
|
||||
listNavigationMenus,
|
||||
listPages,
|
||||
updateNavigationItem,
|
||||
upsertNavigationItemTranslation,
|
||||
} from "@cms/db"
|
||||
import { Button } from "@cms/ui/button"
|
||||
import { revalidatePath } from "next/cache"
|
||||
@@ -18,6 +19,9 @@ import { requirePermissionForRoute } from "@/lib/route-guards"
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParamsInput = Record<string, string | string[] | undefined>
|
||||
const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
|
||||
|
||||
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
|
||||
|
||||
function readFirstValue(value: string | string[] | undefined): string | null {
|
||||
if (Array.isArray(value)) {
|
||||
@@ -53,6 +57,14 @@ function readInt(formData: FormData, field: string, fallback = 0): number {
|
||||
return parsed
|
||||
}
|
||||
|
||||
function normalizeLocale(input: string | null): SupportedLocale {
|
||||
if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
|
||||
return input as SupportedLocale
|
||||
}
|
||||
|
||||
return "en"
|
||||
}
|
||||
|
||||
function redirectWithState(params: { notice?: string; error?: string }) {
|
||||
const query = new URLSearchParams()
|
||||
|
||||
@@ -165,6 +177,31 @@ async function deleteItemAction(formData: FormData) {
|
||||
redirectWithState({ notice: "Navigation item deleted." })
|
||||
}
|
||||
|
||||
async function upsertItemTranslationAction(formData: FormData) {
|
||||
"use server"
|
||||
|
||||
await requirePermissionForRoute({
|
||||
nextPath: "/navigation",
|
||||
permission: "navigation:write",
|
||||
scope: "team",
|
||||
})
|
||||
|
||||
const locale = normalizeLocale(readInputString(formData, "locale"))
|
||||
|
||||
try {
|
||||
await upsertNavigationItemTranslation({
|
||||
navigationItemId: readInputString(formData, "navigationItemId"),
|
||||
locale,
|
||||
label: readInputString(formData, "label"),
|
||||
})
|
||||
} catch {
|
||||
redirectWithState({ error: "Failed to save item translation." })
|
||||
}
|
||||
|
||||
revalidatePath("/navigation")
|
||||
redirectWithState({ notice: "Navigation item translation saved." })
|
||||
}
|
||||
|
||||
export default async function NavigationManagementPage({
|
||||
searchParams,
|
||||
}: {
|
||||
@@ -184,6 +221,7 @@ export default async function NavigationManagementPage({
|
||||
|
||||
const notice = readFirstValue(resolvedSearchParams.notice)
|
||||
const error = readFirstValue(resolvedSearchParams.error)
|
||||
const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
@@ -218,6 +256,22 @@ export default async function NavigationManagementPage({
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SUPPORTED_LOCALES.map((locale) => (
|
||||
<a
|
||||
key={locale}
|
||||
href={`/navigation?locale=${locale}`}
|
||||
className={`inline-flex rounded border px-3 py-1.5 text-xs ${
|
||||
selectedLocale === locale
|
||||
? "border-neutral-800 bg-neutral-900 text-white"
|
||||
: "border-neutral-300 text-neutral-700"
|
||||
}`}
|
||||
>
|
||||
{locale.toUpperCase()}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{menus.length === 0 ? (
|
||||
<article className="rounded-xl border border-neutral-200 p-6 text-sm text-neutral-600">
|
||||
No navigation menus yet.
|
||||
@@ -238,94 +292,126 @@ export default async function NavigationManagementPage({
|
||||
{menu.items.length === 0 ? (
|
||||
<p className="text-sm text-neutral-600">No items in this menu.</p>
|
||||
) : (
|
||||
menu.items.map((item) => (
|
||||
<form
|
||||
key={item.id}
|
||||
action={updateItemAction}
|
||||
className="rounded-lg border border-neutral-200 p-3"
|
||||
>
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<div className="grid gap-3 md:grid-cols-5">
|
||||
<label className="space-y-1 md:col-span-2">
|
||||
<span className="text-xs text-neutral-600">Label</span>
|
||||
<input
|
||||
name="label"
|
||||
defaultValue={item.label}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1 md:col-span-2">
|
||||
<span className="text-xs text-neutral-600">Href</span>
|
||||
<input
|
||||
name="href"
|
||||
defaultValue={item.href ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Sort</span>
|
||||
<input
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={item.sortOrder}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
menu.items.map((item) => {
|
||||
const translation = item.translations.find(
|
||||
(entry) => entry.locale === selectedLocale,
|
||||
)
|
||||
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Linked page</span>
|
||||
<select
|
||||
name="pageId"
|
||||
defaultValue={item.pageId ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">(none)</option>
|
||||
{pages.map((page) => (
|
||||
<option key={page.id} value={page.id}>
|
||||
{page.title} (/{page.slug})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Parent id</span>
|
||||
<input
|
||||
name="parentId"
|
||||
defaultValue={item.parentId ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
return (
|
||||
<div key={item.id} className="rounded-lg border border-neutral-200 p-3">
|
||||
<form action={updateItemAction}>
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<div className="grid gap-3 md:grid-cols-5">
|
||||
<label className="space-y-1 md:col-span-2">
|
||||
<span className="text-xs text-neutral-600">Label</span>
|
||||
<input
|
||||
name="label"
|
||||
defaultValue={item.label}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1 md:col-span-2">
|
||||
<span className="text-xs text-neutral-600">Href</span>
|
||||
<input
|
||||
name="href"
|
||||
defaultValue={item.href ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Sort</span>
|
||||
<input
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={item.sortOrder}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<label className="inline-flex items-center gap-2 text-sm text-neutral-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isVisible"
|
||||
value="true"
|
||||
defaultChecked={item.isVisible}
|
||||
className="size-4"
|
||||
/>
|
||||
Visible
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="submit" size="sm">
|
||||
Save item
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
formAction={deleteItemAction}
|
||||
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Linked page</span>
|
||||
<select
|
||||
name="pageId"
|
||||
defaultValue={item.pageId ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">(none)</option>
|
||||
{pages.map((page) => (
|
||||
<option key={page.id} value={page.id}>
|
||||
{page.title} (/{page.slug})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Parent id</span>
|
||||
<input
|
||||
name="parentId"
|
||||
defaultValue={item.parentId ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<label className="inline-flex items-center gap-2 text-sm text-neutral-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isVisible"
|
||||
value="true"
|
||||
defaultChecked={item.isVisible}
|
||||
className="size-4"
|
||||
/>
|
||||
Visible
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="submit" size="sm">
|
||||
Save item
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
formAction={deleteItemAction}
|
||||
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form
|
||||
action={upsertItemTranslationAction}
|
||||
className="mt-3 rounded border border-neutral-200 p-3"
|
||||
>
|
||||
<input type="hidden" name="navigationItemId" value={item.id} />
|
||||
<input type="hidden" name="locale" value={selectedLocale} />
|
||||
|
||||
<p className="text-xs text-neutral-600">
|
||||
Translation ({selectedLocale.toUpperCase()}) - saved locales:{" "}
|
||||
{item.translations.length > 0
|
||||
? item.translations
|
||||
.map((entry) => entry.locale.toUpperCase())
|
||||
.join(", ")
|
||||
: "none"}
|
||||
</p>
|
||||
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
name="label"
|
||||
defaultValue={translation?.label ?? item.label}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
<Button type="submit" size="sm" variant="secondary">
|
||||
Save translation
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
))
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import { createPost, deletePost, listPosts, updatePost } from "@cms/db"
|
||||
import {
|
||||
createPost,
|
||||
deletePost,
|
||||
listPostsWithTranslations,
|
||||
updatePost,
|
||||
upsertPostTranslation,
|
||||
} from "@cms/db"
|
||||
import { Button } from "@cms/ui/button"
|
||||
import { revalidatePath } from "next/cache"
|
||||
import { redirect } from "next/navigation"
|
||||
@@ -9,6 +15,9 @@ import { requirePermissionForRoute } from "@/lib/route-guards"
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParamsInput = Record<string, string | string[] | undefined>
|
||||
const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
|
||||
|
||||
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
|
||||
|
||||
function readFirstValue(value: string | string[] | undefined): string | null {
|
||||
if (Array.isArray(value)) {
|
||||
@@ -28,6 +37,14 @@ function readNullableString(formData: FormData, field: string): string | undefin
|
||||
return value.length > 0 ? value : undefined
|
||||
}
|
||||
|
||||
function normalizeLocale(input: string | null): SupportedLocale {
|
||||
if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
|
||||
return input as SupportedLocale
|
||||
}
|
||||
|
||||
return "en"
|
||||
}
|
||||
|
||||
function redirectWithState(params: { notice?: string; error?: string }) {
|
||||
const query = new URLSearchParams()
|
||||
|
||||
@@ -115,6 +132,34 @@ async function deleteNewsAction(formData: FormData) {
|
||||
redirectWithState({ notice: "Post deleted." })
|
||||
}
|
||||
|
||||
async function upsertNewsTranslationAction(formData: FormData) {
|
||||
"use server"
|
||||
|
||||
await requirePermissionForRoute({
|
||||
nextPath: "/news",
|
||||
permission: "news:write",
|
||||
scope: "team",
|
||||
})
|
||||
|
||||
const locale = normalizeLocale(readInputString(formData, "locale"))
|
||||
|
||||
try {
|
||||
await upsertPostTranslation({
|
||||
postId: readInputString(formData, "postId"),
|
||||
locale,
|
||||
title: readInputString(formData, "title"),
|
||||
excerpt: readNullableString(formData, "excerpt") ?? null,
|
||||
body: readInputString(formData, "body"),
|
||||
})
|
||||
} catch {
|
||||
redirectWithState({ error: "Failed to save translation." })
|
||||
}
|
||||
|
||||
revalidatePath("/news")
|
||||
revalidatePath("/")
|
||||
redirectWithState({ notice: "Post translation saved." })
|
||||
}
|
||||
|
||||
export default async function NewsManagementPage({
|
||||
searchParams,
|
||||
}: {
|
||||
@@ -126,10 +171,14 @@ export default async function NewsManagementPage({
|
||||
scope: "team",
|
||||
})
|
||||
|
||||
const [resolvedSearchParams, posts] = await Promise.all([searchParams, listPosts()])
|
||||
const [resolvedSearchParams, posts] = await Promise.all([
|
||||
searchParams,
|
||||
listPostsWithTranslations(),
|
||||
])
|
||||
|
||||
const notice = readFirstValue(resolvedSearchParams.notice)
|
||||
const error = readFirstValue(resolvedSearchParams.error)
|
||||
const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
@@ -204,72 +253,146 @@ export default async function NewsManagementPage({
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
{posts.map((post) => (
|
||||
<form
|
||||
key={post.id}
|
||||
action={updateNewsAction}
|
||||
className="rounded-xl border border-neutral-200 p-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={post.id} />
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Title</span>
|
||||
<input
|
||||
name="title"
|
||||
defaultValue={post.title}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Slug</span>
|
||||
<input
|
||||
name="slug"
|
||||
defaultValue={post.slug}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="mt-3 block space-y-1">
|
||||
<span className="text-xs text-neutral-600">Excerpt</span>
|
||||
<input
|
||||
name="excerpt"
|
||||
defaultValue={post.excerpt ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="mt-3 block space-y-1">
|
||||
<span className="text-xs text-neutral-600">Body</span>
|
||||
<textarea
|
||||
name="body"
|
||||
rows={4}
|
||||
defaultValue={post.body}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<select
|
||||
name="status"
|
||||
defaultValue={post.status}
|
||||
className="rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SUPPORTED_LOCALES.map((locale) => (
|
||||
<a
|
||||
key={locale}
|
||||
href={`/news?locale=${locale}`}
|
||||
className={`inline-flex rounded border px-3 py-1.5 text-xs ${
|
||||
selectedLocale === locale
|
||||
? "border-neutral-800 bg-neutral-900 text-white"
|
||||
: "border-neutral-300 text-neutral-700"
|
||||
}`}
|
||||
>
|
||||
{locale.toUpperCase()}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{posts.map((post) => {
|
||||
const translation = post.translations.find((entry) => entry.locale === selectedLocale)
|
||||
|
||||
return (
|
||||
<div key={post.id} className="rounded-xl border border-neutral-200 p-6">
|
||||
<form action={updateNewsAction}>
|
||||
<input type="hidden" name="id" value={post.id} />
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Title</span>
|
||||
<input
|
||||
name="title"
|
||||
defaultValue={post.title}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Slug</span>
|
||||
<input
|
||||
name="slug"
|
||||
defaultValue={post.slug}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="mt-3 block space-y-1">
|
||||
<span className="text-xs text-neutral-600">Excerpt</span>
|
||||
<input
|
||||
name="excerpt"
|
||||
defaultValue={post.excerpt ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="mt-3 block space-y-1">
|
||||
<span className="text-xs text-neutral-600">Body</span>
|
||||
<textarea
|
||||
name="body"
|
||||
rows={4}
|
||||
defaultValue={post.body}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<select
|
||||
name="status"
|
||||
defaultValue={post.status}
|
||||
className="rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="draft">draft</option>
|
||||
<option value="published">published</option>
|
||||
</select>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="submit" size="sm">
|
||||
Save
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
formAction={deleteNewsAction}
|
||||
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form
|
||||
action={upsertNewsTranslationAction}
|
||||
className="mt-4 rounded-lg border border-neutral-200 p-4"
|
||||
>
|
||||
<option value="draft">draft</option>
|
||||
<option value="published">published</option>
|
||||
</select>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="submit" size="sm">
|
||||
Save
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
formAction={deleteNewsAction}
|
||||
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" name="postId" value={post.id} />
|
||||
<input type="hidden" name="locale" value={selectedLocale} />
|
||||
|
||||
<h3 className="text-sm font-medium">
|
||||
Translation ({selectedLocale.toUpperCase()})
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-neutral-600">
|
||||
Missing fields fall back to base post content on public pages.
|
||||
</p>
|
||||
{post.translations.length > 0 ? (
|
||||
<p className="mt-2 text-xs text-neutral-600">
|
||||
Saved locales:{" "}
|
||||
{post.translations.map((entry) => entry.locale.toUpperCase()).join(", ")}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Title</span>
|
||||
<input
|
||||
name="title"
|
||||
defaultValue={translation?.title ?? post.title}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-neutral-600">Excerpt</span>
|
||||
<input
|
||||
name="excerpt"
|
||||
defaultValue={translation?.excerpt ?? post.excerpt ?? ""}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="mt-3 block space-y-1">
|
||||
<span className="text-xs text-neutral-600">Body</span>
|
||||
<textarea
|
||||
name="body"
|
||||
rows={4}
|
||||
defaultValue={translation?.body ?? post.body}
|
||||
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="mt-3">
|
||||
<Button type="submit" size="sm">
|
||||
Save translation
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</section>
|
||||
</AdminShell>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user