better typescript config, couple more build fixes

app/layout.tsx

@@ -65,10 +65,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <MDXProvider components={components}>
             <main className={`${bg} min-h-screen`}>
-              <>
+              <div>
                 <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
                 {children}
-              </>
+              </div>
             </main>
           </MDXProvider>
         </IconContext.Provider>

components/logo/useColorShift.tsx

@@ -24,16 +24,22 @@ export interface UseColorShiftReturnType {
 const useColorShift = (shiftInterval?: number, disableShift = false, customColorList?: ColorListType[]): UseColorShiftReturnType => {
     if (shiftInterval && shiftInterval <= 0) throw new Error("shiftInterval must be greater than 0")
 
-    const randomColor = () => (customColorList ?? colorList)[Math.floor(Math.random() * colorList.length | 0)];
+    const randomColor = () => {
+        const list = customColorList ?? colorList;
+        const color = list[Math.floor(Math.random() * list.length || 0)];
+
+        if (!color) throw new Error("color is undefined");
+        return color;
+    }
 
     const [circleColors, setCircleColors] = useState<{
         firstColor:     ColorListType | "",
         secondColor:    ColorListType | "",
         thirdColor:     ColorListType | "",
     }>({
-        firstColor: colorList[0],
-        secondColor: colorList[1],
-        thirdColor: colorList[2],
+        firstColor:     colorList[0] ?? randomColor(),
+        secondColor:    colorList[1] ?? randomColor(),
+        thirdColor:     colorList[2] ?? randomColor(),
     })
 
     function shift() {
@@ -46,7 +52,10 @@ const useColorShift = (shiftInterval?: number, disableShift = false, customColor
     }
 
     // perform initial mount of color changing pattern
-    useEffect(disableShift ? shift : (() => { return }), []);
+    useEffect(() => {
+        if (!disableShift) return;
+        shift();
+    }, []);
 
     // set this function to repeat
     useEffect(() => {

package.json

@@ -32,6 +32,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@types/uuid": "^9.0.1"
+    "@types/uuid": "^9.0.1",
+    "@vercel/style-guide": "^5.0.1"
   }
 }

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@vercel/style-guide/typescript",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],