SITE_TITLE per Docker-Variable, Favicon im Admin-Bereich austauschbar
- SITE_TITLE (Default "Canteen Menu") steuert Browser-Tab-Titel und H1-Fallback ohne Logo - Favicon-Upload analog zum Logo über den Design-Bereich (Storage- Bucket branding); generateMetadata setzt icons.icon jetzt immer explizit, da Next.js sonst app/favicon.ico zusätzlich einbindet – die Datei liegt daher als expliziter Fallback unter public/
This commit is contained in:
+80
-21
@@ -3,13 +3,21 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createClient } from "@/lib/supabase/client";
|
||||
import { COLOR_LABELS, DEFAULT_COLORS, logoUrl } from "@/lib/types";
|
||||
import { COLOR_LABELS, DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
|
||||
|
||||
type AssetKind = "logo" | "favicon";
|
||||
|
||||
const ASSET_COLUMN: Record<AssetKind, "logo_path" | "favicon_path"> = {
|
||||
logo: "logo_path",
|
||||
favicon: "favicon_path",
|
||||
};
|
||||
|
||||
export default function DesignEditor() {
|
||||
const supabase = useMemo(() => createClient(), []);
|
||||
const router = useRouter();
|
||||
const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
|
||||
const [logoPath, setLogoPath] = useState<string | null>(null);
|
||||
const [faviconPath, setFaviconPath] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [info, setInfo] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
@@ -17,7 +25,7 @@ export default function DesignEditor() {
|
||||
const load = useCallback(async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("settings")
|
||||
.select("colors, logo_path")
|
||||
.select("colors, logo_path, favicon_path")
|
||||
.eq("id", 1)
|
||||
.maybeSingle();
|
||||
if (error) {
|
||||
@@ -26,6 +34,7 @@ export default function DesignEditor() {
|
||||
}
|
||||
setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
|
||||
setLogoPath(data?.logo_path ?? null);
|
||||
setFaviconPath(data?.favicon_path ?? null);
|
||||
}, [supabase]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -52,20 +61,21 @@ export default function DesignEditor() {
|
||||
setColors(DEFAULT_COLORS);
|
||||
}
|
||||
|
||||
async function uploadLogo(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
async function uploadAsset(kind: AssetKind, e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
if (!/^image\//.test(file.type)) {
|
||||
setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP).");
|
||||
setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP, ICO).");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
setInfo(null);
|
||||
|
||||
const oldPath = kind === "logo" ? logoPath : faviconPath;
|
||||
const ext = file.name.split(".").pop()?.toLowerCase() ?? "png";
|
||||
const path = `logo-${Date.now()}.${ext}`;
|
||||
const path = `${kind}-${Date.now()}.${ext}`;
|
||||
const { error: uploadError } = await supabase.storage
|
||||
.from("branding")
|
||||
.upload(path, file, { contentType: file.type });
|
||||
@@ -75,46 +85,53 @@ export default function DesignEditor() {
|
||||
return;
|
||||
}
|
||||
|
||||
const oldPath = logoPath;
|
||||
const { error: settingsError } = await supabase
|
||||
.from("settings")
|
||||
.update({ logo_path: path })
|
||||
.update({ [ASSET_COLUMN[kind]]: path })
|
||||
.eq("id", 1);
|
||||
if (settingsError) {
|
||||
setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
if (oldPath) {
|
||||
await supabase.storage.from("branding").remove([oldPath]);
|
||||
}
|
||||
setLogoPath(path);
|
||||
setInfo("Logo aktualisiert.");
|
||||
if (oldPath) await supabase.storage.from("branding").remove([oldPath]);
|
||||
|
||||
if (kind === "logo") setLogoPath(path);
|
||||
else setFaviconPath(path);
|
||||
setInfo(kind === "logo" ? "Logo aktualisiert." : "Favicon aktualisiert.");
|
||||
router.refresh();
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
async function removeLogo() {
|
||||
if (!logoPath) return;
|
||||
if (!window.confirm("Logo wirklich entfernen?")) return;
|
||||
async function removeAsset(kind: AssetKind) {
|
||||
const path = kind === "logo" ? logoPath : faviconPath;
|
||||
if (!path) return;
|
||||
if (
|
||||
!window.confirm(
|
||||
`${kind === "logo" ? "Logo" : "Favicon"} wirklich entfernen?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
const { error } = await supabase
|
||||
.from("settings")
|
||||
.update({ logo_path: null })
|
||||
.update({ [ASSET_COLUMN[kind]]: null })
|
||||
.eq("id", 1);
|
||||
if (error) {
|
||||
setError(`Speichern fehlgeschlagen: ${error.message}`);
|
||||
} else {
|
||||
await supabase.storage.from("branding").remove([logoPath]);
|
||||
setLogoPath(null);
|
||||
setInfo("Logo entfernt.");
|
||||
await supabase.storage.from("branding").remove([path]);
|
||||
if (kind === "logo") setLogoPath(null);
|
||||
else setFaviconPath(null);
|
||||
setInfo(kind === "logo" ? "Logo entfernt." : "Favicon entfernt.");
|
||||
router.refresh();
|
||||
}
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
const currentLogo = logoUrl(logoPath);
|
||||
const currentFavicon = faviconUrl(faviconPath);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl space-y-6">
|
||||
@@ -149,7 +166,7 @@ export default function DesignEditor() {
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={uploadLogo}
|
||||
onChange={(e) => uploadAsset("logo", e)}
|
||||
disabled={busy}
|
||||
/>
|
||||
</label>
|
||||
@@ -157,7 +174,7 @@ export default function DesignEditor() {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-del"
|
||||
onClick={removeLogo}
|
||||
onClick={() => removeAsset("logo")}
|
||||
disabled={busy}
|
||||
>
|
||||
Logo entfernen
|
||||
@@ -166,6 +183,48 @@ export default function DesignEditor() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h2 className="font-semibold mb-3">Favicon</h2>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
Wird als Icon im Browser-Tab angezeigt. Ohne eigenes Favicon gilt
|
||||
das Standard-Icon der Anwendung.
|
||||
</p>
|
||||
{currentFavicon ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={currentFavicon}
|
||||
alt="Aktuelles Favicon"
|
||||
className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400 mb-3">
|
||||
Kein eigenes Favicon hinterlegt.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2 items-center">
|
||||
<label className="btn btn-primary cursor-pointer">
|
||||
Favicon hochladen
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => uploadAsset("favicon", e)}
|
||||
disabled={busy}
|
||||
/>
|
||||
</label>
|
||||
{currentFavicon && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-del"
|
||||
onClick={() => removeAsset("favicon")}
|
||||
disabled={busy}
|
||||
>
|
||||
Favicon entfernen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h2 className="font-semibold mb-3">Farbgebung</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
|
||||
Reference in New Issue
Block a user