From 6485aece5fb10bb6715b4aa21c346a7506e19194 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Fri, 13 Aug 2021 12:02:14 +0300 Subject: [PATCH] docs: add home page (#573) * docs: add home page * docs(homepage): apply suggestions from code review * docs(homepage): make cards clickable Co-authored-by: witt --- lib/components/menu/menu-links.tsx | 38 ++++--- lib/components/menu/menu-sticker.tsx | 9 +- lib/components/sidebar/index.tsx | 4 +- lib/use-locale.ts | 2 +- next.config.js | 10 -- pages/en-us/index.tsx | 148 +++++++++++++++++++++++++++ pages/zh-cn/index.tsx | 148 +++++++++++++++++++++++++++ 7 files changed, 332 insertions(+), 27 deletions(-) create mode 100644 pages/en-us/index.tsx create mode 100644 pages/zh-cn/index.tsx diff --git a/lib/components/menu/menu-links.tsx b/lib/components/menu/menu-links.tsx index 672a38a3a..a77c6b1b6 100644 --- a/lib/components/menu/menu-links.tsx +++ b/lib/components/menu/menu-links.tsx @@ -1,25 +1,28 @@ import React from 'react' -import Router from 'next/router' -import { useTheme } from 'components' +import NextLink from 'next/link' +import { useTheme, Image } from 'components' import Controls from 'lib/components/controls' -import LogoIcon from 'lib/components/icons/logo' import { useConfigs } from 'lib/config-context' const MenuLinks = () => { const theme = useTheme() const { isChinese } = useConfigs() - const goHome = () => { - const home = isChinese ? '/zh-cn' : '/en-us' - Router.push(home) - } return ( diff --git a/lib/components/menu/menu-sticker.tsx b/lib/components/menu/menu-sticker.tsx index 6fa7badc3..6ae1a2575 100644 --- a/lib/components/menu/menu-sticker.tsx +++ b/lib/components/menu/menu-sticker.tsx @@ -8,7 +8,7 @@ import { useConfigs } from 'lib/config-context' const MenuSticker = () => { const theme = useTheme() - const { updateTabbarFixed } = useConfigs() + const { updateTabbarFixed, isChinese } = useConfigs() const { tabbar: currentUrlTabValue, locale } = useLocale() const [tabValue, setTabValue, tabValueRef] = useCurrentState('') const [fixed, setFixed, fixedRef] = useCurrentState(false) @@ -47,6 +47,13 @@ const MenuSticker = () => { height="calc(var(--geist-page-tab-height) - 2px)" value={tabValue} onChange={val => setTabValue(val)}> + {tabbarData ? tabbarData.map((tab, index) => ( = React.memo(() => { const tabbarData = useMemo(() => { const allSides = Metadatas[locale] - const currentSide = allSides.filter(side => side.name === tabbar)[0] - return (currentSide.children || []) as Array + const currentSide = allSides.find(side => side.name === tabbar) + return (currentSide?.children || []) as Array }, [locale, tabbar]) useEffect(() => { diff --git a/lib/use-locale.ts b/lib/use-locale.ts index 08d78e104..1656c3af2 100644 --- a/lib/use-locale.ts +++ b/lib/use-locale.ts @@ -3,7 +3,7 @@ import { useEffect } from 'react' import useCurrentState from 'components/utils/use-current-state' const DEFAULT_LOCALE = 'en-us' -const DEFAULT_TAB = 'guide' +const DEFAULT_TAB = '' export type LocaleTypes = { locale: string diff --git a/next.config.js b/next.config.js index 569803196..030fb0853 100644 --- a/next.config.js +++ b/next.config.js @@ -35,16 +35,6 @@ const nextConfig = { async redirects() { return [ - { - source: '/zh-cn', - permanent: true, - destination: '/zh-cn/guide/introduction', - }, - { - source: '/en-us', - permanent: true, - destination: '/en-us/guide/introduction', - }, { source: '/', permanent: true, diff --git a/pages/en-us/index.tsx b/pages/en-us/index.tsx new file mode 100644 index 000000000..5c9300979 --- /dev/null +++ b/pages/en-us/index.tsx @@ -0,0 +1,148 @@ +import React from 'react' +import { NextPage } from 'next' +import NextLink from 'next/link' +import { useTheme, Button, Card, Grid } from 'components' +import PackageIcon from '@geist-ui/react-icons/package' +import FeatherIcon from '@geist-ui/react-icons/feather' +import GitHubIcon from '@geist-ui/react-icons/github' + +const Application: NextPage<{}> = () => { + const theme = useTheme() + + return ( + <> + + + + ) +} + +export default Application diff --git a/pages/zh-cn/index.tsx b/pages/zh-cn/index.tsx new file mode 100644 index 000000000..42e1908bc --- /dev/null +++ b/pages/zh-cn/index.tsx @@ -0,0 +1,148 @@ +import React from 'react' +import { NextPage } from 'next' +import NextLink from 'next/link' +import { useTheme, Button, Card, Grid } from 'components' +import PackageIcon from '@geist-ui/react-icons/package' +import FeatherIcon from '@geist-ui/react-icons/feather' +import GitHubIcon from '@geist-ui/react-icons/github' + +const Application: NextPage<{}> = () => { + const theme = useTheme() + + return ( + <> + + + + ) +} + +export default Application