From a0ee4579e8feb93e1550f980a89614c288ffb818 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B8=83=E5=81=B6=E4=BB=80=E4=B9=88=E7=9A=84=E5=B0=B1?= =?UTF-8?q?=E6=98=AF=E5=B8=83=E5=81=B6?= Date: Thu, 4 Jul 2024 11:55:39 +0800 Subject: [PATCH] fix: website deploy (#117) --- packages/magickbase/package.json | 1 + .../src/components/ContactUs/index.tsx | 17 ++---- .../src/components/Footer/index.tsx | 3 +- .../src/components/Header/index.tsx | 4 +- .../src/components/Tooltip/index.tsx | 3 +- .../src/components/UpsideDownEffect/index.tsx | 4 +- packages/magickbase/src/pages/_app.tsx | 5 +- packages/magickbase/src/pages/index.tsx | 4 -- .../shared/src/hooks/{index.ts => index.tsx} | 0 packages/status/package.json | 7 ++- .../status/src/components/Footer/index.tsx | 3 +- .../status/src/components/Header/index.tsx | 5 +- .../src/components/StatusResource/index.tsx | 3 +- .../status/src/components/Tooltip/index.tsx | 4 +- .../src/components/UpsideDownEffect/index.tsx | 4 +- yarn.lock | 56 +++++++++++++++++-- 16 files changed, 74 insertions(+), 49 deletions(-) rename packages/shared/src/hooks/{index.ts => index.tsx} (100%) diff --git a/packages/magickbase/package.json b/packages/magickbase/package.json index 149c9c91..c6be0fe7 100644 --- a/packages/magickbase/package.json +++ b/packages/magickbase/package.json @@ -25,6 +25,7 @@ "next": "13.5.6", "next-i18next": "^13.2.2", "react": "18.2.0", + "react-device-detect": "^2.2.3", "react-dom": "18.2.0", "react-hot-toast": "^2.4.1", "react-i18next": "^12.3.1", diff --git a/packages/magickbase/src/components/ContactUs/index.tsx b/packages/magickbase/src/components/ContactUs/index.tsx index ed368b0d..1ad7d4a6 100644 --- a/packages/magickbase/src/components/ContactUs/index.tsx +++ b/packages/magickbase/src/components/ContactUs/index.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next' import { Modal } from '@/components/Modal' import { Tooltip } from '@/components/Tooltip' import toast from 'react-hot-toast' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './styles.module.scss' import leftElement from './leftElement.png' import rightElement from './rightElement.png' @@ -20,7 +20,6 @@ export const ContactUs: FC> = ({ className, ...props }) => const { t } = useTranslation('common') const [copiedText, copyToClipboard] = useCopyToClipboard() const [copiedModalOpen, setCopiedModalOpen] = useState(false) - const isMobile = useIsMobile() const copy = () => { void copyToClipboard('neuron@magickbase.com') @@ -53,32 +52,28 @@ export const ContactUs: FC> = ({ className, ...props }) =>

{t('contact_us')}

-

- {t('contact_des')} -

+

{t('contact_des')}

{isMobile ? ( ) : ( +
neuron@magickbase.com{' '} {copiedText === 'neuron@magickbase.com' ? ( - + ) : ( copy()} /> )}
} > -
- {t('contact_now')} -
+
{t('contact_now')}
)}
diff --git a/packages/magickbase/src/components/Footer/index.tsx b/packages/magickbase/src/components/Footer/index.tsx index 859d1665..69f26114 100644 --- a/packages/magickbase/src/components/Footer/index.tsx +++ b/packages/magickbase/src/components/Footer/index.tsx @@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react' import clsx from 'clsx' import { useTranslation } from 'next-i18next' import Link from 'next/link' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' import IconFullLogo from './full-logo.svg' import { Contacts } from '../Contacts' @@ -19,7 +19,6 @@ export const Footer: FC = ({ ...elProps }) => { const { t } = useTranslation('common') - const isMobile = useIsMobile() const serviceStateText = serviceState === 'operational' diff --git a/packages/magickbase/src/components/Header/index.tsx b/packages/magickbase/src/components/Header/index.tsx index f9eac627..473dd864 100644 --- a/packages/magickbase/src/components/Header/index.tsx +++ b/packages/magickbase/src/components/Header/index.tsx @@ -6,7 +6,7 @@ import * as Dialog from '@radix-ui/react-dialog' import { useRouter } from 'next/router' import { useTranslation } from 'react-i18next' import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' import IconLogo from './logo.svg' import IconGithub from './github.svg' @@ -22,7 +22,6 @@ export type HeaderProps = ComponentProps<'div'> & { } export const Header: FC = props => { - const isMobile = useIsMobile() return isMobile ? : } @@ -75,7 +74,6 @@ export const Header$Mobile: FC = ({ navMenuGroupName, navMenus, ... const MenuDialog: FC> = ({ navMenuGroupName, navMenus }) => { const { t } = useTranslation('common') - const isMobile = useIsMobile() const router = useRouter() const { pathname, query } = router diff --git a/packages/magickbase/src/components/Tooltip/index.tsx b/packages/magickbase/src/components/Tooltip/index.tsx index 5a42ca4e..2b605a21 100644 --- a/packages/magickbase/src/components/Tooltip/index.tsx +++ b/packages/magickbase/src/components/Tooltip/index.tsx @@ -2,11 +2,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react' import * as RadixTooltip from '@radix-ui/react-tooltip' import * as RadixPopover from '@radix-ui/react-popover' import clsx from 'clsx' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' export const Tooltip: FC> = props => { - const isMobile = useIsMobile() return isMobile ? ( // RadixTooltip does not support mobile, so use RadixPopover instead. diff --git a/packages/magickbase/src/components/UpsideDownEffect/index.tsx b/packages/magickbase/src/components/UpsideDownEffect/index.tsx index 1c63051d..b0ae9198 100644 --- a/packages/magickbase/src/components/UpsideDownEffect/index.tsx +++ b/packages/magickbase/src/components/UpsideDownEffect/index.tsx @@ -1,7 +1,7 @@ import { ComponentProps, FC, ReactNode } from 'react' import Link from 'next/link' import clsx from 'clsx' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' interface UpsideDownEffectProps { @@ -70,8 +70,6 @@ export const LinkWithEffect: FC & UpsideDownEffectPr nodeClass, ...linkProps }) => { - const isMobile = useIsMobile() - if (isMobile) return {children} if (typeof children === 'function') throw new Error('LinkWithEffect not support children as function') diff --git a/packages/magickbase/src/pages/_app.tsx b/packages/magickbase/src/pages/_app.tsx index 9d1a29c8..eee157e9 100644 --- a/packages/magickbase/src/pages/_app.tsx +++ b/packages/magickbase/src/pages/_app.tsx @@ -3,14 +3,11 @@ import './globals.css' import '../styles/globals.scss' import 'overlayscrollbars/overlayscrollbars.css' import type { AppProps } from 'next/app' -import { appWithTranslation, useTranslation } from 'next-i18next' +import { appWithTranslation } from 'next-i18next' import { api } from '../utils/api' import { TooltipProvider } from '../components/Tooltip' function App({ Component, pageProps }: AppProps) { - const { ready } = useTranslation('app') - - console.log('app ready', ready) return ( diff --git a/packages/magickbase/src/pages/index.tsx b/packages/magickbase/src/pages/index.tsx index 6606218b..46483fcb 100644 --- a/packages/magickbase/src/pages/index.tsx +++ b/packages/magickbase/src/pages/index.tsx @@ -1,5 +1,4 @@ import { GetServerSideProps } from 'next'; -import { useTranslation } from 'react-i18next'; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { Footer } from '../components/Footer' import { Header } from '../components/Header' @@ -22,9 +21,6 @@ export const getServerSideProps: GetServerSideProps = async ({ export default function Home() { const aggregateStateQuery = api.uptime.aggregateState.useQuery() - const { ready } = useTranslation('common') - console.log('home page ready', ready) - return ( <> diff --git a/packages/shared/src/hooks/index.ts b/packages/shared/src/hooks/index.tsx similarity index 100% rename from packages/shared/src/hooks/index.ts rename to packages/shared/src/hooks/index.tsx diff --git a/packages/status/package.json b/packages/status/package.json index 557f6d57..84b3a958 100644 --- a/packages/status/package.json +++ b/packages/status/package.json @@ -22,13 +22,14 @@ "@uidotdev/usehooks": "^2.4.1", "classnames": "2.3.2", "dayjs": "^1.11.10", - "i18next": "^22.5.0", + "i18next": "22.5.0", "next": "13.5.6", - "next-i18next": "^13.2.2", + "next-i18next": "13.2.2", "react": "18.2.0", + "react-device-detect": "^2.2.3", "react-dom": "18.2.0", "react-hot-toast": "^2.4.1", - "react-i18next": "^12.3.1", + "react-i18next": "12.3.1", "react-intersection-observer": "9.5.3", "react-use": "17.4.0", "rebound": "^0.1.0", diff --git a/packages/status/src/components/Footer/index.tsx b/packages/status/src/components/Footer/index.tsx index c1eb9058..62a4f269 100644 --- a/packages/status/src/components/Footer/index.tsx +++ b/packages/status/src/components/Footer/index.tsx @@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react' import clsx from 'clsx' import { useTranslation } from 'react-i18next' import Link from 'next/link' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' import IconFullLogo from './full-logo.svg' import { Contacts } from '../Contacts' @@ -19,7 +19,6 @@ export const Footer: FC = ({ ...elProps }) => { const { t } = useTranslation('common') - const isMobile = useIsMobile() const serviceStateText = serviceState === 'operational' diff --git a/packages/status/src/components/Header/index.tsx b/packages/status/src/components/Header/index.tsx index bfbe7699..b7960bd2 100644 --- a/packages/status/src/components/Header/index.tsx +++ b/packages/status/src/components/Header/index.tsx @@ -5,7 +5,8 @@ import * as Dialog from '@radix-ui/react-dialog' import { useRouter } from 'next/router' import { useTranslation } from 'react-i18next' import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' -import { useIsMobile, languages } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' +import { languages } from '@magickbase-website/shared' import styles from './index.module.scss' import IconLogo from './logo.svg' import IconGithub from './github.svg' @@ -21,7 +22,6 @@ export type HeaderProps = ComponentProps<'div'> & { } export const Header: FC = props => { - const isMobile = useIsMobile() return isMobile ? : } @@ -74,7 +74,6 @@ export const Header$Mobile: FC = ({ navMenuGroupName, navMenus, ... const MenuDialog: FC> = ({ navMenuGroupName, navMenus }) => { const { t } = useTranslation('common') - const isMobile = useIsMobile() const router = useRouter() const { pathname, query } = router diff --git a/packages/status/src/components/StatusResource/index.tsx b/packages/status/src/components/StatusResource/index.tsx index 7bdd0577..33a61ada 100644 --- a/packages/status/src/components/StatusResource/index.tsx +++ b/packages/status/src/components/StatusResource/index.tsx @@ -5,7 +5,7 @@ import { StatusResourceResponse } from '@/types' import toast from 'react-hot-toast' import { Tooltip } from '@/components/Tooltip' import { useCopyToClipboard } from '@uidotdev/usehooks' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import CopyIcon from './copy.svg' export interface StatusResourceProps extends Omit, 'resource'> { @@ -28,7 +28,6 @@ function parseDuration(duration: number) { export const StatusResource: React.FC = ({ link, resource, ...props }) => { const { t } = useTranslation('common') - const isMobile = useIsMobile(); const [_, copyToClipboard] = useCopyToClipboard() const currentStatus = resource.attributes.status_history[resource.attributes.status_history.length - 1] diff --git a/packages/status/src/components/Tooltip/index.tsx b/packages/status/src/components/Tooltip/index.tsx index 5a42ca4e..c56443dc 100644 --- a/packages/status/src/components/Tooltip/index.tsx +++ b/packages/status/src/components/Tooltip/index.tsx @@ -2,12 +2,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react' import * as RadixTooltip from '@radix-ui/react-tooltip' import * as RadixPopover from '@radix-ui/react-popover' import clsx from 'clsx' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' export const Tooltip: FC> = props => { - const isMobile = useIsMobile() - return isMobile ? ( // RadixTooltip does not support mobile, so use RadixPopover instead. diff --git a/packages/status/src/components/UpsideDownEffect/index.tsx b/packages/status/src/components/UpsideDownEffect/index.tsx index 1c63051d..b0ae9198 100644 --- a/packages/status/src/components/UpsideDownEffect/index.tsx +++ b/packages/status/src/components/UpsideDownEffect/index.tsx @@ -1,7 +1,7 @@ import { ComponentProps, FC, ReactNode } from 'react' import Link from 'next/link' import clsx from 'clsx' -import { useIsMobile } from '@magickbase-website/shared' +import { isMobile } from 'react-device-detect' import styles from './index.module.scss' interface UpsideDownEffectProps { @@ -70,8 +70,6 @@ export const LinkWithEffect: FC & UpsideDownEffectPr nodeClass, ...linkProps }) => { - const isMobile = useIsMobile() - if (isMobile) return {children} if (typeof children === 'function') throw new Error('LinkWithEffect not support children as function') diff --git a/yarn.lock b/yarn.lock index 8b5f059b..20112e63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2293,6 +2293,7 @@ __metadata: next: 13.5.6 next-i18next: ^13.2.2 react: 18.2.0 + react-device-detect: ^2.2.3 react-dom: 18.2.0 react-hot-toast: ^2.4.1 react-i18next: ^12.3.1 @@ -2442,13 +2443,14 @@ __metadata: daisyui: latest dayjs: ^1.11.10 eslint: ^8.56.0 - i18next: ^22.5.0 + i18next: 22.5.0 next: 13.5.6 - next-i18next: ^13.2.2 + next-i18next: 13.2.2 react: 18.2.0 + react-device-detect: ^2.2.3 react-dom: 18.2.0 react-hot-toast: ^2.4.1 - react-i18next: ^12.3.1 + react-i18next: 12.3.1 react-intersection-observer: 9.5.3 react-use: 17.4.0 rebound: ^0.1.0 @@ -8288,6 +8290,15 @@ __metadata: languageName: node linkType: hard +"i18next@npm:22.5.0": + version: 22.5.0 + resolution: "i18next@npm:22.5.0" + dependencies: + "@babel/runtime": ^7.20.6 + checksum: 291c0e02fda20bd1827b6529dad74c01867892c7ac000befe0f69e10ad97ab074a2ae5b4ce1e0638c28ae1a6f59d1ed8503ea05bd1c324d731a44dd94c43a49a + languageName: node + linkType: hard + "i18next@npm:^22.0.4, i18next@npm:^22.5.0": version: 22.5.1 resolution: "i18next@npm:22.5.1" @@ -10629,6 +10640,24 @@ __metadata: languageName: node linkType: hard +"next-i18next@npm:13.2.2": + version: 13.2.2 + resolution: "next-i18next@npm:13.2.2" + dependencies: + "@babel/runtime": ^7.20.13 + "@types/hoist-non-react-statics": ^3.3.1 + core-js: ^3 + hoist-non-react-statics: ^3.3.2 + i18next-fs-backend: ^2.1.1 + peerDependencies: + i18next: ^22.0.6 + next: ">= 12.0.0" + react: ">= 17.0.2" + react-i18next: ^12.2.0 + checksum: 2adfc9facea57a5e733557d06377a85b991aa23dbc80f7af4856cfba224eac6714a46a970022a519dbda266371193f9251b12f29175a46d2b97cfcee21d5b1d4 + languageName: node + linkType: hard + "next-i18next@npm:^13.2.2": version: 13.3.0 resolution: "next-i18next@npm:13.3.0" @@ -11892,6 +11921,18 @@ __metadata: languageName: node linkType: hard +"react-device-detect@npm:^2.2.3": + version: 2.2.3 + resolution: "react-device-detect@npm:2.2.3" + dependencies: + ua-parser-js: ^1.0.33 + peerDependencies: + react: ">= 0.14.0" + react-dom: ">= 0.14.0" + checksum: 42d9b3182b9d2495bf0d7914c9f370da51d8bdb853a3eba2acaf433894ae760386a075ba103185be825b33d42f50d85ef462087f261656d433f4c74dab23861f + languageName: node + linkType: hard + "react-dom@npm:18.2.0": version: 18.2.0 resolution: "react-dom@npm:18.2.0" @@ -11928,7 +11969,7 @@ __metadata: languageName: node linkType: hard -"react-i18next@npm:^12.3.1": +"react-i18next@npm:12.3.1, react-i18next@npm:^12.3.1": version: 12.3.1 resolution: "react-i18next@npm:12.3.1" dependencies: @@ -14534,6 +14575,13 @@ __metadata: languageName: node linkType: hard +"ua-parser-js@npm:^1.0.33": + version: 1.0.38 + resolution: "ua-parser-js@npm:1.0.38" + checksum: d0772b22b027338d806ab17d1ac2896ee7485bdf9217c526028159f3cd6bb10272bb18f6196d2f94dde83e3b36dc9d2533daf08a414764f6f4f1844842383838 + languageName: node + linkType: hard + "ua-parser-js@npm:^2.0.0-beta.1": version: 2.0.0-beta.3 resolution: "ua-parser-js@npm:2.0.0-beta.3"