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 <unix.bio@gmail.com>
geist-org · Aug 13, 2021 · d59c400 · d59c400
1 parent 4675e22
commit d59c400
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 27 deletions.
diff --git 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 (
     <nav>
-      <div className="site-name">
-        <span title={isChinese ? '回到主页' : 'Go Home'} onClick={goHome}>
-          <LogoIcon />
-        </span>
-      </div>
+      <NextLink href={isChinese ? '/zh-cn' : '/en-us'}>
+        <a className="geist-logo" aria-label="Go Home">
+          <Image
+            src="/images/logo.png"
+            width="2rem"
+            height="2rem"
+            marginRight={0.5}
+            draggable={false}
+            title="Logo"
+          />
+          Geist
+        </a>
+      </NextLink>
       <div className="links">
         <Controls />
       </div>
@@ -36,9 +39,18 @@ const MenuLinks = () => {
           height: var(--geist-page-nav-height);
         }
 
-        .site-name {
+        .geist-logo {
           display: flex;
+          flex-direction: row;
           align-items: center;
+          font-size: 1.125rem;
+          font-weight: 500;
+          color: inherit;
+        }
+
+        .geist-logo :global(.image) {
+          border: 1px solid ${theme.palette.border};
+          border-radius: 2rem;
         }
       `}</style>
     </nav>

diff --git 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<string>('')
   const [fixed, setFixed, fixedRef] = useCurrentState<boolean>(false)
@@ -47,6 +47,13 @@ const MenuSticker = () => {
               height="calc(var(--geist-page-tab-height) - 2px)"
               value={tabValue}
               onChange={val => setTabValue(val)}>
+              <Tabs.Item
+                height="calc(var(--geist-page-tab-height) - 2px)"
+                font="14px"
+                py={0}
+                label={isChinese ? '主页' : 'Home'}
+                value=""
+              />
               {tabbarData
                 ? tabbarData.map((tab, index) => (
                     <Tabs.Item

diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx
@@ -28,8 +28,8 @@ export const Sidebar: React.FC<Props> = React.memo(() => {
 
   const tabbarData = useMemo(() => {
     const allSides = Metadatas[locale]
-    const currentSide = allSides.filter(side => side.name === tabbar)[0]
-    return (currentSide.children || []) as Array<Sides>
+    const currentSide = allSides.find(side => side.name === tabbar)
+    return (currentSide?.children || []) as Array<Sides>
   }, [locale, tabbar])
 
   useEffect(() => {

diff --git 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
@@ -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
@@ -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 (
+    <>
+      <div className="layout">
+        <div className="hero">
+          <h1 className="hero__title">Geist</h1>
+          <h3 className="hero__description">
+            An open source design system for building modern websites and applications.
+          </h3>
+          <div className="hero__actions">
+            <NextLink href="/en-us/guide/installation" passHref>
+              <Button auto type="success" shadow scale={1.25} margin={0.25}>
+                Documentation
+              </Button>
+            </NextLink>
+            <NextLink href="https://github.com/geist-org/react" passHref>
+              <Button auto type="abort" scale={1.25} margin={0.25}>
+                GitHub
+              </Button>
+            </NextLink>
+          </div>
+        </div>
+
+        <Grid.Container gap={2} justify="center">
+          <Grid xs={24} md={8}>
+            <NextLink href="/en-us/components">
+              <a>
+                <Card shadow className="feature__card" width="100%">
+                  <h4 className="feature__title">
+                    <div className="feature__icon">
+                      <PackageIcon />
+                    </div>
+                    Components
+                  </h4>
+                  <p className="feature__description">
+                    Ever-increasing list of concise and aesthetic components.
+                  </p>
+                </Card>
+              </a>
+            </NextLink>
+          </Grid>
+          <Grid xs={24} md={8}>
+            <NextLink href="/en-us/customization">
+              <a>
+                <Card shadow className="feature__card" width="100%">
+                  <h4 className="feature__title">
+                    <div className="feature__icon">
+                      <FeatherIcon />
+                    </div>
+                    Customizable
+                  </h4>
+                  <p className="feature__description">
+                    Configure sizes, colors, appearances, shapes, and more.
+                  </p>
+                </Card>
+              </a>
+            </NextLink>
+          </Grid>
+          <Grid xs={24} md={8}>
+            <a href="https://github.com/geist-org/react" target="_blank">
+              <Card shadow className="feature__card" width="100%">
+                <h4 className="feature__title">
+                  <div className="feature__icon">
+                    <GitHubIcon />
+                  </div>
+                  Open Sourced
+                </h4>
+                <p className="feature__description">
+                  Geist is open sourced and available free under MIT licence.
+                </p>
+              </Card>
+            </a>
+          </Grid>
+        </Grid.Container>
+      </div>
+      <style jsx>{`
+        .layout {
+          min-height: calc(
+            100vh - var(--geist-page-nav-height) - var(--geist-page-tab-height)
+          );
+          max-width: ${theme.layout.pageWidthWithMargin};
+          margin: 0 auto;
+          padding: 0 ${theme.layout.gap} calc(${theme.layout.gap} * 2);
+          box-sizing: border-box;
+        }
+        .hero {
+          max-width: 500px;
+          margin: 0 auto;
+          text-align: center;
+          padding: calc(${theme.layout.gap} * 5) 0;
+        }
+        .hero__title {
+          font-size: 3.75rem;
+          font-weight: 700;
+          margin: 0;
+        }
+        .hero__description {
+          color: ${theme.palette.accents_5};
+          font-size: 1.5rem;
+          font-weight: 500;
+          margin: 0 0 ${theme.layout.gap};
+        }
+        .hero__actions :global(.btn) {
+          font-weight: 500;
+        }
+        :global(.feature__card) :global(.content) {
+          padding: ${theme.layout.gap};
+        }
+        .feature__title {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        .feature__icon {
+          height: 2.5rem;
+          width: 2.5rem;
+          padding: 0.625rem;
+          margin-right: ${theme.layout.gapHalf};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(#3291ff, #0761d1);
+          color: #fff;
+          border-radius: 2rem;
+        }
+        .feature__icon :global(svg) {
+          width: 100%;
+          height: 100%;
+        }
+        .feature__description {
+          color: ${theme.palette.accents_6};
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default Application