Add admin site settings sections and locale defaults
This commit is contained in:
MOH
@@ -12,10 +12,16 @@ import {
|
||||
SITE_SETTINGS_FAVICON_FIELD_KEY,
|
||||
SITE_SETTINGS_LOGO_DARK_FIELD_KEY,
|
||||
SITE_SETTINGS_LOGO_LIGHT_FIELD_KEY,
|
||||
getSiteSettings,
|
||||
updateSiteSettings,
|
||||
} from "@/lib/app-config";
|
||||
import { getAdminAppPath, toInternalAdminPath } from "@/lib/admin-routing";
|
||||
import { PAGE_TITLE_TOKEN, type SiteSettings } from "@/lib/site-settings";
|
||||
import {
|
||||
PAGE_TITLE_TOKEN,
|
||||
normalizeSiteDefaultLocale,
|
||||
normalizeSitePrimaryColor,
|
||||
type SiteSettings,
|
||||
} from "@/lib/site-settings";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { replaceEntityMediaUsages } from "@/lib/media";
|
||||
import { resolveMediaSelection } from "@/lib/media-service";
|
||||
@@ -91,12 +97,17 @@ async function revalidateSiteSettingsPages() {
|
||||
}
|
||||
|
||||
export async function saveSiteSettingsAction(formData: FormData) {
|
||||
return saveSiteBrandSettingsAction(formData);
|
||||
}
|
||||
|
||||
export async function saveSiteBrandSettingsAction(formData: FormData) {
|
||||
await ensureAdmin();
|
||||
|
||||
const createdMediaAssetIds: string[] = [];
|
||||
const uploadedPaths: string[] = [];
|
||||
|
||||
try {
|
||||
const currentSettings = await getSiteSettings();
|
||||
const siteLogoLightMedia = parseJsonObject(formData.get("siteLogoLightMedia"), "siteLogoLightMedia");
|
||||
const siteLogoDarkMedia = parseJsonObject(formData.get("siteLogoDarkMedia"), "siteLogoDarkMedia");
|
||||
const faviconMedia = parseJsonObject(formData.get("faviconMedia"), "faviconMedia");
|
||||
@@ -106,41 +117,12 @@ export async function saveSiteSettingsAction(formData: FormData) {
|
||||
);
|
||||
|
||||
const parsedSettings: SiteSettings = {
|
||||
locales: {
|
||||
ar: {
|
||||
siteName: String(formData.get("siteNameAr") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateAr") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionAr") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadAr") ?? "").trim(),
|
||||
},
|
||||
en: {
|
||||
siteName: String(formData.get("siteNameEn") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateEn") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionEn") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadEn") ?? "").trim(),
|
||||
},
|
||||
de: {
|
||||
siteName: String(formData.get("siteNameDe") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateDe") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionDe") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadDe") ?? "").trim(),
|
||||
},
|
||||
...currentSettings,
|
||||
brand: {
|
||||
primaryColor: normalizeSitePrimaryColor(formData.get("primaryColor")),
|
||||
},
|
||||
};
|
||||
|
||||
for (const locale of routing.locales) {
|
||||
if (!parsedSettings.locales[locale].siteName) {
|
||||
throw new Error(`Site Name fuer ${locale} ist erforderlich.`);
|
||||
}
|
||||
|
||||
if (
|
||||
!parsedSettings.locales[locale].titleTemplate ||
|
||||
!parsedSettings.locales[locale].titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
) {
|
||||
throw new Error(`Title Template fuer ${locale} muss {pageTitle} enthalten.`);
|
||||
}
|
||||
}
|
||||
|
||||
const siteLogoLightSelection = siteLogoLightMedia
|
||||
? await resolveMediaSelection({
|
||||
media: mediaFieldInputSchema.parse(siteLogoLightMedia),
|
||||
@@ -278,7 +260,7 @@ export async function saveSiteSettingsAction(formData: FormData) {
|
||||
});
|
||||
|
||||
await revalidateSiteSettingsPages();
|
||||
redirect(withMessage(getAdminAppPath("/site-settings"), "success", "Einstellungen gespeichert."));
|
||||
redirect(withMessage(getAdminAppPath("/site-settings/brand"), "success", "Einstellungen gespeichert."));
|
||||
} catch (error) {
|
||||
if (isRedirectError(error)) {
|
||||
throw error;
|
||||
@@ -291,6 +273,66 @@ export async function saveSiteSettingsAction(formData: FormData) {
|
||||
? error.message
|
||||
: "Einstellungen konnten nicht gespeichert werden.";
|
||||
|
||||
redirect(withMessage(getAdminAppPath("/site-settings"), "error", message));
|
||||
redirect(withMessage(getAdminAppPath("/site-settings/brand"), "error", message));
|
||||
}
|
||||
}
|
||||
|
||||
export async function saveSiteLocalizationSettingsAction(formData: FormData) {
|
||||
await ensureAdmin();
|
||||
|
||||
try {
|
||||
const currentSettings = await getSiteSettings();
|
||||
const parsedSettings: SiteSettings = {
|
||||
...currentSettings,
|
||||
defaultLocale: normalizeSiteDefaultLocale(formData.get("defaultLocale")),
|
||||
locales: {
|
||||
ar: {
|
||||
siteName: String(formData.get("siteNameAr") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateAr") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionAr") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadAr") ?? "").trim(),
|
||||
},
|
||||
en: {
|
||||
siteName: String(formData.get("siteNameEn") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateEn") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionEn") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadEn") ?? "").trim(),
|
||||
},
|
||||
de: {
|
||||
siteName: String(formData.get("siteNameDe") ?? "").trim(),
|
||||
titleTemplate: String(formData.get("titleTemplateDe") ?? "").trim(),
|
||||
siteDescription: String(formData.get("siteDescriptionDe") ?? "").trim(),
|
||||
subhead: String(formData.get("subheadDe") ?? "").trim(),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
for (const locale of routing.locales) {
|
||||
if (!parsedSettings.locales[locale].siteName) {
|
||||
throw new Error(`Site Name fuer ${locale} ist erforderlich.`);
|
||||
}
|
||||
|
||||
if (
|
||||
!parsedSettings.locales[locale].titleTemplate ||
|
||||
!parsedSettings.locales[locale].titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
) {
|
||||
throw new Error(`Title Template fuer ${locale} muss {pageTitle} enthalten.`);
|
||||
}
|
||||
}
|
||||
|
||||
await updateSiteSettings(parsedSettings);
|
||||
await revalidateSiteSettingsPages();
|
||||
redirect(withMessage(getAdminAppPath("/site-settings/localization"), "success", "Einstellungen gespeichert."));
|
||||
} catch (error) {
|
||||
if (isRedirectError(error)) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const message =
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Einstellungen konnten nicht gespeichert werden.";
|
||||
|
||||
redirect(withMessage(getAdminAppPath("/site-settings/localization"), "error", message));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { MediaKind } from "@prisma/client";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { SiteSettingsForm } from "@/components/admin/site-settings-form";
|
||||
import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { getAdminAppPath } from "@/lib/admin-routing";
|
||||
import {
|
||||
getSiteSettings,
|
||||
getSiteSettingsMediaBindings,
|
||||
} from "@/lib/app-config";
|
||||
import { getMediaOptions } from "@/lib/media";
|
||||
|
||||
import { saveSiteBrandSettingsAction } from "../actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Brand",
|
||||
subtitle: "Primaerfarbe, Logos, Favicon und OG Assets verwalten.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "Settings",
|
||||
brandSettings: "Brand",
|
||||
localizationSettings: "Localization",
|
||||
smtp: "SMTP",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
};
|
||||
|
||||
export default async function AdminSiteBrandSettingsPage() {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
async function logoutAction() {
|
||||
"use server";
|
||||
|
||||
await clearAdminSessionCookie();
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
const [siteSettings, mediaBindings, mediaOptions] = await Promise.all([
|
||||
getSiteSettings(),
|
||||
getSiteSettingsMediaBindings(),
|
||||
getMediaOptions({ kind: MediaKind.IMAGE }),
|
||||
]);
|
||||
|
||||
return (
|
||||
<AdminDashboardShell
|
||||
copy={copy}
|
||||
active="site-settings"
|
||||
siteSettingsChild="brand"
|
||||
logoutAction={logoutAction}
|
||||
headerTitle={copy.title}
|
||||
headerDescription={copy.subtitle}
|
||||
>
|
||||
<MotionFade delay={0.16}>
|
||||
<SiteSettingsForm
|
||||
mode="brand"
|
||||
action={saveSiteBrandSettingsAction}
|
||||
initialSettings={siteSettings}
|
||||
initialBindings={mediaBindings}
|
||||
mediaOptions={mediaOptions}
|
||||
/>
|
||||
</MotionFade>
|
||||
</AdminDashboardShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { SiteSettingsForm } from "@/components/admin/site-settings-form";
|
||||
import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { getAdminAppPath } from "@/lib/admin-routing";
|
||||
import {
|
||||
getDefaultSiteSettingsMediaBindings,
|
||||
getSiteSettings,
|
||||
} from "@/lib/app-config";
|
||||
|
||||
import { saveSiteLocalizationSettingsAction } from "../actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Localization",
|
||||
subtitle: "Seitennamen, Titelvorlagen und Standardsprache verwalten.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "Settings",
|
||||
brandSettings: "Brand",
|
||||
localizationSettings: "Localization",
|
||||
smtp: "SMTP",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
};
|
||||
|
||||
export default async function AdminSiteLocalizationSettingsPage() {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
async function logoutAction() {
|
||||
"use server";
|
||||
|
||||
await clearAdminSessionCookie();
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
const siteSettings = await getSiteSettings();
|
||||
|
||||
return (
|
||||
<AdminDashboardShell
|
||||
copy={copy}
|
||||
active="site-settings"
|
||||
siteSettingsChild="localization"
|
||||
logoutAction={logoutAction}
|
||||
headerTitle={copy.title}
|
||||
headerDescription={copy.subtitle}
|
||||
>
|
||||
<MotionFade delay={0.16}>
|
||||
<SiteSettingsForm
|
||||
mode="localization"
|
||||
action={saveSiteLocalizationSettingsAction}
|
||||
initialSettings={siteSettings}
|
||||
initialBindings={getDefaultSiteSettingsMediaBindings()}
|
||||
mediaOptions={[]}
|
||||
/>
|
||||
</MotionFade>
|
||||
</AdminDashboardShell>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +1,9 @@
|
||||
import { MediaKind } from "@prisma/client";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { SiteSettingsForm } from "@/components/admin/site-settings-form";
|
||||
import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { getAdminAppPath } from "@/lib/admin-routing";
|
||||
import {
|
||||
getSiteSettings,
|
||||
getSiteSettingsMediaBindings,
|
||||
} from "@/lib/app-config";
|
||||
import { getMediaOptions } from "@/lib/media";
|
||||
|
||||
import { saveSiteSettingsAction } from "./actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Settings",
|
||||
subtitle: "Globale Titel, Copy und Brand Assets verwalten.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "Settings",
|
||||
smtp: "SMTP",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
};
|
||||
|
||||
export default async function AdminSiteSettingsPage() {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
async function logoutAction() {
|
||||
"use server";
|
||||
|
||||
await clearAdminSessionCookie();
|
||||
redirect(getAdminAppPath("/"));
|
||||
}
|
||||
|
||||
const [siteSettings, mediaBindings, mediaOptions] = await Promise.all([
|
||||
getSiteSettings(),
|
||||
getSiteSettingsMediaBindings(),
|
||||
getMediaOptions({ kind: MediaKind.IMAGE }),
|
||||
]);
|
||||
|
||||
return (
|
||||
<AdminDashboardShell
|
||||
copy={copy}
|
||||
active="site-settings"
|
||||
logoutAction={logoutAction}
|
||||
headerTitle={copy.title}
|
||||
headerDescription={copy.subtitle}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<MotionFade delay={0.16}>
|
||||
<SiteSettingsForm
|
||||
action={saveSiteSettingsAction}
|
||||
initialSettings={siteSettings}
|
||||
initialBindings={mediaBindings}
|
||||
mediaOptions={mediaOptions}
|
||||
/>
|
||||
</MotionFade>
|
||||
</div>
|
||||
</AdminDashboardShell>
|
||||
);
|
||||
export default function AdminSiteSettingsPage() {
|
||||
redirect(getAdminAppPath("/site-settings/brand"));
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "../../../_admin/site-settings/brand/page";
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "../../../_admin/site-settings/localization/page";
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
import { getSiteSettings } from "@/lib/app-config";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const settings = await getSiteSettings();
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
defaultLocale: settings.defaultLocale,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Cache-Control": "no-store, max-age=0",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
+9
-1
@@ -7,8 +7,10 @@ import { QueryToastBridge } from "@/components/admin/query-toast-bridge";
|
||||
import { SoundProvider } from "@/components/sound-provider";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { getSiteSettings } from "@/lib/app-config";
|
||||
import { buildAppMetadata } from "@/lib/metadata";
|
||||
import { getDirection } from "@/lib/locale";
|
||||
import { buildSiteThemeStyleText } from "@/lib/site-theme";
|
||||
import "./globals.css";
|
||||
|
||||
const museo = localFont({
|
||||
@@ -82,10 +84,16 @@ export default async function RootLayout({
|
||||
}>) {
|
||||
noStore();
|
||||
|
||||
const locale = await getLocale().catch(() => "de");
|
||||
const [locale, siteSettings] = await Promise.all([
|
||||
getLocale().catch(() => "de"),
|
||||
getSiteSettings(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<html lang={locale} dir={getDirection(locale)} suppressHydrationWarning>
|
||||
<head>
|
||||
<style id="dynamic-site-theme">{buildSiteThemeStyleText(siteSettings.brand.primaryColor)}</style>
|
||||
</head>
|
||||
<body className={`${museo.variable} ${dubai.variable}`}>
|
||||
<ThemeProvider>
|
||||
<SoundProvider>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "../../../_admin/site-settings/brand/page";
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "../../../_admin/site-settings/localization/page";
|
||||
@@ -3,8 +3,10 @@ import {
|
||||
FolderKanban,
|
||||
Globe2,
|
||||
ImageIcon,
|
||||
Languages,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
Palette,
|
||||
PlusSquare,
|
||||
ShieldAlert,
|
||||
SwatchBook,
|
||||
@@ -34,6 +36,8 @@ type AdminDashboardCopy = {
|
||||
portfolio: string;
|
||||
media: string;
|
||||
siteSettings: string;
|
||||
brandSettings?: string;
|
||||
localizationSettings?: string;
|
||||
marquee?: string;
|
||||
smtp?: string;
|
||||
contactProtection?: string;
|
||||
@@ -46,6 +50,7 @@ type AdminDashboardShellProps = {
|
||||
active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee";
|
||||
smtpChild?: "settings" | "contact-protection";
|
||||
portfolioChild?: "overview" | "projects" | "new-project" | "categories";
|
||||
siteSettingsChild?: "brand" | "localization";
|
||||
logoutAction: () => Promise<void>;
|
||||
headerTitle: string;
|
||||
headerDescription: string;
|
||||
@@ -60,6 +65,7 @@ export async function AdminDashboardShell({
|
||||
active,
|
||||
smtpChild,
|
||||
portfolioChild,
|
||||
siteSettingsChild,
|
||||
logoutAction,
|
||||
headerTitle,
|
||||
headerDescription,
|
||||
@@ -72,7 +78,7 @@ export async function AdminDashboardShell({
|
||||
getSiteSettingsMediaBindings(),
|
||||
getMaintenanceMode(),
|
||||
]);
|
||||
const sidebarItems = getAdminNavigation(copy, active, smtpChild, portfolioChild);
|
||||
const sidebarItems = getAdminNavigation(copy, active, smtpChild, portfolioChild, siteSettingsChild);
|
||||
const normalizedSidebarItems = sidebarItems.filter(
|
||||
(item) =>
|
||||
item.href !== getAdminAppPath("/maintenance") &&
|
||||
@@ -91,7 +97,11 @@ export async function AdminDashboardShell({
|
||||
: active === "ui-kit"
|
||||
? SwatchBook
|
||||
: active === "site-settings"
|
||||
? Globe2
|
||||
? siteSettingsChild === "localization"
|
||||
? Languages
|
||||
: siteSettingsChild === "brand"
|
||||
? Palette
|
||||
: Globe2
|
||||
: active === "marquee"
|
||||
? Type
|
||||
: active === "smtp"
|
||||
|
||||
@@ -3,7 +3,17 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
|
||||
import { MediaKind } from "@prisma/client";
|
||||
import { Check, FileText, ImageIcon, Search, Type, Upload } from "lucide-react";
|
||||
import {
|
||||
Check,
|
||||
FileText,
|
||||
Globe2,
|
||||
ImageIcon,
|
||||
Languages,
|
||||
Palette,
|
||||
Search,
|
||||
Type,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
@@ -17,18 +27,27 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
|
||||
import type { AppLocale } from "@/lib/locale";
|
||||
import type { MediaOption } from "@/lib/media";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buildSiteThemeTokens } from "@/lib/site-theme";
|
||||
import {
|
||||
PAGE_TITLE_TOKEN,
|
||||
SITE_NAME_TOKEN,
|
||||
type SiteSettings,
|
||||
type SiteSettingsMediaBindings,
|
||||
} from "@/lib/site-settings";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SiteSettingsFormProps = {
|
||||
mode: "brand" | "localization";
|
||||
action: (formData: FormData) => Promise<void>;
|
||||
initialSettings: SiteSettings;
|
||||
initialBindings: SiteSettingsMediaBindings;
|
||||
@@ -49,24 +68,9 @@ const localeFields: Array<{
|
||||
suffix: "Ar" | "En" | "De";
|
||||
sampleTitle: string;
|
||||
}> = [
|
||||
{
|
||||
key: "ar",
|
||||
label: "Arabic",
|
||||
suffix: "Ar",
|
||||
sampleTitle: "Home",
|
||||
},
|
||||
{
|
||||
key: "en",
|
||||
label: "English",
|
||||
suffix: "En",
|
||||
sampleTitle: "About",
|
||||
},
|
||||
{
|
||||
key: "de",
|
||||
label: "Deutsch",
|
||||
suffix: "De",
|
||||
sampleTitle: "Portfolio",
|
||||
},
|
||||
{ key: "ar", label: "Arabic", suffix: "Ar", sampleTitle: "Home" },
|
||||
{ key: "en", label: "English", suffix: "En", sampleTitle: "About" },
|
||||
{ key: "de", label: "Deutsch", suffix: "De", sampleTitle: "Portfolio" },
|
||||
];
|
||||
|
||||
function createImageFieldState(
|
||||
@@ -105,18 +109,20 @@ function getMediaPreviewUrl(
|
||||
return fallbackUrl ?? "";
|
||||
}
|
||||
|
||||
function buildPreviewTitle(
|
||||
titleTemplate: string,
|
||||
sampleTitle: string,
|
||||
siteName: string,
|
||||
) {
|
||||
function buildPreviewTitle(titleTemplate: string, sampleTitle: string, siteName: string) {
|
||||
return titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
? titleTemplate
|
||||
.replace(PAGE_TITLE_TOKEN, sampleTitle)
|
||||
.replaceAll(SITE_NAME_TOKEN, siteName)
|
||||
? titleTemplate.replace(PAGE_TITLE_TOKEN, sampleTitle).replaceAll(SITE_NAME_TOKEN, siteName)
|
||||
: `${sampleTitle} | ${siteName}`;
|
||||
}
|
||||
|
||||
function BadgeLike({ children }: { children: string }) {
|
||||
return (
|
||||
<span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaLibraryModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -367,15 +373,140 @@ function SiteSettingsMediaRow({
|
||||
);
|
||||
}
|
||||
|
||||
function BadgeLike({ children }: { children: string }) {
|
||||
function LocalizedFieldsSection({
|
||||
settings,
|
||||
setSettings,
|
||||
}: {
|
||||
settings: SiteSettings;
|
||||
setSettings: React.Dispatch<React.SetStateAction<SiteSettings>>;
|
||||
}) {
|
||||
return (
|
||||
<span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
|
||||
{children}
|
||||
</span>
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nutze <code>{PAGE_TITLE_TOKEN}</code> und <code>{SITE_NAME_TOKEN}</code> fuer die globalen
|
||||
Titelvorlagen pro Sprache.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
{localeFields.map((locale) => (
|
||||
<AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
|
||||
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
|
||||
<div className="relative">
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteName${locale.suffix}`}
|
||||
name={`siteName${locale.suffix}`}
|
||||
value={settings.locales[locale.key].siteName}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
siteName: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Site Name"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`titleTemplate${locale.suffix}`}
|
||||
name={`titleTemplate${locale.suffix}`}
|
||||
value={settings.locales[locale.key].titleTemplate}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
titleTemplate: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Title Template"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
|
||||
<div className="relative">
|
||||
<FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteDescription${locale.suffix}`}
|
||||
name={`siteDescription${locale.suffix}`}
|
||||
value={settings.locales[locale.key].siteDescription}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
siteDescription: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Site Description"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
|
||||
<div className="relative">
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`subhead${locale.suffix}`}
|
||||
name={`subhead${locale.suffix}`}
|
||||
value={settings.locales[locale.key].subhead}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
subhead: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Subhead"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function SiteSettingsForm({
|
||||
mode,
|
||||
action,
|
||||
initialSettings,
|
||||
initialBindings,
|
||||
@@ -383,353 +514,326 @@ export function SiteSettingsForm({
|
||||
}: SiteSettingsFormProps) {
|
||||
const [settings, setSettings] = useState(initialSettings);
|
||||
const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
|
||||
createImageFieldState(
|
||||
initialBindings.siteLogoLight?.assetId,
|
||||
initialBindings.siteLogoLight?.url,
|
||||
"Site Logo Light",
|
||||
),
|
||||
createImageFieldState(initialBindings.siteLogoLight?.assetId, initialBindings.siteLogoLight?.url, "Site Logo Light"),
|
||||
);
|
||||
const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
|
||||
createImageFieldState(
|
||||
initialBindings.siteLogoDark?.assetId,
|
||||
initialBindings.siteLogoDark?.url,
|
||||
"Site Logo Dark",
|
||||
),
|
||||
createImageFieldState(initialBindings.siteLogoDark?.assetId, initialBindings.siteLogoDark?.url, "Site Logo Dark"),
|
||||
);
|
||||
const [favicon, setFavicon] = useState<MediaFieldState>(
|
||||
createImageFieldState(
|
||||
initialBindings.favicon?.assetId,
|
||||
initialBindings.favicon?.url,
|
||||
"Favicon",
|
||||
),
|
||||
createImageFieldState(initialBindings.favicon?.assetId, initialBindings.favicon?.url, "Favicon"),
|
||||
);
|
||||
const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
|
||||
createImageFieldState(
|
||||
initialBindings.defaultOgImage?.assetId,
|
||||
initialBindings.defaultOgImage?.url,
|
||||
"Default OG Image",
|
||||
),
|
||||
createImageFieldState(initialBindings.defaultOgImage?.assetId, initialBindings.defaultOgImage?.url, "Default OG Image"),
|
||||
);
|
||||
|
||||
const siteLogoLightPreviewUrl = getMediaPreviewUrl(
|
||||
siteLogoLight,
|
||||
mediaOptions,
|
||||
initialBindings.siteLogoLight?.url,
|
||||
);
|
||||
const siteLogoDarkPreviewUrl = getMediaPreviewUrl(
|
||||
siteLogoDark,
|
||||
mediaOptions,
|
||||
initialBindings.siteLogoDark?.url,
|
||||
);
|
||||
const themeTokens = useMemo(() => buildSiteThemeTokens(settings.brand.primaryColor), [settings.brand.primaryColor]);
|
||||
const siteLogoLightPreviewUrl = getMediaPreviewUrl(siteLogoLight, mediaOptions, initialBindings.siteLogoLight?.url);
|
||||
const siteLogoDarkPreviewUrl = getMediaPreviewUrl(siteLogoDark, mediaOptions, initialBindings.siteLogoDark?.url);
|
||||
const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
|
||||
const defaultOgImagePreviewUrl = getMediaPreviewUrl(
|
||||
defaultOgImage,
|
||||
mediaOptions,
|
||||
initialBindings.defaultOgImage?.url,
|
||||
);
|
||||
const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
|
||||
const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
|
||||
|
||||
return (
|
||||
<form id="site-settings-form" action={action} className="space-y-6">
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
|
||||
<div className="space-y-6">
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nutze
|
||||
{" "}
|
||||
<code>{PAGE_TITLE_TOKEN}</code>
|
||||
{" "}
|
||||
und
|
||||
{" "}
|
||||
<code>{SITE_NAME_TOKEN}</code>
|
||||
{" "}
|
||||
fuer die globalen Titelvorlagen pro Sprache.
|
||||
</p>
|
||||
</div>
|
||||
{mode === "brand" ? (
|
||||
<>
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Brand Foundation</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Steuert die Primaerfarbe der Oberflaeche sowie die wichtigsten Brand Assets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
{localeFields.map((locale) => (
|
||||
<AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
|
||||
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
|
||||
<div className="relative">
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteName${locale.suffix}`}
|
||||
name={`siteName${locale.suffix}`}
|
||||
value={settings.locales[locale.key].siteName}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
siteName: event.target.value,
|
||||
<AppCard level={2} padding="sm" className="space-y-4">
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="primaryColor">Primary Color</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input
|
||||
id="primaryColor"
|
||||
name="primaryColor"
|
||||
type="color"
|
||||
value={settings.brand.primaryColor}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
brand: {
|
||||
...current.brand,
|
||||
primaryColor: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Site Name"
|
||||
className="pl-8"
|
||||
/>
|
||||
}))
|
||||
}
|
||||
className="h-11 w-20 rounded-nested p-1"
|
||||
/>
|
||||
<Input
|
||||
value={settings.brand.primaryColor}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
brand: {
|
||||
...current.brand,
|
||||
primaryColor: event.target.value,
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="#dc5a35"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`titleTemplate${locale.suffix}`}
|
||||
name={`titleTemplate${locale.suffix}`}
|
||||
value={settings.locales[locale.key].titleTemplate}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
titleTemplate: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Title Template"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
|
||||
<div className="relative">
|
||||
<FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteDescription${locale.suffix}`}
|
||||
name={`siteDescription${locale.suffix}`}
|
||||
value={settings.locales[locale.key].siteDescription}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
siteDescription: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Site Description"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
|
||||
<div className="relative">
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`subhead${locale.suffix}`}
|
||||
name={`subhead${locale.suffix}`}
|
||||
value={settings.locales[locale.key].subhead}
|
||||
onChange={(event) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
locales: {
|
||||
...current.locales,
|
||||
[locale.key]: {
|
||||
...current.locales[locale.key],
|
||||
subhead: event.target.value,
|
||||
},
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder="Subhead"
|
||||
className="pl-8"
|
||||
/>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
||||
<div
|
||||
className="rounded-nested border border-border/70 p-3 text-white"
|
||||
style={{ backgroundColor: `hsl(${themeTokens.light.primary})` }}
|
||||
>
|
||||
<p className="text-xs uppercase tracking-[0.14em] text-white/72">Light token</p>
|
||||
<p className="mt-2 text-sm font-semibold">brand-primary</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-nested border border-border/70 p-3 text-white"
|
||||
style={{ backgroundColor: `hsl(${themeTokens.dark.primary})` }}
|
||||
>
|
||||
<p className="text-xs uppercase tracking-[0.14em] text-white/72">Dark token</p>
|
||||
<p className="mt-2 text-sm font-semibold">brand-primary</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
|
||||
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Light"
|
||||
value={siteLogoLight}
|
||||
onChange={setSiteLogoLight}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoLightMedia"
|
||||
fileFieldName="siteLogoLightFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoLight?.url}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Light"
|
||||
value={siteLogoLight}
|
||||
onChange={setSiteLogoLight}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoLightMedia"
|
||||
fileFieldName="siteLogoLightFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoLight?.url}
|
||||
/>
|
||||
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Dark"
|
||||
value={siteLogoDark}
|
||||
onChange={setSiteLogoDark}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoDarkMedia"
|
||||
fileFieldName="siteLogoDarkFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoDark?.url}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Dark"
|
||||
value={siteLogoDark}
|
||||
onChange={setSiteLogoDark}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoDarkMedia"
|
||||
fileFieldName="siteLogoDarkFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoDark?.url}
|
||||
/>
|
||||
|
||||
<SiteSettingsMediaRow
|
||||
title="Favicon"
|
||||
value={favicon}
|
||||
onChange={setFavicon}
|
||||
options={mediaOptions}
|
||||
inputName="faviconMedia"
|
||||
fileFieldName="faviconFile"
|
||||
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.favicon?.url}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Favicon"
|
||||
value={favicon}
|
||||
onChange={setFavicon}
|
||||
options={mediaOptions}
|
||||
inputName="faviconMedia"
|
||||
fileFieldName="faviconFile"
|
||||
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.favicon?.url}
|
||||
/>
|
||||
|
||||
<SiteSettingsMediaRow
|
||||
title="Default OG Image"
|
||||
value={defaultOgImage}
|
||||
onChange={setDefaultOgImage}
|
||||
options={mediaOptions}
|
||||
inputName="defaultOgImageMedia"
|
||||
fileFieldName="defaultOgImageFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.defaultOgImage?.url}
|
||||
/>
|
||||
</section>
|
||||
<SiteSettingsMediaRow
|
||||
title="Default OG Image"
|
||||
value={defaultOgImage}
|
||||
onChange={setDefaultOgImage}
|
||||
options={mediaOptions}
|
||||
inputName="defaultOgImageMedia"
|
||||
fileFieldName="defaultOgImageFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.defaultOgImage?.url}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Visitor Language Routing</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Waehlt die Standardsprache fuer Besucher ohne Sprach-Prefix. Das ist die neue globale Spracheinstellung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-4">
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="defaultLocaleTrigger">Default Locale</Label>
|
||||
<Select
|
||||
name="defaultLocale"
|
||||
value={settings.defaultLocale}
|
||||
onValueChange={(value) =>
|
||||
setSettings((current) => ({
|
||||
...current,
|
||||
defaultLocale: value as AppLocale,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="defaultLocaleTrigger">
|
||||
<SelectValue placeholder="Select locale" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="de">Deutsch</SelectItem>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
<SelectItem value="ar">Arabic</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="rounded-nested border border-border/70 bg-muted/20 p-4">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<Globe2 className="h-4 w-4 text-brand-primary" />
|
||||
Route preview
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
<code>/about</code> will open <code>{routePreview}</code>.
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
Existing localized URLs stay available. Only prefix-free entry routes change.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</section>
|
||||
|
||||
<LocalizedFieldsSection settings={settings} setSettings={setSettings} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="xl:sticky xl:top-6 xl:self-start">
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Preview</h2>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Search Result</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{faviconPreviewUrl ? (
|
||||
<img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
|
||||
) : (
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
|
||||
<Type className="h-3 w-3 text-muted-foreground" />
|
||||
{mode === "brand" ? (
|
||||
<>
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Search Result</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{faviconPreviewUrl ? (
|
||||
<img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
|
||||
) : (
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
|
||||
<Palette className="h-3 w-3 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm font-medium" style={{ color: settings.brand.primaryColor }}>
|
||||
{buildPreviewTitle(settings.locales.de.titleTemplate, "About", settings.locales.de.siteName)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm font-medium text-brand-primary">
|
||||
{buildPreviewTitle(
|
||||
settings.locales.de.titleTemplate,
|
||||
"About",
|
||||
settings.locales.de.siteName,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{settings.locales.de.siteDescription || "No description"}
|
||||
</p>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<AppCard level={1} padding="sm">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
|
||||
{siteLogoLightPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoLightPreviewUrl}
|
||||
alt="Site Logo Light"
|
||||
className="h-10 w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{settings.locales.de.siteDescription || "No description"}
|
||||
</p>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<div className="rounded-nested border border-border/70 bg-slate-950 p-3">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
|
||||
{siteLogoDarkPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoDarkPreviewUrl}
|
||||
alt="Site Logo Dark"
|
||||
className="h-10 w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<AppCard level={1} padding="sm">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
|
||||
{siteLogoLightPreviewUrl ? (
|
||||
<img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Social Preview</p>
|
||||
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
|
||||
{defaultOgImagePreviewUrl ? (
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
|
||||
No OG image selected
|
||||
<div className="rounded-nested border border-border/70 bg-slate-950 p-3">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
|
||||
{siteLogoDarkPreviewUrl ? (
|
||||
<img src={siteLogoDarkPreviewUrl} alt="Site Logo Dark" className="h-10 w-full object-contain" />
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1.5 p-3">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{buildPreviewTitle(
|
||||
settings.locales.en.titleTemplate,
|
||||
"Portfolio",
|
||||
settings.locales.en.siteName,
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{settings.locales.en.siteDescription || "No description"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Locale Summary</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{localeFields.map((locale) => (
|
||||
<TableRow key={locale.key}>
|
||||
<TableCell className="w-24 font-medium">{locale.label}</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{buildPreviewTitle(
|
||||
settings.locales[locale.key].titleTemplate,
|
||||
locale.sampleTitle,
|
||||
settings.locales[locale.key].siteName,
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{settings.locales[locale.key].subhead || "No subhead"}
|
||||
</p>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Social Preview</p>
|
||||
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
|
||||
<div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
|
||||
{defaultOgImagePreviewUrl ? (
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
|
||||
No OG image selected
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1.5 p-3">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{buildPreviewTitle(settings.locales.en.titleTemplate, "Portfolio", settings.locales.en.siteName)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{settings.locales.en.siteDescription || "No description"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Visitor Routing</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background p-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<Languages className="h-4 w-4 text-brand-primary" />
|
||||
Default locale: {settings.defaultLocale.toUpperCase()}
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
Prefix-free URLs resolve to <code>{routePreview}</code>.
|
||||
</p>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Locale Summary</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{localeFields.map((locale) => (
|
||||
<TableRow key={locale.key}>
|
||||
<TableCell className="w-24 font-medium">{locale.label}</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{buildPreviewTitle(
|
||||
settings.locales[locale.key].titleTemplate,
|
||||
locale.sampleTitle,
|
||||
settings.locales[locale.key].siteName,
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{settings.locales[locale.key].subhead || "No subhead"}
|
||||
</p>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AppCard>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Save Settings</Button>
|
||||
<Button type="submit">{mode === "brand" ? "Save Brand Settings" : "Save Localization Settings"}</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
+22
-2
@@ -2,8 +2,10 @@ import {
|
||||
FolderKanban,
|
||||
Globe2,
|
||||
ImageIcon,
|
||||
Languages,
|
||||
LayoutDashboard,
|
||||
Mail,
|
||||
Palette,
|
||||
PlusSquare,
|
||||
ShieldAlert,
|
||||
SwatchBook,
|
||||
@@ -20,6 +22,8 @@ type AdminNavigationCopy = {
|
||||
portfolio: string;
|
||||
media: string;
|
||||
siteSettings: string;
|
||||
brandSettings?: string;
|
||||
localizationSettings?: string;
|
||||
marquee?: string;
|
||||
smtp?: string;
|
||||
contactProtection?: string;
|
||||
@@ -39,6 +43,7 @@ export function getAdminNavigation(
|
||||
active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee",
|
||||
smtpChild?: "settings" | "contact-protection",
|
||||
portfolioChild?: "overview" | "projects" | "new-project" | "categories",
|
||||
siteSettingsChild?: "brand" | "localization",
|
||||
): AdminNavItem[] {
|
||||
return [
|
||||
{
|
||||
@@ -67,9 +72,24 @@ export function getAdminNavigation(
|
||||
},
|
||||
{
|
||||
label: copy.siteSettings,
|
||||
href: getAdminAppPath("/site-settings"),
|
||||
href: getAdminAppPath("/site-settings/brand"),
|
||||
icon: Globe2,
|
||||
active: active === "site-settings",
|
||||
active: active === "site-settings" && !siteSettingsChild,
|
||||
expanded: active === "site-settings",
|
||||
children: [
|
||||
{
|
||||
label: copy.brandSettings ?? "Brand",
|
||||
href: getAdminAppPath("/site-settings/brand"),
|
||||
icon: Palette,
|
||||
active: siteSettingsChild === "brand",
|
||||
},
|
||||
{
|
||||
label: copy.localizationSettings ?? "Localization",
|
||||
href: getAdminAppPath("/site-settings/localization"),
|
||||
icon: Languages,
|
||||
active: siteSettingsChild === "localization",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: copy.marquee ?? "Marquee",
|
||||
|
||||
+9
-1
@@ -29,11 +29,19 @@ export function stripLocalePrefix(pathname: string): string {
|
||||
}
|
||||
|
||||
export function getLocalizedPath(locale: string, pathname = "/"): string {
|
||||
return getLocalizedPathWithDefault(locale, pathname, routing.defaultLocale);
|
||||
}
|
||||
|
||||
export function getLocalizedPathWithDefault(
|
||||
locale: string,
|
||||
pathname = "/",
|
||||
defaultLocale: AppLocale = routing.defaultLocale,
|
||||
): string {
|
||||
const localeKey = resolveLocale(locale);
|
||||
const normalizedPath = pathname === "" ? "/" : pathname;
|
||||
const strippedPath = stripLocalePrefix(normalizedPath);
|
||||
|
||||
if (localeKey === routing.defaultLocale) {
|
||||
if (localeKey === defaultLocale) {
|
||||
return strippedPath;
|
||||
}
|
||||
|
||||
|
||||
+9
-9
@@ -11,7 +11,7 @@ import {
|
||||
getSiteSettings,
|
||||
getSiteSettingsMediaBindings,
|
||||
} from "./app-config";
|
||||
import { AppLocale, getLocalizedPath, resolveLocale } from "./locale";
|
||||
import { AppLocale, getLocalizedPath, getLocalizedPathWithDefault, resolveLocale } from "./locale";
|
||||
import { buildSiteIconUrls } from "./site-icons";
|
||||
|
||||
function getSiteUrl(): URL {
|
||||
@@ -22,16 +22,16 @@ function toAbsoluteUrl(pathname: string): string {
|
||||
return new URL(pathname, getSiteUrl()).toString();
|
||||
}
|
||||
|
||||
export function buildLocaleAlternates(pathname: string) {
|
||||
export function buildLocaleAlternates(pathname: string, defaultLocale = routing.defaultLocale) {
|
||||
const languages = Object.fromEntries(
|
||||
routing.locales.map((locale) => [locale, toAbsoluteUrl(getLocalizedPath(locale, pathname))]),
|
||||
routing.locales.map((locale) => [locale, toAbsoluteUrl(getLocalizedPathWithDefault(locale, pathname, defaultLocale))]),
|
||||
) as Record<AppLocale, string>;
|
||||
|
||||
return {
|
||||
canonical: toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, pathname)),
|
||||
canonical: toAbsoluteUrl(getLocalizedPathWithDefault(defaultLocale, pathname, defaultLocale)),
|
||||
languages: {
|
||||
...languages,
|
||||
"x-default": toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, pathname)),
|
||||
"x-default": toAbsoluteUrl(getLocalizedPathWithDefault(defaultLocale, pathname, defaultLocale)),
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -68,7 +68,7 @@ export function buildAppMetadataFromConfig(
|
||||
settings: SiteSettings,
|
||||
bindings: SiteSettingsMediaBindings,
|
||||
): Metadata {
|
||||
const defaultLocaleSettings = settings.locales[routing.defaultLocale];
|
||||
const defaultLocaleSettings = settings.locales[settings.defaultLocale];
|
||||
const openGraphImages = buildMetadataImages(bindings.defaultOgImage?.url);
|
||||
const siteIconUrls = buildSiteIconUrls({
|
||||
siteName: defaultLocaleSettings.siteName,
|
||||
@@ -90,9 +90,9 @@ export function buildAppMetadataFromConfig(
|
||||
openGraph: {
|
||||
title: defaultLocaleSettings.siteName,
|
||||
description: defaultLocaleSettings.siteDescription,
|
||||
url: toAbsoluteUrl(getLocalizedPath(routing.defaultLocale, "/")),
|
||||
url: toAbsoluteUrl(getLocalizedPathWithDefault(settings.defaultLocale, "/", settings.defaultLocale)),
|
||||
siteName: defaultLocaleSettings.siteName,
|
||||
locale: routing.defaultLocale,
|
||||
locale: settings.defaultLocale,
|
||||
type: "website",
|
||||
images: openGraphImages,
|
||||
},
|
||||
@@ -163,7 +163,7 @@ export function buildLocalizedMetadataFromConfig(input: {
|
||||
return {
|
||||
title: resolvedTitle,
|
||||
description: resolvedDescription,
|
||||
alternates: buildLocaleAlternates(pathname),
|
||||
alternates: buildLocaleAlternates(pathname, settings.defaultLocale),
|
||||
openGraph: {
|
||||
title: resolvedTitle,
|
||||
description: resolvedDescription,
|
||||
|
||||
+1
-3
@@ -1,8 +1,6 @@
|
||||
import { readFile } from "fs/promises";
|
||||
import path from "path";
|
||||
|
||||
import { routing } from "@/i18n/routing";
|
||||
|
||||
import { getSiteSettings, getSiteSettingsMediaBindings } from "./app-config";
|
||||
import { isManagedMediaFilePath, resolveMediaUploadPath } from "./media-storage";
|
||||
|
||||
@@ -66,7 +64,7 @@ export function buildSiteIconUrls(input: SiteIconInput): SiteIconUrls {
|
||||
|
||||
export async function getDynamicSiteIconUrls(): Promise<SiteIconUrls> {
|
||||
const [settings, bindings] = await Promise.all([getSiteSettings(), getSiteSettingsMediaBindings()]);
|
||||
const defaultLocaleSettings = settings.locales[routing.defaultLocale];
|
||||
const defaultLocaleSettings = settings.locales[settings.defaultLocale];
|
||||
|
||||
return buildSiteIconUrls({
|
||||
siteName: defaultLocaleSettings.siteName,
|
||||
|
||||
@@ -13,6 +13,7 @@ export const SITE_NAME_TOKEN = "{siteName}";
|
||||
|
||||
export const DEFAULT_SITE_NAME = "moh-sass";
|
||||
export const DEFAULT_SITE_DESCRIPTION = "Multilingual Next.js base project";
|
||||
export const DEFAULT_SITE_PRIMARY_COLOR = "#dc5a35";
|
||||
|
||||
type SiteLocaleSettings = {
|
||||
siteName: string;
|
||||
@@ -21,7 +22,13 @@ type SiteLocaleSettings = {
|
||||
subhead: string;
|
||||
};
|
||||
|
||||
type SiteBrandSettings = {
|
||||
primaryColor: string;
|
||||
};
|
||||
|
||||
export type SiteSettings = {
|
||||
defaultLocale: AppLocale;
|
||||
brand: SiteBrandSettings;
|
||||
locales: Record<AppLocale, SiteLocaleSettings>;
|
||||
};
|
||||
|
||||
@@ -64,6 +71,20 @@ function normalizeSiteLocaleSettings(
|
||||
};
|
||||
}
|
||||
|
||||
export function normalizeSiteDefaultLocale(input: unknown): AppLocale {
|
||||
return input === "ar" || input === "en" || input === "de" ? input : "de";
|
||||
}
|
||||
|
||||
export function normalizeSitePrimaryColor(input: unknown): string {
|
||||
if (typeof input !== "string") {
|
||||
return DEFAULT_SITE_PRIMARY_COLOR;
|
||||
}
|
||||
|
||||
const value = input.trim();
|
||||
|
||||
return /^#([0-9a-fA-F]{6})$/.test(value) ? value.toLowerCase() : DEFAULT_SITE_PRIMARY_COLOR;
|
||||
}
|
||||
|
||||
export function getDefaultSiteSettingsMediaBindings(): SiteSettingsMediaBindings {
|
||||
return {
|
||||
siteLogoLight: null,
|
||||
@@ -75,6 +96,10 @@ export function getDefaultSiteSettingsMediaBindings(): SiteSettingsMediaBindings
|
||||
|
||||
export function buildDefaultSiteSettings(fallbackName = DEFAULT_SITE_NAME): SiteSettings {
|
||||
return {
|
||||
defaultLocale: "de",
|
||||
brand: {
|
||||
primaryColor: DEFAULT_SITE_PRIMARY_COLOR,
|
||||
},
|
||||
locales: {
|
||||
ar: {
|
||||
siteName: fallbackName,
|
||||
@@ -115,6 +140,14 @@ export function parseSiteSettingsValue(
|
||||
: {};
|
||||
|
||||
const siteSettings: SiteSettings = {
|
||||
defaultLocale: normalizeSiteDefaultLocale(parsed.defaultLocale),
|
||||
brand: {
|
||||
primaryColor: normalizeSitePrimaryColor(
|
||||
parsed.brand && typeof parsed.brand === "object"
|
||||
? (parsed.brand as Record<string, unknown>).primaryColor
|
||||
: undefined,
|
||||
),
|
||||
},
|
||||
locales: {
|
||||
ar: normalizeSiteLocaleSettings(
|
||||
locales.ar && typeof locales.ar === "object" ? (locales.ar as Record<string, unknown>) : {},
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import {
|
||||
DEFAULT_SITE_PRIMARY_COLOR,
|
||||
normalizeSitePrimaryColor,
|
||||
} from "./site-settings";
|
||||
|
||||
type RgbColor = {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
};
|
||||
|
||||
type HslColor = {
|
||||
h: number;
|
||||
s: number;
|
||||
l: number;
|
||||
};
|
||||
|
||||
function clamp(value: number, min: number, max: number) {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
function hexToRgb(hex: string): RgbColor {
|
||||
const normalized = normalizeSitePrimaryColor(hex).slice(1);
|
||||
|
||||
return {
|
||||
r: Number.parseInt(normalized.slice(0, 2), 16),
|
||||
g: Number.parseInt(normalized.slice(2, 4), 16),
|
||||
b: Number.parseInt(normalized.slice(4, 6), 16),
|
||||
};
|
||||
}
|
||||
|
||||
function rgbToHsl({ r, g, b }: RgbColor): HslColor {
|
||||
const red = r / 255;
|
||||
const green = g / 255;
|
||||
const blue = b / 255;
|
||||
const max = Math.max(red, green, blue);
|
||||
const min = Math.min(red, green, blue);
|
||||
const delta = max - min;
|
||||
const lightness = (max + min) / 2;
|
||||
|
||||
if (delta === 0) {
|
||||
return {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: Math.round(lightness * 100),
|
||||
};
|
||||
}
|
||||
|
||||
const saturation =
|
||||
lightness > 0.5
|
||||
? delta / (2 - max - min)
|
||||
: delta / (max + min);
|
||||
|
||||
let hue = 0;
|
||||
|
||||
switch (max) {
|
||||
case red:
|
||||
hue = (green - blue) / delta + (green < blue ? 6 : 0);
|
||||
break;
|
||||
case green:
|
||||
hue = (blue - red) / delta + 2;
|
||||
break;
|
||||
default:
|
||||
hue = (red - green) / delta + 4;
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
h: Math.round(hue * 60),
|
||||
s: Math.round(saturation * 100),
|
||||
l: Math.round(lightness * 100),
|
||||
};
|
||||
}
|
||||
|
||||
function toChannels(color: HslColor): string {
|
||||
return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`;
|
||||
}
|
||||
|
||||
function deriveSecondaryColor(color: HslColor, dark = false): HslColor {
|
||||
return {
|
||||
h: (color.h + 10) % 360,
|
||||
s: clamp(color.s - (dark ? 2 : 8), 35, 95),
|
||||
l: clamp(color.l + (dark ? 10 : 8), 20, 80),
|
||||
};
|
||||
}
|
||||
|
||||
function deriveDarkPrimary(color: HslColor): HslColor {
|
||||
return {
|
||||
h: color.h,
|
||||
s: clamp(color.s, 40, 95),
|
||||
l: clamp(color.l + 6, 30, 78),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildSiteThemeTokens(primaryColor: string) {
|
||||
const safePrimary = normalizeSitePrimaryColor(primaryColor || DEFAULT_SITE_PRIMARY_COLOR);
|
||||
const basePrimary = rgbToHsl(hexToRgb(safePrimary));
|
||||
const darkPrimary = deriveDarkPrimary(basePrimary);
|
||||
|
||||
return {
|
||||
light: {
|
||||
primary: toChannels(basePrimary),
|
||||
secondary: toChannels(deriveSecondaryColor(basePrimary)),
|
||||
},
|
||||
dark: {
|
||||
primary: toChannels(darkPrimary),
|
||||
secondary: toChannels(deriveSecondaryColor(darkPrimary, true)),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function buildSiteThemeStyleText(primaryColor: string) {
|
||||
const tokens = buildSiteThemeTokens(primaryColor);
|
||||
|
||||
return `
|
||||
:root {
|
||||
--primary: ${tokens.light.primary};
|
||||
--ring: ${tokens.light.primary};
|
||||
--brand-primary: ${tokens.light.primary};
|
||||
--brand-secondary: ${tokens.light.secondary};
|
||||
--sidebar-primary: ${tokens.light.primary};
|
||||
--sidebar-ring: ${tokens.light.primary};
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary: ${tokens.dark.primary};
|
||||
--ring: ${tokens.dark.primary};
|
||||
--brand-primary: ${tokens.dark.primary};
|
||||
--brand-secondary: ${tokens.dark.secondary};
|
||||
--sidebar-primary: ${tokens.dark.primary};
|
||||
--sidebar-ring: ${tokens.dark.primary};
|
||||
}
|
||||
`.trim();
|
||||
}
|
||||
+50
-1
@@ -14,9 +14,37 @@ import {
|
||||
isLegacyAdminPath,
|
||||
toInternalAdminPath,
|
||||
} from "./lib/admin-routing";
|
||||
import { getLocalizedPathWithDefault } from "./lib/locale";
|
||||
|
||||
const intlMiddleware = createMiddleware(routing);
|
||||
|
||||
async function getConfiguredDefaultLocale(request: NextRequest) {
|
||||
try {
|
||||
const response = await fetch(new URL("/api/site/default-locale", request.url), {
|
||||
headers: {
|
||||
"x-middleware-request": "1",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return routing.defaultLocale;
|
||||
}
|
||||
|
||||
const data = await response.json() as { defaultLocale?: string };
|
||||
|
||||
return data.defaultLocale === "ar" || data.defaultLocale === "en" || data.defaultLocale === "de"
|
||||
? data.defaultLocale
|
||||
: routing.defaultLocale;
|
||||
} catch {
|
||||
return routing.defaultLocale;
|
||||
}
|
||||
}
|
||||
|
||||
function hasLocalePrefix(pathname: string) {
|
||||
return routing.locales.some((locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`));
|
||||
}
|
||||
|
||||
function getAdminBasicAuthUser(): string {
|
||||
return process.env.ADMIN_BASIC_AUTH_USER ?? "";
|
||||
}
|
||||
@@ -111,7 +139,28 @@ export default async function middleware(request: NextRequest) {
|
||||
return response;
|
||||
}
|
||||
|
||||
if (pathname === "/de" || pathname.startsWith("/de/")) {
|
||||
const configuredDefaultLocale = await getConfiguredDefaultLocale(request);
|
||||
|
||||
if (
|
||||
configuredDefaultLocale !== routing.defaultLocale &&
|
||||
(pathname === "/de" || pathname.startsWith("/de/"))
|
||||
) {
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
if (
|
||||
configuredDefaultLocale !== routing.defaultLocale &&
|
||||
!hasLocalePrefix(pathname)
|
||||
) {
|
||||
const redirectUrl = request.nextUrl.clone();
|
||||
redirectUrl.pathname = getLocalizedPathWithDefault(configuredDefaultLocale, pathname, routing.defaultLocale);
|
||||
return NextResponse.redirect(redirectUrl, 307);
|
||||
}
|
||||
|
||||
if (
|
||||
configuredDefaultLocale === routing.defaultLocale &&
|
||||
(pathname === "/de" || pathname.startsWith("/de/"))
|
||||
) {
|
||||
const redirectUrl = request.nextUrl.clone();
|
||||
const nextPath = pathname.slice(3) || "/";
|
||||
redirectUrl.pathname = nextPath;
|
||||
|
||||
@@ -9,6 +9,8 @@ describe("site settings helpers", () => {
|
||||
it("builds defaults from the fallback site name", () => {
|
||||
const settings = buildDefaultSiteSettings("Studio Moh");
|
||||
|
||||
expect(settings.defaultLocale).toBe("de");
|
||||
expect(settings.brand.primaryColor).toBe("#dc5a35");
|
||||
expect(settings.locales.ar.siteName).toBe("Studio Moh");
|
||||
expect(settings.locales.ar.titleTemplate).toBe("{pageTitle} | {siteName}");
|
||||
expect(settings.locales.en.siteDescription).toBe("Multilingual Next.js base project");
|
||||
@@ -18,6 +20,10 @@ describe("site settings helpers", () => {
|
||||
it("merges stored values with safe defaults", () => {
|
||||
const settings = parseSiteSettingsValue(
|
||||
JSON.stringify({
|
||||
defaultLocale: "ar",
|
||||
brand: {
|
||||
primaryColor: "#112233",
|
||||
},
|
||||
locales: {
|
||||
en: {
|
||||
siteName: "Brand EN",
|
||||
@@ -34,6 +40,8 @@ describe("site settings helpers", () => {
|
||||
"Fallback Name",
|
||||
);
|
||||
|
||||
expect(settings.defaultLocale).toBe("ar");
|
||||
expect(settings.brand.primaryColor).toBe("#112233");
|
||||
expect(settings.locales.en.siteName).toBe("Brand EN");
|
||||
expect(settings.locales.en.titleTemplate).toBe("{pageTitle} - {siteName}");
|
||||
expect(settings.locales.en.siteDescription).toBe("English description");
|
||||
@@ -66,4 +74,19 @@ describe("site settings helpers", () => {
|
||||
|
||||
expect(settings.locales.ar.titleTemplate).toBe("{pageTitle} | {siteName}");
|
||||
});
|
||||
|
||||
it("falls back for invalid default locale and invalid primary color", () => {
|
||||
const settings = parseSiteSettingsValue(
|
||||
JSON.stringify({
|
||||
defaultLocale: "fr",
|
||||
brand: {
|
||||
primaryColor: "red",
|
||||
},
|
||||
}),
|
||||
"Fallback Name",
|
||||
);
|
||||
|
||||
expect(settings.defaultLocale).toBe("de");
|
||||
expect(settings.brand.primaryColor).toBe("#dc5a35");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -17,6 +17,8 @@ describe("metadata helpers", () => {
|
||||
|
||||
it("builds root metadata with dynamic icons and social preview", () => {
|
||||
const settings = buildDefaultSiteSettings("Studio Moh");
|
||||
settings.defaultLocale = "ar";
|
||||
settings.locales.ar.siteName = "Studio Moh AR";
|
||||
const metadata = buildAppMetadataFromConfig(settings, {
|
||||
siteLogoLight: null,
|
||||
siteLogoDark: null,
|
||||
@@ -32,12 +34,16 @@ describe("metadata helpers", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(metadata.title).toBe("Studio Moh");
|
||||
expect(metadata.title).toBe("Studio Moh AR");
|
||||
expect(metadata.icons).toEqual({
|
||||
icon: [{ url: "/favicon.ico?v=v1" }],
|
||||
shortcut: [{ url: "/favicon.ico?v=v1" }],
|
||||
apple: [{ url: "/apple-icon.png?v=v1" }],
|
||||
});
|
||||
expect(metadata.openGraph).toMatchObject({
|
||||
locale: "ar",
|
||||
url: "https://mohfarawati.de/",
|
||||
});
|
||||
expect(metadata.twitter).toMatchObject({
|
||||
card: "summary_large_image",
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user