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>

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>

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

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(() => {

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