Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: remove customization tab #688

Merged
merged 1 commit into from
Jan 25, 2022
Merged

docs: remove customization tab #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions lib/components/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down
20 changes: 12 additions & 8 deletions lib/components/customization/colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = [
Expand All @@ -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;
Expand Down
78 changes: 39 additions & 39 deletions lib/components/customization/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>> = () => {
Expand All @@ -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 {
Expand Down
96 changes: 37 additions & 59 deletions lib/components/customization/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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;
Expand All @@ -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;
Expand Down
55 changes: 55 additions & 0 deletions lib/components/displays/home-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Loading