feat: add custom header env

hamster1963 · Oct 13, 2024 · 05cbeac · 05cbeac
1 parent 94d2d56
commit 05cbeac
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
+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
@@ -3,13 +3,18 @@
 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";
 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
@@ -7,4 +7,7 @@ NEXT_PUBLIC_ShowFlag=true
 NEXT_PUBLIC_DisableCartoon=false
 NEXT_PUBLIC_ShowTag=true
 NEXT_PUBLIC_ShowNetTransfer=false
-NEXT_PUBLIC_ForceUseSvgFlag=false
+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.