Migrate landing page to app dir (#1587)

* app dir yay

* better docs route

* fix icon sizing

* mobile sidebars

* detect webgl in useEffect

* separate zxcvbn

interface/components/PasswordMeter.tsx

@@ -1,12 +1,29 @@
 import clsx from 'clsx';
-import { getPasswordStrength } from '@sd/client';
+import { useEffect, useState } from 'react';
+import { type getPasswordStrength } from '@sd/client';
 
 export interface PasswordMeterProps {
 	password: string;
 }
 
 export const PasswordMeter = (props: PasswordMeterProps) => {
-	const { score, scoreText } = getPasswordStrength(props.password);
+	const [getStrength, setGetStrength] = useState<typeof getPasswordStrength | undefined>();
+	const { score, scoreText } = getStrength
+		? getStrength(props.password)
+		: { score: 0, scoreText: 'Loading...' };
+
+	useEffect(() => {
+		let cancelled = false;
+
+		import('@sd/client').then(({ getPasswordStrength }) => {
+			if (cancelled) return;
+			setGetStrength(() => getPasswordStrength);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, []);
 
 	return (
 		<div className="relative">

interface/package.json

@@ -3,6 +3,7 @@
 	"private": true,
 	"main": "index.tsx",
 	"types": "index.tsx",
+	"sideEffects": false,
 	"scripts": {
 		"lint": "eslint . --cache",
 		"typecheck": "tsc -b"
@@ -10,7 +11,7 @@
 	"dependencies": {
 		"@fontsource/inter": "^4.5.13",
 		"@headlessui/react": "^1.7.3",
-		"@icons-pack/react-simple-icons": "^7.2.0",
+		"@icons-pack/react-simple-icons": "^9.1.0",
 		"@phosphor-icons/react": "^2.0.10",
 		"@radix-ui/react-progress": "^1.0.1",
 		"@radix-ui/react-slider": "^1.1.0",