Boy oh boy do I hate the JS ecosystem

Author: ZeroIntensity

docs/package.json

@@ -22,12 +22,15 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.2.1",
-        "tailwind-merge": "^2.4.0"
+        "tailwind-merge": "^2.4.0",
+        "tailwindcss": "v3"
     },
     "type": "module",
     "devDependencies": {
         "@types/node": "24.0.0",
         "@types/react": "19.1.7",
+        "eslint": "^9.28.0",
+        "pagefind": "^1.3.0",
         "typescript": "5.8.3"
     }
 }

docs/src/components/animated-modal.tsx

@@ -77,7 +77,7 @@ export const ModalBody = ({
         }
     }, [open]);
 
-    const modalRef = useRef(null);
+    const modalRef = useRef<HTMLDivElement>(null);
     const { setOpen } = useModal();
     useOutsideClick(modalRef, () => setOpen(false));
 
@@ -220,7 +220,7 @@ const CloseIcon = () => {
 // Hook to detect clicks outside of a component.
 // Add it in a separate file, I've added here for simplicity
 export const useOutsideClick = (
-    ref: React.RefObject<HTMLDivElement>,
+    ref: React.RefObject<HTMLDivElement | null>,
     callback: Function
 ) => {
     useEffect(() => {

docs/src/components/stars-background.tsx

@@ -53,7 +53,7 @@ export const StarsBackground: React.FC<StarsBackgroundProps> = ({
     className,
 }) => {
     const [stars, setStars] = useState<StarProps[]>([]);
-    const containerRef: RefObject<HTMLDivElement> =
+    const containerRef: RefObject<HTMLDivElement | null> =
         useRef<HTMLDivElement>(null);
 
     const generateStars = useCallback(
@@ -70,7 +70,7 @@ export const StarsBackground: React.FC<StarsBackgroundProps> = ({
                     opacity: Math.random() * 0.5 + 0.5,
                     twinkleSpeed: shouldTwinkle
                         ? minTwinkleSpeed +
-                          Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
+                        Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
                         : null,
                 };
             });