mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

fix favicon update flow and site media picker
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-07 19:46:51 +01:00
parent 1d5ac565ad
commit 1a8d53bda1
11 changed files with 250 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/apple-icon.png/route.ts
+2 -12
View File
@@ -1,6 +1,4 @@
import { NextResponse } from "next/server";
import { buildFallbackIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
import { buildSiteIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
export const dynamic = "force-dynamic";
export const revalidate = 0;
@@ -8,13 +6,5 @@ export const revalidate = 0;
export async function GET() {
const iconUrls = await getDynamicSiteIconUrls();
if (iconUrls.faviconAssetUrl) {
const response = NextResponse.redirect(iconUrls.faviconAssetUrl, 307);
response.headers.set("Cache-Control", "no-store, max-age=0");
return response;
}
return buildFallbackIconResponse(iconUrls.siteName, 180);
return buildSiteIconResponse(iconUrls.faviconAssetUrl);
}
app/favicon.ico/route.ts
+2 -12
View File
@@ -1,6 +1,4 @@
import { NextResponse } from "next/server";
import { buildFallbackIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
import { buildSiteIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
export const dynamic = "force-dynamic";
export const revalidate = 0;
@@ -8,13 +6,5 @@ export const revalidate = 0;
export async function GET() {
const iconUrls = await getDynamicSiteIconUrls();
if (iconUrls.faviconAssetUrl) {
const response = NextResponse.redirect(iconUrls.faviconAssetUrl, 307);
response.headers.set("Cache-Control", "no-store, max-age=0");
return response;
}
return buildFallbackIconResponse(iconUrls.siteName, 32);
return buildSiteIconResponse(iconUrls.faviconAssetUrl);
}
app/root/site-settings/page.tsx
+1
View File
@@ -64,6 +64,7 @@ export default async function RootSiteSettingsPage({
headerTitle={copy.title}
headerDescription={copy.subtitle}
saveFormId="site-settings-form"
reloadDocumentOnSave
>
<div className="space-y-6">
{searchParams?.success ? (
components/root/form-save-button.tsx
+8 -1
View File
@@ -12,6 +12,7 @@ type FormSaveButtonProps = {
formSelector?: string;
formSelectors?: string[];
label?: string;
reloadDocumentOnSuccess?: boolean;
};
function serializeForm(form: HTMLFormElement) {
@@ -29,6 +30,7 @@ export function FormSaveButton({
formSelector,
formSelectors,
label = "Speichern",
reloadDocumentOnSuccess = false,
}: FormSaveButtonProps) {
const pathname = usePathname();
const router = useRouter();
@@ -220,6 +222,11 @@ export function FormSaveButton({
}
pendingSubmissionRef.current = null;
if (reloadDocumentOnSuccess) {
window.location.reload();
return;
}
router.refresh();
if (!searchParams.has("__saved")) {
@@ -233,7 +240,7 @@ export function FormSaveButton({
router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
scroll: false,
});
}, [currentUrl, pathname, router, searchParams]);
}, [currentUrl, pathname, reloadDocumentOnSuccess, router, searchParams]);
return (
<Button type="submit" form={activeFormId ?? undefined} disabled={!activeFormId || !isDirty || isSubmitting}>
components/root/media-field-picker.tsx
+152 -36
View File
@@ -3,6 +3,8 @@
/* eslint-disable @next/next/no-img-element */
import type { MediaKind } from "@prisma/client";
import { Check, Search } from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import type { MediaOption } from "@/lib/media";
import { cn } from "@/lib/utils";
@@ -15,6 +17,7 @@ export type MediaFieldState = {
url: string;
label: string;
kind: MediaKind;
isCleared?: boolean;
};
type MediaFieldPickerProps = {
@@ -22,36 +25,89 @@ type MediaFieldPickerProps = {
value: MediaFieldState;
onChange: (nextValue: MediaFieldState) => void;
options: MediaOption[];
hasInitialValue?: boolean;
inputName: string;
fileFieldName: string;
fileLabel?: string;
externalLabel?: string;
libraryLabel?: string;
accept?: string;
allowExternal?: boolean;
allowClear?: boolean;
clearLabel?: string;
emptyValue?: Partial<MediaFieldState>;
};
const modeOptions: Array<MediaFieldState["mode"]> = ["upload", "external", "library"];
export function MediaFieldPicker({
title,
value,
onChange,
options,
hasInitialValue = false,
inputName,
fileFieldName,
fileLabel,
externalLabel,
libraryLabel,
accept,
allowExternal = true,
allowClear = false,
clearLabel = "Remove",
emptyValue,
}: MediaFieldPickerProps) {
const hiddenInputRef = useRef<HTMLInputElement | null>(null);
const searchId = useId();
const [libraryQuery, setLibraryQuery] = useState("");
const modeOptions: Array<MediaFieldState["mode"]> = allowExternal
? ["upload", "external", "library"]
: ["upload", "library"];
const filteredOptions = options.filter((option) => option.kind === value.kind);
const selectedOption = filteredOptions.find((option) => option.id === value.assetId) ?? null;
const previewUrl =
const visibleLibraryOptions = useMemo(() => {
const normalizedQuery = libraryQuery.trim().toLowerCase();
if (!normalizedQuery) {
return filteredOptions;
}
return filteredOptions.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
}, [filteredOptions, libraryQuery]);
const resolvedLabel =
value.mode === "library"
? selectedOption?.url ?? ""
: value.mode === "external"
? value.url
: "";
? selectedOption?.label ?? value.label
: value.label;
const serializedValue = JSON.stringify({
mode: value.mode,
assetId: value.assetId,
url: value.url,
label: resolvedLabel,
kind: value.kind,
});
const previewUrl =
value.isCleared
? ""
: value.mode === "library"
? selectedOption?.url ?? ""
: value.mode === "external"
? value.url
: ""
;
const hasCurrentValue =
!value.isCleared &&
((value.mode === "library" && value.assetId.trim() !== "") ||
(value.mode === "external" && value.url.trim() !== ""));
const canClear = allowClear && (hasCurrentValue || (hasInitialValue && !value.isCleared));
useEffect(() => {
const hiddenInput = hiddenInputRef.current;
if (!hiddenInput) {
return;
}
hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
}, [serializedValue]);
return (
<div className="space-y-3 rounded-surface border border-border p-4">
@@ -68,6 +124,7 @@ export function MediaFieldPicker({
mode,
assetId: mode === "library" ? value.assetId : "",
url: mode === "external" ? value.url : "",
isCleared: false,
})
}
className={cn(
@@ -80,29 +137,44 @@ export function MediaFieldPicker({
{mode}
</button>
))}
{canClear ? (
<button
type="button"
onClick={() =>
onChange({
...value,
mode: emptyValue?.mode ?? "upload",
assetId: emptyValue?.assetId ?? "",
url: emptyValue?.url ?? "",
label: emptyValue?.label ?? value.label,
isCleared: true,
})
}
className="rounded-pill border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:border-destructive/50 hover:bg-destructive/5"
>
{clearLabel}
</button>
) : null}
</div>
</div>
<input
ref={hiddenInputRef}
type="hidden"
name={inputName}
value={JSON.stringify({
mode: value.mode,
assetId: value.assetId,
url: value.url,
label: value.label,
kind: value.kind,
})}
value={serializedValue}
/>
<div className="space-y-2">
<Label>Label</Label>
<Input
value={value.label}
onChange={(event) => onChange({ ...value, label: event.target.value })}
placeholder="Homepage Hero"
/>
</div>
{value.mode !== "library" ? (
<div className="space-y-2">
<Label>Label</Label>
<Input
value={value.label}
onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
placeholder="Homepage Hero"
/>
</div>
) : null}
{value.mode === "upload" ? (
<div className="space-y-2">
@@ -116,27 +188,71 @@ export function MediaFieldPicker({
<Label>{externalLabel ?? "External URL"}</Label>
<Input
value={value.url}
onChange={(event) => onChange({ ...value, url: event.target.value })}
onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
placeholder="https://example.com/image.jpg"
/>
</div>
) : null}
{value.mode === "library" ? (
<div className="space-y-2">
<div className="space-y-3">
<Label>{libraryLabel ?? "Media Library"}</Label>
<select
value={value.assetId}
onChange={(event) => onChange({ ...value, assetId: event.target.value })}
className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
>
<option value="">Select media</option>
{filteredOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
<div className="space-y-2 rounded-nested border border-border bg-surface-1 p-3">
<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
id={searchId}
value={libraryQuery}
onChange={(event) => setLibraryQuery(event.target.value)}
className="pl-9"
placeholder="Search media"
/>
</div>
<div className="max-h-64 space-y-2 overflow-y-auto">
{visibleLibraryOptions.length > 0 ? (
visibleLibraryOptions.map((option) => {
const isActive = option.id === value.assetId;
return (
<button
key={option.id}
type="button"
onClick={() =>
onChange({
...value,
assetId: option.id,
label: option.label,
isCleared: false,
})
}
className={cn(
"flex w-full items-center gap-3 rounded-nested border px-3 py-2 text-left transition-colors",
isActive
? "border-border-strong bg-background"
: "border-border bg-background/70 hover:border-border-strong hover:bg-background",
)}
>
{option.url ? (
<img src={option.url} alt={option.label} className="h-12 w-12 rounded-md object-cover" />
) : (
<div className="h-12 w-12 rounded-md border border-border bg-background" />
)}
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-foreground">{option.label}</p>
<p className="truncate text-xs text-muted-foreground">{option.source}</p>
</div>
{isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
</button>
);
})
) : (
<div className="rounded-nested border border-dashed border-border px-3 py-4 text-sm text-muted-foreground">
No media found.
</div>
)}
</div>
</div>
</div>
) : null}
components/root/root-dashboard-shell.tsx
+3
View File
@@ -48,6 +48,7 @@ type RootDashboardShellProps = {
saveFormId?: string;
saveFormSelector?: string;
saveButtonLabel?: string;
reloadDocumentOnSave?: boolean;
headerActions?: ReactNode;
sidebarTopContent?: ReactNode;
toolbar?: ReactNode;
@@ -64,6 +65,7 @@ export async function RootDashboardShell({
saveFormId,
saveFormSelector,
saveButtonLabel,
reloadDocumentOnSave = false,
headerActions,
sidebarTopContent,
toolbar,
@@ -98,6 +100,7 @@ export async function RootDashboardShell({
formIds={saveFormId ? ["sidebar-maintenance-form", saveFormId] : ["sidebar-maintenance-form"]}
formSelectors={saveFormSelector ? [saveFormSelector] : undefined}
label={saveButtonLabel ?? "Speichern"}
reloadDocumentOnSuccess={reloadDocumentOnSave}
/>
<ThemeToggle ariaLabel="Theme wechseln" />
</>
components/root/site-settings-form.tsx
+25 -2
View File
@@ -65,6 +65,7 @@ function createImageFieldState(
url: "",
label,
kind: MediaKind.IMAGE,
isCleared: false,
};
}
@@ -75,6 +76,7 @@ function createImageFieldState(
url,
label,
kind: MediaKind.IMAGE,
isCleared: false,
};
}
@@ -84,6 +86,7 @@ function createImageFieldState(
url: "",
label,
kind: MediaKind.IMAGE,
isCleared: false,
};
}
@@ -92,6 +95,10 @@ function getMediaPreviewUrl(
options: MediaOption[],
fallbackUrl: string | null | undefined,
) {
if (value.isCleared) {
return "";
}
if (value.mode === "external") {
return value.url || fallbackUrl || "";
}
@@ -280,12 +287,20 @@ export function SiteSettingsForm({
value={favicon}
onChange={setFavicon}
options={mediaOptions}
hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
inputName="faviconMedia"
fileFieldName="faviconFile"
fileLabel="Upload Favicon"
externalLabel="Favicon URL"
libraryLabel="Favicon Library"
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
allowExternal={false}
allowClear
clearLabel="Remove Favicon"
emptyValue={{
mode: "upload",
assetId: "",
url: "",
}}
/>
<MediaFieldPicker
@@ -293,12 +308,20 @@ export function SiteSettingsForm({
value={defaultOgImage}
onChange={setDefaultOgImage}
options={mediaOptions}
hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
inputName="defaultOgImageMedia"
fileFieldName="defaultOgImageFile"
fileLabel="Upload OG Image"
externalLabel="OG Image URL"
libraryLabel="OG Image Library"
accept="image/*,.svg"
allowExternal={false}
allowClear
clearLabel="Remove OG Image"
emptyValue={{
mode: "upload",
assetId: "",
url: "",
}}
/>
</CardContent>
</AppCard>
lib/app-config.ts
+5 -1
View File
@@ -98,7 +98,9 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
entityType: SITE_SETTINGS_ENTITY_TYPE,
entityId: SITE_SETTINGS_ENTITY_ID,
},
include: {
select: {
fieldKey: true,
updatedAt: true,
asset: {
select: {
id: true,
@@ -114,6 +116,7 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
result.favicon = {
assetId: usage.asset.id,
url: usage.asset.url,
version: usage.updatedAt.toISOString(),
};
}
@@ -121,6 +124,7 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
result.defaultOgImage = {
assetId: usage.asset.id,
url: usage.asset.url,
version: usage.updatedAt.toISOString(),
};
}
lib/metadata.ts
+1 -1
View File
@@ -72,7 +72,7 @@ export function buildAppMetadataFromConfig(
const openGraphImages = buildMetadataImages(bindings.defaultOgImage?.url);
const siteIconUrls = buildSiteIconUrls({
siteName: defaultLocaleSettings.siteName,
faviconAssetId: bindings.favicon?.assetId,
faviconVersion: bindings.favicon?.version,
faviconUrl: bindings.favicon?.url,
});
lib/site-icons.tsx
+50 -39
View File
@@ -1,17 +1,30 @@
import { ImageResponse } from "next/og";
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";
const INTERNAL_FAVICON_PATH = "/favicon.ico";
const INTERNAL_APPLE_ICON_PATH = "/apple-icon.png";
const INTERNAL_MANIFEST_PATH = "/manifest.webmanifest";
const DEFAULT_ICON_VERSION = "default";
const TRANSPARENT_PNG_BASE64 =
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9sot5WQAAAAASUVORK5CYII=";
const ICON_CONTENT_TYPES: Record<string, string> = {
".ico": "image/x-icon",
".jpg": "image/jpeg",
".jpeg": "image/jpeg",
".png": "image/png",
".svg": "image/svg+xml",
".webp": "image/webp",
};
type SiteIconInput = {
siteName: string;
faviconAssetId?: string | null;
faviconVersion?: string | null;
faviconUrl?: string | null;
};
@@ -37,15 +50,9 @@ function appendVersionToUrl(url: string, version: string): string {
return resolved.toString();
}
function getFallbackLabel(siteName: string): string {
const firstCharacter = siteName.trim().charAt(0).toUpperCase() || "M";
return firstCharacter;
}
export function buildSiteIconUrls(input: SiteIconInput): SiteIconUrls {
const siteName = input.siteName.trim() || "Moh";
const version = input.faviconAssetId?.trim() || DEFAULT_ICON_VERSION;
const version = input.faviconVersion?.trim() || DEFAULT_ICON_VERSION;
return {
siteName,
@@ -63,40 +70,44 @@ export async function getDynamicSiteIconUrls(): Promise<SiteIconUrls> {
return buildSiteIconUrls({
siteName: defaultLocaleSettings.siteName,
faviconAssetId: bindings.favicon?.assetId,
faviconVersion: bindings.favicon?.version,
faviconUrl: bindings.favicon?.url,
});
}
export function buildFallbackIconResponse(siteName: string, size: number) {
const label = getFallbackLabel(siteName);
function getResolvedPathname(iconUrl: string) {
const resolvedUrl = new URL(iconUrl, "https://local.invalid");
return new ImageResponse(
(
<div
style={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "linear-gradient(135deg, #111827 0%, #0f766e 100%)",
color: "#f8fafc",
fontSize: size * 0.52,
fontWeight: 700,
letterSpacing: "-0.08em",
borderRadius: size * 0.22,
}}
>
{label}
</div>
),
{
width: size,
height: size,
headers: {
"Cache-Control": "no-store, max-age=0",
},
return resolvedUrl.pathname;
}
async function createFileResponse(absolutePath: string) {
const fileBuffer = await readFile(absolutePath);
const contentType = ICON_CONTENT_TYPES[path.extname(absolutePath).toLowerCase()] ?? "application/octet-stream";
return new Response(fileBuffer, {
status: 200,
headers: {
"Content-Type": contentType,
"Cache-Control": "no-store, max-age=0",
},
);
});
}
export async function buildSiteIconResponse(iconUrl: string | null) {
if (iconUrl) {
const pathname = getResolvedPathname(iconUrl);
if (isManagedMediaFilePath(pathname)) {
return createFileResponse(resolveMediaUploadPath(pathname));
}
}
return new Response(Buffer.from(TRANSPARENT_PNG_BASE64, "base64"), {
status: 200,
headers: {
"Content-Type": "image/png",
"Cache-Control": "no-store, max-age=0",
},
});
}
lib/site-settings.ts
+1
View File
@@ -26,6 +26,7 @@ export type SiteSettings = {
export type SiteSettingsMediaBinding = {
assetId: string;
url: string;
version: string;
};
export type SiteSettingsMediaBindings = {