Skip to content

docs: add home page #573

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

Merged
merged 6 commits into from
Aug 13, 2021
Merged

docs: add home page #573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a00310
docs: add home page
ofekashery Jun 26, 2021
f9e0ae1
Merge branch 'rc' into homepage
ofekashery Jun 28, 2021
b96d0df
docs(homepage): apply suggestions from code review
ofekashery Jun 28, 2021
db42917
docs(homepage): make cards clickable
ofekashery Jun 28, 2021
1988d2a
Merge branch 'rc' into homepage
ofekashery Jul 1, 2021
298debc
Merge branch 'rc' into homepage
unix Aug 13, 2021
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
38 changes: 25 additions & 13 deletions lib/components/menu/menu-links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
9 changes: 8 additions & 1 deletion lib/components/menu/menu-sticker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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=""
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can hide the Tabs on this page?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there is a reason, it is much simpler to navigate like this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we don't hide the Tabs, the Home page is a bit redundant.
Home is not a placeholder or a skeleton, I don't need to stay on the home page, because there is no point.
Make Home a brand home page and ask users to interact with it, which will enhance the value of the page and reduce the distraction of Tabs from the brand page presentation.

A simple comparison:

  • Every time I open the home page I need to stay on the Home page, but there is nothing on this page and I still click on the tabs to go to the page I need, which only annoys me.
  • The home page is a clean display of the brand without the distraction of Tabs or Footer, I can choose a category to browse from the brand page, which makes me feel that home is meaningful, it's like the cover of a book rather than a title page that forces people to browse.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The home screen is indeed a brand page, which encourages you to use Geist. The primary button on the page is the Documentation button.
While the cards were designed to show the Geist's features, I can see how those can be clickable. But in terms of UX, I don't think it's worth hiding the menu, users know it and it appears on all other pages.
I suggest using both, what do you think? @unix

{tabbarData
? tabbarData.map((tab, index) => (
<Tabs.Item
Expand Down
4 changes: 2 additions & 2 deletions lib/components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion lib/use-locale.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 0 additions & 10 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
148 changes: 148 additions & 0 deletions pages/en-us/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Loading