Skip to content

Commit 96b1d57

Browse files
benfacebenface
authored
Update components (#73)
* Deploy `develop` to staging * Display language switcher * Update dependencies + add language switcher to footer * Fix Korean translations * Fix translations of outline titles on landing page * Add Graph Day link to nav * Prepare to merge to `main`
1 parent 21670e7 commit 96b1d57

File tree

9 files changed

+306
-270
lines changed

9 files changed

+306
-270
lines changed

‎components/NavTree.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { HTMLAttributes, createContext, Context, useState, useContext } from 'react'
22
import * as Collapsible from '@radix-ui/react-collapsible'
33
import {
4-
Diamond,
5-
DiamondProps,
64
NewGDSDivider,
75
Text,
86
TextProps,
97
Flex,
108
Icon,
9+
IconProps,
1110
Spacing,
1211
buildTransition,
1312
} from '@edgeandnode/components'
@@ -34,7 +33,7 @@ export type NavTreeItemProps = HTMLAttributes<HTMLElement> &
3433
Pick<LinkProps, 'href' | 'target'> & {
3534
active?: boolean
3635
linkProps?: LinkProps & SxProp
37-
diamondProps?: DiamondProps & SxProp
36+
diamondProps?: IconProps & SxProp
3837
}
3938
export type NavTreeGroupProps = HTMLAttributes<HTMLElement> & {
4039
active?: boolean
@@ -84,10 +83,11 @@ const NavTreeItem = ({
8483
>
8584
{children}
8685
{active && (
87-
<Diamond
86+
<Icon.DiamondSolid
87+
size="12px"
8888
sx={{
8989
position: 'absolute',
90-
left: '6px',
90+
left: Spacing.S,
9191
top: 0,
9292
bottom: 0,
9393
my: 'auto',
@@ -177,7 +177,7 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
177177
const NavTreeDivider = (props: NavTreeDividerProps) => {
178178
return (
179179
<li aria-hidden="true" sx={{ my: Spacing.M }} {...props}>
180-
<NewGDSDivider simple />
180+
<NewGDSDivider />
181181
</li>
182182
)
183183
}

‎i18n/translations.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Locale } from './locales'
55
import enTranslations from '@/pages/en/translations'
66
import esTranslations from '@/pages/es/translations'
77
import arTranslations from '@/pages/ar/translations'
8-
import koTranslations from '@/pages/ar/translations'
8+
import koTranslations from '@/pages/ko/translations'
99
import zhTranslations from '@/pages/zh/translations'
1010
import jaTranslations from '@/pages/ja/translations'
1111
import viTranslations from '@/pages/vi/translations'

‎layout/Layout.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
2020
[localesDetails]
2121
)
2222

23+
const languageSwitcher = useMemo(
24+
() => (
25+
<LanguageSwitcher
26+
key="languageSwitcher"
27+
languages={languages}
28+
value={currentLocale}
29+
onSelect={(locale) => setLocale(locale as Locale)}
30+
label={translations.global.language}
31+
/>
32+
),
33+
[languages, currentLocale, setLocale, translations]
34+
)
35+
2336
return (
2437
<div>
2538
<div
@@ -32,7 +45,6 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
3245
backgroundImage: `url('${process.env.NEXT_PUBLIC_BASE_PATH}/img/page-background.png')`,
3346
backgroundSize: 'cover',
3447
backgroundPosition: 'center top',
35-
backgroundRepeat: 'no-repeat',
3648
'@media (min-width: 1440px)': {
3749
aspectRatio: '1440/768',
3850
},
@@ -45,23 +57,7 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
4557
>
4658
<div sx={{ flexShrink: 0 }}>
4759
<Container sx={{ '--container-padding': '32px' }}>
48-
<NavigationMarketing
49-
activeRoute="/docs"
50-
NextLink={NextLink}
51-
rightAlignItems={
52-
[
53-
/*
54-
<LanguageSwitcher
55-
key="languageSwitcher"
56-
languages={languages}
57-
value={currentLocale}
58-
onSelect={(locale) => setLocale(locale as Locale)}
59-
label={translations.global.language}
60-
/>,
61-
*/
62-
]
63-
}
64-
/>
60+
<NavigationMarketing activeRoute="/docs" NextLink={NextLink} /* rightAlignItems={[languageSwitcher]} */ />
6561
</Container>
6662
</div>
6763
<main sx={{ flexGrow: 1 }}>
@@ -70,7 +66,7 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
7066
<div sx={{ flexShrink: 0 }}>
7167
<Container>
7268
<div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
73-
<Footer />
69+
<Footer /* languageSwitcher={languageSwitcher} */ />
7470
</div>
7571
</Container>
7672
</div>

‎layout/MDXLayoutNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const MobileWrapper = ({ title, children }: PropsWithChildren<{ title?: string }
6969
sx={{ px: Spacing.L_XL, py: '20px' }}
7070
>
7171
<Flex.Column as="span" gap={Spacing.S}>
72-
<Text.T10 color="White64">Docs</Text.T10>
72+
<Text.S10 color="White64">Docs</Text.S10>
7373
<Text size="16px">{title}</Text>
7474
</Flex.Column>
7575
<Flex.Column
@@ -145,7 +145,7 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
145145
active={currentPage?.path === navItem.path}
146146
sx={mobile ? { py: 0 } : {}}
147147
linkProps={{ sx: mobile ? {} : { pr: 0 } }}
148-
diamondProps={{ sx: mobile ? { left: '10px' } : {} }}
148+
diamondProps={{ sx: mobile ? { left: '6px' } : {} }}
149149
>
150150
{navItem.title}
151151
</NavTree.Item>

‎layout/MDXLayoutOutline.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useContext } from 'react'
2-
import { Text, Flex, NewGDSDivider as Divider, Spacing, buildTransition } from '@edgeandnode/components'
2+
import { Text, Flex, NewGDSDivider, Spacing, buildTransition } from '@edgeandnode/components'
33

44
import { DocumentContext } from '@/layout'
55
import { Link, EditPageLink } from '@/components'
@@ -28,11 +28,11 @@ export const MDXLayoutOutline = () => {
2828
<Flex.Row>
2929
<EditPageLink />
3030
</Flex.Row>
31-
<Divider simple sx={{ my: Spacing.XL }} />
31+
<NewGDSDivider sx={{ my: Spacing.XL }} />
3232
<nav sx={{ pr: '16px' }}>
33-
<Text.T10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
33+
<Text.S10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
3434
{translations.global.pageSections}
35-
</Text.T10>
35+
</Text.S10>
3636
<Text as="ul" size="14px" color="White48">
3737
{outline.map((outlineItem, outlineItemIndex) => {
3838
if (outlineItem.level > 3) {

‎layout/MDXLayoutPagination.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const MDXLayoutPagination = () => {
1111

1212
return (
1313
<div sx={{ overflow: 'hidden' }}>
14-
<NewGDSDivider />
14+
<NewGDSDivider diamonds />
1515
<Flex.Row justify="space-between" sx={{ mt: Spacing.XL }}>
1616
<div>
1717
{previousPage && (
@@ -30,7 +30,7 @@ export const MDXLayoutPagination = () => {
3030
<Flex.Column align="start" gap={Spacing.S} sx={{ textAlign: 'left' }}>
3131
<Flex.Row align="center" gap={Spacing.S}>
3232
<Icon.ArrowLeft size="12px" />
33-
<Text.T10>{translations.global.previous}</Text.T10>
33+
<Text.S10>{translations.global.previous}</Text.S10>
3434
</Flex.Row>
3535
<Text
3636
weight="Semibold"
@@ -67,7 +67,7 @@ export const MDXLayoutPagination = () => {
6767
>
6868
<Flex.Column align="end" gap={Spacing.S} sx={{ textAlign: 'right' }}>
6969
<Flex.Row align="center" gap={Spacing.S}>
70-
<Text.T10>{translations.global.next}</Text.T10>
70+
<Text.S10>{translations.global.next}</Text.S10>
7171
<Icon.ArrowRight size="12px" />
7272
</Flex.Row>
7373
<Text

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121
},
2222
"dependencies": {
23-
"@edgeandnode/components": "^18.1.1",
23+
"@edgeandnode/components": "^20.3.1",
2424
"@emotion/react": "^11.7.1",
2525
"@emotion/styled": "^11.6.0",
2626
"@mdx-js/loader": "^2.0.0",
@@ -32,7 +32,7 @@
3232
"@radix-ui/react-visually-hidden": "^0.1.3",
3333
"next": "^12.0.10",
3434
"next-seo": "^4.29.0",
35-
"prism-react-renderer": "^1.2.1",
35+
"prism-react-renderer": "^1.3.1",
3636
"react": "^17.0.2",
3737
"react-dom": "^17.0.2",
3838
"react-intersection-observer": "^8.33.1",
@@ -44,12 +44,12 @@
4444
"@sindresorhus/slugify": "^2.1.0",
4545
"@svgr/webpack": "^6.2.1",
4646
"@types/color": "^3.0.3",
47-
"@types/lodash-es": "^4.17.5",
48-
"@types/node": "^16.11.21",
49-
"@types/react": "^17.0.38",
47+
"@types/lodash-es": "^4.17.6",
48+
"@types/node": "^16.11.24",
49+
"@types/react": "^17.0.39",
5050
"acorn": "^8.7.0",
5151
"acorn-jsx": "^5.3.2",
52-
"eslint": "^8.8.0",
52+
"eslint": "^8.9.0",
5353
"eslint-config-next": "^12.0.10",
5454
"husky": "^7.0.4",
5555
"lodash-es": "^4.17.21",

‎pages/[locale]/index.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useMemo } from 'react'
12
import { GetStaticPaths, GetStaticProps } from 'next'
23
import { Text, Flex, Spacing, BorderRadius, buildBorder, buildShadow, buildTransition } from '@edgeandnode/components'
34

@@ -11,24 +12,6 @@ export const frontmatter = (locale: Locale): Frontmatter => ({
1112
title: translations[locale].index.title,
1213
})
1314

14-
const outline: OutlineItem[] = [
15-
{
16-
id: 'network-roles',
17-
title: 'Network Roles',
18-
level: 2,
19-
},
20-
{
21-
id: 'products',
22-
title: 'Products',
23-
level: 2,
24-
},
25-
{
26-
id: 'supported-networks',
27-
title: 'Supported Networks',
28-
level: 2,
29-
},
30-
]
31-
3215
export const getStaticPaths: GetStaticPaths = async () => {
3316
return {
3417
paths: Object.values(Locale).map((locale) => ({
@@ -51,6 +34,27 @@ export const getStaticProps: GetStaticProps = async (context) => {
5134
const Index = ({ navItems }: { navItems: NavItem[] }) => {
5235
const { currentLocale, translations } = useI18n()
5336

37+
const outline: OutlineItem[] = useMemo(
38+
() => [
39+
{
40+
id: 'network-roles',
41+
title: translations.index.networkRoles.title,
42+
level: 2,
43+
},
44+
{
45+
id: 'products',
46+
title: translations.index.products.title,
47+
level: 2,
48+
},
49+
{
50+
id: 'supported-networks',
51+
title: translations.index.supportedNetworks.title,
52+
level: 2,
53+
},
54+
],
55+
[translations]
56+
)
57+
5458
return (
5559
<MDXLayout
5660
pagePath="[locale]/index.tsx"

0 commit comments

Comments
 (0)