remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

perf(site): inline small classic icons and favicon as base64
CI / check (push) Successful in 2m27s
Details
CI / deploy (push) Successful in 1m34s
Details
CI / publish-container (push) Successful in 50s
Details

Browse Source 
- New src/lib/site-icons.ts: base64 data URIs for the 13 tiny classic
  icons actually referenced in markup (100–2000 bytes), replacing extra
  requests with inline payloads. home.png, dynamic flags and currency
  sets stay on the filesystem.
- Default favicon is now served server-side as a base64 SVG data URI
  (memoized), while a DB-configured custom favicon still takes priority.
- Icons render through <Image unoptimized>, so data URIs pass through
  untouched on all affected pages (home, login, register, settings,
  navigation, auth top bar, client loading).
This commit is contained in:
openhands committed 2026-09-12 17:28:01 +02:00
1 parent 97012a78f6
commit e5e17d75ae
10 files changed
+128 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/auth/auth-top-bar.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { Clock } from "@/components/clock";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Reveal } from "@/components/motion-reveal";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { ICON_LIGHTHOUSE } from "@/lib/site-icons";
/**
* Shared frosted-glass top bar for the public auth pages (login, register,
@@ -47,7 +48,7 @@ export function AuthTopBar({
/>
) : (
<Image
src="/assets/images/icons/lighthouse.png"
src={ICON_LIGHTHOUSE}
alt={hotelName}
width={28}
height={28}
src/components/navigation.tsx
+25 -34
View File
@@ -12,6 +12,15 @@ import { db, MessengerFriendrequests, MessengerOffline } from "@/lib/db";
import { resolveHotelName } from "@/lib/hotel-name";
import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
import { logServerError } from "@/lib/server-log";
import {
ICON_NAV_BB,
ICON_NAV_COMMUNITY,
ICON_NAV_GOODY,
ICON_NAV_LEADERBOARDS,
ICON_NAV_ME,
ICON_NAV_RULES,
ICON_NAV_SHOP,
} from "@/lib/site-icons";
export async function Navigation({ session }: { session: Session | null }) {
const t = await getTranslations("nav");
@@ -81,7 +90,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<div className="hidden md:flex items-center gap-x-1">
<Link href="/" className="nav-item shrink-0">
<Image
src="/assets/images/icons/navigation/me.png"
src={ICON_NAV_ME}
alt=""
width={20}
height={20}
@@ -93,10 +102,7 @@ export async function Navigation({ session }: { session: Session | null }) {
{/* Desktop: nav items */}
<div className="hidden md:flex items-center gap-x-1">
<NavDropdown
label={t("community")}
icon="/assets/images/icons/navigation/community.png"
>
<NavDropdown label={t("community")} icon={ICON_NAV_COMMUNITY}>
<Link href="/news" className="dropdown-item" role="menuitem">
{t("articles")}
</Link>
@@ -120,10 +126,7 @@ export async function Navigation({ session }: { session: Session | null }) {
</Link>
</NavDropdown>
<NavDropdown
label={t("shop")}
icon="/assets/images/icons/navigation/shop.png"
>
<NavDropdown label={t("shop")} icon={ICON_NAV_SHOP}>
<Link href="/shop" className="dropdown-item" role="menuitem">
{t("shop")}
</Link>
@@ -137,7 +140,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<Link href="/leaderboard" className="nav-item">
<Image
src="/assets/images/icons/navigation/leaderboards.png"
src={ICON_NAV_LEADERBOARDS}
alt=""
width={20}
height={20}
@@ -148,7 +151,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<Link href="/radio" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
src={ICON_NAV_BB}
alt=""
width={20}
height={20}
@@ -157,10 +160,7 @@ export async function Navigation({ session }: { session: Session | null }) {
{t("radio")}
</Link>
<NavDropdown
label={t("assistance")}
icon="/assets/images/icons/navigation/rules.gif"
>
<NavDropdown label={t("assistance")} icon={ICON_NAV_RULES}>
<Link href="/help" className="dropdown-item" role="menuitem">
{t("helpCenter")}
</Link>
@@ -185,7 +185,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<>
<Link href="/friends" className="nav-item relative">
<Image
src="/assets/images/icons/navigation/goody.png"
src={ICON_NAV_GOODY}
alt=""
width={20}
height={20}
@@ -195,7 +195,7 @@ export async function Navigation({ session }: { session: Session | null }) {
</Link>
<Link href="/messages" className="nav-item relative">
<Image
src="/assets/images/icons/navigation/bb.png"
src={ICON_NAV_BB}
alt=""
width={20}
height={20}
@@ -292,7 +292,7 @@ export async function Navigation({ session }: { session: Session | null }) {
>
<Link href="/" className="nav-item">
<Image
src="/assets/images/icons/navigation/me.png"
src={ICON_NAV_ME}
alt=""
width={20}
height={20}
@@ -301,10 +301,7 @@ export async function Navigation({ session }: { session: Session | null }) {
{t("home")}
</Link>
<NavDropdown
label={t("community")}
icon="/assets/images/icons/navigation/community.png"
>
<NavDropdown label={t("community")} icon={ICON_NAV_COMMUNITY}>
<Link href="/news" className="dropdown-item" role="menuitem">
{t("articles")}
</Link>
@@ -328,10 +325,7 @@ export async function Navigation({ session }: { session: Session | null }) {
</Link>
</NavDropdown>
<NavDropdown
label={t("shop")}
icon="/assets/images/icons/navigation/shop.png"
>
<NavDropdown label={t("shop")} icon={ICON_NAV_SHOP}>
<Link href="/shop" className="dropdown-item" role="menuitem">
{t("shop")}
</Link>
@@ -345,7 +339,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<Link href="/leaderboard" className="nav-item">
<Image
src="/assets/images/icons/navigation/leaderboards.png"
src={ICON_NAV_LEADERBOARDS}
alt=""
width={20}
height={20}
@@ -356,7 +350,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<Link href="/radio" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
src={ICON_NAV_BB}
alt=""
width={20}
height={20}
@@ -365,10 +359,7 @@ export async function Navigation({ session }: { session: Session | null }) {
{t("radio")}
</Link>
<NavDropdown
label={t("assistance")}
icon="/assets/images/icons/navigation/rules.gif"
>
<NavDropdown label={t("assistance")} icon={ICON_NAV_RULES}>
<Link href="/help" className="dropdown-item" role="menuitem">
{t("helpCenter")}
</Link>
@@ -393,7 +384,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<>
<Link href="/friends" className="nav-item">
<Image
src="/assets/images/icons/navigation/goody.png"
src={ICON_NAV_GOODY}
alt=""
width={20}
height={20}
@@ -403,7 +394,7 @@ export async function Navigation({ session }: { session: Session | null }) {
</Link>
<Link href="/messages" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
src={ICON_NAV_BB}
alt=""
width={20}
height={20}