diff --git a/website/.babelrc b/website/.babelrc deleted file mode 100644 index b5d91ec8..00000000 --- a/website/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["react", "es2015", "stage-1"], - "plugins": ["add-module-exports"] -} diff --git a/website/.eslintrc b/website/.eslintrc deleted file mode 100644 index 362eb8bf..00000000 --- a/website/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "globals": { - "graphql": true - } -} diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js index 48e480dd..54c19635 100644 --- a/website/gatsby-browser.js +++ b/website/gatsby-browser.js @@ -1,7 +1,6 @@ -import SmoothScroll from 'smooth-scroll'; - // Make scroll behavior of internal links smooth exports.onClientEntry = () => { + const SmoothScroll = require('smooth-scroll'); new SmoothScroll('a[href*="#"]', { offset() { return document.querySelector('#header').offsetHeight; diff --git a/website/gatsby-config.js b/website/gatsby-config.js index 4f57c791..6b849846 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -1,23 +1,5 @@ const pkg = require('./package.json'); -const neatgrid = require('postcss-neat'); -const nestedcss = require('postcss-nested'); -const colorfunctions = require('postcss-colour-functions'); -const hdBackgrounds = require('postcss-at2x'); -const cssextend = require('postcss-simple-extend'); -const cssvars = require('postcss-simple-vars-async'); - -const styleVariables = require('./src/theme'); - -const postCssPlugins = [ - neatgrid(), - nestedcss(), - colorfunctions(), - hdBackgrounds(), - cssextend(), - cssvars({ variables: styleVariables }), -]; - module.exports = { siteMetadata: { title: 'Netlify CMS | Open-Source Content Management System', @@ -71,14 +53,8 @@ module.exports = { ] }, }, - { - resolve: 'gatsby-plugin-postcss-sass', - options: { - postCssPlugins, - }, - }, + 'gatsby-plugin-postcss', 'gatsby-plugin-react-helmet', - 'gatsby-plugin-react-next', 'gatsby-plugin-catch-links', { resolve: `gatsby-plugin-manifest`, diff --git a/website/package.json b/website/package.json index 8a50a6be..bc361362 100755 --- a/website/package.json +++ b/website/package.json @@ -15,32 +15,34 @@ "license": "MIT", "dependencies": { "classnames": "^2.2.5", - "eslint": "^3.1.1", - "eslint-plugin-import": "^1.11.1", - "gatsby": "^1.9.270", - "gatsby-plugin-catch-links": "^1.0.22", - "gatsby-plugin-manifest": "^1.0.21", - "gatsby-plugin-postcss-sass": "^1.0.20", - "gatsby-plugin-react-helmet": "^2.0.11", - "gatsby-plugin-react-next": "^1.0.11", - "gatsby-remark-autolink-headers": "^1.4.18", - "gatsby-remark-prismjs": "^2.0.2", - "gatsby-source-filesystem": "^1.5.35", - "gatsby-transformer-json": "^1.0.17", - "gatsby-transformer-remark": "^1.7.42", - "gatsby-transformer-yaml": "^1.5.16", + "gatsby": "next", + "gatsby-plugin-catch-links": "next", + "gatsby-plugin-manifest": "next", + "gatsby-plugin-postcss": "^1.0.0", + "gatsby-plugin-react-helmet": "next", + "gatsby-remark-autolink-headers": "next", + "gatsby-remark-prismjs": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-json": "next", + "gatsby-transformer-remark": "next", + "gatsby-transformer-yaml": "next", "postcss-at2x": "^2.0.0", - "postcss-colour-functions": "^1.5.1", "postcss-cssnext": "^2.7.0", "postcss-neat": "^2.5.2", "postcss-nested": "^1.0.0", "postcss-simple-extend": "^1.0.0", "postcss-simple-vars-async": "^1.2.1", "prismjs": "^1.14.0", + "react": "^16.4.2", + "react-dom": "^16.4.2", "react-helmet": "^5.2.0", "react-markdown": "^3.3.2", "react-sidecar": "^0.1.1", "smooth-scroll": "^14.2.0" }, + "devDependencies": { + "eslint": "^3.1.1", + "eslint-plugin-import": "^1.11.1" + }, "private": true } diff --git a/website/postcss.config.js b/website/postcss.config.js new file mode 100644 index 00000000..e8bdcc6f --- /dev/null +++ b/website/postcss.config.js @@ -0,0 +1,19 @@ +const neatgrid = require('postcss-neat'); +const nestedcss = require('postcss-nested'); +// const colorfunctions = require('postcss-colour-functions'); +const hdBackgrounds = require('postcss-at2x'); +const cssextend = require('postcss-simple-extend'); +const cssvars = require('postcss-simple-vars-async'); + +const styleVariables = require('./src/theme'); + +module.exports = () => ({ + plugins: [ + neatgrid(), + nestedcss(), + // colorfunctions(), + hdBackgrounds(), + cssextend(), + cssvars({ variables: styleVariables }), + ], +}); diff --git a/website/src/components/header.js b/website/src/components/header.js index 64916a64..3853d0fe 100644 --- a/website/src/components/header.js +++ b/website/src/components/header.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import Link from 'gatsby-link'; import classnames from 'classnames'; +import { Location } from '@reach/router'; import DocSearch from './docsearch'; @@ -33,56 +34,61 @@ class Header extends Component { }; render() { - const { location } = this.props; const { scrolled } = this.state; - const isDocs = location.pathname.indexOf('docs') !== -1; - const isBlog = location.pathname.indexOf('blog') !== -1; - return ( - + + {({ location }) => { + const isDocs = location.pathname.indexOf('docs') !== -1; + const isBlog = location.pathname.indexOf('blog') !== -1; + + return ( + + ); + }} + ); } } diff --git a/website/src/components/layout.js b/website/src/components/layout.js new file mode 100644 index 00000000..427afd4a --- /dev/null +++ b/website/src/components/layout.js @@ -0,0 +1,77 @@ +import React, { Fragment } from 'react'; +import Helmet from 'react-helmet'; +import classnames from 'classnames'; +import { graphql, StaticQuery } from 'gatsby'; + +import Header from './header'; +import Footer from './footer'; + +import '../css/imports/base.css'; +import '../css/imports/utilities.css'; +import '../css/imports/gitter.css'; + +const Layout = ({ children }) => { + return ( + + {data => { + const { title, description } = data.site.siteMetadata; + const notifs = data.notifs.childDataYaml.notifications.filter(notif => notif.published); + + return ( + + + + + {notifs.map((node, i) => ( + + {node.message} + + ))} +
+ {children} +