Feat: add logos (#278)

* fix #276

* feat: updated logo

components/ThemeImage.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "./useTheme";
+
+export const ThemeImage = ({
+  light,
+  dark,
+  alt,
+  ...props
+}: {
+  light: string;
+  dark: string;
+  alt: string;
+  [key: string]: any;
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const theme = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return <img src={light} alt={alt} {...props} />;
+  }
+
+  // Client-side rendering after hydrating
+  return <img src={theme === "light" ? light : dark} alt={alt} {...props} />;
+};

components/useTheme.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+export function useTheme() {
+  const [theme, setTheme] = useState<"dark" | "light">(() => {
+    if (typeof window === "undefined") return "light";
+    return document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+  });
+
+  useEffect(() => {
+    const handleThemeChange = () => {
+      const newTheme = document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
+      setTheme(newTheme);
+    };
+
+    // Watch for class changes on documentElement
+    const observer = new MutationObserver(handleThemeChange);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return theme;
+}

pages/getting-started/testing/contract-testing.md

@@ -30,9 +30,6 @@ Now, let's move on to the testing process:
 - Use `assert` to verify that the contract behaves as expected in the given context
   - You can also use assertion macros: `assert_eq!`, `assert_ne!`, `assert_gt!`, `assert_ge!`, `assert_lt!`, `assert_le!`
 
-If you haven't noticed yet, every example in this book has hidden tests, you can see them by clicking the "Show hidden lines" (eyes icon) on the top right of code blocks.
-You can also find a detailed explanation of testing in Cairo in [The Cairo Book](https://book.cairo-lang.org/ch10-00-testing-cairo-programs.html).
-
 ## Using the contract state
 
 You can use the `Contract::contract_state_for_testing` function to access the contract state. This function is only available in the test environment and allows you to mutate and read the contract state directly.

pages/index.mdx

@@ -1,4 +1,13 @@
 import { Sponsors } from "vocs/components";
+import { ThemeImage } from "../components/ThemeImage";
+
+<div className="flex justify-center">
+  <ThemeImage
+    light="/svg/Vertical_Light.svg"
+    dark="/svg/Vertical_Dark.svg"
+    alt="Starknet By Example"
+  />
+</div>
 
 # Introduction