Konami code toolbar

.vscode/settings.json

@@ -36,5 +36,11 @@
   ],
   "editor.quickSuggestions": {
     "strings": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

apps/maestros/app/(maestros)/monorepos/layout.tsx

@@ -12,8 +12,9 @@ import {
 import Link from 'next/link';
 import { Analytics } from '@repo/analytics';
 import { Twitter, SidebarOpen, Music } from 'lucide-react';
-import { Fragment } from 'react';
+import { Fragment, Suspense } from 'react';
 import { linkStyles } from '../navLinks';
+import { Toolbar } from './toolbar';
 import { inter } from '#/app/fonts';
 import { buildMeta, metadataBaseURI } from '#/app/metadata';
 import '#/app/globals.css';
@@ -162,6 +163,9 @@ export default function RootLayout({
           </ThemeWrapper>
         </AuthSessionProvider>
         <Analytics />
+        <Suspense>
+          <Toolbar />
+        </Suspense>
       </body>
     </html>
   );

apps/maestros/app/(maestros)/monorepos/toolbar.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { VercelToolbar } from '@vercel/toolbar/next';
+import { useEffect, useState } from 'react';
+
+const konamiKeyCodes = [
+  'ArrowUp',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowLeft',
+  'ArrowRight',
+  'b',
+  'a',
+];
+
+type State =
+  | {
+      complete: false;
+      sequence: string[];
+    }
+  | {
+      complete: true;
+    };
+
+const LOCAL_STORAGE_KEY = 'konami-state';
+
+export function Toolbar() {
+  const [state, setState] = useState<State>({ complete: false, sequence: [] });
+
+  useEffect(() => {
+    if (state.complete) {
+      console.log('Konami code complete!');
+      localStorage.setItem(LOCAL_STORAGE_KEY, 'yes');
+      return;
+    }
+
+    const storedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+    if (storedState === 'yes') {
+      setState({ complete: true });
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+      setState((prevState) => {
+        // This check is to please the typescript compiler
+        if (prevState.complete) return prevState;
+
+        const newSequence = [...prevState.sequence, e.key];
+        if (arrayStartsWith(konamiKeyCodes, newSequence)) {
+          if (newSequence.length === konamiKeyCodes.length) {
+            return { complete: true };
+          }
+          return { complete: false, sequence: newSequence };
+        }
+
+        return { complete: false, sequence: [] };
+      });
+    }
+
+    window.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [state.complete]);
+
+  return state.complete ? <VercelToolbar /> : null;
+}
+
+function arrayStartsWith<T>(arr: T[], prefix: T[]) {
+  if (arr.length < prefix.length) return false;
+
+  for (let i = 0; i < prefix.length; i++) {
+    if (arr[i] !== prefix[i]) return false;
+  }
+
+  return true;
+}

apps/maestros/next.config.js

@@ -1,4 +1,5 @@
 const { withContentlayer } = require('next-contentlayer');
+const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
 
 /** @type {import('next').NextConfig} */
 const moduleExports = {
@@ -8,4 +9,4 @@ const moduleExports = {
   typescript: { ignoreBuildErrors: true },
 };
 
-module.exports = withContentlayer(moduleExports);
+module.exports = withVercelToolbar(withContentlayer(moduleExports));

apps/maestros/package.json

@@ -17,6 +17,7 @@
     "@repo/db": "workspace:*",
     "@repo/ui": "workspace:*",
     "@vercel/og": "^0.0.27",
+    "@vercel/toolbar": "^0.1.5",
     "bright": "^0.8.2",
     "class-variance-authority": "^0.6.1",
     "contentlayer": "latest",