feat: add logo at docs

Author: nayounsang

packages/docs/app/_components/Layout.tsx

@@ -1,21 +1,31 @@
 import { Footer, Navbar } from "nextra-theme-docs";
 import cn from "clsx";
 import { REPO_URL } from "@/const/link";
+import Image from "next/image";
 //import { Banner } from "nextra/components";
 
-export const banner = <></>
+export const banner = <></>;
 export const navbar = (
   <Navbar
     logo={
-      <span
-        className={cn(
-          "font-bold",
-          "hover:transition-all hover:duration-1000 motion-reduce:hover:transition-none",
-          "[mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)] [mask-position:0] [mask-size:400%]",
-          "hover:[mask-position:100%]"
-        )}
-      >
-        <span className="text-orange-500">MSW</span> DEV TOOL
+      <span className="flex items-center gap-2">
+        <Image
+          src="/msw-dev-tool-logo.svg"
+          alt="MSW Dev Tool Logo"
+          width={24}
+          height={24}
+          style={{ borderRadius: 4 }}
+        />
+        <span
+          className={cn(
+            "font-bold",
+            "hover:transition-all hover:duration-1000 motion-reduce:hover:transition-none",
+            "[mask-image:linear-gradient(60deg,#000_25%,rgba(0,0,0,.2)_50%,#000_75%)] [mask-position:0] [mask-size:400%]",
+            "hover:[mask-position:100%]"
+          )}
+        >
+          <span className="text-orange-500">MSW</span> DEV TOOL
+        </span>
       </span>
     }
     projectLink={REPO_URL}
@@ -35,7 +45,7 @@ export const footer = (
       Powered by nextra
     </a>
     <p className="mt-6 text-xs">
-      © {new Date().getFullYear()} The MSW dev tool Project.
+      © {new Date().getFullYear()} The msw dev tool Project.
     </p>
   </Footer>
 );

packages/docs/app/favicon.ico

@@ -45,6 +45,20 @@ export const metadata: Metadata = {
   ],
   other: {
     "google-site-verification":"nZV_ZdGfP7qnS6DjjdRD9T6a6XLWkdKXYYpphQg-w2s"
+  },
+  icons: {
+    icon: [
+      { url: "/favicon/favicon.ico" },
+      { url: "/favicon/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon/favicon-16x16.png", sizes: "16x16", type: "image/png" }
+    ],
+    apple: [
+      { url: "/favicon/apple-touch-icon.png", sizes: "180x180" }
+    ],
+    shortcut: ["/favicon/favicon.ico"],
+    other: [
+      { rel: "manifest", url: "/favicon/site.webmanifest" }
+    ]
   }
 };
 

packages/docs/app/layout.tsx

@@ -2,6 +2,7 @@ import { REPO_URL } from "@/const/link";
 import { SquareTerminal } from "lucide-react";
 import Link from "next/link";
 import { GitHubIcon } from "nextra/icons";
+import Image from "next/image";
 
 export default function Home() {
   return (
@@ -10,8 +11,18 @@ export default function Home() {
         <div className="max-w-3xl mx-auto">
           {/* Hero Section */}
           <div className="space-y-6 mb-12">
-            <h1 className="text-4xl md:text-6xl font-bold animate-fadeIn">
-              <span className="text-orange-500 animate-pulse">MSW</span> DEV TOOL
+            <h1 className="text-4xl md:text-6xl font-bold animate-fadeIn flex items-center justify-center gap-3">
+              <Image
+                src="/msw-dev-tool-logo.svg"
+                alt="MSW Dev Tool Logo"
+                width={40}
+                height={40}
+                className="rounded-lg shadow-lg"
+                priority
+              />
+              <span>
+                <span className="text-orange-500 animate-pulse">MSW</span> DEV TOOL
+              </span>
             </h1>
             <h2 className="text-xl md:text-2xl font-extralight text-neutral-200 leading-relaxed animate-fadeIn animation-delay-200">
               Dev tool to control mock logic, modify responses, and monitor API calls