Skip to content

Commit 865ed8f

Browse files
phatedphated
committed
Align with docusaurus & updates
1 parent ce28adf commit 865ed8f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+1535
-3228
lines changed

‎carbon-config.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"paddingVertical":"11px","paddingHorizontal":"10px","backgroundImage":null,"backgroundImageSelection":null,"backgroundMode":"color","backgroundColor":"rgba(207,70,71,1)","dropShadow":false,"dropShadowOffsetY":"20px","dropShadowBlurRadius":"68px","theme":"blackboard","windowTheme":"none","language":"auto","fontFamily":"Fira Code","fontSize":"11.5px","lineHeight":"152%","windowControls":true,"widthAdjustment":true,"lineNumbers":false,"firstLineNumber":1,"exportSize":"2x","watermark":false,"squaredImage":false,"hiddenCharacters":false,"loading":false,"marginVertical":"45px","marginHorizontal":"45px","uploading":false,"_initialState":null,"aspectRatio":0.7616921348314606,"icon":"/static/presets/7.png","isVisible":true}

‎docusaurus.config.js

+64-4
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,34 @@ module.exports = {
1818
logo: {
1919
alt: 'gulp',
2020
src: 'img/gulp.svg',
21-
// TODO: Remove these when we have a homepage in the router
22-
href: 'https://gulpjs.com/',
21+
href: '/',
2322
target: '_self',
2423
},
2524
links: [
2625
{ to: 'docs/en/getting-started/quick-start',
27-
label: 'Getting Started',
26+
label: 'Get Started',
2827
position: 'left',
2928
},
3029
{ to: 'docs/en/api/concepts',
3130
label: 'API',
3231
position: 'left',
3332
},
33+
// TODO: Remove when plugins is part of the site
3434
{ href: 'https://gulpjs.com/plugins',
3535
label: 'Plugins',
3636
position: 'left',
3737
},
38+
{
39+
href: 'https://github.com/sponsors/gulpjs',
40+
label: 'Donate',
41+
position: 'left',
42+
},
43+
{
44+
to: 'docs/en/support/for-enterprise',
45+
label: 'Enterprise',
46+
position: 'left',
47+
emphasis: true,
48+
},
3849
{ href: 'https://twitter.com/gulpjs',
3950
logo: {
4051
alt: 'Gulp on Twitter',
@@ -81,7 +92,6 @@ module.exports = {
8192
]
8293
},
8394
],
84-
copyright: `Copyright © ${new Date().getFullYear()} GulpJS`,
8595
},
8696
prism: {
8797
// One of:
@@ -100,7 +110,57 @@ module.exports = {
100110
gtag: {
101111
trackingID: 'UA-128126650-1',
102112
},
113+
companyLogos: [
114+
{
115+
href: 'https://stickermule.com',
116+
src: 'sponsor-logos/sticker-mule.svg',
117+
alt: 'Sticker Mule logo',
118+
title: 'Sticker Mule',
119+
style: {
120+
flexBasis: '120px',
121+
},
122+
},
123+
{
124+
href: 'https://icons8.com/',
125+
src: 'sponsor-logos/icons8.svg',
126+
alt: 'Icons8 logo',
127+
title: 'Icons8',
128+
style: {
129+
flexBasis: '80px',
130+
},
131+
},
132+
{
133+
href: 'https://frontendmasters.com/',
134+
src: 'sponsor-logos/frontend-masters.png',
135+
alt: 'Frontend Masters logo',
136+
title: 'Frontend Masters',
137+
style: {
138+
flexBasis: '200px',
139+
},
140+
},
141+
{
142+
href: 'https://www.codeinwp.com/',
143+
src: 'sponsor-logos/codeinwp.svg',
144+
alt: 'CodeinWP',
145+
title: 'CodeinWP',
146+
style: {
147+
flexBasis: '150px',
148+
},
149+
},
150+
{
151+
href: 'https://clay.global/',
152+
src: 'sponsor-logos/clay.png',
153+
alt: 'Clay logo',
154+
title: 'Clay',
155+
style: {
156+
flexBasis: '150px',
157+
},
158+
},
159+
]
103160
},
161+
stylesheets: [
162+
'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&family=Roboto:wght@900&display=swap'
163+
],
104164
themes: [
105165
['@docusaurus/theme-classic', {
106166
customCss: require.resolve('./src/css/docs.css')

‎img/favicon.png

-4.33 KB
Binary file not shown.

‎package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,9 @@
3030
"gray-matter": "^3.1.1",
3131
"gulp": "^4.0.2",
3232
"gulplog": "^1.0.0",
33+
"lodash.shuffle": "^4.2.0",
3334
"react": "^16.13.1",
34-
"react-burger-menu": "^2.6.13",
35-
"react-device-detect": "^1.11.14",
3635
"react-dom": "^16.13.1",
37-
"react-multi-carousel": "^2.5.4",
38-
"react-transition-group": "^4.3.0",
3936
"remark-admonitions": "^1.2.1"
4037
},
4138
"browserslist": {

‎sidebars.json

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
"api/vinyl",
2626
"api/vinyl-isvinyl",
2727
"api/vinyl-iscustomprop"
28+
],
29+
"Support": [
30+
"support/for-enterprise"
2831
]
2932
}
3033
}

‎src/css/docs.css

+114-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
:root {
2-
--ifm-global-radius: 4px;
2+
--ifm-global-radius: 0;
33
--ifm-background-color: var(--ifm-color-white);
4+
--ifm-global-shadow-lw: 1px 2px 5px 1px rgba(0, 0, 0, 0.1);
5+
/* Font */
6+
/* TODO: maybe this should be --ifm-font-family-primary */
7+
--ifm-font-family-base: 'Poppins', sans-serif;
8+
/* TODO: add to ifm as ifm-font-family-secondary? */
9+
--font-family-secondary: 'Roboto', sans-serif;
10+
--font-weight-secondary: 900;
411
/* Primary color */
512
--ifm-color-primary: #cf4647;
613
--ifm-color-primary-dark: #c63334;
@@ -13,7 +20,9 @@
1320
--ifm-color-secondary: #20232a;
1421
/* Navbar */
1522
--ifm-navbar-height: unset;
16-
--ifm-navbar-item-padding-horizontal: 0.5rem;
23+
--ifm-navbar-padding-vertical: 0.5rem;
24+
--ifm-navbar-item-padding-vertical: 0.25rem;
25+
--ifm-navbar-item-padding-horizontal: 0.6rem;
1726
--ifm-navbar-background-color: var(--ifm-color-primary);
1827
--ifm-navbar-link-color: var(--ifm-color-white);
1928
--ifm-navbar-link-hover-color: var(--ifm-color-white);
@@ -27,16 +36,25 @@
2736
--ifm-footer-background-color: var(--ifm-color-secondary);
2837
--ifm-footer-color: var(--ifm-color-white);
2938
--ifm-footer-link-color: var(--ifm-color-white);
39+
--ifm-footer-link-hover-color: var(--ifm-color-white);
3040
/* Tables */
3141
--ifm-table-border-width: 0;
3242
--ifm-table-head-background: var(--ifm-color-primary);
3343
--ifm-table-head-color: var(--ifm-color-white);
3444
--ifm-table-stripe-background: rgba(76, 76, 76, 0.1);
3545
/* Button */
3646
--ifm-button-background-color: var(--ifm-color-primary);
47+
/* Card */
48+
--ifm-card-background-color: #f6f8fa;
49+
--ifm-card-border-radius: var(--ifm-global-radius);
3750
}
3851

3952
/* Element defaults */
53+
h1, h2, h3, h4 {
54+
font-family: var(--font-family-secondary);
55+
font-weight: var(--font-weight-secondary);
56+
}
57+
4058
small {
4159
font-size: 14px;
4260
font-style: italic;
@@ -52,8 +70,24 @@ h1 .hash-link {
5270
}
5371

5472
/* Navbar */
73+
.navbar {
74+
min-height: 4rem;
75+
}
76+
77+
.navbar .navbar__brand {
78+
height: 3rem;
79+
margin-right: var(--ifm-navbar-item-padding-horizontal);
80+
}
5581
.navbar .navbar__logo {
5682
max-width: unset;
83+
margin-right: 0;
84+
}
85+
86+
.navbar .navbar__link {
87+
font-family: var(--font-family-secondary);
88+
font-weight: var(--font-weight-secondary);
89+
text-transform: uppercase;
90+
font-size: 1rem;
5791
}
5892

5993
.navbar .navbar__toggle {
@@ -65,8 +99,12 @@ h1 .hash-link {
6599
}
66100

67101
@media (max-width: 996px) {
68-
.navbar .navbar__item {
69-
display: unset;
102+
.navbar .navbar__link {
103+
display: inline-block;
104+
}
105+
106+
.navbar .navbar__link--icon {
107+
display: none;
70108
}
71109
}
72110

@@ -147,20 +185,58 @@ table tr td + td + td:last-child {
147185
}
148186
}
149187

188+
/* Tons of hacks for the algolia search to look good on mobile */
189+
@media only screen and (max-width: 600px) {
190+
.navbar .navbar__search {
191+
width: 100%;
192+
}
193+
.search-icon-hidden {
194+
display: none !important;
195+
}
196+
.navbar .navbar__search .navbar__search-input {
197+
width: 100% !important;
198+
}
199+
200+
.navbar .algolia-autocomplete {
201+
width: 100%;
202+
display: block;
203+
}
204+
.navbar .algolia-autocomplete .ds-dropdown-menu {
205+
position: absolute !important;
206+
right: 0.5rem !important;
207+
max-width: calc(100% - 1rem);
208+
}
209+
}
210+
150211
/* TODO: These will need to be update when "Enterprise" is added */
151212
@media only screen and (max-width: 767px) {
213+
.navbar .navbar__inner {
214+
display: block;
215+
}
216+
152217
.navbar .navbar__items {
153218
padding-top: var(--ifm-navbar-item-padding-vertical);
154219
padding-bottom: var(--ifm-navbar-item-padding-vertical);
155220
justify-content: space-around;
221+
flex-wrap: wrap;
156222
}
157223

158-
.navbar .navbar__items.navbar__items--right {
224+
/* .navbar .navbar__items.navbar__items--right {
159225
justify-content: space-around;
226+
} */
227+
228+
.navbar .navbar__search {
229+
padding-left: 0;
160230
}
161231
}
162232

163233
@media only screen and (min-width: 768px) {
234+
.navbar .navbar__search .navbar__search-input {
235+
width: 9.5rem;
236+
}
237+
}
238+
239+
@media only screen and (min-width: 996px) {
164240
.navbar .navbar__search .navbar__search-input {
165241
width: 12.5rem;
166242
transition: width 0.5s ease 0s;
@@ -180,11 +256,43 @@ table tr td + td + td:last-child {
180256
}
181257

182258
@media only screen and (max-width: 375px) {
183-
/* This is our logo */
259+
/* Hide our logos on tiny devices */
260+
.navbar .navbar__brand {
261+
display: none;
262+
}
263+
184264
.footer__col:first-of-type {
185265
display: none;
186266
}
187267
.footer .col.col.col {
188268
--ifm-col-width: 50%;
189269
}
190270
}
271+
272+
/* Tidelift */
273+
.tidelift-button {
274+
display: inline-block;
275+
margin-right: 1rem;
276+
277+
background: var(--ifm-color-white);
278+
padding: 0.5rem 1rem;
279+
outline: none;
280+
cursor: pointer;
281+
text-align: center;
282+
font-family: var(--font-family-secondary);
283+
font-weight: var(--font-weight-secondary);
284+
font-size: 1.1rem;
285+
286+
color: var(--ifm-color-secondary);
287+
border: 2px solid var(--ifm-color-secondary);
288+
box-shadow: 7px 7px 0 2px var(--ifm-color-secondary);
289+
transition: box-shadow .1s ease-in, transform .1s ease-in;
290+
}
291+
.tidelift-button:hover {
292+
text-decoration: none;
293+
color: var(--ifm-color-secondary);
294+
outline: none;
295+
transform: translate(2px, 10%);
296+
box-shadow: 6px 6px 0 0 var(--ifm-color-secondary);
297+
transition: box-shadow .1s ease-in, transform .1s ease-in;
298+
}

‎src/pages/index.js

+14-32
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,26 @@
11
import React from 'react';
22

3-
import { isMobile } from 'react-device-detect';
3+
import Layout from '@theme/Layout';
44

5-
import globalStyles from '../theme/scss/global.module.scss';
6-
import Logo from '@theme/components/logo';
7-
import Nav from '@theme/components/nav';
8-
import Socials from '@theme/components/socials';
9-
import FooterNav from '@theme/components/footer-nav';
10-
import Benefits from '@theme/sections/benefits';
11-
import Plugins from '@theme/sections/plugins';
12-
import Backers from '@theme/sections/backers';
13-
import Hero from '@theme/sections/hero';
14-
import Slider from '@theme/components/slider';
5+
import Hero from '@theme/Hero';
6+
import CompanyBanner from '@theme/CompanyBanner';
7+
import BenefitSection from '@theme/BenefitSection';
8+
import PluginSection from '@theme/PluginSection';
9+
import BackerSection from '@theme/BackerSection';
10+
import BackerBanner from '@theme/BackerBanner';
1511

1612
function Index() {
1713
return (
18-
<div className="App">
19-
<header>
20-
<Logo />
21-
<Nav />
22-
{!isMobile &&
23-
<Socials />
24-
}
25-
</header>
14+
<Layout>
2615
<main>
2716
<Hero />
28-
<Slider />
29-
<Benefits />
30-
<div className={globalStyles.grey}>
31-
<Plugins />
32-
</div>
33-
<Backers />
34-
<Slider light/>
17+
<CompanyBanner />
18+
<BenefitSection />
19+
<PluginSection />
20+
<BackerSection />
21+
<BackerBanner />
3522
</main>
36-
37-
<footer>
38-
<FooterNav />
39-
<Logo />
40-
</footer>
41-
</div>
23+
</Layout>
4224
);
4325
}
4426

0 commit comments

Comments
 (0)