Skip to content

Commit 4b34f8f

Browse files
Inbal-Tishethanshar
Inbal-Tish
and
ethanshar
authored
Docs site redesign (#3636)
* Site redesign * add custom footer * convert rem * Move incubator and infra outside * add menu dividers * Update docuilib/src/css/custom.css Align nav items Co-authored-by: Ethan Sharabi <[email protected]> * navbar search design * fix search icon color * fix nav items alignment --------- Co-authored-by: Ethan Sharabi <[email protected]>
1 parent 3e122e2 commit 4b34f8f

File tree

8 files changed

+317
-102
lines changed

8 files changed

+317
-102
lines changed

‎docuilib/docusaurus.config.js

Lines changed: 19 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ const darkCodeTheme = themes.dracula;
5656
({
5757
metadata: [
5858
{name: 'title', content: 'React Native UI Lib'},
59-
6059
{
6160
name: 'keywords',
6261
content: 'design system, react native, react, mobile, web, ui library, components library'
@@ -83,68 +82,44 @@ const darkCodeTheme = themes.dracula;
8382
//... other Algolia params
8483
},
8584
navbar: {
86-
title: 'RNUILib',
87-
hideOnScroll: true,
8885
logo: {
89-
alt: 'RNUILib Logo',
90-
src: 'img/logo.png'
86+
alt: 'RNUI Logo',
87+
src: 'img/logo_rnui.png',
88+
width: 139,
89+
height: 53
9190
},
9291
items: [
9392
{
9493
type: 'doc',
9594
docId: 'getting-started/setup',
9695
position: 'left',
97-
label: 'Guides'
96+
label: 'GETTING STARTED'
97+
},
98+
{
99+
type: 'doc',
100+
docId: 'foundation/style',
101+
position: 'left',
102+
label: 'FOUNDATION'
98103
},
99104
{
100105
type: 'doc',
101106
docId: 'components/basic/View',
102107
position: 'left',
103-
label: 'Components'
108+
label: 'COMPONENTS'
104109
},
105-
// {to: '/blog', label: 'Blog', position: 'left'},
106110
{
107111
href: 'https://github.com/wix/react-native-ui-lib',
108-
label: 'GitHub',
109-
position: 'right'
112+
position: 'right',
113+
html: `
114+
<div style="display: flex; align-items: center;">
115+
<span style="margin-right: 6px;">GitHub</span>
116+
<image src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png" alt="external link icon" width="17" height="16" />
117+
</div>
118+
`
110119
}
111120
]
112121
},
113122
footer: {
114-
style: 'dark',
115-
links: [
116-
{
117-
title: 'Links',
118-
items: [
119-
{
120-
label: 'Docs',
121-
to: '/docs/getting-started/setup'
122-
},
123-
{
124-
label: 'GitHub',
125-
href: 'https://github.com/wix/react-native-ui-lib'
126-
},
127-
{
128-
label: 'Expo-Snack',
129-
href: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android'
130-
}
131-
]
132-
},
133-
134-
{
135-
title: 'Community',
136-
items: [
137-
{
138-
label: 'Discord',
139-
href: 'https://discord.gg/2eW4g6Z'
140-
},
141-
{
142-
label: 'Twitter',
143-
href: 'https://twitter.com/rnuilib'
144-
}
145-
]
146-
}
147-
],
148123
copyright: `© 2006-${new Date().getFullYear()} Wix.com, Inc.`
149124
},
150125
prism: {

‎docuilib/sidebars.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,24 @@ const componentsCategories = {
3030
module.exports = {
3131
// By default, Docusaurus generates a sidebar from the docs folder structure
3232
// tutorialSidebar: [{type: 'autogenerated', dirName: '.'}]
33-
3433
guidesSidebar: [
3534
{
3635
type: 'category',
3736
label: 'Getting Started',
38-
collapsed: false,
37+
collapsible: false,
3938
items: [
4039
{
4140
type: 'autogenerated',
4241
dirName: `getting-started`
4342
}
4443
]
45-
},
44+
}
45+
],
46+
foundationSidebar: [
4647
{
4748
type: 'category',
4849
label: 'Foundation',
49-
collapsed: false,
50+
collapsible: false,
5051
items: [
5152
{
5253
type: 'autogenerated',
@@ -60,7 +61,6 @@ module.exports = {
6061
type: 'category',
6162
label: 'Components',
6263
collapsible: false,
63-
// items: ['Basic', 'Lists', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
6464
items: Object.keys(componentsCategories)
6565
.sort()
6666
.map(category => {

‎docuilib/src/components/CustomLayout.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React from 'react';
22
import DocRoot from '@theme/DocRoot';
3-
import StandWithUkraine from '@site/src/components/StandWithUkraine';
43

54
export default function CustomLayout(props) {
65
return (
7-
<>
8-
<StandWithUkraine/>
9-
<DocRoot {...props}/>
10-
</>
6+
<DocRoot {...props}/>
117
);
128
}

‎docuilib/src/css/custom.css

Lines changed: 167 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99

1010
/* You can override the default Infima variables here. */
1111
:root {
12-
--ifm-color-primary: #5848ff;
13-
--ifm-color-primary-dark: #4633E9;
14-
--ifm-color-primary-darker: #3220CD;
15-
--ifm-color-primary-darkest: #3220CD;
16-
--ifm-color-primary-light: #5A48F5;
17-
--ifm-color-primary-lighter: #8579FF;
18-
--ifm-color-primary-lightest: #B2ABFF;
12+
--ifm-color-primary: #1b2430;
13+
--ifm-color-primary-dark: #18202b;
14+
--ifm-color-primary-darker: #171f29;
15+
--ifm-color-primary-darkest: #131922;
16+
--ifm-color-primary-light: #1e2835;
17+
--ifm-color-primary-lighter: #1f2937;
18+
--ifm-color-primary-lightest: #232f3e;
1919
--ifm-code-font-size: 95%;
20+
--ifm-font-color-base: #20303C;
2021
}
2122

2223
.docusaurus-highlight-code-line {
@@ -30,6 +31,165 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
3031
background-color: rgba(0, 0, 0, 0.3);
3132
}
3233

34+
/** Docusaurus Navbar */
35+
36+
.navbar {
37+
height: 86px;
38+
padding-top: 26px;
39+
padding-bottom: 16px;
40+
}
41+
.navbar__logo {
42+
position: relative;
43+
top: -10px;
44+
height: 53px;
45+
margin-right: 76px;
46+
margin-left: 36px;
47+
}
48+
.navbar__inner {
49+
align-items: flex-end;
50+
}
51+
.navbar__link {
52+
padding: 0 10px;
53+
margin: 0 16px;
54+
font-weight: 500;
55+
font-size: 14px;
56+
letter-spacing: 0.3px;
57+
line-height: 38px;
58+
}
59+
.navbar__link--active {
60+
font-weight: 700;
61+
border-bottom: 2px solid #20303C;
62+
}
63+
64+
/* Algolia search input */
65+
66+
.navbarSearchContainer_Bca1 {
67+
margin-right: 28px;
68+
}
69+
.DocSearch-Button {
70+
border-radius: 8px !important;
71+
background-color: #F9FAFB !important;
72+
border: 1px solid #D2D5DA !important;
73+
color: #6E7881 !important;
74+
width: 279px;
75+
height: 44px !important;
76+
padding: 10px 20px !important;
77+
}
78+
.DocSearch-Search-Icon {
79+
width: 16px !important;
80+
height: 16px !important;
81+
stroke-width: 3 !important;
82+
}
83+
.DocSearch-Button .DocSearch-Search-Icon {
84+
color: #4D5963 !important;
85+
}
86+
.DocSearch-Button-Placeholder {
87+
padding: 0 12px !important;
88+
}
89+
.DocSearch-Button-Keys {
90+
display: none !important;
91+
}
92+
93+
/** Docusaurus Menu */
94+
95+
.menu__link--sublist-caret:after, .menu__caret:before {
96+
background-size: 20px;
97+
filter: invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(0) contrast(100%);
98+
}
99+
.menu {
100+
margin-left: 24px;
101+
margin-right: 24px;
102+
margin-bottom: 80px;
103+
}
104+
.menu__list .menu__list:has(ul) {
105+
padding-left: 0;
106+
}
107+
108+
.theme-doc-sidebar-item-category:is(.theme-doc-sidebar-item-category-level-1) {
109+
padding-bottom: 20px;
110+
border-bottom: 1px solid #D2D6D8;
111+
}
112+
.menu__list-item-collapsible:has(.menu__link:not(.menu__link--sublist)) a {
113+
color: #A6ACB1 !important;
114+
font-size: 12px;
115+
font-weight: 700;
116+
line-height: 16px;
117+
text-transform: uppercase;
118+
margin-bottom: 10px;
119+
margin-top: 24px;
120+
}
121+
.menu__list-item-collapsible:has(.menu__link:not(.menu__link--sublist)):hover {
122+
background: #FFF;
123+
}
124+
.menu__link {
125+
color: #20303C;
126+
font-size: 14px;
127+
font-weight: 400;
128+
line-height: 20px;
129+
}
130+
.menu__link--active {
131+
font-weight: 700;
132+
}
133+
134+
/** Docusaurus Breadcrumbs */
135+
136+
.breadcrumbs__link {
137+
color: #4D5963;
138+
}
139+
.breadcrumbs__item--active .breadcrumbs__link {
140+
color: #20303C;
141+
background-color: #FFF;
142+
}
143+
.breadcrumbHomeIcon_YNFT {
144+
color: #20303C;
145+
}
146+
147+
/** Custom Footer */
148+
149+
.footer {
150+
border-top: 1px solid #D2D6D8;
151+
background-color: #F8F9FA;
152+
padding-top: 64px;
153+
padding-bottom: 107px;
154+
justify-content: center;
155+
}
156+
.footer__container {
157+
justify-content: center;
158+
border-top: 1px solid #D2D6D8;
159+
padding-top: 20px;
160+
margin-left: 350px;
161+
margin-right: 350px;
162+
}
163+
.footer__links {
164+
display: flex;
165+
align-items: center;
166+
justify-content: space-between;
167+
margin-bottom: 40px;
168+
}
169+
.footer__section {
170+
width: 200px;
171+
}
172+
.right__section {
173+
display: flex;
174+
justify-content: end;
175+
}
176+
.text__link {
177+
margin-right: 24px;
178+
}
179+
.icon__link {
180+
margin-right: 16px;
181+
}
182+
.footer__copyright {
183+
color: #6D7280;
184+
text-align: center;
185+
font-size: 12px;
186+
font-weight: 600;
187+
line-height: 130%;
188+
}
189+
190+
191+
/** Component page tabs */
192+
33193
.main-tabs {
34194
margin: 40px 0 60px 0;
35195
border-bottom: 2px solid #F0F2F5;

‎docuilib/src/pages/index.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
55
// import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
66
// import HomepageFeatures from '../components/HomepageFeatures';
77

8-
import StandWithUkraine from '../components/StandWithUkraine';
98
import MainSection from '../components/MainSection';
109
import ComponentsSection from '../components/ComponentsSection';
1110
import FeaturesSection from '../components/FeaturesSection';
@@ -15,20 +14,17 @@ import LibrariesSection from '../components/LibrariesSection';
1514
export default function Home(): JSX.Element {
1615
// const {siteConfig} = useDocusaurusContext();
1716
return (
18-
<>
19-
<StandWithUkraine/>
20-
<Layout
21-
/* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
22-
>
23-
<main>
24-
{/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
25-
<BrowserOnly>{() => <MainSection/>}</BrowserOnly>
26-
<ComponentsSection/>
27-
<FeaturesSection/>
28-
<CodeSection/>
29-
<LibrariesSection/>
30-
</main>
31-
</Layout>
32-
</>
17+
<Layout
18+
/* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
19+
>
20+
<main>
21+
{/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
22+
<BrowserOnly>{() => <MainSection/>}</BrowserOnly>
23+
<ComponentsSection/>
24+
<FeaturesSection/>
25+
<CodeSection/>
26+
<LibrariesSection/>
27+
</main>
28+
</Layout>
3329
);
3430
}

0 commit comments

Comments
 (0)