perf(site): inline small classic icons and favicon as base64
- 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:
1 parent
97012a78f6
commit
e5e17d75ae
10 files changed
+128
-64
No files matched your search
+21
-15
@@ -6,6 +6,15 @@ import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { PublicLoadError } from "@/components/public/load-error";
|
||||
import { publicReadFailure } from "@/lib/services/public-read";
|
||||
import {
|
||||
ICON_ARTICLE,
|
||||
ICON_CAMERA,
|
||||
ICON_CATALOG,
|
||||
ICON_FRIENDS,
|
||||
ICON_LIGHTHOUSE,
|
||||
ICON_NAV_GOODY,
|
||||
ICON_NAV_ME,
|
||||
} from "@/lib/site-icons";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Home",
|
||||
@@ -124,17 +133,17 @@ export default async function Home() {
|
||||
{
|
||||
title: tp("featuresAvatar"),
|
||||
desc: tp("featuresAvatarDesc"),
|
||||
icon: "/assets/images/icons/friends.png",
|
||||
icon: ICON_FRIENDS,
|
||||
},
|
||||
{
|
||||
title: tp("featuresFurniture"),
|
||||
desc: tp("featuresFurnitureDesc"),
|
||||
icon: "/assets/images/icons/catalog.png",
|
||||
icon: ICON_CATALOG,
|
||||
},
|
||||
{
|
||||
title: tp("featuresCommunity"),
|
||||
desc: tp("featuresCommunityDesc"),
|
||||
icon: "/assets/images/icons/navigation/goody.png",
|
||||
icon: ICON_NAV_GOODY,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -168,7 +177,7 @@ export default async function Home() {
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src="/assets/images/icons/lighthouse.png"
|
||||
src={ICON_LIGHTHOUSE}
|
||||
alt={hotelName}
|
||||
width={28}
|
||||
height={28}
|
||||
@@ -393,25 +402,25 @@ export default async function Home() {
|
||||
{
|
||||
value: users,
|
||||
label: tp("statsCitizens"),
|
||||
icon: "/assets/images/icons/friends.png",
|
||||
icon: ICON_FRIENDS,
|
||||
live: false,
|
||||
},
|
||||
{
|
||||
value: rooms,
|
||||
label: tp("statsRooms"),
|
||||
icon: "/assets/images/icons/catalog.png",
|
||||
icon: ICON_CATALOG,
|
||||
live: false,
|
||||
},
|
||||
{
|
||||
value: online,
|
||||
label: tp("statsOnline"),
|
||||
icon: "/assets/images/icons/navigation/me.png",
|
||||
icon: ICON_NAV_ME,
|
||||
live: true,
|
||||
},
|
||||
{
|
||||
value: articles?.length ?? null,
|
||||
label: tp("statsArticles"),
|
||||
icon: "/assets/images/icons/article.gif",
|
||||
icon: ICON_ARTICLE,
|
||||
live: false,
|
||||
},
|
||||
].map((s) => (
|
||||
@@ -458,7 +467,7 @@ export default async function Home() {
|
||||
<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
|
||||
<SurfaceCard
|
||||
title={th("login")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
icon={ICON_NAV_ME}
|
||||
bodyClassName="p-3.5 sm:p-4"
|
||||
>
|
||||
<HomeLoginForm
|
||||
@@ -479,7 +488,7 @@ export default async function Home() {
|
||||
recentUsers.length > 0 && (
|
||||
<SurfaceCard
|
||||
title={tp("recentUsers")}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
icon={ICON_NAV_GOODY}
|
||||
actionHref="/community"
|
||||
actionLabel={tp("allUsers")}
|
||||
bodyClassName="p-3.5 sm:p-4"
|
||||
@@ -514,7 +523,7 @@ export default async function Home() {
|
||||
<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
|
||||
<SurfaceCard
|
||||
title={tp("latestNews")}
|
||||
icon="/assets/images/icons/article.gif"
|
||||
icon={ICON_ARTICLE}
|
||||
actionHref="/news"
|
||||
actionLabel={tp("allNews")}
|
||||
>
|
||||
@@ -588,10 +597,7 @@ export default async function Home() {
|
||||
) : (
|
||||
recentPhotos.length > 0 && (
|
||||
<Reveal>
|
||||
<SurfaceCard
|
||||
title={tp("recentPhotos")}
|
||||
icon="/assets/images/icons/camera.png"
|
||||
>
|
||||
<SurfaceCard title={tp("recentPhotos")} icon={ICON_CAMERA}>
|
||||
<div className="mx-auto grid max-w-md grid-cols-4 gap-2">
|
||||
{recentPhotos.slice(0, 4).map((p) => (
|
||||
<Link
|
||||
|
||||
Reference in new issue
Block a user