From e53df816723aa08283bbe7b8163693f0b2c7c5b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vrba?= <jiri@vrba.dev>
Date: Sun, 23 Oct 2022 16:13:44 +0200
Subject: [PATCH 1/5] Display ctrl key in search bar for non-mac browsers

---
 beta/src/components/Search.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index abafaefaf2a..9063bf356ac 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -28,10 +28,12 @@ function Hit({hit, children}: any) {
   );
 }
 
-function Kbd(props: {children?: React.ReactNode}) {
+function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
+  const width = props.wide ? 'w-12' : 'w-6';
+
   return (
     <kbd
-      className="h-6 w-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
+      className={`${width} h-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded`}
       {...props}
     />
   );
@@ -101,6 +103,9 @@ export function Search({
   },
 }: SearchProps) {
   const [isShowing, setIsShowing] = useState(false);
+  const [macintosh, setMacintosh] = useState(true);
+
+  useEffect(() => setMacintosh(window.navigator.platform.includes('Mac')), []);
 
   const importDocSearchModalIfNeeded = useCallback(
     function importDocSearchModalIfNeeded() {
@@ -160,7 +165,7 @@ export function Search({
         <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search
         <span className="ml-auto hidden sm:flex item-center">
-          <Kbd>⌘</Kbd>
+          <Kbd wide={!macintosh}>{macintosh ? '⌘' : 'Ctrl'}</Kbd>
           <Kbd>K</Kbd>
         </span>
       </button>

From f94d6277b0b2031132effaf57b4ddc7d0dd7cd74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vrba?= <jiri@vrba.dev>
Date: Wed, 16 Nov 2022 10:14:51 +0100
Subject: [PATCH 2/5] Detect browser platform in an inline script

---
 beta/src/pages/_document.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index 9e37d6c6194..c5dac6d46c3 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -53,6 +53,19 @@ const MyDocument = () => {
               `,
           }}
         />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            (function () {
+              // Detect whether the browser is Mac to display either the ⌘ symbol or Ctrl in the search bar
+              document.documentElement.classList.add(
+                  window.navigator.platform.includes('Mac')
+                  ? "platform-mac" 
+                  : "platform-win"
+              );
+            })();
+          `,
+          }}></script>
         <Main />
         <NextScript />
       </body>

From a827705bba40f63e54945058fbefa47447775a59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vrba?= <jiri@vrba.dev>
Date: Wed, 16 Nov 2022 10:22:35 +0100
Subject: [PATCH 3/5] Fix passing wide to the underlying <kbd> element

---
 beta/src/components/Search.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index 9063bf356ac..be8fba948c1 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -29,12 +29,13 @@ function Hit({hit, children}: any) {
 }
 
 function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
-  const width = props.wide ? 'w-12' : 'w-6';
+  const {wide, ...rest} = props;
+  const width = wide ? 'w-12' : 'w-6';
 
   return (
     <kbd
-      className={`${width} h-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded`}
-      {...props}
+      className={`${width} h-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded`}
+      {...rest}
     />
   );
 }
@@ -96,16 +97,20 @@ const options = {
   apiKey: siteConfig.algolia.apiKey,
   indexName: siteConfig.algolia.indexName,
 };
+
 let DocSearchModal: any = null;
+
 export function Search({
   searchParameters = {
     hitsPerPage: 5,
   },
 }: SearchProps) {
   const [isShowing, setIsShowing] = useState(false);
-  const [macintosh, setMacintosh] = useState(true);
+  const [ctrlKey, setCtrlKey] = useState(false);
 
-  useEffect(() => setMacintosh(window.navigator.platform.includes('Mac')), []);
+  useEffect(() => {
+    setCtrlKey(document.documentElement.classList.contains('platform-win'));
+  }, []);
 
   const importDocSearchModalIfNeeded = useCallback(
     function importDocSearchModalIfNeeded() {
@@ -165,7 +170,7 @@ export function Search({
         <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search
         <span className="ml-auto hidden sm:flex item-center">
-          <Kbd wide={!macintosh}>{macintosh ? '⌘' : 'Ctrl'}</Kbd>
+          <Kbd wide={ctrlKey}>{ctrlKey ? 'Ctrl' : '⌘'}</Kbd>
           <Kbd>K</Kbd>
         </span>
       </button>

From d5b0eb8354a52272f3dcae1efbe652b7dded5157 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vrba?= <jiri@vrba.dev>
Date: Wed, 16 Nov 2022 10:34:08 +0100
Subject: [PATCH 4/5] Hide content specific to mac/win with data-platform

---
 beta/src/styles/index.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index a5c32b1875a..95dc4b39b8e 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -212,6 +212,17 @@
   }
 }
 
+/**
+  * Hide all content that's relevant only to a specific platform
+  */
+html.platform-mac [data-platform='win'] {
+  display: none;
+}
+
+html.platform-win [data-platform='mac'] {
+  display: none;
+}
+
 .code-step * {
   color: inherit !important;
 }

From 05107eff1c83d836bfb3a581cb8c640ceaaee3f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vrba?= <jiri@vrba.dev>
Date: Wed, 16 Nov 2022 10:35:08 +0100
Subject: [PATCH 5/5] Show appropriate search shortcut via data-platform

---
 beta/src/components/Search.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index be8fba948c1..892c6120732 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -106,11 +106,6 @@ export function Search({
   },
 }: SearchProps) {
   const [isShowing, setIsShowing] = useState(false);
-  const [ctrlKey, setCtrlKey] = useState(false);
-
-  useEffect(() => {
-    setCtrlKey(document.documentElement.classList.contains('platform-win'));
-  }, []);
 
   const importDocSearchModalIfNeeded = useCallback(
     function importDocSearchModalIfNeeded() {
@@ -170,7 +165,10 @@ export function Search({
         <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search
         <span className="ml-auto hidden sm:flex item-center">
-          <Kbd wide={ctrlKey}>{ctrlKey ? 'Ctrl' : '⌘'}</Kbd>
+          <Kbd data-platform="mac">⌘</Kbd>
+          <Kbd data-platform="win" wide>
+            Ctrl
+          </Kbd>
           <Kbd>K</Kbd>
         </span>
       </button>