[ENG-1414] Docker Server Installation Dialog (#1774)

* docker dialog * move tooltip inner * types * rename "production" tag to latest * fix dialog with and url * pnpm-lock
2024-07-02 10:03:28 +00:00 · 2023-11-24 22:30:19 +03:00 · 2023-11-24 22:30:19 +03:00 · 3b12e4ea19
parent ea4913e028
commit 3b12e4ea19
10 changed files with 320 additions and 159 deletions
--- a/.github/workflows/server.yml
+++ b/.github/workflows/server.yml
@ -56,7 +56,7 @@ jobs:
        id: build-image
        uses: redhat-actions/buildah-build@v2
        with:
-          tags: ${{ steps.image_info.outputs.tag }} ${{ github.event_name == 'release' && 'production' || 'staging' }}
+          tags: ${{ steps.image_info.outputs.tag }} ${{ github.event_name == 'release' && 'latest' || 'staging' }}
          archs: amd64
          image: ${{ steps.image_info.outputs.name }}
          layers: 'false'
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@ -10,24 +10,25 @@
 		"typecheck": "contentlayer build && tsc -b"
 	},
 	"dependencies": {
-		"@docsearch/react": "3",
+		"@docsearch/react": "^3.5.2",
 		"@octokit/webhooks": "^12.0.3",
-		"@phosphor-icons/react": "^2.0.13",
+		"@phosphor-icons/react": "^2.0.14",
+		"@radix-ui/react-dialog": "^1.0.5",
 		"@react-three/drei": "^9.88.13",
-		"@react-three/fiber": "^8.15.10",
+		"@react-three/fiber": "^8.15.11",
 		"@sd/assets": "workspace:*",
 		"@sd/ui": "workspace:*",
 		"@t3-oss/env-nextjs": "^0.7.1",
 		"clsx": "^2.0.0",
 		"contentlayer": "^0.3.4",
 		"dayjs": "^1.11.10",
-		"framer-motion": "^10.16.4",
+		"framer-motion": "^10.16.5",
 		"image-size": "^1.0.2",
 		"katex": "^0.16.9",
 		"markdown-to-jsx": "^7.3.2",
 		"next": "13.5.6",
 		"next-contentlayer": "^0.3.4",
-		"next-plausible": "^3.11.2",
+		"next-plausible": "^3.11.3",
 		"react": "18.2.0",
 		"react-burger-menu": "^3.0.9",
 		"react-device-detect": "^2.2.3",
--- a/apps/landing/src/app/Downloads/DockerDialog.tsx
+++ b/apps/landing/src/app/Downloads/DockerDialog.tsx
@ -0,0 +1,64 @@
+'use client';
+
+import { Check, Copy } from '@phosphor-icons/react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState } from 'react';
+import { Button, Tooltip } from '@sd/ui';
+
+const DOCKER_URL = 'docker pull ghcr.io/spacedriveapp/spacedrive/server';
+
+export function DockerDialog({
+	open,
+	setOpen
+}: {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+}) {
+	const [copied, setCopied] = useState(false);
+
+	return (
+		<Dialog.Root open={open} onOpenChange={setOpen}>
+			<Dialog.Portal>
+				<Dialog.Overlay className="fixed inset-0 z-50 bg-app/80 backdrop-blur-sm radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-open:animate-in radix-state-open:fade-in-0" />
+				<Dialog.Content className="fixed left-[50%] top-[50%] z-50 w-[500px] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
+					<div className="p-3 pt-0">
+						<h2 className="py-2 text-center text-lg font-semibold text-ink">Docker</h2>
+						{/* Link */}
+						<div className="flex flex-row items-center">
+							<code className="block w-full rounded-md bg-app-darkBox px-3 py-2 text-sm font-medium text-ink">
+								$ {DOCKER_URL}
+							</code>
+							<Button
+								size="icon"
+								variant="outline"
+								className="absolute right-4"
+								onClick={() => {
+									navigator.clipboard.writeText(DOCKER_URL);
+									setCopied(true);
+									setTimeout(() => setCopied(false), 3000);
+								}}
+							>
+								<Tooltip label={copied ? 'Copied' : 'Copy to clipboard'}>
+									{copied ? (
+										<Check size={18} className="text-green-400" />
+									) : (
+										<Copy size={18} className="text-white opacity-70" />
+									)}
+								</Tooltip>
+							</Button>
+						</div>
+						{/* OK Button */}
+						<Button
+							onClick={() => setOpen(false)}
+							variant="accent"
+							className="mt-3 w-full !rounded"
+							size="md"
+						>
+							OK
+						</Button>
+					</div>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
--- a/apps/landing/src/app/Downloads/Platform.tsx
+++ b/apps/landing/src/app/Downloads/Platform.tsx
@ -0,0 +1,108 @@
+'use client';
+
+import { AndroidLogo, Globe, Icon, LinuxLogo, WindowsLogo } from '@phosphor-icons/react';
+import { Apple, Docker } from '@sd/assets/svgs/brands';
+import { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
+import { Tooltip } from '@sd/ui';
+
+export type Platform = {
+	name: string;
+	os?: string;
+	icon: Icon | FunctionComponent<any>;
+	version?: string;
+	links?: Array<{ name: string; arch: string }>;
+	disabled?: boolean;
+};
+
+export const platforms = {
+	darwin: {
+		name: 'macOS',
+		os: 'darwin',
+		icon: Apple,
+		version: '12+',
+		links: [
+			{ name: 'Intel', arch: 'x86_64' },
+			{ name: 'Apple Silicon', arch: 'aarch64' }
+		]
+	},
+	windows: {
+		name: 'Windows',
+		os: 'windows',
+		icon: WindowsLogo,
+		version: '10+',
+		links: [{ name: 'x86_64', arch: 'x86_64' }]
+	},
+	linux: {
+		name: 'Linux',
+		os: 'linux',
+		icon: LinuxLogo,
+		version: 'AppImage',
+		links: [{ name: 'x86_64', arch: 'x86_64' }]
+	},
+	docker: { name: 'Docker', icon: Docker },
+	android: { name: 'Android', icon: AndroidLogo, version: '10+', disabled: true },
+	web: { name: 'Web', icon: Globe, disabled: true }
+} satisfies Record<string, Platform>;
+
+export function useCurrentPlatform() {
+	const [currentPlatform, setCurrentPlatform] = useState<Platform | null>(null);
+
+	useEffect(() => {
+		import('react-device-detect').then(({ isWindows, isMacOs, isMobile }) => {
+			setCurrentPlatform((e) => {
+				if (e) return e;
+
+				if (isWindows) {
+					return platforms.windows;
+				} else if (isMacOs) {
+					return platforms.darwin;
+				} else if (!isMobile) {
+					return platforms.linux;
+				}
+
+				return null;
+			});
+		});
+	}, []);
+
+	return currentPlatform;
+}
+
+interface PlatformProps {
+	platform: Platform;
+}
+
+export const BASE_DL_LINK = '/api/releases/desktop/stable';
+
+export function Platform({ platform, ...props }: ComponentProps<'a'> & PlatformProps) {
+	const { links } = platform;
+
+	const Outer = links
+		? links.length === 1
+			? (props: any) => (
+					<a
+						aria-label={platform.name}
+						rel="noopener"
+						href={`${BASE_DL_LINK}/${platform.os}/${links[0].arch}`}
+						{...props}
+					/>
+			  )
+			: (props: any) => <button {...props} />
+		: (props: any) => <div {...props} />;
+
+	const Icon = platform.icon;
+
+	return (
+		<Tooltip label={platform.name}>
+			<Outer {...props}>
+				<Icon
+					size={25}
+					className={`h-[25px] text-white ${
+						platform.disabled ? 'opacity-20' : 'opacity-90'
+					}`}
+					weight="fill"
+				/>
+			</Outer>
+		</Tooltip>
+	);
+}
--- a/apps/landing/src/app/Downloads/index.tsx
+++ b/apps/landing/src/app/Downloads/index.tsx
@ -1,52 +1,14 @@
 'use client';

-import { AndroidLogo, Globe, LinuxLogo, WindowsLogo } from '@phosphor-icons/react';
-import { Apple, Github } from '@sd/assets/svgs/brands';
+import { Github } from '@sd/assets/svgs/brands';
+import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
-import { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
-import { Tooltip } from '@sd/ui';
+import { useState } from 'react';

-import HomeCTA from './HomeCTA';
-
-interface Platform {
-	name: string;
-	os?: string;
-	icon: FunctionComponent<any>;
-	version?: string;
-	links?: Array<{ name: string; arch: string }>;
-}
-
-const platforms = {
-	darwin: {
-		name: 'macOS',
-		os: 'darwin',
-		icon: Apple,
-		version: '12+',
-		links: [
-			{ name: 'Intel', arch: 'x86_64' },
-			{ name: 'Apple Silicon', arch: 'aarch64' }
-		]
-	},
-	windows: {
-		name: 'Windows',
-		os: 'windows',
-		icon: WindowsLogo,
-		version: '10+',
-		links: [{ name: 'x86_64', arch: 'x86_64' }]
-	},
-	linux: {
-		name: 'Linux',
-		os: 'linux',
-		icon: LinuxLogo,
-		version: 'AppImage',
-		links: [{ name: 'x86_64', arch: 'x86_64' }]
-	},
-	android: { name: 'Android', icon: AndroidLogo, version: '10+' },
-	web: { name: 'Web', icon: Globe }
-} satisfies Record<string, Platform>;
-
-const BASE_DL_LINK = '/api/releases/desktop/stable';
+import HomeCTA from '../HomeCTA';
+import { DockerDialog } from './DockerDialog';
+import { BASE_DL_LINK, Platform, platforms, useCurrentPlatform } from './Platform';

 interface Props {
 	latestVersion: string;
@ -56,6 +18,8 @@ export function Downloads({ latestVersion }: Props) {
 	const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(null);
 	const currentPlatform = useCurrentPlatform();

+	const [dockerDialogOpen, setDockerDialogOpen] = useState(false);
+
 	const plausible = usePlausible();

 	const formattedVersion = (() => {
@ -132,8 +96,9 @@ export function Downloads({ latestVersion }: Props) {
 					</>
 				)}
 			</p>
+			{/* Platform icons */}
 			<div className="relative z-10 mt-5 flex gap-3">
-				{Object.values(platforms as Record<string, Platform>).map((platform, i) => {
+				{Object.values<Platform>(platforms).map((platform, i) => {
 					return (
 						<motion.div
 							initial={{ opacity: 0, y: 20 }}
@ -144,14 +109,20 @@ export function Downloads({ latestVersion }: Props) {
 							<Platform
 								key={platform.name}
 								platform={platform}
+								className={clsx(platform.name === 'Docker' && 'cursor-pointer')}
 								onClick={() => {
-									if (platform.links && platform.links.length === 1) {
-										plausible('download', {
-											props: { os: platform.name }
-										});
+									if (platform.name === 'Docker') {
+										setDockerDialogOpen(true);
+										return;
 									}
-									if (platform.links && platform.links.length > 1) {
-										setSelectedPlatform(platform);
+									if (platform.links) {
+										if (platform.links.length === 1) {
+											plausible('download', {
+												props: { os: platform.name }
+											});
+										} else {
+											setSelectedPlatform(platform);
+										}
 									}
 								}}
 							/>
@ -159,66 +130,8 @@ export function Downloads({ latestVersion }: Props) {
 					);
 				})}
 			</div>
+			{/* Docker Dialog */}
+			<DockerDialog open={dockerDialogOpen} setOpen={setDockerDialogOpen} />
 		</>
 	);
 }
-
-function useCurrentPlatform() {
-	const [currentPlatform, setCurrentPlatform] = useState<Platform | null>(null);
-
-	useEffect(() => {
-		import('react-device-detect').then(({ isWindows, isMacOs, isMobile }) => {
-			setCurrentPlatform((e) => {
-				if (e) return e;
-
-				if (isWindows) {
-					return platforms.windows;
-				} else if (isMacOs) {
-					return platforms.darwin;
-				} else if (!isMobile) {
-					return platforms.linux;
-				}
-
-				return null;
-			});
-		});
-	}, []);
-
-	return currentPlatform;
-}
-
-interface PlatformProps {
-	platform: Platform;
-}
-function Platform({ platform, ...props }: ComponentProps<'a'> & PlatformProps) {
-	const { links } = platform;
-
-	const Outer = links
-		? links.length === 1
-			? (props: any) => (
-					<a
-						aria-label={platform.name}
-						rel="noopener"
-						href={`${BASE_DL_LINK}/${platform.os}/${links[0].arch}`}
-						{...props}
-					/>
-			  )
-			: (props: any) => <button {...props} />
-		: (props: any) => <div {...props} />;
-
-	const Icon = platform.icon;
-
-	return (
-		<Tooltip label={platform.name}>
-			<Outer {...props}>
-				<Icon
-					size={25}
-					className={`h-[25px] text-white ${
-						platform.links ? 'opacity-80' : 'opacity-20'
-					}`}
-					weight="fill"
-				/>
-			</Outer>
-		</Tooltip>
-	);
-}
--- a/apps/landing/src/components/mdx/index.tsx
+++ b/apps/landing/src/components/mdx/index.tsx
@ -1,9 +1,16 @@
 import { MDXComponents } from 'mdx/types';
 import NextImage, { ImageProps } from 'next/image';
+import { env } from '~/env';

 import Notice from './Notice';

-const Image = (props: ImageProps) => <NextImage placeholder="blur" {...props} />;
+const Image = (props: ImageProps) => (
+	<NextImage
+		// Weirdly enough this works in production but not in dev...
+		placeholder={env.NODE_ENV === 'production' ? 'blur' : undefined}
+		{...props}
+	/>
+);

 export const BlogMDXComponents = {
 	img: Image, // we remap 'img' to 'Image'
--- a/apps/landing/src/env.ts
+++ b/apps/landing/src/env.ts
@ -3,6 +3,7 @@ import { z } from 'zod';

 export const env = createEnv({
 	server: {
+		NODE_ENV: z.enum(['development', 'production', 'test']),
 		DATABASE_URL: z.string().url(),
 		SLACK_FEEDBACK_URL: z.string().url(),
 		AUTH_SECRET: z.string(),
@ -21,6 +22,7 @@ export const env = createEnv({
 	},
 	client: {},
 	runtimeEnv: {
+		NODE_ENV: process.env.NODE_ENV,
 		DATABASE_URL: process.env.DATABASE_URL,
 		SLACK_FEEDBACK_URL: process.env.SLACK_FEEDBACK_URL,
 		AUTH_SECRET: process.env.AUTH_SECRET,
--- a/packages/assets/svgs/brands/Docker.svg
+++ b/packages/assets/svgs/brands/Docker.svg
@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Docker</title>
+  <path
+    d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z" />
+</svg>
--- a/packages/assets/svgs/brands/index.ts
+++ b/packages/assets/svgs/brands/index.ts
@ -6,6 +6,7 @@
 import { ReactComponent as Academia } from './Academia.svg';
 import { ReactComponent as Apple } from './Apple.svg';
 import { ReactComponent as Discord } from './Discord.svg';
+import { ReactComponent as Docker } from './Docker.svg';
 import { ReactComponent as Dribbble } from './Dribbble.svg';
 import { ReactComponent as Github } from './Github.svg';
 import { ReactComponent as Gitlab } from './Gitlab.svg';
@ -18,6 +19,7 @@ export {
 	Academia,
 	Apple,
 	Discord,
+	Docker,
 	Dribbble,
 	Github,
 	Gitlab,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -155,20 +155,23 @@ importers:
  apps/landing:
    dependencies:
      '@docsearch/react':
-        specifier: '3'
-        version: 3.0.0(@algolia/client-search@4.20.0)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^3.5.2
+        version: 3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.10.0)
      '@octokit/webhooks':
        specifier: ^12.0.3
        version: 12.0.3
      '@phosphor-icons/react':
-        specifier: ^2.0.13
+        specifier: ^2.0.14
        version: 2.0.14(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog':
+        specifier: ^1.0.5
+        version: 1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)
      '@react-three/drei':
        specifier: ^9.88.13
-        version: 9.88.13(@react-three/fiber@8.15.10)(@types/three@0.158.2)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+        version: 9.88.13(@react-three/fiber@8.15.11)(@types/three@0.158.2)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
      '@react-three/fiber':
-        specifier: ^8.15.10
-        version: 8.15.10(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+        specifier: ^8.15.11
+        version: 8.15.11(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
      '@sd/assets':
        specifier: workspace:*
        version: link:../../packages/assets
@ -188,8 +191,8 @@ importers:
        specifier: ^1.11.10
        version: 1.11.10
      framer-motion:
-        specifier: ^10.16.4
-        version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^10.16.5
+        version: 10.16.5(react-dom@18.2.0)(react@18.2.0)
      image-size:
        specifier: ^1.0.2
        version: 1.0.2
@ -206,7 +209,7 @@ importers:
        specifier: ^0.3.4
        version: 0.3.4(contentlayer@0.3.4)(esbuild@0.19.5)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)
      next-plausible:
-        specifier: ^3.11.2
+        specifier: ^3.11.3
        version: 3.11.3(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)
      react:
        specifier: 18.2.0
@ -1147,25 +1150,48 @@ packages:
    resolution: {integrity: sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==}
    dev: false

-  /@algolia/autocomplete-core@1.5.2:
-    resolution: {integrity: sha512-DY0bhyczFSS1b/CqJlTE/nQRtnTAHl6IemIkBy0nEWnhDzRDdtdx4p5Uuk3vwAFxwEEgi1WqKwgSSMx6DpNL4A==}
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
+    resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
    dependencies:
-      '@algolia/autocomplete-shared': 1.5.2
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+      - search-insights
    dev: false

-  /@algolia/autocomplete-preset-algolia@1.5.2(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
-    resolution: {integrity: sha512-3MRYnYQFJyovANzSX2CToS6/5cfVjbLLqFsZTKcvF3abhQzxbqwwaMBlJtt620uBUOeMzhdfasKhCc40+RHiZw==}
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
+    resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
    peerDependencies:
-      '@algolia/client-search': ^4.9.1
-      algoliasearch: ^4.9.1
+      search-insights: '>= 1 < 3'
    dependencies:
-      '@algolia/autocomplete-shared': 1.5.2
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      search-insights: 2.10.0
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+    dev: false
+
+  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
+    resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
+    dependencies:
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
      '@algolia/client-search': 4.20.0
      algoliasearch: 4.20.0
    dev: false

-  /@algolia/autocomplete-shared@1.5.2:
-    resolution: {integrity: sha512-ylQAYv5H0YKMfHgVWX0j0NmL8XBcAeeeVQUmppnnMtzDbDnca6CzhKj3Q8eF9cHCgcdTDdb5K+3aKyGWA0obug==}
+  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
+    resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
+    dependencies:
+      '@algolia/client-search': 4.20.0
+      algoliasearch: 4.20.0
    dev: false

  /@algolia/cache-browser-local-storage@4.20.0:
@ -3126,24 +3152,35 @@ packages:
    engines: {node: '>=10.0.0'}
    dev: true

-  /@docsearch/css@3.0.0:
-    resolution: {integrity: sha512-1kkV7tkAsiuEd0shunYRByKJe3xQDG2q7wYg24SOw1nV9/2lwEd4WrUYRJC/ukGTl2/kHeFxsaUvtiOy0y6fFA==}
+  /@docsearch/css@3.5.2:
+    resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
    dev: false

-  /@docsearch/react@3.0.0(@algolia/client-search@4.20.0)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yhMacqS6TVQYoBh/o603zszIb5Bl8MIXuOc6Vy617I74pirisDzzcNh0NEaYQt50fVVR3khUbeEhUEWEWipESg==}
+  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.10.0):
+    resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
    peerDependencies:
-      '@types/react': '>= 16.8.0 < 18.0.0'
-      react: '>= 16.8.0 < 18.0.0'
-      react-dom: '>= 16.8.0 < 18.0.0'
+      '@types/react': '>= 16.8.0 < 19.0.0'
+      react: '>= 16.8.0 < 19.0.0'
+      react-dom: '>= 16.8.0 < 19.0.0'
+      search-insights: '>= 1 < 3'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      search-insights:
+        optional: true
    dependencies:
-      '@algolia/autocomplete-core': 1.5.2
-      '@algolia/autocomplete-preset-algolia': 1.5.2(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
-      '@docsearch/css': 3.0.0
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      '@docsearch/css': 3.5.2
      '@types/react': 18.2.34
      algoliasearch: 4.20.0
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
+      search-insights: 2.10.0
    transitivePeerDependencies:
      - '@algolia/client-search'
    dev: false
@ -4334,7 +4371,7 @@ packages:
      magic-string: 0.27.0
      react-docgen-typescript: 2.2.2(typescript@5.2.2)
      typescript: 5.2.2
-      vite: 4.5.0(@types/node@18.17.19)
+      vite: 4.5.0(less@4.2.0)

  /@jridgewell/gen-mapping@0.3.3:
    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@ -6581,7 +6618,7 @@ packages:
      react: 18.2.0
    dev: false

-  /@react-spring/three@9.6.1(@react-three/fiber@8.15.10)(react@18.2.0)(three@0.158.0):
+  /@react-spring/three@9.6.1(@react-three/fiber@8.15.11)(react@18.2.0)(three@0.158.0):
    resolution: {integrity: sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==}
    peerDependencies:
      '@react-three/fiber': '>=6.0'
@ -6592,7 +6629,7 @@ packages:
      '@react-spring/core': 9.6.1(react@18.2.0)
      '@react-spring/shared': 9.6.1(react@18.2.0)
      '@react-spring/types': 9.6.1
-      '@react-three/fiber': 8.15.10(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+      '@react-three/fiber': 8.15.11(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
      react: 18.2.0
      three: 0.158.0
    dev: false
@ -6619,7 +6656,7 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@react-three/drei@9.88.13(@react-three/fiber@8.15.10)(@types/three@0.158.2)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
+  /@react-three/drei@9.88.13(@react-three/fiber@8.15.11)(@types/three@0.158.2)(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
    resolution: {integrity: sha512-oxXqHnt3SXHm2ICh1CChBGLhwqHOooxibPYm4x0Yk+L1JopqdWVBSZIw+MjsUsQeDj0Tl5fizAXnS594NQxAYQ==}
    peerDependencies:
      '@react-three/fiber': '>=8.0'
@ -6632,8 +6669,8 @@ packages:
    dependencies:
      '@babel/runtime': 7.23.2
      '@mediapipe/tasks-vision': 0.10.2
-      '@react-spring/three': 9.6.1(@react-three/fiber@8.15.10)(react@18.2.0)(three@0.158.0)
-      '@react-three/fiber': 8.15.10(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
+      '@react-spring/three': 9.6.1(@react-three/fiber@8.15.11)(react@18.2.0)(three@0.158.0)
+      '@react-three/fiber': 8.15.11(react-dom@18.2.0)(react@18.2.0)(three@0.158.0)
      '@use-gesture/react': 10.3.0(react@18.2.0)
      camera-controls: 2.7.3(three@0.158.0)
      cross-env: 7.0.3
@ -6662,8 +6699,8 @@ packages:
      - '@types/three'
    dev: false

-  /@react-three/fiber@8.15.10(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
-    resolution: {integrity: sha512-mFTq3OvZfMh0+n6ttM9JidOF1U+e5KcBARqQHDlBdz+IadekQ6fY421wEnCyZ3vDqAE2CohWTSUdXeytSZxXwg==}
+  /@react-three/fiber@8.15.11(react-dom@18.2.0)(react@18.2.0)(three@0.158.0):
+    resolution: {integrity: sha512-jOJjrjVMBJQwIK6Uirc3bErUCTiclbS2alJG1eU8pV1jIwDZwPwcfHzSi2TautxoA4ddMt5DmlpatK4rIqM4jA==}
    peerDependencies:
      expo: '>=43.0'
      expo-asset: '>=8.4'
@ -7485,7 +7522,7 @@ packages:
      magic-string: 0.30.5
      rollup: 3.29.4
      typescript: 5.2.2
-      vite: 4.5.0(@types/node@18.17.19)
+      vite: 4.5.0(less@4.2.0)
    transitivePeerDependencies:
      - encoding
      - supports-color
@ -7838,7 +7875,7 @@ packages:
      react: 18.2.0
      react-docgen: 6.0.4
      react-dom: 18.2.0(react@18.2.0)
-      vite: 4.5.0(@types/node@18.17.19)
+      vite: 4.5.0(less@4.2.0)
    transitivePeerDependencies:
      - '@preact/preset-vite'
      - encoding
@ -8937,7 +8974,7 @@ packages:
      '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
      magic-string: 0.27.0
      react-refresh: 0.14.0
-      vite: 4.5.0(@types/node@18.17.19)
+      vite: 4.5.0(less@4.2.0)
    transitivePeerDependencies:
      - supports-color

@ -12653,6 +12690,24 @@ packages:
      '@emotion/is-prop-valid': 0.8.8
    dev: false

+  /framer-motion@10.16.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+    dev: false
+
  /framer-motion@6.5.1(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==}
    peerDependencies:
@ -18764,6 +18819,10 @@ packages:
      ajv-keywords: 3.5.2(ajv@6.12.6)
    dev: false

+  /search-insights@2.10.0:
+    resolution: {integrity: sha512-pQGrOE56QuTRmq4NzliRZe9rv914hBMBjOviuDliDHoIhmBGoyZRlFsPd4RprGGNC4PKdD2Jz54YN4Cmkb44mA==}
+    dev: false
+
  /section-matter@1.0.0:
    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
    engines: {node: '>=4'}
@ -21062,6 +21121,7 @@ packages:
      rollup: 3.29.4
    optionalDependencies:
      fsevents: 2.3.3
+    dev: true

  /vite@4.5.0(less@4.2.0):
    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
@ -21097,7 +21157,6 @@ packages:
      rollup: 3.29.4
    optionalDependencies:
      fsevents: 2.3.3
-    dev: true

  /vite@4.5.0(sass@1.69.5):
    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}