diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 777a6e8..0000000 --- a/.babelrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "presets": [ - "react", - "es2015", - "stage-1" - ], - "plugins": [ - "add-module-exports" - ] -} diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 0000000..34f5224 --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,40 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + loose: true, + modules: false, + useBuiltIns: 'usage', + shippedProposals: true, + targets: { + browsers: ['>0.25%', 'not dead'], + }, + }, + ], + [ + '@babel/preset-react', + { + useBuiltIns: true, + pragma: 'React.createElement', + }, + ], + ], + plugins: [ + [ + '@babel/plugin-proposal-class-properties', + { + loose: true, + }, + ], + '@babel/plugin-syntax-dynamic-import', + 'babel-plugin-macros', + [ + '@babel/plugin-transform-runtime', + { + helpers: true, + regenerator: true, + }, + ], + ], +}; diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..e61caed --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +.cache +node_modules +public +!.eslintrc.js +!.babelrc.js diff --git a/.eslintrc.js b/.eslintrc.js index 8b7cc83..f2cee2b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,25 +8,7 @@ module.exports = { }, plugins: ['prettier'], rules: { - 'class-methods-use-this': 'off', - 'consistent-return': 'off', - 'no-param-reassign': 'off', - 'no-return-assign': 'off', - 'prettier/prettier': [ - 'error', - { - trailingComma: 'es5', - singleQuote: true, - }, - ], - 'react/prop-types': 'off', - 'react/forbid-prop-types': 'off', - 'react/jsx-wrap-multilines': 'off', - 'react/jsx-indent': 'off', - 'react/no-multi-comp': 'off', - 'jsx-a11y/anchor-is-valid': 'off', - 'jsx-a11y/href-no-hash': 'off', - 'array-callback-return': 'off', + 'react/prop-types': ['warn'], }, globals: { graphql: true, diff --git a/gatsby-config.js b/gatsby-config.js index 4efb921..8a4c8f3 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -4,7 +4,6 @@ module.exports = { siteUrl: 'https://bottender.js.org', }, plugins: [ - 'gatsby-plugin-react-next', { resolve: 'gatsby-source-filesystem', options: { diff --git a/gatsby-node.js b/gatsby-node.js index 96d62de..fe16f5f 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -75,7 +75,7 @@ exports.createPages = async ({ graphql, boundActionCreators }) => { throw Error(allMarkdown.errors); } - allMarkdown.data.allMarkdownRemark.edges.map(({ node }) => { + allMarkdown.data.allMarkdownRemark.edges.forEach(({ node }) => { const { slug } = node.fields; const slugWithoutSlash = slug.replace(/\/$/, ``); createPage({ @@ -101,7 +101,7 @@ exports.createPages = async ({ graphql, boundActionCreators }) => { { allMarkdownRemark( limit: 1 - filter: { id: { regex: "/blog/" } } + filter: { fileAbsolutePath: { regex: "/blog/" } } sort: { fields: [frontmatter___date], order: DESC } ) { edges { diff --git a/package.json b/package.json index 771db6c..7cd44cb 100644 --- a/package.json +++ b/package.json @@ -6,64 +6,73 @@ "version": "0.0.1", "scripts": { "build": "gatsby build", - "precommit": "lint-staged", "deploy": "gatsby build && cp CNAME public/ && gh-pages -d public -b master -m 'Auto-generated commit [ci skip]'", "dev": "gatsby develop", "dev:mobile": "gatsby develop -H 0.0.0.0", "lint": "npm run lint:js && npm run lint:css", "lint:css": "stylelint 'src/**/*.js'", "lint:fix": "npm run lint:js -- --fix", - "lint:js": "eslint src", + "lint:js": "eslint .", "lint:staged": "lint-staged", "reset": "rimraf ./.cache", "serve": "gatsby serve", "prettier:content": "prettier content/**/*.md --write" }, "dependencies": { - "gatsby": "^1.9.273", - "gatsby-link": "^1.6.45", - "gatsby-plugin-glamor": "^1.6.13", - "gatsby-plugin-google-analytics": "^1.0.31", - "gatsby-plugin-offline": "^1.0.18", - "gatsby-plugin-react-helmet": "^2.0.11", - "gatsby-plugin-react-next": "^1.0.11", - "gatsby-plugin-sitemap": "^1.2.25", - "gatsby-plugin-styled-components": "^2.0.11", - "gatsby-plugin-typography": "^1.7.19", - "gatsby-remark-autolink-headers": "^1.4.19", - "gatsby-remark-images": "^1.5.67", - "gatsby-remark-prismjs": "^1.2.20", - "gatsby-source-filesystem": "^1.5.39", - "gatsby-transformer-remark": "^1.7.44", + "babel-plugin-styled-components": "^1.8.0", + "gatsby": "^2.0.17", + "gatsby-plugin-glamor": "^2.0.5", + "gatsby-plugin-google-analytics": "^2.0.6", + "gatsby-plugin-offline": "^2.0.5", + "gatsby-plugin-react-helmet": "^3.0.0", + "gatsby-plugin-sharp": "^2.0.5", + "gatsby-plugin-sitemap": "^2.0.1", + "gatsby-plugin-styled-components": "^3.0.0", + "gatsby-plugin-typography": "^2.2.0", + "gatsby-remark-autolink-headers": "^2.0.6", + "gatsby-remark-images": "^2.0.3", + "gatsby-remark-prismjs": "^3.0.1", + "gatsby-source-filesystem": "^2.0.1", + "gatsby-transformer-remark": "^2.1.6", + "glamor": "^2.20.40", "glamorous": "^4.13.1", - "lodash": "^4.17.10", - "react": "^16.4.1", - "react-burger-menu": "^2.5.2", + "lodash": "^4.17.11", + "prismjs": "^1.15.0", + "react": "^16.5.2", + "react-burger-menu": "^2.5.3", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0", "react-timeago": "^4.1.9", - "styled-components": "^3.3.3", - "styled-normalize": "^8.0.0", + "react-typography": "^0.16.13", + "styled-components": "^3.4.9", + "styled-normalize": "^8.0.1", "typography": "^0.16.17", "typography-theme-kirkham": "^0.16.3" }, "devDependencies": { - "eslint": "^4.19.1", - "eslint-config-prettier": "^2.9.0", - "eslint-config-yoctol": "^0.16.1", - "eslint-plugin-import": "^2.13.0", - "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-prettier": "^2.6.1", - "eslint-plugin-react": "^7.10.0", - "gh-pages": "^1.2.0", - "husky": "^0.14.3", - "lint-staged": "^7.2.0", - "prettier": "^1.13.7", - "prettier-package-json": "^1.6.0", + "eslint": "^5.6.1", + "eslint-config-prettier": "^3.1.0", + "eslint-config-yoctol": "^0.18.2", + "eslint-plugin-import": "^2.14.0", + "eslint-plugin-jsx-a11y": "^6.1.1", + "eslint-plugin-prettier": "^3.0.0", + "eslint-plugin-react": "^7.11.1", + "eslint-plugin-sort-imports-es6-autofix": "^0.3.0", + "gh-pages": "^2.0.0", + "husky": "^1.1.0", + "lint-staged": "^7.3.0", + "prettier": "^1.14.3", + "prettier-package-json": "^2.0.1", "rimraf": "^2.6.2", - "stylelint": "^9.3.0", + "stylelint": "^9.6.0", "stylelint-config-styled-components": "^0.1.1", - "stylelint-config-yoctol": "^1.0.2", - "stylelint-processor-styled-components": "^1.3.1" + "stylelint-config-yoctol": "^1.1.1", + "stylelint-processor-styled-components": "^1.4.0" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } }, "lint-staged": { "*.js": [ diff --git a/src/components/Footer.js b/src/components/Footer.js index c083c31..a876979 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,9 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { rhythm } from '../utils/typography'; import github from '../assets/github.svg'; import media from '../css/media'; +import { rhythm } from '../utils/typography'; const Wrapper = styled.footer` display: flex; @@ -73,7 +73,8 @@ const Footer = () => ( © 2017-Present Yoctol Info., Inc. All Rights Reserved. - © 2017-Present Yoctol Info., Inc.
All Rights Reserved. + © 2017-Present Yoctol Info., Inc.
+ All Rights Reserved. diff --git a/src/components/Header.js b/src/components/Header.js index 87f1af5..cb656cc 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -3,7 +3,8 @@ import styled from 'styled-components'; import logo from '../assets/bottender.svg'; import { rhythm } from '../utils/typography'; -import Nav from '../components/Nav'; + +import Nav from './Nav'; const Wrapper = styled.header` display: flex; diff --git a/src/components/ListItem.js b/src/components/ListItem.js index fba9543..ead4cd7 100644 --- a/src/components/ListItem.js +++ b/src/components/ListItem.js @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; const Wrapper = styled(Link)` display: flex; diff --git a/src/components/ListSection.js b/src/components/ListSection.js index 82acc38..6e1c241 100644 --- a/src/components/ListSection.js +++ b/src/components/ListSection.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import styled from 'styled-components'; import get from 'lodash/get'; +import styled from 'styled-components'; import arrow from '../assets/iconArrow.svg'; @@ -47,34 +47,38 @@ class ListSection extends Component { constructor() { super(); this.state = { - isExpended: false, + isExpanded: false, }; this.toggleAccordion = this.toggleAccordion.bind(this); } componentWillMount() { + const { selectedItem, list } = this.props; + this.setState(() => ({ - isExpended: - this.props.selectedItem !== undefined || this.props.list.title === ' ', + isExpanded: selectedItem !== undefined || list.title === ' ', })); } componentWillReceiveProps() { + const { selectedItem, list } = this.props; + this.setState(() => ({ - isExpended: - this.props.selectedItem !== undefined || this.props.list.title === ' ', + isExpanded: selectedItem !== undefined || list.title === ' ', })); } toggleAccordion() { + const { list } = this.props; + this.setState(state => ({ - isExpended: !state.isExpended || this.props.list.title === ' ', + isExpanded: !state.isExpanded || list.title === ' ', })); } render() { const { list, toggleMenu, selectedItem, reverse } = this.props; - const { isExpended } = this.state; + const { isExpanded } = this.state; let items = [...list.items]; if (reverse) { @@ -85,11 +89,11 @@ class ListSection extends Component { {list.title} - + - + {items.map(item => ( ({ isOpen: !state.isOpen, })); diff --git a/src/components/Nav.js b/src/components/Nav.js index 7943f0a..9d2a449 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -3,8 +3,8 @@ import styled from 'styled-components'; import media from '../css/media'; -import NavItem from './NavItem'; import MobileMenu from './MobileMenu'; +import NavItem from './NavItem'; const Container = styled.nav` display: flex; diff --git a/src/components/NavItem.js b/src/components/NavItem.js index 1172b21..99247c9 100644 --- a/src/components/NavItem.js +++ b/src/components/NavItem.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import styled from 'styled-components'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; import media from '../css/media'; diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index e7edc59..d118c62 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import media from '../css/media'; import icon from '../assets/search.svg'; +import media from '../css/media'; const Wrapper = styled.div` display: flex; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 95eaef5..d733457 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import styled from 'styled-components'; -import DocsList from '../../content/docs/nav.yaml'; import BlogList from '../../content/blog/nav.yaml'; +import DocsList from '../../content/docs/nav.yaml'; import ListSection from './ListSection'; diff --git a/src/components/home/CTASection.js b/src/components/home/CTASection.js index 9038c9a..f31181f 100644 --- a/src/components/home/CTASection.js +++ b/src/components/home/CTASection.js @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { rhythm } from '../../utils/typography'; import media from '../../css/media'; +import { rhythm } from '../../utils/typography'; import GetStartedLink from './GetStartedLink'; diff --git a/src/components/home/ExhibitionItem.js b/src/components/home/ExhibitionItem.js index b8e7cd3..a8061ab 100644 --- a/src/components/home/ExhibitionItem.js +++ b/src/components/home/ExhibitionItem.js @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; import media from '../../css/media'; import { rhythm } from '../../utils/typography'; diff --git a/src/components/home/ExhibitionSection.js b/src/components/home/ExhibitionSection.js index 50aaa59..cb6bd74 100644 --- a/src/components/home/ExhibitionSection.js +++ b/src/components/home/ExhibitionSection.js @@ -1,9 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; -import { rhythm } from '../../utils/typography'; import media from '../../css/media'; +import { rhythm } from '../../utils/typography'; import ExhibitionItem from './ExhibitionItem'; diff --git a/src/components/home/GetStartedLink.js b/src/components/home/GetStartedLink.js index 2aeb02f..51d80dc 100644 --- a/src/components/home/GetStartedLink.js +++ b/src/components/home/GetStartedLink.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Link from 'gatsby-link'; +import { Link } from 'gatsby'; import media from '../../css/media'; diff --git a/src/components/home/IntroductionSection.js b/src/components/home/IntroductionSection.js index 526d833..9518520 100644 --- a/src/components/home/IntroductionSection.js +++ b/src/components/home/IntroductionSection.js @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { rhythm } from '../../utils/typography'; import media from '../../css/media'; +import { rhythm } from '../../utils/typography'; import IntroductionItem from './IntroductionItem'; diff --git a/src/components/home/LandscapeSection.js b/src/components/home/LandscapeSection.js index e024f2d..eff04b3 100644 --- a/src/components/home/LandscapeSection.js +++ b/src/components/home/LandscapeSection.js @@ -1,9 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import logo from '../../assets/logo.svg'; import landscape from '../../assets/landscape.svg'; import landscapeMobile from '../../assets/landscape-mobile.svg'; +import logo from '../../assets/logo.svg'; import media from '../../css/media'; import GetStartedLink from './GetStartedLink'; @@ -74,7 +74,9 @@ const LandscapeSection = () => ( logo BOTTENDER - MAKE BOTS YOUR WAY,
FAST AND FLEXIBLE + MAKE BOTS YOUR WAY, +
+ FAST AND FLEXIBLE Get Started! diff --git a/src/layouts/head.js b/src/components/layout/head.js similarity index 100% rename from src/layouts/head.js rename to src/components/layout/head.js diff --git a/src/components/layout/index.js b/src/components/layout/index.js new file mode 100644 index 0000000..1ce2780 --- /dev/null +++ b/src/components/layout/index.js @@ -0,0 +1,79 @@ +import Helmet from 'react-helmet'; +import React from 'react'; +import styled from 'styled-components'; +import { StaticQuery, graphql } from 'gatsby'; + +import Footer from '../Footer'; +import Header from '../Header'; +import baseStyles from '../../css'; + +import { link, meta } from './head'; + +const Wrapper = styled.div` + margin: 0 auto; + padding-top: 60px; +`; + +export const query = graphql` + query LayoutQuery { + site { + siteMetadata { + title + } + } + allMarkdownRemark( + limit: 1 + filter: { fields: { slug: { regex: "/blog/" } } } + sort: { fields: [frontmatter___date], order: DESC } + ) { + edges { + node { + fields { + slug + } + } + } + } + } +`; + +export default ({ children, location }) => ( + { + baseStyles(); + const title = `${ + data.site.siteMetadata.title + } | Make Bots Your Way, Fast and Flexible`; + const { pathname } = location; + const newestBlogPath = data.allMarkdownRemark.edges[0].node.fields.slug; + + return ( + + + + +
+ + {children} + +