Revert "Revert "create icon links""

This reverts commit e42f388.
json-schema-org · Sep 12, 2024 · c63bf55 · c63bf55
1 parent e473bfd
commit c63bf55
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/app/components/IconLink/IconLink.tsx b/app/components/IconLink/IconLink.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+
+export default function Icon() {
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const onUpdate = React.useCallback((matcher: MediaQueryList) => {
+    setIsDarkMode(matcher.matches);
+  }, []);
+
+  React.useEffect(() => {
+    const matcher: MediaQueryList = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    matcher.addEventListener("change", () => onUpdate(matcher));
+    onUpdate(matcher);
+  }, []);
+
+  return (
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href={isDarkMode ? "/logos/icon.ico" : "/logos/icon-black.ico"}
+      id="light-scheme-icon"
+    />
+  );
+}
diff --git a/app/components/IconLink/index.tsx b/app/components/IconLink/index.tsx
@@ -0,0 +1 @@
+export { default as default } from "./IconLink";
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,27 +1,15 @@
 import type { Metadata } from "next";
-import { Open_Sans } from "next/font/google";
-// import { Providers } from "./providers";
+
 import "./styles/globals.css";
 import { GeistSans } from "geist/font/sans";
 import { Providers } from "./providers";
 import { GoogleAnalytics } from "@next/third-parties/google";
+import IconLink from "./components/IconLink";
+
 export const metadata: Metadata = {
   title: "Tour Of Json Schema",
   description: "A Tour of Json Schema",
-  icons: [
-    {
-      rel: "icon",
-      type: "image/png",
-      url: "/logos/icon-black.ico",
-      media: "(prefers-color-scheme: light)",
-    },
-    {
-      rel: "icon",
-      type: "image/x-icon",
-      url: "/logos/icon.ico",
-      media: "(prefers-color-scheme: dark)",
-    },
-  ],
+
   metadataBase: new URL("https://tour.json-schema.org"),
   openGraph: {
     title: "A Tour of JSON Schema",
@@ -43,6 +31,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <GoogleAnalytics gaId="G-X3SVRNR6WN" />
+      <head>
+        <IconLink />
+      </head>
       <body className={GeistSans.className}>
         <Providers>
           <main>{children}</main>