fix: dynamic theme logo (#50)

Author: gwansikk

docs/offlegacy.org/src/components/demo-playground.tsx

@@ -2,9 +2,8 @@
 
 import { highlight, Pre, type HighlightedCode } from "codehike/code";
 import { DemoButton } from "./demo-button";
-import { useTheme } from "nextra-theme-docs";
-import { useSystemDarkMode } from "../logo/useSystemDarkMode";
-import { useEffect, useState } from "react";
+import { Link, useTheme } from "nextra-theme-docs";
+import { useLayoutEffect, useState } from "react";
 import { motion } from "motion/react";
 import { Toaster } from "sonner";
 
@@ -31,13 +30,11 @@ function App() {
 }`;
 
 export function DemoCode() {
-  const { theme } = useTheme();
-  const isSystemDarkMode = useSystemDarkMode();
-  const resolvedTheme = theme === "system" ? (isSystemDarkMode ? "dark" : "light") : theme;
+  const { resolvedTheme } = useTheme();
   const codeTheme = resolvedTheme === "dark" ? "github-dark" : "github-light";
   const [highlighted, setHighlighted] = useState<HighlightedCode | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     highlight(
       {
         value: code,
@@ -66,7 +63,9 @@ export function DemoCode() {
       <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50">
           <div className="flex items-center space-x-2">
-            <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">example-basic.tsx</span>
+            <Link href="/docs/basic-example" className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+              example-basic.tsx
+            </Link>
           </div>
         </div>
         <div className="relative overflow-x-auto p-6">

docs/offlegacy.org/src/components/home-page.tsx

@@ -46,7 +46,7 @@ export default async function HomePage({
             <InstallCopyButton />
           </div>
         </div>
-        <div className="min-h-[572.75px]">
+        <div className="min-h-[572.75px] w-full max-w-[723px]">
           <DemoCode />
         </div>
       </div>

docs/offlegacy.org/src/content/en/index.mdx

@@ -7,7 +7,7 @@ import HomePage from "@/components/home-page";
 <HomePage
   description="Comprehensive solution for event tracking in React applications"
   startedText="Get Started"
-  featureSectionTitle="Event tracking paradigm presented by Event Tracker"
+  featureSectionTitle="Focus on 'what' to track, not 'how' to track it!"
   featureSectionContents={[
     {
       title: "Declarative API",

docs/offlegacy.org/src/logo/index.tsx

@@ -2,8 +2,7 @@
 
 import Image from "next/image";
 import { useTheme } from "nextra-theme-docs";
-
-import { useSystemDarkMode } from "./useSystemDarkMode";
+import { useLayoutEffect, useState } from "react";
 
 interface LogoProps {
   size?: number;
@@ -13,12 +12,12 @@ const DARK_LOGO_PATH = "/img/dark-logo.png";
 const LIGHT_LOGO_PATH = "/img/light-logo.png";
 
 export const Logo = ({ size = 30 }: LogoProps) => {
-  const isSystemDarkMode = useSystemDarkMode();
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
+  const [src, setSrc] = useState(LIGHT_LOGO_PATH);
 
-  const isDarkMode = theme === "system" ? isSystemDarkMode : theme === "dark";
+  useLayoutEffect(() => {
+    setSrc(resolvedTheme === "dark" ? DARK_LOGO_PATH : LIGHT_LOGO_PATH);
+  }, [resolvedTheme]);
 
-  return (
-    <Image src={isDarkMode ? DARK_LOGO_PATH : LIGHT_LOGO_PATH} alt="event-tracker logo" width={size} height={size} />
-  );
+  return <Image src={src} alt="event-tracker logo" width={size} height={size} />;
 };