docs: remove customization tab (#688)

geist-org · Jan 25, 2022 · a32f585 · a32f585
1 parent 0149445
commit a32f585
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 353 deletions.
diff --git a/lib/components/controls.tsx b/lib/components/controls.tsx
@@ -6,6 +6,7 @@ import Router, { useRouter } from 'next/router'
 import MoonIcon from '@geist-ui/icons/moon'
 import SunIcon from '@geist-ui/icons/sun'
 import UserIcon from '@geist-ui/icons/user'
+import GitHubIcon from '@geist-ui/icons/github'
 import {
   CHINESE_LANGUAGE_IDENT,
   CUSTOM_THEME_TYPE,
@@ -43,17 +44,18 @@ const Controls: React.FC<unknown> = React.memo(() => {
   return (
     <div className="controls">
       <div className="tools">
-        <Button auto type="abort" scale={0.5} onClick={switchLanguages}>
-          {isChinese ? 'English' : '中文文档'}
+        <Button auto type="abort" scale={0.7} px={0.7} onClick={switchLanguages}>
+          {isChinese ? 'En' : '中'}
         </Button>
         <Button
           auto
           type="abort"
-          scale={0.5}
+          scale={0.7}
+          px={0.7}
+          icon={<GitHubIcon />}
           onClick={redirectGithub}
-          title={isChinese ? '代码仓库' : 'GitHub Repository'}>
-          {isChinese ? '代码仓库' : 'GitHub'}
-        </Button>
+          title={isChinese ? '代码仓库' : 'GitHub Repository'}
+        />
         <Spacer w={0.75} />
         <Select
           scale={0.5}

diff --git a/lib/components/customization/colors.tsx b/lib/components/customization/colors.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, useTheme } from 'components'
+import { Card, Grid, useTheme } from 'components'
 import { CardTypes } from 'components/utils/prop-types'
 
 const types = [
@@ -20,13 +20,17 @@ const Colors: React.FC<React.PropsWithChildren<unknown>> = () => {
 
   return (
     <div className="colors">
-      {types.map((type, index) => {
-        return (
-          <div key={`${type}-${index}`} className="color-card">
-            <Card type={type as CardTypes}>{type}</Card>
-          </div>
-        )
-      })}
+      <Grid.Container gap={1} pl={0} mr="10px">
+        {types.map((type, index) => {
+          return (
+            <Grid xs={12} key={`${type}-${index}`}>
+              <Card w="100%" type={type as CardTypes}>
+                {type}
+              </Card>
+            </Grid>
+          )
+        })}
+      </Grid.Container>
       <style jsx>{`
         .colors {
           display: flex;

diff --git a/lib/components/customization/demo.tsx b/lib/components/customization/demo.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Colors from './colors'
-import { useTheme, Button, Text, Code, Spacer, Link, Select } from 'components'
+import { useTheme, Button, Text, Code, Spacer, Link, Select, Grid } from 'components'
 import { useConfigs } from 'lib/config-context'
 
 const Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
@@ -12,74 +12,74 @@ const Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
       <div className="content">
         {isChinese ? (
           <>
-            <Text h3>预览</Text>
+            <Text h2 mb={0} font="13px" type="secondary">
+              预览
+            </Text>
             <Text>
               这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
             </Text>
-            <Text>你可以拷贝自动生成的代码，或是与任何人分享你自定义的主题样式。</Text>
           </>
         ) : (
           <>
-            <Text h3>Preview</Text>
+            <Text h2 mb={0} font="13px">
+              PREVIEWS
+            </Text>
             <Text>
               Here&#39;s a preview of your changes to the Theme. When you set the changes,
               the entire document site will change with the theme.
             </Text>
-            <Text>
-              You can copy automatically generated codes or share your custom theme with
-              anyone.
-            </Text>
           </>
         )}
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '色彩' : 'Colors'}</Text>
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '色彩' : 'COLORS'}
+        </Text>
         <Colors />
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '排版' : 'Typography'}</Text>
-        <Text>
-          <Code>inline codes</Code>
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '排版' : 'Typography'}
         </Text>
         <Text>
-          <a>Hyperlink Text</a>{' '}
-        </Text>
-        <Text>
-          <Link href="#" color>
-            Link Component
-          </Link>
-        </Text>
-        <Text>
-          Our mission is to make cloud computing accessible to everyone. We build products
-          for developers and designers. And those who aspire to become one.
+          <Link rel="nofollow" href="https://en.wikipedia.org/wiki/HTTP/2" color>
+            HTTP/2
+          </Link>{' '}
+          allows the server to <Code>push</Code> content, that is, to respond with data
+          for more queries than the client requested. This allows the server to supply
+          data it knows a web browser will need to render a web page, without waiting for
+          the browser to examine the first response, and without the overhead of an
+          additional request cycle.
         </Text>
         <Text h6>Heading</Text>
         <Text h5>Heading</Text>
         <Text h4>Heading</Text>
         <Text h3>Heading</Text>
-        <Text h2>Heading</Text>
-        <Text h1>Heading</Text>
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '基础组件' : 'Basic Components'}</Text>
-        <Select placeholder="Choose one" initialValue="1">
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '基础组件' : 'Basic Components'}
+        </Text>
+        <Select width="90%" placeholder="Choose one" initialValue="1">
           <Select.Option value="1">Option 1</Select.Option>
           <Select.Option value="2">Option 2</Select.Option>
         </Select>
         <Spacer h={1} />
-        <Button disabled auto scale={0.5}>
-          Action
-        </Button>
-        <Spacer inline h={0.5} />
-        <Button auto scale={0.5}>
-          Action
-        </Button>
-        <Spacer inline h={0.5} />
-        <Button auto type="secondary" scale={0.5}>
-          Action
-        </Button>
-        <Spacer h={0.5} />
-        <Button>Action</Button>
+        <Grid.Container width="100%">
+          <Grid xs={8}>
+            <Button disabled auto>
+              Action
+            </Button>
+          </Grid>
+          <Grid xs={8}>
+            <Button auto>Action</Button>
+          </Grid>
+          <Grid xs={8}>
+            <Button auto type="secondary">
+              Action
+            </Button>
+          </Grid>
+        </Grid.Container>
       </div>
       <style jsx>{`
         .demo {

diff --git a/lib/components/customization/editor.tsx b/lib/components/customization/editor.tsx
@@ -2,12 +2,9 @@ import React from 'react'
 import { Text, Button, useTheme, Themes } from 'components'
 import EditorColorItem from './editor-color-item'
 import EditorInputItem from './editor-input-item'
+import RotateCcwIcon from '@geist-ui/icons/rotateCcw'
 import { useConfigs } from 'lib/config-context'
-import {
-  GeistUIThemesExpressiveness,
-  GeistUIThemesLayout,
-  GeistUIThemesPalette,
-} from 'components/themes'
+import { GeistUIThemesExpressiveness, GeistUIThemesPalette } from 'components/themes'
 
 const basicColors: Array<keyof GeistUIThemesPalette> = [
   'accents_1',
@@ -51,39 +48,45 @@ const expressiveness: Array<keyof GeistUIThemesExpressiveness> = [
   'shadowMedium',
   'shadowLarge',
 ]
-const pageLayout: Array<keyof GeistUIThemesLayout> = [
-  'pageWidth',
-  'pageWidthWithMargin',
-  'pageMargin',
-  'radius',
-]
-const gapLayout: Array<keyof GeistUIThemesLayout> = [
-  'gap',
-  'gapNegative',
-  'gapHalf',
-  'gapHalfNegative',
-  'gapQuarter',
-  'gapQuarterNegative',
-]
+// const pageLayout: Array<keyof GeistUIThemesLayout> = [
+//   'pageWidth',
+//   'pageWidthWithMargin',
+//   'pageMargin',
+//   'radius',
+// ]
+// const gapLayout: Array<keyof GeistUIThemesLayout> = [
+//   'gap',
+//   'gapNegative',
+//   'gapHalf',
+//   'gapHalfNegative',
+//   'gapQuarter',
+//   'gapQuarterNegative',
+// ]
 
 const Editor = () => {
   const theme = useTheme()
   const DefaultTheme = Themes.getPresetStaticTheme()
   const { updateCustomTheme, isChinese } = useConfigs()
 
-  const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
+  // const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
   const restColors = () => updateCustomTheme({ palette: DefaultTheme.palette })
   const resetExpressiveness = () => {
     updateCustomTheme({ expressiveness: DefaultTheme.expressiveness })
   }
 
   return (
     <div className="editor">
-      <Text h3>
+      <Text h3 mt="40px" font="22px">
         {isChinese ? '色彩' : 'Colors'}
-        <Button type="abort" auto scale={0.4} onClick={restColors}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
+        <Button
+          type="abort"
+          icon={<RotateCcwIcon />}
+          auto
+          px={0.65}
+          scale={0.4}
+          ml="10px"
+          onClick={restColors}
+        />
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -104,11 +107,17 @@ const Editor = () => {
         ))}
       </div>
 
-      <Text h3>
+      <Text h3 mt="40px">
         {isChinese ? '表现力' : 'Expressiveness'}
-        <Button type="abort" auto scale={0.4} onClick={resetExpressiveness}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
+        <Button
+          type="abort"
+          icon={<RotateCcwIcon />}
+          auto
+          px={0.65}
+          scale={0.4}
+          ml="10px"
+          onClick={resetExpressiveness}
+        />
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -120,33 +129,6 @@ const Editor = () => {
           />
         ))}
       </div>
-
-      <Text h3>
-        {isChinese ? '布局' : 'Layout'}
-        <Button type="abort" auto scale={0.4} onClick={resetLayout}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
-      </Text>
-      {isChinese ? (
-        <p>大多数的布局间距都依赖这些变量，不合理的更改可能会导致布局失衡。</p>
-      ) : (
-        <p>
-          Most layout spacing depends on these variables, unreasonable changes may cause
-          layout imbalance.
-        </p>
-      )}
-      <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
-      <div className="content">
-        {pageLayout.map((item, index) => (
-          <EditorInputItem key={`${item}-${index}`} groupName="layout" keyName={item} />
-        ))}
-      </div>
-      <p className="subtitle">{isChinese ? '间距' : 'gaps'}</p>
-      <div className="content">
-        {gapLayout.map((item, index) => (
-          <EditorInputItem key={`${item}-${index}`} groupName="layout" keyName={item} />
-        ))}
-      </div>
       <style jsx>{`
         .content {
           display: flex;
@@ -158,10 +140,6 @@ const Editor = () => {
           padding-left: ${theme.layout.gapQuarter};
         }
 
-        .editor :global(h3) {
-          margin: 2rem 0 1rem 0;
-        }
-
         .subtitle {
           color: ${theme.palette.accents_4};
           text-transform: uppercase;

diff --git a/lib/components/displays/home-cell.tsx b/lib/components/displays/home-cell.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Card, Link, useTheme } from 'components'
+import NextLink from 'next/link'
+
+export type HomeCellProps = {
+  url: string
+  title: string
+  desc: string
+  icon: React.ReactNode
+}
+
+const HomeCell: React.FC<HomeCellProps> = ({ url, title, desc, icon }) => {
+  const theme = useTheme()
+  return (
+    <NextLink href={url} passHref>
+      <Link>
+        <Card padding="5px" shadow width="100%">
+          <h4 className="feature__title">
+            <div className="feature__icon">{icon}</div>
+            {title}
+          </h4>
+          <p className="feature__description">{desc}</p>
+        </Card>
+        <style jsx>{`
+          .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>
+      </Link>
+    </NextLink>
+  )
+}
+
+export default HomeCell