From 05cbeacbdb2aea22fe35348f514eb13e25eb2288 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 13 Oct 2024 16:20:39 +0800
Subject: [PATCH] feat: add custom header env

---
 .env.example                   |  5 ++++-
 app/[locale]/(main)/header.tsx | 15 +++++++++++----
 docker/.env.example            |  5 ++++-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/.env.example b/.env.example
index cf625da49..b46311b4f 100644
--- a/.env.example
+++ b/.env.example
@@ -7,4 +7,7 @@ NEXT_PUBLIC_ShowFlag=true
 NEXT_PUBLIC_DisableCartoon=false
 NEXT_PUBLIC_ShowTag=true
 NEXT_PUBLIC_ShowNetTransfer=false
-NEXT_PUBLIC_ForceUseSvgFlag=false
\ No newline at end of file
+NEXT_PUBLIC_ForceUseSvgFlag=false
+NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
+NEXT_PUBLIC_CustomTitle=NezhaDash
+NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx
index ba182b471..15b3e82e4 100644
--- a/app/[locale]/(main)/header.tsx
+++ b/app/[locale]/(main)/header.tsx
@@ -3,6 +3,7 @@
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { ModeToggle } from "@/components/ThemeSwitcher";
 import { Separator } from "@/components/ui/separator";
+import getEnv from "@/lib/env-entry";
 import { DateTime } from "luxon";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
@@ -10,6 +11,10 @@ import React, { useEffect, useRef, useState } from "react";
 
 function Header() {
   const t = useTranslations("Header");
+  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
+  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
+  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
+
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
@@ -20,17 +25,19 @@ function Header() {
               height={40}
               unoptimized
               alt="apple-touch-icon"
-              src={"/apple-touch-icon.png"}
-              className="relative !m-0 h-6 w-6 border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
+              src={customLogo ? customLogo : "/apple-touch-icon.png"}
+              className="relative !m-0 border-2 border-transparent h-6 w-6 object-cover object-top !p-0"
             />
           </div>
-          NezhaDash
+          {customTitle ? customTitle : "NezhaDash"}
           <Separator
             orientation="vertical"
             className="mx-2 hidden h-4 w-[1px] md:block"
           />
           <p className="hidden text-sm font-medium opacity-40 md:block">
-            {t("p_1079-1199_Simpleandbeautifuldashbo")}
+            {customDescription
+              ? customDescription
+              : t("p_1079-1199_Simpleandbeautifuldashbo")}
           </p>
         </section>
         <section className="flex items-center gap-2">
diff --git a/docker/.env.example b/docker/.env.example
index cf625da49..358cedfc9 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -7,4 +7,7 @@ NEXT_PUBLIC_ShowFlag=true
 NEXT_PUBLIC_DisableCartoon=false
 NEXT_PUBLIC_ShowTag=true
 NEXT_PUBLIC_ShowNetTransfer=false
-NEXT_PUBLIC_ForceUseSvgFlag=false
\ No newline at end of file
+NEXT_PUBLIC_ForceUseSvgFlag=false
+NEXT_PUBLIC_CustomLogo=https://nezha-cf.buycoffee.top/apple-touch-icon.png
+NEXT_PUBLIC_CustomTitle=NezhaDash
+NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
\ No newline at end of file