From 3b12e4ea192bace7fbe517bf36800e16a2401da5 Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Fri, 24 Nov 2023 22:30:19 +0300 Subject: [PATCH] [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 --- .github/workflows/server.yml | 2 +- apps/landing/package.json | 11 +- .../src/app/Downloads/DockerDialog.tsx | 64 ++++++++ apps/landing/src/app/Downloads/Platform.tsx | 108 ++++++++++++++ .../{Downloads.tsx => Downloads/index.tsx} | 135 +++-------------- apps/landing/src/components/mdx/index.tsx | 9 +- apps/landing/src/env.ts | 2 + packages/assets/svgs/brands/Docker.svg | 5 + packages/assets/svgs/brands/index.ts | 2 + pnpm-lock.yaml | 141 +++++++++++++----- 10 files changed, 320 insertions(+), 159 deletions(-) create mode 100644 apps/landing/src/app/Downloads/DockerDialog.tsx create mode 100644 apps/landing/src/app/Downloads/Platform.tsx rename apps/landing/src/app/{Downloads.tsx => Downloads/index.tsx} (50%) create mode 100644 packages/assets/svgs/brands/Docker.svg diff --git a/.github/workflows/server.yml b/.github/workflows/server.yml index 1fe56d6b5..33630a9f5 100644 --- 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' diff --git a/apps/landing/package.json b/apps/landing/package.json index 6105f6672..62929b897 100644 --- 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", diff --git a/apps/landing/src/app/Downloads/DockerDialog.tsx b/apps/landing/src/app/Downloads/DockerDialog.tsx new file mode 100644 index 000000000..7207de1c9 --- /dev/null +++ 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 ( + + + + +
+

Docker

+ {/* Link */} +
+ + $ {DOCKER_URL} + + +
+ {/* OK Button */} + +
+ + + + ); +} diff --git a/apps/landing/src/app/Downloads/Platform.tsx b/apps/landing/src/app/Downloads/Platform.tsx new file mode 100644 index 000000000..d3424af59 --- /dev/null +++ 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; + 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; + +export function useCurrentPlatform() { + const [currentPlatform, setCurrentPlatform] = useState(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) => ( + + ) + : (props: any) =>