From 773622069c2c3096816b998754fd11f30387d43c Mon Sep 17 00:00:00 2001 From: Owner Date: Tue, 7 Apr 2020 22:38:41 +0300 Subject: [PATCH 1/6] adds new site files --- src/pages/index.js | 218 +++++++++++++++++++++++++ src/theme/components/button.js | 36 ++++ src/theme/components/donate.js | 74 +++++++++ src/theme/components/footer-nav.js | 32 ++++ src/theme/components/graph.js | 122 ++++++++++++++ src/theme/components/hero-animation.js | 84 ++++++++++ src/theme/components/logo.js | 20 +++ src/theme/components/nav.js | 85 ++++++++++ src/theme/components/slider.js | 156 ++++++++++++++++++ src/theme/components/socials.js | 33 ++++ src/theme/components/source.js | 48 ++++++ src/theme/sections/backer.js | 49 ++++++ src/theme/sections/backers-grid.js | 36 ++++ src/theme/sections/backers.js | 45 +++++ src/theme/sections/benefit.js | 39 +++++ src/theme/sections/benefits.js | 38 +++++ src/theme/sections/hero.js | 65 ++++++++ src/theme/sections/plugin.js | 50 ++++++ src/theme/sections/plugins-grid.js | 57 +++++++ src/theme/sections/plugins.js | 63 +++++++ 20 files changed, 1350 insertions(+) create mode 100644 src/pages/index.js create mode 100644 src/theme/components/button.js create mode 100644 src/theme/components/donate.js create mode 100644 src/theme/components/footer-nav.js create mode 100644 src/theme/components/graph.js create mode 100644 src/theme/components/hero-animation.js create mode 100644 src/theme/components/logo.js create mode 100644 src/theme/components/nav.js create mode 100644 src/theme/components/slider.js create mode 100644 src/theme/components/socials.js create mode 100644 src/theme/components/source.js create mode 100644 src/theme/sections/backer.js create mode 100644 src/theme/sections/backers-grid.js create mode 100644 src/theme/sections/backers.js create mode 100644 src/theme/sections/benefit.js create mode 100644 src/theme/sections/benefits.js create mode 100644 src/theme/sections/hero.js create mode 100644 src/theme/sections/plugin.js create mode 100644 src/theme/sections/plugins-grid.js create mode 100644 src/theme/sections/plugins.js diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..e28a620 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,218 @@ +import React from 'react'; + +import styled, { createGlobalStyle } from 'styled-components'; +import { isMobile } from 'react-device-detect'; + +import Logo from '@theme/components/logo'; +import Nav from '@theme/components/nav'; +import Socials from '@theme/components/socials'; +import Slider from '@theme/components/slider'; +import FooterNav from '@theme/components/footer-nav'; +import Hero from '@theme/sections/hero'; +import Benefits from '@theme/sections/benefits'; +import Plugins from '@theme/sections/plugins'; +import Backers from '@theme/sections/backers'; + +const GlobalStyle = createGlobalStyle` + :root { + --tiny: .5rem; + --small: 1rem; + --medium: 1.5rem; + --big: 2rem; + --large: 2.5rem; + --huge: 4.5rem; + --xxl: 5rem; + --hugest: 8rem; + --max: 10rem; + + --max-width-large: 73rem; + --max-width-big: 61.50rem; + --max-width-mid: 50rem; + --max-width-small: 15rem; + --max-width-tiny: 12rem; + + --red: #CF4647; + --light-gray: #F6F8FA; + --purple: #393E64; + --black: #0A0908; + + --heading-text: 'Work Sans', sans-serif; + --body-text: 'Poppins', sans-serif; + } + + *, + *:before, + *:after { + box-sizing: border-box; + } + + html { + font-size: 16px; + line-height: calc(1.1rem + .5vw); + font-weight: 400; + scroll-behavior: smooth; + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + } + + body { + font-family: var(--body-text); + color: var(--black); + margin: 0; + padding: 0; + background: #fff; + overflow-x: hidden; + } + + ul, ol { + list-style-type: none; + margin: 0; + padding: 0; + } + + a { + all: initial; + } + + h1, h2, h3, h4, .uppercase { + font-family: var(--heading-text); + font-weight: 900; + } + + h1 { + font-size: calc(2.2rem + .1vw); + line-height: calc(3rem + .2vw); + } + + h2, h4, .uppercase { + text-transform: uppercase; + } + + h3 { + font-size: calc(1.4rem + .1vw); + line-height: calc(1.5rem + .2vw); + color: var(--purple); + } + + h4, .uppercase { + font-size: calc(.9rem + .1vw); + } +`; + +const Header = styled.header` + background: var(--red); + position: relative; + padding: var(--tiny) var(--big); + display: grid; + grid-template-columns: 10% 80% 10%; + grid-template-areas: "logo . burger"; + align-items: center; + + @media(min-width: 768px) { + grid-template-areas: "logo nav burger"; + } + + .bm-item-list { + background: white; + padding: var(--small); + grid-area: nav; + + > li { + outline: none; + padding: var(--tiny) 0; + } + } + + > div { + grid-area: burger; + } + + .bm-menu-wrap { + width: 100%; + top: 0; + color: var(--purple); + } + + .bm-cross-button { + margin: var(--tiny); + } +` + +const Main = styled.main` + +` + +const Footer = styled.footer` + background: var(--purple); + position: relative; + padding: var(--big); + display: grid; + grid-template-areas: "first last"; + grid-template-columns: 50% 50%; + + a, li { + color: white; + font-family: var(--body-text); + } + + a { + cursor: pointer; + } + + @media(min-width: 768px) { + grid-template-columns: 56% 30% 10%; + grid-template-areas: ". first last"; + grid-column-gap: var(--big); + } + + > ul { + grid-area: first; + } + + > a { + grid-area: last; + text-align: end; + align-self: end; + margin: var(--small); + } +` + +const GreyContainer = styled.div` + display: block; + + @media(min-width: 768px) { + background: var(--light-gray); + } +` + +function Index() { + return ( +
+ +
+ +
+
+ + + + + + + + +
+ +
+ + +
+
+ ); +} + +export default Index; diff --git a/src/theme/components/button.js b/src/theme/components/button.js new file mode 100644 index 0000000..6e59887 --- /dev/null +++ b/src/theme/components/button.js @@ -0,0 +1,36 @@ +import React from 'react'; +import styled, { ThemeProvider } from 'styled-components'; + +const ButtonContainer = styled.button` + background: white; + padding: var(--tiny) var(--big); + outline: none; + max-width: 50%; + cursor: pointer; + + color: var(--purple); + border: 2px solid var(--purple); + box-shadow: 7px 7px 0 2px var(--purple); + transition: box-shadow .1s ease-in, transform .1s ease-in; + + &:hover { + outline: none; + transform: translate(2px, 10%); + box-shadow: 6px 6px 0 0 var(--purple); + transition: box-shadow .1s ease-in, transform .1s ease-in; + } + + @media(min-width: 768px) { + max-width: 100%; + } +` + +const Button = (props) => { + return ( + + {props.title} + + ) +} + +export default Button; \ No newline at end of file diff --git a/src/theme/components/donate.js b/src/theme/components/donate.js new file mode 100644 index 0000000..a7456d4 --- /dev/null +++ b/src/theme/components/donate.js @@ -0,0 +1,74 @@ +import React from 'react'; +import styled from 'styled-components'; +import { isMobile } from 'react-device-detect'; + +const DonateContainerMobile = styled.div` + display: grid; + grid-template-columns: 35% 60%; + grid-column-gap: var(--medium); + align-items: center; + grid-area: footer; + + a { + background: var(--red); + padding: var(--tiny) 0; + text-align: center; + color: white; + } + + p { + color: var(--black); + } +` +const DonateContainer = styled.div` + .donate-big { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 37% 37%; + background: var(--red); + min-height: 18vh; + padding: 0 var(--medium); + align-content: center; + cursor: pointer; + transition: box-shadow .1s ease-in, transform .1s ease-in; + + &:hover { + transform: translate(5px, -5%); + box-shadow: -7px 7px 0 3px var(--black); + transition: box-shadow .1s ease-in, transform .1s ease-in; + } + + h2 { + margin: 0; + align-self: center; + color: white; + } + + p { + color: white; + margin: 0; + align-self: flex-start; + font-family: var(--body-text); + } + } +` + +const Donate = (props) => { + if(isMobile) { + return ( + +

Donate

 +

For companies wanting to support open source

+ + ) + } return ( + + +

Donate

+

For companies wanting to support open source

+ + + ) +} + +export default Donate; \ No newline at end of file diff --git a/src/theme/components/footer-nav.js b/src/theme/components/footer-nav.js new file mode 100644 index 0000000..31f009f --- /dev/null +++ b/src/theme/components/footer-nav.js @@ -0,0 +1,32 @@ +import React from 'react'; +import styled from 'styled-components'; + +const FooterNavContainer = styled.ul` + display: grid; + grid-template-columns: repeat(2, 45%); + grid-column-gap: var(--big); + + @media(min-width: 768px) { + grid-column-gap: var(--xxl); + } +` +const FooterNav = ({ props }) => { + return ( + + + + ) +} + +export default FooterNav; \ No newline at end of file diff --git a/src/theme/components/graph.js b/src/theme/components/graph.js new file mode 100644 index 0000000..1495326 --- /dev/null +++ b/src/theme/components/graph.js @@ -0,0 +1,122 @@ +import React from 'react'; +import styled, { keyframes } from 'styled-components'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; +// const animatedSvg = useBaseUrl('img/gulp-graph1.svg'); + +// import { ReactComponent as GulpVisual } from animatedSvg; + +const fill = keyframes` + 0% { + stroke-dasharray: 100 400; + stroke-dashoffset: 200; + } + + 50% { + stroke: var(--red); + stroke-dashoffset: 0; + } + + 100% { + stroke-dasharray: 100 400; + stroke-dashoffset: -200; + } +` + +const opacity = keyframes` + 0%, 50%, 75% { + opacity: 0; + } + 100% { + opacity: 1; + } +` + +const stroke = keyframes` + from { + stroke-dashoffset: 900; + } + + to { + stroke-dashoffset: 0; + } +` + +const GulpVisual = styled.object` + width: 100%; + height: 100%; + + .line-up-anim { + animation: ${fill} infinite 3s linear; + + &.second { + animation: ${opacity} 2s linear forwards, ${fill} infinite 3s linear 1s; + } + } + + .line-down-anim { + animation: ${opacity} 4s linear forwards, ${fill} infinite 3s linear 2.3s; + + &.second { + animation-delay: .5s; + } + } + + .line-rectangle { + opacity: 0; + animation: 3s ${opacity} infinite 1s ease-out; + } +` + +const TechList = styled.ul` + display: grid; + grid-template-columns: repeat(3, 30%); + grid-column-gap: var(--big); + padding: 0 var(--big); + + p { + margin-top: 0; + } + + .uppercase { + margin: 0; + color: var(--red); + } +` +const Graph = (props) => { + return ( +
+ +
  • +

    pug

    +

    or any otehr templating language

    +
    • +
  • +

    sass

    +

    or any otehr templating language

    +
    • +
  • +

    js

    +

    or any otehr templating language

    +
    • +     + + +
  • +

    html

    +

    or any otehr templating language

    +
    • +
  • +

    css

    +

    or any otehr templating language

    +
    • +
  • +

    js

    +

    or any otehr templating language

    +
    • +     +
    + ) +} + +export default Graph; \ No newline at end of file diff --git a/src/theme/components/hero-animation.js b/src/theme/components/hero-animation.js new file mode 100644 index 0000000..fa60b58 --- /dev/null +++ b/src/theme/components/hero-animation.js @@ -0,0 +1,84 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Transition } from 'react-transition-group'; + +import GulpGraph from './graph'; +import GulpSource from './source'; + +const AnimationContainer = styled.div` + .fade-entering, .fade-exiting { + opacity: 1%; + } + + .fade-entered { + opacity: 1; + transition: opacity 1s ease-in-out; + } + + .fade-exited { + opacity: 1; + transition: opacity 1s ease-in-out; + } +` + +const ViewSource = styled.div` + margin-bottom: var(--medium); + text-align: right; +` + +const ButtonFancy = styled.button` + background: white; + padding: var(--small) var(--big); + outline: none; + max-width: 50%; + cursor: pointer; + + color: var(--purple); + border: 2px solid var(--purple); + box-shadow: 7px 7px 0 2px var(--purple); + transition: box-shadow .1s ease-in, transform .1s ease-in; + + &:hover { + outline: none; + transform: translate(2px, 10%); + box-shadow: 6px 6px 0 0 var(--purple); + transition: box-shadow .1s ease-in, transform .1s ease-in; + } + + @media(min-width: 768px) { + max-width: 100%; + } +` + +class Animation extends React.Component { + constructor(props) { + super(props); + this.state = {viewSource: false} + } + + handleClick(e) { + this.setState({ + viewSource: !this.state.viewSource + }); + }; + + render() { + return ( + + + + {this.state.viewSource ? "Close Source" : "View Source"} + + + + {state => ( +
    {this.state.viewSource ? : }
    + )} +     +     + ) + } +} + +export default Animation; + diff --git a/src/theme/components/logo.js b/src/theme/components/logo.js new file mode 100644 index 0000000..42a5fa9 --- /dev/null +++ b/src/theme/components/logo.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styled from 'styled-components'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const LinkLogo = styled.a` + img { + max-width: var(--xxl); + } +` + +const Logo = ({ props }) => { + return ( + + gulp + + ) +} + +export default Logo; \ No newline at end of file diff --git a/src/theme/components/nav.js b/src/theme/components/nav.js new file mode 100644 index 0000000..8cdb031 --- /dev/null +++ b/src/theme/components/nav.js @@ -0,0 +1,85 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { isMobile } from 'react-device-detect'; +import { slide as Menu } from 'react-burger-menu'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const links = [ + { + title: 'get started', + link: 'https://gulpjs.com/docs/en/getting-started/quick-start', + class: 'uppercase' + }, + { + title: 'plugins', + link: 'https://gulpjs.com/plugins/', + class: 'uppercase' + }, + { + title: 'api', + link: 'https://gulpjs.com/docs/en/api/concepts', + class: 'uppercase' + }, + { + title: 'donate', + link: 'https://opencollective.com/gulpjs', + class: 'uppercase' + }, + { + title: 'enterprise', + link: 'https://opencollective.com/gulpjs/contribute/company-1033/checkout', + class: 'uppercase button-like' + } +]; + +const NavigationContainer = styled.ul` + font-family: var(--body-text); + color: white; + display: none; + + @media(min-width: 768px) { + display: grid; + grid-template-columns: var(--hugest) var(--xxl) var(--large) var(--xxl) var(--hugest); + grid-column-gap: var(--small); + align-items: center; + } + + li { + text-align: center; + } + + a { + color: white; + cursor: pointer; + + &.button-like { + padding: var(--tiny); + border: 2px solid white; + } + } +` +const Nav = (props) => { + if(isMobile) { + return ( + } + customCrossIcon={ close }> + {links.map((link, index) => +
  • + {link.title} +
    • )} +     + ) + } return ( + + {links.map((link, index) => +
  • + {link.title} +
    • )} +     + ) +} + +export default Nav; \ No newline at end of file diff --git a/src/theme/components/slider.js b/src/theme/components/slider.js new file mode 100644 index 0000000..be6c6dc --- /dev/null +++ b/src/theme/components/slider.js @@ -0,0 +1,156 @@ +import React from 'react'; +import styled, { ThemeProvider } from 'styled-components'; +import Donate from './donate.js'; + +import Carousel from 'react-multi-carousel'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const SliderContainer = styled.div` + @font-face{font-family:"revicons";fallback:fallback;src:url("./revicons.woff") format('woff'),url("./revicons.ttf") format('ttf'),url("./revicons.eot") format('ttf')}.react-multi-carousel-list{display:flex;align-items:center;overflow:hidden;position:relative}.react-multi-carousel-track{list-style:none;padding:0;margin:0;display:flex;flex-direction:row;position:relative;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,transition}.react-multiple-carousel__arrow{position:absolute;outline:0;transition:all .5s;border-radius:35px;z-index:1000;border:0;background:rgba(0,0,0,0.5);min-width:43px;min-height:43px;opacity:1;cursor:pointer}.react-multiple-carousel__arrow:hover{background:rgba(0,0,0,0.8)}.react-multiple-carousel__arrow::before{font-size:20px;color:#fff;display:block;font-family:revicons;text-align:center;z-index:2;position:relative}.react-multiple-carousel__arrow--left{left:calc(4% + 1px)}.react-multiple-carousel__arrow--left::before{content:"\e824"}.react-multiple-carousel__arrow--right{right:calc(4% + 1px)}.react-multiple-carousel__arrow--right::before{content:"\e825"}.react-multi-carousel-dot-list{position:absolute;bottom:0;display:flex;left:0;right:0;justify-content:center;margin:auto;padding:0;margin:0;list-style:none;text-align:center}.react-multi-carousel-dot button{display:inline-block;width:12px;height:12px;border-radius:50%;opacity:1;padding:5px 5px 5px 5px;box-shadow:none;transition:background .5s;border-width:2px;border-style:solid;border-color:grey;padding:0;margin:0;margin-right:6px;outline:0;cursor:pointer}.react-multi-carousel-dot button:hover:active{background:#080808}.react-multi-carousel-dot--active button{background:#080808}.react-multi-carousel-item{transform-style:preserve-3d;backface-visibility:hidden}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.react-multi-carousel-item{flex-shrink:0 !important}.react-multi-carousel-track{overflow:visible !important}} + + position: relative; + color: ${props => props.theme.color}; + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "footer footer" "nav content"; + align-items: center; + + @media(min-width: 768px) { + width: 100vw; + grid-template-columns: 15% 41% 41%; + grid-template-areas: "nav content footer"; + } + + @media(min-width: 1200px) { + grid-template-columns: 8% 37% 30%; + } + + .react-multi-carousel-list { + background: ${props => props.theme.background}; + grid-area: content; + min-height: 18vh; + padding: 0 var(--tiny); + + img { + width: ${props => props.theme.imageWidth}; + max-width: 100%; + border-radius: ${props => props.theme.borderRadius}; + } + } + + .buttons { + grid-area: nav; + background: ${props => props.theme.background}; + min-height: 18vh; + padding: 0 var(--tiny); + display: flex; + align-items: inherit; + + button { + background-color: transparent; + border: none; + outline: none; + width: 48px; + height: 48px; + + :first-child { + border-right: 1px solid ${props => props.theme.color}; + background: url('${props => props.theme.buttonLeft}') no-repeat; + background-position: 0% 40%; + } + + :last-child { + background: url('${props => props.theme.buttonRight}') no-repeat; + background-position: 100% 40%; + } + } + } +` + +SliderContainer.defaultProps = { + theme: { + background: 'var(--black)', + color: 'var(--light-gray)', + borderRadius: '0', + buttonLeft: 'img/arrow-left.svg', + buttonRight: 'img/arrow-right.svg', + imageWidth: 'var(--huge)' + } +} + +const theme = { + background: 'var(--light-gray)', + color: 'var(--black)', + borderRadius: '100%', + buttonLeft:'img/arrow-left-dark.svg', + buttonRight: 'img/arrow-right-dark.svg', + imageWidth: '3.5rem' +} + +const responsive = { + desktop: { + breakpoint: { max: 3000, min: 1024 }, + items: 5 + }, + tablet: { + breakpoint: { max: 1024, min: 464 }, + items: 4, + }, + mobile: { + breakpoint: { max: 520, min: 0 }, + items: 3, + }, +} + +const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => { + const { carouselState: { currentSlide } } = rest; + return ( +
    +
    + ); +}; + +const Slider = (props) => { + if(!props.themed) { + return ( + + }> +
    sticker-mule
    +
    sticker-mule
    +
    sticker-mule
    +
    sticker-mule
    +
    sticker-mule
    +     + +     + ) + } return ( + + + }> +
    blaine
    +
    blaine
    +
    blaine
    +
    blaine
    +
    blaine
    +     +     +     + ) +} + +export default Slider; \ No newline at end of file diff --git a/src/theme/components/socials.js b/src/theme/components/socials.js new file mode 100644 index 0000000..2ee38d1 --- /dev/null +++ b/src/theme/components/socials.js @@ -0,0 +1,33 @@ +import React from 'react'; +import styled from 'styled-components'; + +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const SocialsContainer = styled.ul` + display: none; + + @media(min-width: 768px) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + + > li { + position: relative; + margin: var(--tiny); + } + a { + cursor: pointer; + } + } +` +const Socials = ({ props }) => { + return ( + +
  • twitter
    • +
  • medium
    • +     + ) +} + +export default Socials; \ No newline at end of file diff --git a/src/theme/components/source.js b/src/theme/components/source.js new file mode 100644 index 0000000..323ea04 --- /dev/null +++ b/src/theme/components/source.js @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; + +const SourceContainer = styled.div` + font-size: 14px; + line-height: 1.2; + background: var(--light-gray); + padding: var(--tiny) 0; +` + +const Source = (props) => { + return ( + 
    {`
+    const { src, dest, parallel } = require('gulp');
+    const pug = require('gulp-pug');
+    const less = require('gulp-less');
+    const minifyCSS = require('gulp-csso');
+    const concat = require('gulp-concat');
+
+    function html() {
+      return src('client/templates/*.pug')
+        .pipe(pug())
+        .pipe(dest('build/html'))
+    }
+
+    function css() {
+      return src('client/templates/*.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(dest('build/css'))
+    }
+
+    function js() {
+      return src('client/javascript/*.js', { sourcemaps: true })
+        .pipe(concat('app.min.js'))
+        .pipe(dest('build/js', { sourcemaps: true }))
+    }
+
+    exports.js = js;
+    exports.css = css;
+    exports.html = html;
+    exports.default = parallel(html, css, js);
+    `}
+
    + ) +} + +export default Source; \ No newline at end of file diff --git a/src/theme/sections/backer.js b/src/theme/sections/backer.js new file mode 100644 index 0000000..76a7215 --- /dev/null +++ b/src/theme/sections/backer.js @@ -0,0 +1,49 @@ +import React from 'react'; +import styled from 'styled-components'; +import Button from '../components/button'; + +const TierContainer = styled.div` + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 0.5fr; + + p { + margin: 0; + } + + @media(min-width: 768px) { + grid-template-rows: 1fr 1.5fr 0.5fr; + + p { + margin: var(--small) 0; + } + } +` + +const Heading = styled.div` + display: flex; + + img { + margin-right: var(--tiny); + } + + h4 { + color: var(--red); + align-self: center; + } +` + +const Tier = (props) => { + return ( + + + {props.title} +

    {props.title}

    +     +

    {props.text}

    +