From e8ff05cea893b909556ca171ad7c5d7e14710d40 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 1 Oct 2016 12:14:30 -0700 Subject: [PATCH 01/28] Initial commit for conversion to Gatsby As of this commit, you can't run this locally as it's relying on not yet released changes to Gatsby. I've published the site however to https://webpack-gatsby.netlify.com/ --- .babelrc | 5 +- .gitignore | 5 + bootstrap.js | 14 --- components/Container.jsx | 18 +++- components/Contributors.jsx | 39 +++---- components/Footer.jsx | 18 ++-- components/Navigation.jsx | 9 +- components/Page.jsx | 30 ------ components/Sidebar.jsx | 67 +++++++++--- content/index.md | 5 - gatsby-config.js | 8 ++ gatsby-node.js | 63 ++++++++++++ html.js | 34 +++++++ layouts/default.js | 27 +++++ package.json | 92 ++++++----------- page-templates/markdown-template.js | 92 +++++++++++++++++ {content => pages}/analyze.md | 0 {content => pages}/api/cli.md | 0 {content => pages}/api/index.md | 0 {content => pages}/api/loaders.md | 0 {content => pages}/api/module-resolution.md | 0 {content => pages}/api/node.md | 0 {content => pages}/api/plugins.md | 0 {content => pages}/changelog.md | 0 .../concepts/compared-to-other-systems.md | 0 {content => pages}/concepts/configuration.md | 0 .../concepts/dependency-graph.md | 0 {content => pages}/concepts/entry-points.md | 41 ++++---- {content => pages}/concepts/index.md | 95 +++++++++--------- {content => pages}/concepts/loaders.md | 0 {content => pages}/concepts/modules.md | 0 {content => pages}/concepts/output.md | 4 +- {content => pages}/concepts/plugins.md | 0 {content => pages}/concepts/targets.md | 0 .../configuration/dev-server.md | 0 {content => pages}/configuration/devtool.md | 0 .../configuration/entry-context.md | 0 .../configuration/external-configs.md | 0 {content => pages}/configuration/externals.md | 0 {content => pages}/configuration/index.md | 0 {content => pages}/configuration/module.md | 0 {content => pages}/configuration/node.md | 0 .../configuration/other-options.md | 0 {content => pages}/configuration/output.md | 0 .../configuration/passing-a-config.md | 0 {content => pages}/configuration/plugins.md | 0 {content => pages}/configuration/resolve.md | 0 {content => pages}/configuration/target.md | 0 {content => pages}/configuration/watch.md | 0 {content => pages}/contribute.md | 2 +- {content => pages}/get-started.md | 0 {content => pages}/how-to/author-libraries.md | 0 {content => pages}/how-to/cache.md | 0 .../how-to/develop-using-vagrant.md | 0 {content => pages}/how-to/develop.md | 0 .../how-to/generate-production-build.md | 0 .../how-to/handle-compatibility.md | 0 .../how-to/handle-dependencies.md | 0 .../how-to/hot-module-reload.md | 0 .../how-to/improve-build-performance.md | 0 {content => pages}/how-to/index.md | 0 {content => pages}/how-to/install-webpack.md | 0 .../how-to/set-up-hmr-with-react.md | 0 {content => pages}/how-to/shim.md | 0 {content => pages}/how-to/split-code.md | 0 .../how-to/upgrade-from-webpack-1.md | 0 {content => pages}/how-to/use-with-docker.md | 0 .../how-to/use-with-third-party-tools.md | 0 pages/index.js | 51 ++++++++++ {content => pages}/license.md | 0 {content => pages}/organization.md | 0 {content => pages}/writers-guide.md | 0 styles/_markdown.scss | 88 ++-------------- styles/components/_footer.scss | 15 ++- styles/components/_navigation.scss | 4 +- styles/components/_page.scss | 13 +-- styles/components/_sidebar.scss | 10 +- styles/geomanist/.DS_Store | Bin 0 -> 6148 bytes styles/geomanist/stylesheet.css | 11 ++ styles/index.scss | 14 +-- styles/reset.css | 4 - utilities/markdown.js | 2 +- utilities/typography.js | 62 ++++++++++++ 83 files changed, 585 insertions(+), 357 deletions(-) delete mode 100644 bootstrap.js delete mode 100644 components/Page.jsx delete mode 100644 content/index.md create mode 100644 gatsby-config.js create mode 100644 gatsby-node.js create mode 100644 html.js create mode 100644 layouts/default.js create mode 100644 page-templates/markdown-template.js rename {content => pages}/analyze.md (100%) rename {content => pages}/api/cli.md (100%) rename {content => pages}/api/index.md (100%) rename {content => pages}/api/loaders.md (100%) rename {content => pages}/api/module-resolution.md (100%) rename {content => pages}/api/node.md (100%) rename {content => pages}/api/plugins.md (100%) rename {content => pages}/changelog.md (100%) rename {content => pages}/concepts/compared-to-other-systems.md (100%) rename {content => pages}/concepts/configuration.md (100%) rename {content => pages}/concepts/dependency-graph.md (100%) rename {content => pages}/concepts/entry-points.md (91%) rename {content => pages}/concepts/index.md (79%) rename {content => pages}/concepts/loaders.md (100%) rename {content => pages}/concepts/modules.md (100%) rename {content => pages}/concepts/output.md (99%) rename {content => pages}/concepts/plugins.md (100%) rename {content => pages}/concepts/targets.md (100%) rename {content => pages}/configuration/dev-server.md (100%) rename {content => pages}/configuration/devtool.md (100%) rename {content => pages}/configuration/entry-context.md (100%) rename {content => pages}/configuration/external-configs.md (100%) rename {content => pages}/configuration/externals.md (100%) rename {content => pages}/configuration/index.md (100%) rename {content => pages}/configuration/module.md (100%) rename {content => pages}/configuration/node.md (100%) rename {content => pages}/configuration/other-options.md (100%) rename {content => pages}/configuration/output.md (100%) rename {content => pages}/configuration/passing-a-config.md (100%) rename {content => pages}/configuration/plugins.md (100%) rename {content => pages}/configuration/resolve.md (100%) rename {content => pages}/configuration/target.md (100%) rename {content => pages}/configuration/watch.md (100%) rename {content => pages}/contribute.md (81%) rename {content => pages}/get-started.md (100%) rename {content => pages}/how-to/author-libraries.md (100%) rename {content => pages}/how-to/cache.md (100%) rename {content => pages}/how-to/develop-using-vagrant.md (100%) rename {content => pages}/how-to/develop.md (100%) rename {content => pages}/how-to/generate-production-build.md (100%) rename {content => pages}/how-to/handle-compatibility.md (100%) rename {content => pages}/how-to/handle-dependencies.md (100%) rename {content => pages}/how-to/hot-module-reload.md (100%) rename {content => pages}/how-to/improve-build-performance.md (100%) rename {content => pages}/how-to/index.md (100%) rename {content => pages}/how-to/install-webpack.md (100%) rename {content => pages}/how-to/set-up-hmr-with-react.md (100%) rename {content => pages}/how-to/shim.md (100%) rename {content => pages}/how-to/split-code.md (100%) rename {content => pages}/how-to/upgrade-from-webpack-1.md (100%) rename {content => pages}/how-to/use-with-docker.md (100%) rename {content => pages}/how-to/use-with-third-party-tools.md (100%) create mode 100644 pages/index.js rename {content => pages}/license.md (100%) rename {content => pages}/organization.md (100%) rename {content => pages}/writers-guide.md (100%) create mode 100644 styles/geomanist/.DS_Store create mode 100755 styles/geomanist/stylesheet.css delete mode 100644 styles/reset.css create mode 100644 utilities/typography.js diff --git a/.babelrc b/.babelrc index bd20dc179968..dbdad8731ecb 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,3 @@ { - "presets": [ - "es2015", - "react" - ] + "presets": ['es2015', 'stage-1', 'react'], } diff --git a/.gitignore b/.gitignore index 650789552a44..0b152cafcf03 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,8 @@ npm-debug.log build .antwar +.intermediate-representation/ +.netlify +styles/geomanist/geomanist-regular.woff +styles/geomanist/geomanist-regular.woff2 +public diff --git a/bootstrap.js b/bootstrap.js deleted file mode 100644 index 8254e651c1fd..000000000000 --- a/bootstrap.js +++ /dev/null @@ -1,14 +0,0 @@ -const antwar = require('antwar'); -const webpack = require('./webpack.config'); -const configuration = require('./antwar.config'); - -// Patch Babel env to make HMR switch work -process.env.BABEL_ENV = process.env.npm_lifecycle_event; - -antwar({ - configuration, - environment: process.env.npm_lifecycle_event, - webpack -}).catch(function (err) { - console.error(err); -}); diff --git a/components/Container.jsx b/components/Container.jsx index 193d7afa4eb5..80989763dc42 100644 --- a/components/Container.jsx +++ b/components/Container.jsx @@ -1,11 +1,19 @@ import React from 'react'; +import { rhythm } from 'utilities/typography' -export default props => { - let { className = '' } = props; - +export default ({ className, style, children }) => { + if (!className) { + className = '' + } return ( -
- { props.children } +
+ { children }
); }; diff --git a/components/Contributors.jsx b/components/Contributors.jsx index 5cbaa34df37c..f30b9b15825c 100644 --- a/components/Contributors.jsx +++ b/components/Contributors.jsx @@ -1,21 +1,26 @@ import React from 'react'; export default props => { - return ( -
-

Contributors:

-
- { - (props.contributors || []).map(contributor => ( - - - { contributor } - - )) - } + if (props.contributors) { + return ( +
+
+

Contributors:

+
+ { + (props.contributors || []).map(contributor => ( + + + { contributor } + + )) + } +
-
- ); -}; \ No newline at end of file + ); + } else { + return null + } +}; diff --git a/components/Footer.jsx b/components/Footer.jsx index 32d8254f1749..495631d321c2 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -8,21 +8,27 @@ export default props => {
- Get Started - Analyze - Contribute + Get Started + Analyze + Contribute
- +
Support - Changelog - License + Changelog + License
diff --git a/components/Navigation.jsx b/components/Navigation.jsx index b837a37e675a..65ee42322f1d 100644 --- a/components/Navigation.jsx +++ b/components/Navigation.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Link from './Link'; import Container from './Container'; import Logo from './Logo'; +import { rhythm, scale, options } from 'utilities/typography'; export default ({ home = '/', pages }) => (
@@ -17,7 +18,13 @@ export default ({ home = '/', pages }) => ( key={ `navigation__link${i}` } className="navigation__link" activeClassName="navigation__link--active" - to={ `/${link.url}` }> + to={ `/${link.url}` } + style={{ + ...scale(-1/5), + fontFamily: options.headerFontFamily.join(','), + marginLeft: rhythm(1), + }} + > { link.title } )) diff --git a/components/Page.jsx b/components/Page.jsx deleted file mode 100644 index 82d20deaabc2..000000000000 --- a/components/Page.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Link from './Link'; -import Container from './Container'; -import Sidebar from './Sidebar'; -import Contributors from './Contributors'; - -export default props => { - let { section, page } = props, - edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${page.url}.md`; - - return ( - - -
-

{ page.title }

- - - Edit this Page   - - - -
- -
- - -
- - ); -}; diff --git a/components/Sidebar.jsx b/components/Sidebar.jsx index 3e7ddd82de16..12a54f9da3f7 100644 --- a/components/Sidebar.jsx +++ b/components/Sidebar.jsx @@ -1,24 +1,59 @@ import React from 'react'; -import Link from './Link'; +import Link from 'react-router/lib/Link'; +import { rhythm, scale, options } from 'utilities/typography'; -const Sidebar = ({ sectionName, pages }) => ( - -); + return ( + + ) +}; const Item = ({ url, title }) => ( -
- { title } +
+ + { title } +
    {/* diff --git a/content/index.md b/content/index.md deleted file mode 100644 index 3478666a761e..000000000000 --- a/content/index.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Splash Content ---- - -Still debating what to do with this section. diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 000000000000..fead92feb9aa --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,8 @@ +const config = { + siteMetadata: { + title: 'Webpack', + }, + sources: `${__dirname}/pages/`, +} + +export default config diff --git a/gatsby-node.js b/gatsby-node.js new file mode 100644 index 000000000000..481bcfdcd6aa --- /dev/null +++ b/gatsby-node.js @@ -0,0 +1,63 @@ +import _ from 'lodash' +import path from 'path' +// Have to make requires explicit so use same copy of plugin as Gatsby itself... +var ExtractTextPlugin = require('gatsby/node_modules/extract-text-webpack-plugin'); + +exports.createPages = ({ graphql }) => ( + new Promise((resolve, reject) => { + const paths = [] + graphql(` + { + allMarkdown(first: 1000) { + edges { + node { + path + } + } + } + } + `) + .then((result) => { + if (result.errors) { + console.log(result.errors) + reject(result.errors) + } + + const articleComponent = path.resolve('./page-templates/markdown-template.js') + // Create article routes. + _.each(result.data.allMarkdown.edges, (edge) => { + paths.push({ + path: edge.node.path, // required + component: articleComponent, + }) + }) + + resolve(paths) + }) + }) +) + +exports.modifyWebpackConfig = function(config, env) { + console.log(env) + // Use style-loader for dev. + if (env === 'develop') { + config.loader('sass', { + test: /\.(sass|scss)/, + loaders: ['style', 'css', 'sass'], + }) + // Add ExtractTextPlugin loader when building css. + } else if (env === 'build-css') { + config.loader('sass', { + test: /\.(sass|scss)$/, + loader: ExtractTextPlugin.extract(['css?minimize', 'postcss', 'sass']), + }) + // Otherwise use a null-loader. + } else { + config.loader('sass', { + test: /\.(sass|scss)/, + loader: 'null', + }) + } + + return config +} diff --git a/html.js b/html.js new file mode 100644 index 000000000000..7c32df763981 --- /dev/null +++ b/html.js @@ -0,0 +1,34 @@ +import React from 'react' + +import HTMLScripts from 'html-scripts' +import HTMLStyles from 'html-styles' +import { GoogleFont, TypographyStyle } from 'react-typography' +import typography from './utilities/typography' +import get from 'lodash/get' + +module.exports = React.createClass({ + render () { + // TODO add react helmet rewind + return ( + + + Webpack + + + + + + + {this.props.headComponents} + + +
    + + + + ) + }, +}) diff --git a/layouts/default.js b/layouts/default.js new file mode 100644 index 000000000000..ad489de7cd7e --- /dev/null +++ b/layouts/default.js @@ -0,0 +1,27 @@ +import React from 'react'; +import Navigation from 'components/Navigation'; +import Sidecar from 'components/Sidecar'; +import Footer from 'components/Footer'; +import 'styles/index.scss' +import 'styles/icons.css' +import 'styles/geomanist/stylesheet.css' +import 'prismjs/themes/prism-coy.css' + +const pages = [ + { title: 'Concepts', url: 'concepts/' }, + { title: 'Configuration', url: 'configuration/' }, + { title: 'How to', url: 'how-to/' }, + { title: 'API', url: 'api/' }, + { title: 'Github', url: '//github.com/webpack/webpack.js.org' } +]; + +export default ({ children }) => { + return ( +
    + + + { children } +
    +
    + ); +}; diff --git a/package.json b/package.json index d08402efdf1c..a8a4dcec8e1a 100644 --- a/package.json +++ b/package.json @@ -1,80 +1,50 @@ { "name": "webpack.js.org", - "version": "0.0.0", - "private": true, "description": "The main site for all things Webpack.", - "homepage": "https://github.com/webpack/webpack.js.org", + "version": "0.0.0", "author": "Greg Venech", - "license": "ISC", - "main": "n/a", + "bugs": { + "url": "https://github.com/webpack/webpack.js.org/issues" + }, + "dependencies": { + "babel-plugin-transform-object-rest-spread": "^6.16.0", + "extract-text-webpack-plugin": "^1.0.1", + "gatsby": "^1.0.0-alpha.10", + "gh-pages": "^0.11.0", + "lodash": "^4.16.1", + "modularscale-sass": "^2.1.1", + "moment": "^2.14.1", + "node-sass": "^3.8.0", + "prismjs": "^1.5.1", + "react-typography": "^0.14.0", + "sass-loader": "^4.0.2", + "typography": "^0.14.0", + "typography-plugin-code": "^0.14.0", + "webpack-sources": "^0.1.2" + }, + "homepage": "https://github.com/webpack/webpack.js.org", "keywords": [ - "webpack", - "documentation", "build", - "tool" + "documentation", + "tool", + "webpack" ], + "license": "ISC", + "main": "n/a", + "private": true, "repository": { "type": "git", "url": "https://github.com/webpack/webpack.js.org.git" }, - "bugs": { - "url": "https://github.com/webpack/webpack.js.org/issues" - }, "scripts": { - "start": "node ./bootstrap.js", "build": "node ./bootstrap.js && npm run sitemap && echo webpack.js.org > build/CNAME", "deploy": "gh-pages -d build", "lint": "eslint . --ext .js --ext .jsx --ext .md", "markdownlint": "markdownlint --config ./.markdownlintrc **/*.md *.md ./content/**/*.md", - "sociallint": "alex ./**/*.md", - "test": "npm run sociallint && npm run markdownlint && npm run lint ", + "proselint": "cp .proselintrc ~/ && proselint", "sitemap": "cd build && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml", - "proselint": "cp .proselintrc ~/ && proselint" - }, - "devDependencies": { - "alex": "^3.1.0", - "antwar": "0.8.1-alpha.837c8039", - "antwar-helpers": "0.8.1-alpha.837c8039", - "antwar-prevnext-plugin": "0.8.1-alpha.837c8039", - "autoprefixer": "^6.3.7", - "babel-core": "^6.10.4", - "babel-eslint": "^6.1.2", - "babel-loader": "^6.2.4", - "babel-preset-es2015": "^6.9.0", - "babel-preset-react": "^6.11.1", - "css-loader": "^0.23.1", - "eslint": "3.0.1", - "eslint-loader": "^1.4.1", - "eslint-plugin-markdown": "^1.0.0-beta.2", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.9.0", - "gh-pages": "^0.11.0", - "html-webpack-plugin": "^2.22.0", - "json-loader": "^0.5.4", - "lodash": "^4.16.1", - "markdown-loader": "^0.1.7", - "markdownlint": "^0.2.0", - "markdownlint-cli": "^0.2.0", - "marked": "^0.3.5", - "modularscale-sass": "^2.1.1", - "moment": "^2.14.1", - "node-sass": "^3.8.0", - "postcss-loader": "^0.9.1", - "prism-languages": "^0.3.1", - "prismjs": "^1.5.1", - "raw-loader": "^0.5.1", - "sass-loader": "^4.0.0", - "sitemap-static": "^0.3.1", - "style-loader": "^0.13.1", - "url-loader": "^0.5.7", - "webpack": "^1.13.2", - "webpack-dev-server": "^1.16.1", - "webpack-merge": "^0.14.0", - "yaml-frontmatter-loader": "0.0.3" - }, - "dependencies": { - "react": "^15.2.1", - "react-dom": "^15.2.1", - "react-router": "^2.5.2" + "sociallint": "alex ./**/*.md", + "start": "node ./bootstrap.js", + "test": "npm run sociallint && npm run markdownlint && npm run lint " } } diff --git a/page-templates/markdown-template.js b/page-templates/markdown-template.js new file mode 100644 index 000000000000..e6bc900caa23 --- /dev/null +++ b/page-templates/markdown-template.js @@ -0,0 +1,92 @@ +import React from 'react' +import DocumentTitle from 'react-document-title' +import { Link } from 'react-router' +import get from 'lodash/get' +import { rhythm, scale } from 'utilities/typography' +import Container from 'components/Container'; +import Sidebar from 'components/Sidebar'; +import Contributors from 'components/Contributors'; + +class MarkdownTemplate extends React.Component { + render () { + const siteTitle = get(this.props, 'data.site.siteMetadata.title') + const title = get(this.props, 'data.markdown.frontmatter.title') + const body = get(this.props, 'data.markdown.bodyHTMLWebpack') + const contributors = get(this.props, 'data.markdown.frontmatter.contributors') + const path = get(this.props, 'data.markdown.path') + // TODO add file path to Markdown schema. + const edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${path}.md`; + + return ( + + + +
    +

    { title }

    + + + Edit this Page   + + + +
    + + +
    +     +     + ) + } +} + +export default MarkdownTemplate + +export const pageQuery = ` +query MarkdownTemplate($path: String!) { + site { + siteMetadata { + title + } + } + markdown(path: $path) { + path + bodyHTMLWebpack + frontmatter { + title + contributors + } + } + allMarkdown { + edges { + node { + path + frontmatter { + title + } + } + } + } +} +` diff --git a/content/analyze.md b/pages/analyze.md similarity index 100% rename from content/analyze.md rename to pages/analyze.md diff --git a/content/api/cli.md b/pages/api/cli.md similarity index 100% rename from content/api/cli.md rename to pages/api/cli.md diff --git a/content/api/index.md b/pages/api/index.md similarity index 100% rename from content/api/index.md rename to pages/api/index.md diff --git a/content/api/loaders.md b/pages/api/loaders.md similarity index 100% rename from content/api/loaders.md rename to pages/api/loaders.md diff --git a/content/api/module-resolution.md b/pages/api/module-resolution.md similarity index 100% rename from content/api/module-resolution.md rename to pages/api/module-resolution.md diff --git a/content/api/node.md b/pages/api/node.md similarity index 100% rename from content/api/node.md rename to pages/api/node.md diff --git a/content/api/plugins.md b/pages/api/plugins.md similarity index 100% rename from content/api/plugins.md rename to pages/api/plugins.md diff --git a/content/changelog.md b/pages/changelog.md similarity index 100% rename from content/changelog.md rename to pages/changelog.md diff --git a/content/concepts/compared-to-other-systems.md b/pages/concepts/compared-to-other-systems.md similarity index 100% rename from content/concepts/compared-to-other-systems.md rename to pages/concepts/compared-to-other-systems.md diff --git a/content/concepts/configuration.md b/pages/concepts/configuration.md similarity index 100% rename from content/concepts/configuration.md rename to pages/concepts/configuration.md diff --git a/content/concepts/dependency-graph.md b/pages/concepts/dependency-graph.md similarity index 100% rename from content/concepts/dependency-graph.md rename to pages/concepts/dependency-graph.md diff --git a/content/concepts/entry-points.md b/pages/concepts/entry-points.md similarity index 91% rename from content/concepts/entry-points.md rename to pages/concepts/entry-points.md index 42ec5bfc05a9..ea838afd6063 100644 --- a/content/concepts/entry-points.md +++ b/pages/concepts/entry-points.md @@ -12,25 +12,23 @@ Usage: `entry: string|Array` **webpack.config.js** ```javascript - module.exports = config; - - const config = { - entry: './path/to/my/entry/file.js' - }; +module.exports = config; +const config = { + entry: './path/to/my/entry/file.js' +}; ``` The single entry syntax for the `entry` property is a short hand for: ```javascript - module.exports = config; - - const config = { - entry: { - main: './path/to/my/entry/file.js' - } - }; +module.exports = config; +const config = { + entry: { + main: './path/to/my/entry/file.js' + } +}; ``` T> **What happens when you pass an array to `entry`?** Passing an array of file paths to the `entry` property creates what is known as a **"multi-main entry"**. This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk". @@ -44,14 +42,14 @@ Usage: `entry: {[entryChunkName: string]: string|Array}` **webpack.config.js** ```javascript - module.exports = config; - - const config = { - entry: { - app: './src/app.js', - vendors: './src/vendors.js' - } - }; +module.exports = config; + +const config = { + entry: { + app: './src/app.js', + vendors: './src/vendors.js' + } +}; ``` The object syntax is a more verbose, however scalable way of defining entry/entries in your application. @@ -105,6 +103,3 @@ const config = { - Use [`CommonsChunkPlugin`](../api/plugins/commonschunkplugin) to create bundles of shared application code between each page. Multi-page applications that reuse a lot of code/modules between entry points can greatly benefit from these techniques, as the amount of entry points increase. - Set up [long-term vendor-caching.](../how-to/cache) with the same plugin and techniques seen in the first example. - - - diff --git a/content/concepts/index.md b/pages/concepts/index.md similarity index 79% rename from content/concepts/index.md rename to pages/concepts/index.md index 9c6bd55ecf5e..f678c2f70a45 100644 --- a/content/concepts/index.md +++ b/pages/concepts/index.md @@ -19,12 +19,11 @@ The simplest example is seen below: **webpack.config.js** ```javascript - module.exports = config; - - const config = { - entry: './path/to/my/entry/file.js' - }; +module.exports = config; +const config = { + entry: './path/to/my/entry/file.js' +}; ``` There are multiple ways to declare your `entry` property that are specific to your applications needs. @@ -38,15 +37,15 @@ Once you've bundled all of your assets together, we still need to tell webpack * **webpack.config.js** ```javascript - module.exports = config; - - const config = { - entry: './path/to/my/entry/file.js', - output: { - filename: 'my-first-webpack.bundle.js', - path: './dist' - } - }; +module.exports = config; + +const config = { + entry: './path/to/my/entry/file.js', + output: { + filename: 'my-first-webpack.bundle.js', + path: './dist' + } +}; ``` In the example above, through the `output.filename` and `output.path` properties we are describing to webpack the name of our bundle, and where we want it to be emitted to. @@ -72,20 +71,20 @@ At a high level, they have two purposes in your webpack config. **webpack.config.js** ```javascript - module.exports = config; - - const config = { - entry: './path/to/my/entry/file.js', - output: { - filename: 'my-first-webpack.bundle.js', - path: './dist' - }, - module: { - loaders: [ - {test: /\.(js|jsx)$/, loader: 'babel-loader'} - ] - } - }; +module.exports = config; + +const config = { + entry: './path/to/my/entry/file.js', + output: { + filename: 'my-first-webpack.bundle.js', + path: './dist' + }, + module: { + loaders: [ + {test: /\.(js|jsx)$/, loader: 'babel-loader'} + ] + } +}; ``` In the configuration above we have defined our loader with its two required properties: `test`, and `loader`. It tells webpack's compiler the following: @@ -107,27 +106,27 @@ In order to use a plugin, you just need to `require()` it and add it to the `plu **webpack.config.js** ```javascript - const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm - const webpack = require('webpack'); //to access built-in plugins - - module.exports = config; - - const config = { - entry: './path/to/my/entry/file.js', - output: { - filename: 'my-first-webpack.bundle.js', - path: './dist' - }, - module: { - loaders: [ - {test: /\.(js|jsx)$/, loader: 'babel-loader'} - ] - }, - plugins: [ - new webpack.optimize.UglifyJsPlugin(), - new HtmlWebpackPlugin({template: './src/index.html'}) +const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm +const webpack = require('webpack'); //to access built-in plugins + +module.exports = config; + +const config = { + entry: './path/to/my/entry/file.js', + output: { + filename: 'my-first-webpack.bundle.js', + path: './dist' + }, + module: { + loaders: [ + {test: /\.(js|jsx)$/, loader: 'babel-loader'} ] - }; + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin(), + new HtmlWebpackPlugin({template: './src/index.html'}) + ] +}; ``` There are many plugins that webpack provides out of the box! Check out our [list of plugins](https://webpack.github.io/docs/list-of-plugins.html) for more information. diff --git a/content/concepts/loaders.md b/pages/concepts/loaders.md similarity index 100% rename from content/concepts/loaders.md rename to pages/concepts/loaders.md diff --git a/content/concepts/modules.md b/pages/concepts/modules.md similarity index 100% rename from content/concepts/modules.md rename to pages/concepts/modules.md diff --git a/content/concepts/output.md b/pages/concepts/output.md similarity index 99% rename from content/concepts/output.md rename to pages/concepts/output.md index c553f86b25f0..e090fe3e9b70 100644 --- a/content/concepts/output.md +++ b/pages/concepts/output.md @@ -29,7 +29,7 @@ The following is a list of values you can pass to the `output` property. Specifies the name of each output file on disk. You must **not** specify an absolute path here! The `output.path` option determines the location on disk the files are written. `filename` is used solely for naming the individual files. -**single entry** +#### single entry ``` javascript { entry: './src/app.js', @@ -42,7 +42,7 @@ Specifies the name of each output file on disk. You must **not** specify an abso // writes to disk: ./build/bundle.js ``` -**multiple entries** +#### multiple entries If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name. diff --git a/content/concepts/plugins.md b/pages/concepts/plugins.md similarity index 100% rename from content/concepts/plugins.md rename to pages/concepts/plugins.md diff --git a/content/concepts/targets.md b/pages/concepts/targets.md similarity index 100% rename from content/concepts/targets.md rename to pages/concepts/targets.md diff --git a/content/configuration/dev-server.md b/pages/configuration/dev-server.md similarity index 100% rename from content/configuration/dev-server.md rename to pages/configuration/dev-server.md diff --git a/content/configuration/devtool.md b/pages/configuration/devtool.md similarity index 100% rename from content/configuration/devtool.md rename to pages/configuration/devtool.md diff --git a/content/configuration/entry-context.md b/pages/configuration/entry-context.md similarity index 100% rename from content/configuration/entry-context.md rename to pages/configuration/entry-context.md diff --git a/content/configuration/external-configs.md b/pages/configuration/external-configs.md similarity index 100% rename from content/configuration/external-configs.md rename to pages/configuration/external-configs.md diff --git a/content/configuration/externals.md b/pages/configuration/externals.md similarity index 100% rename from content/configuration/externals.md rename to pages/configuration/externals.md diff --git a/content/configuration/index.md b/pages/configuration/index.md similarity index 100% rename from content/configuration/index.md rename to pages/configuration/index.md diff --git a/content/configuration/module.md b/pages/configuration/module.md similarity index 100% rename from content/configuration/module.md rename to pages/configuration/module.md diff --git a/content/configuration/node.md b/pages/configuration/node.md similarity index 100% rename from content/configuration/node.md rename to pages/configuration/node.md diff --git a/content/configuration/other-options.md b/pages/configuration/other-options.md similarity index 100% rename from content/configuration/other-options.md rename to pages/configuration/other-options.md diff --git a/content/configuration/output.md b/pages/configuration/output.md similarity index 100% rename from content/configuration/output.md rename to pages/configuration/output.md diff --git a/content/configuration/passing-a-config.md b/pages/configuration/passing-a-config.md similarity index 100% rename from content/configuration/passing-a-config.md rename to pages/configuration/passing-a-config.md diff --git a/content/configuration/plugins.md b/pages/configuration/plugins.md similarity index 100% rename from content/configuration/plugins.md rename to pages/configuration/plugins.md diff --git a/content/configuration/resolve.md b/pages/configuration/resolve.md similarity index 100% rename from content/configuration/resolve.md rename to pages/configuration/resolve.md diff --git a/content/configuration/target.md b/pages/configuration/target.md similarity index 100% rename from content/configuration/target.md rename to pages/configuration/target.md diff --git a/content/configuration/watch.md b/pages/configuration/watch.md similarity index 100% rename from content/configuration/watch.md rename to pages/configuration/watch.md diff --git a/content/contribute.md b/pages/contribute.md similarity index 81% rename from content/contribute.md rename to pages/contribute.md index b26122549aaf..2eb3368f2411 100644 --- a/content/contribute.md +++ b/pages/contribute.md @@ -6,7 +6,7 @@ title: Contribute ## Documentation -[Writer's guide](writers-guide) +[Writer's guide](writers-guide/) ## Technical Contribution diff --git a/content/get-started.md b/pages/get-started.md similarity index 100% rename from content/get-started.md rename to pages/get-started.md diff --git a/content/how-to/author-libraries.md b/pages/how-to/author-libraries.md similarity index 100% rename from content/how-to/author-libraries.md rename to pages/how-to/author-libraries.md diff --git a/content/how-to/cache.md b/pages/how-to/cache.md similarity index 100% rename from content/how-to/cache.md rename to pages/how-to/cache.md diff --git a/content/how-to/develop-using-vagrant.md b/pages/how-to/develop-using-vagrant.md similarity index 100% rename from content/how-to/develop-using-vagrant.md rename to pages/how-to/develop-using-vagrant.md diff --git a/content/how-to/develop.md b/pages/how-to/develop.md similarity index 100% rename from content/how-to/develop.md rename to pages/how-to/develop.md diff --git a/content/how-to/generate-production-build.md b/pages/how-to/generate-production-build.md similarity index 100% rename from content/how-to/generate-production-build.md rename to pages/how-to/generate-production-build.md diff --git a/content/how-to/handle-compatibility.md b/pages/how-to/handle-compatibility.md similarity index 100% rename from content/how-to/handle-compatibility.md rename to pages/how-to/handle-compatibility.md diff --git a/content/how-to/handle-dependencies.md b/pages/how-to/handle-dependencies.md similarity index 100% rename from content/how-to/handle-dependencies.md rename to pages/how-to/handle-dependencies.md diff --git a/content/how-to/hot-module-reload.md b/pages/how-to/hot-module-reload.md similarity index 100% rename from content/how-to/hot-module-reload.md rename to pages/how-to/hot-module-reload.md diff --git a/content/how-to/improve-build-performance.md b/pages/how-to/improve-build-performance.md similarity index 100% rename from content/how-to/improve-build-performance.md rename to pages/how-to/improve-build-performance.md diff --git a/content/how-to/index.md b/pages/how-to/index.md similarity index 100% rename from content/how-to/index.md rename to pages/how-to/index.md diff --git a/content/how-to/install-webpack.md b/pages/how-to/install-webpack.md similarity index 100% rename from content/how-to/install-webpack.md rename to pages/how-to/install-webpack.md diff --git a/content/how-to/set-up-hmr-with-react.md b/pages/how-to/set-up-hmr-with-react.md similarity index 100% rename from content/how-to/set-up-hmr-with-react.md rename to pages/how-to/set-up-hmr-with-react.md diff --git a/content/how-to/shim.md b/pages/how-to/shim.md similarity index 100% rename from content/how-to/shim.md rename to pages/how-to/shim.md diff --git a/content/how-to/split-code.md b/pages/how-to/split-code.md similarity index 100% rename from content/how-to/split-code.md rename to pages/how-to/split-code.md diff --git a/content/how-to/upgrade-from-webpack-1.md b/pages/how-to/upgrade-from-webpack-1.md similarity index 100% rename from content/how-to/upgrade-from-webpack-1.md rename to pages/how-to/upgrade-from-webpack-1.md diff --git a/content/how-to/use-with-docker.md b/pages/how-to/use-with-docker.md similarity index 100% rename from content/how-to/use-with-docker.md rename to pages/how-to/use-with-docker.md diff --git a/content/how-to/use-with-third-party-tools.md b/pages/how-to/use-with-third-party-tools.md similarity index 100% rename from content/how-to/use-with-third-party-tools.md rename to pages/how-to/use-with-third-party-tools.md diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 000000000000..5e82c9527cdc --- /dev/null +++ b/pages/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import Container from 'components/Container'; +import Cube from 'components/Cube'; +import Link from 'components/Link'; + +export default props => { + return ( +
    +
    +
    + +
    + +
    + +
    + +
    + +
    + + + webpack transforms your  + modules +  into production-ready  + bundles +  and assets + +
    + +
    + +

    Webpack

    +
    + Still debating what to do with this section +
    +     +
    +
    + ); +}; + +export const pageQuery = ` + { + site { + siteMetadata { + title + } + } + } +` diff --git a/content/license.md b/pages/license.md similarity index 100% rename from content/license.md rename to pages/license.md diff --git a/content/organization.md b/pages/organization.md similarity index 100% rename from content/organization.md rename to pages/organization.md diff --git a/content/writers-guide.md b/pages/writers-guide.md similarity index 100% rename from content/writers-guide.md rename to pages/writers-guide.md diff --git a/styles/_markdown.scss b/styles/_markdown.scss index 7de7677e6c8c..eb0fa07f3bdd 100644 --- a/styles/_markdown.scss +++ b/styles/_markdown.scss @@ -1,32 +1,5 @@ .page__content, .splash__content { - h1 { font-size: getFontSize(4); } - h2 { font-size: getFontSize(3); } - h3 { font-size: getFontSize(2); } - h4 { font-size: getFontSize(1); } - h5 { font-size: getFontSize(0); } - h6 { font-size: getFontSize(-1); } - - h1, h2, h3, h4, h5, h6 { - font-weight:400; - margin:1.5em 0 0.5em; - - &:first-child { margin-top:0; } - tt, code { font-size:inherit; } - } - - p, blockquote, table, pre { - margin:1em 0; - } - - ul, ol, dl { - margin:0.5em 0 1em; - } - - li { - margin:0.5em 0; - } - hr { border:none; background-color:map-get($colors, alto); @@ -34,37 +7,9 @@ margin:2em 0; } - ul, ol { - padding-left: 30px; - - &:first-child { margin-top:0; } - &:last-child { margin-bottom:0; } - } - - dl { - dt { - font-size: getFontSize(0); - font-weight: bold; - font-style: italic; - margin: 15px 0 5px; - - &:first-child { padding: 0; } - } - - dd { - margin: 0 0 15px; - padding: 0 15px; - } - - dt, dd { - > :first-child { margin-top: 0; } - > :last-child { margin-bottom: 0; } - } - } - blockquote { - border-left: 4px solid #dddddd; - padding:0.75em 1em; + /*border-left: 4px solid #dddddd;*/ + /*padding:0.75em 1em;*/ color:map-get($colors, dove-grey); > :first-child { margin-top: 0; } @@ -83,7 +28,7 @@ .tip-title { font-size:0.8em; - font-weight:600; + font-weight:700; margin-bottom:0.5em; text-transform:uppercase; } @@ -131,30 +76,15 @@ } } - img { - max-width: 100%; - } - - b, strong { - font-weight:600; - } - code, tt { - font-family:'Ubuntu Mono', monospace; - margin: 0 2px; - padding: 0 5px; - white-space: nowrap; - border: 1px solid #eaeaea; - background-color: #f8f8f8; + /*border: 1px solid #eaeaea;*/ + /*background-color: #f8f8f8;*/ border-radius: 3px; } pre { - background-color:map-get($colors, mine-shaft); - font-size: 13px; - line-height: 19px; + /*background-color:map-get($colors, mine-shaft);*/ overflow: auto; - padding: 6px 10px; border-radius: 3px; code { @@ -162,7 +92,7 @@ padding: 0; white-space: pre; border: none; - color:map-get($colors, concrete); + /*color:map-get($colors, concrete);*/ background: transparent; .code-details-summary-span { @@ -172,8 +102,8 @@ } code, tt { - background-color: transparent; + /*background-color: transparent;*/ border: none; } } -} \ No newline at end of file +} diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss index bd966a14ddef..001c68d97eae 100644 --- a/styles/components/_footer.scss +++ b/styles/components/_footer.scss @@ -4,24 +4,21 @@ &__inner { display:flex; - padding:0.3em 1.5em; box-sizing:border-box; } &__left, - &__right { - flex:1 1 auto; - padding:0.4em 0 0.5em; + &__right { + flex:1 1 auto; + line-height: 30px; } - &__middle { + &__middle { flex:0 0 auto; - - .cube { margin-top:5px; } } - &__right { - text-align:right; + &__right { + text-align:right; } &__link { diff --git a/styles/components/_navigation.scss b/styles/components/_navigation.scss index b3d6016d3549..a10b5881bd71 100644 --- a/styles/components/_navigation.scss +++ b/styles/components/_navigation.scss @@ -5,7 +5,6 @@ &__inner { display:flex; - padding:0.5em 1.5em; box-sizing:border-box; } @@ -20,9 +19,8 @@ } &__link { - font-size:getFontSize(-2); - margin-left:2.5em; text-transform:uppercase; + text-decoration:none; color:map-get($colors, alto); &:hover, diff --git a/styles/components/_page.scss b/styles/components/_page.scss index 025e017306fe..a956e25bee2c 100644 --- a/styles/components/_page.scss +++ b/styles/components/_page.scss @@ -3,23 +3,18 @@ display:flex; min-height:calc(100vh - 94px); - .sidebar { - flex:0 0 25%; + .sidebar { + flex:0 0 25%; max-width:25%; } - &__content { - flex:0 0 75%; + &__content { + flex:0 0 75%; max-width:75%; - padding:1.5em; background:map-get($colors, white); } &__edit { - position:absolute; - top:1.5em; - right:1.5em; - font-size:getFontSize(-1); text-transform:uppercase; color:map-get($colors, lynch); diff --git a/styles/components/_sidebar.scss b/styles/components/_sidebar.scss index eeb3c84cb5a1..0ca00b0e690e 100644 --- a/styles/components/_sidebar.scss +++ b/styles/components/_sidebar.scss @@ -1,15 +1,9 @@ .sidebar { - padding:1.5em; background:transparentize(map-get($colors, white), 0.5); } .sidebar-item { - font-size:getFontSize(-1); - margin-bottom:0.5em; - &__title { - font-weight:400; - text-transform:uppercase; text-decoration:none; color:map-get($colors, emperor); @@ -19,7 +13,6 @@ &__toggle { display:none; // Temporary float:right; - line-height:1.5; cursor:pointer; color:map-get($colors, dusty-grey); transition:color 250ms; @@ -31,7 +24,6 @@ display:none; // Temporary list-style:none; padding:0; - margin:0.25em 0 1em; } &__section { @@ -48,4 +40,4 @@ &:hover { color:map-get($colors, mine-shaft); } } } -} \ No newline at end of file +} diff --git a/styles/geomanist/.DS_Store b/styles/geomanist/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ef53068edb2fa1ac93f49fb54d45a19e984d1ba7 GIT binary patch literal 6148 zcmeHK%Sr=55Ukc50z$~q(fRfl46JI`;C4(k#% zN&zV_Rp2(4Yp?&0^gsIlDM>3SAO)^U0b6XJwi`aFYU}KAUTYiuh3+{&bT`g}!Xe5r kG0HI)UXJf0Df61ox!)Czi9u&P=tTVtxGpj&@ZSoY0bkk|BLDyZ literal 0 HcmV?d00001 diff --git a/styles/geomanist/stylesheet.css b/styles/geomanist/stylesheet.css new file mode 100755 index 000000000000..1335a4ca1ed0 --- /dev/null +++ b/styles/geomanist/stylesheet.css @@ -0,0 +1,11 @@ +/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 1, 2016 */ + + + +@font-face { + font-family: 'Geomanist'; + src: url('geomanist-regular.woff2') format('woff2'), + url('geomanist-regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} diff --git a/styles/index.scss b/styles/index.scss index f77816fc1f33..a4bd81fa2544 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -10,23 +10,17 @@ @import "functions"; @import "vars"; -@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono); -@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:300); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700,400italic); - body { - font:300 getFontSize(0) 'Open Sans', 'Century Gothic', sans-serif; color:map-get($colors, emperor); - background:map-get($colors, concrete); + /*background:map-get($colors, concrete);*/ } a { color:map-get($colors, tussock); - text-decoration:none; transition:color 250ms; - &:hover { - color:darken(map-get($colors, tussock), 15%); + &:hover { + color:darken(map-get($colors, tussock), 15%); } &.icon-link { @@ -38,5 +32,5 @@ a { } @import "markdown"; -@import "~prismjs/themes/prism-funky"; +/*@import "~prismjs/themes/prism-funky";*/ @import "styles"; diff --git a/styles/reset.css b/styles/reset.css deleted file mode 100644 index ab173a7e2a8b..000000000000 --- a/styles/reset.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Reset */ - -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } \ No newline at end of file diff --git a/utilities/markdown.js b/utilities/markdown.js index 0b900275daa1..d659a4d6ea27 100644 --- a/utilities/markdown.js +++ b/utilities/markdown.js @@ -114,7 +114,7 @@ module.exports = function(section) { renderer: renderer, xhtml: false }; - + var tokens = parseQuotes(content); return marked.parser(tokens, markedDefaults); diff --git a/utilities/typography.js b/utilities/typography.js new file mode 100644 index 000000000000..80b8d26a8650 --- /dev/null +++ b/utilities/typography.js @@ -0,0 +1,62 @@ +import Typography from 'typography' +import CodePlugin from 'typography-plugin-code' + +const theme = { + baseFontSize: '16px', + scaleRatio: 2.5, + bodyWeight: 400, + boldWeight: 700, + headerWeight: 700, + bodyFontFamily: ['Cabin', 'Century Gothic', 'sans-serif'], + headerFontFamily: ['Geomanist', 'Century Gothic', 'sans-serif'], + googleFonts: [ + { + name: 'Cabin', + styles: [ + '400', + '400i', + '700', + ], + }, + { + name: 'Averia Sans Libre', + styles: [ + '300', + ], + }, + ], + plugins: [ + new CodePlugin(), + ], + overrideStyles: ({ rhythm, scale }) => ({ + 'figure': { + marginBottom: 0, + }, + 'blockquote.warning,blockquote.todo,blockquote.tip': { + marginLeft: 0, + marginTop: 0, + padding: rhythm(1), + }, + 'h2 code': { + ...scale(3/5), + }, + 'h3 code': { + ...scale(2/5), + }, + 'h4 code': { + ...scale(0/5), + }, + 'h5 code': { + ...scale(-1/5), + }, + }), +} + +const typography = new Typography(theme) + +// Hot reload typography in development. +if (process.env.NODE_ENV !== 'production') { + typography.injectStyles() +} + +module.exports = typography From fc9925f2ca1a9c145ce16c16503778deaf1a3c59 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 3 Oct 2016 09:46:23 -0700 Subject: [PATCH 02/28] Sort links in sidebar --- components/Sidebar.jsx | 4 +++- page-templates/markdown-template.js | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/Sidebar.jsx b/components/Sidebar.jsx index 12a54f9da3f7..e78c0b5dd0ed 100644 --- a/components/Sidebar.jsx +++ b/components/Sidebar.jsx @@ -1,16 +1,18 @@ import React from 'react'; import Link from 'react-router/lib/Link'; import { rhythm, scale, options } from 'utilities/typography'; +import sortBy from 'lodash/sortBy' const Sidebar = ({ pathname, pages }) => { const splitPathname = pathname.split('/') const base = splitPathname[1] - const sectionPages = pages.filter((page) => { + let sectionPages = pages.filter((page) => { return base === page.node.path.split('/')[1] && // This is the index page, since we always add it as "introduction" // filter it out here. page.node.path !== `/${base}/` }) + sectionPages = sortBy(sectionPages, (page) => page.node.frontmatter.sort) return (
    diff --git a/components/Sidebar.jsx b/components/Sidebar.jsx index 79a9a37f2902..397304f26611 100644 --- a/components/Sidebar.jsx +++ b/components/Sidebar.jsx @@ -1,29 +1,25 @@ import React from 'react'; import Link from 'react-router/lib/Link'; import { rhythm, scale, options } from 'utilities/typography'; -import sortBy from 'lodash/sortBy' - -const Sidebar = ({ pathname, pages }) => { - const splitPathname = pathname.split('/') - const base = splitPathname[1] - let sectionPages = pages.filter((page) => { - return base === page.node.path.split('/')[1] && - // This is the index page, since we always add it as "introduction" - // filter it out here. - page.node.path !== `/${base}/` - }) - sectionPages = sortBy(sectionPages, (page) => page.node.frontmatter.sort) +import { merge, media, presets, style } from 'glamor' +import sections, { basepath } from 'utilities/pages' +const Sidebar = ({ pages, location, activeSection }) => { return (