`` if a
+ single string is passed as a child.
+ (@MoOx)
- Removed: ``PageContainer`` does not wrap its child into a ``
``
([#691](https://github.com/MoOx/phenomic/pull/691) - @MoOx,
based on @DavidWells [idea](https://github.com/MoOx/phenomic/pull/690))
- Added: đ Hard source Webpack plugin to improve performance by more than 300%
You can enable this **experimental** feature by add
``"webpackHardCache": true`` in your ``package.json`` ``phenomic`` section.
+- Changed: ``phenomic/lib/PageContainer`` has been relocated.
+ To prevent issue in the future, is now accessible by doing
+ ``import { PageContainer } from "phenomic"``.
+ If you want to import it with a different name, you can do it this way:
+ ```js
+ import { PageContainer as PhenomicPageContainer } from "phenomic"
+ ```
+ ([ref #433](https://github.com/MoOx/phenomic/issues/433) - @MoOx)
+
+## Boilerplate
+
+- Changed: new default tree structure.
+ We encourage you to update to a similar structure if you were using the previous one.
+ Main changes:
+
+ - ``web_modules/layouts`` => ``src/layouts``
+ - ``web_modules/{Components}`` => ``src/components/*``
+ - ``web_modules/app/*`` => ``src/*``
+ - ``web_modules/LayoutContainer`` => ``src/AppContainer.js``
# 0.16.2 - 2016-08-23
diff --git a/__tests__/README.md b/__tests__/README.md
index 2d5394ac5..0d9bf3fa3 100644
--- a/__tests__/README.md
+++ b/__tests__/README.md
@@ -6,4 +6,4 @@ This folder is for integration tests only.
See `src/**/__tests__/*.js` for unit tests.
-Tests here need to be run with a valid `test-boilerplate` folder.
+Tests here need to be run with a valid `test-phenomic-theme-base` folder.
diff --git a/__tests__/cli.js b/__tests__/cli.js
index cfafe8cb1..b30b3e30f 100644
--- a/__tests__/cli.js
+++ b/__tests__/cli.js
@@ -3,7 +3,7 @@ import { join } from "path"
import { exec } from "child_process"
-const target = join(__dirname, "..", "test-boilerplate")
+const target = join(__dirname, "..", "test-phenomic-theme-base")
const execOpts = { cwd: target }
const phenomic = "node ./node_modules/.bin/phenomic"
diff --git a/__tests__/index.js b/__tests__/index.js
index e72cb75be..89d5c2c20 100644
--- a/__tests__/index.js
+++ b/__tests__/index.js
@@ -5,7 +5,7 @@ import { join } from "path"
import globby from "globby"
-const testFolder = "../test-boilerplate/dist"
+const testFolder = "../test-phenomic-theme-base/dist"
const files = globby.sync("**/*", {
cwd: testFolder,
nodir: true,
@@ -72,7 +72,7 @@ test("should have html files", (t) => {
t.truthy(includes(
"index.html",
[
- ">Phenomic default boilerplate",
+ ">Phenomic base theme",
"window.__INITIAL_STATE__ = {\"pages\":{\"/\"",
]
))
diff --git a/appveyor.yml b/appveyor.yml
index 9814f51d7..fd1cde018 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -12,7 +12,7 @@ matrix:
cache:
- node_modules -> package.json
-# - test-boilerplate/node_modules -> package.json
+# - test-phenomic-theme-base/node_modules -> package.json
# - docs/node_modules -> package.json
install:
diff --git a/boilerplate/content/404.md b/boilerplate/content/404.md
deleted file mode 100644
index 51aabaa4e..000000000
--- a/boilerplate/content/404.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: PageError
-route: 404.html
----
-Content here not used, see ``web_modules/layouts/PageError``
diff --git a/boilerplate/content/index.md b/boilerplate/content/index.md
deleted file mode 100644
index 6c0fd768c..000000000
--- a/boilerplate/content/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Phenomic default boilerplate
-layout: Homepage
----
-
-Hi there.
-
-Before having fun with Phenomic, be sure to read (or at least pretend to)
-the documentation :
-
-* [Setup](https://phenomic.io/docs/setup/)
-* [Usage](https://phenomic.io/docs/usage/)
-* [FAQ](https://phenomic.io/docs/faq/)
-
-Built with
-
-
- React
-.
diff --git a/boilerplate/web_modules/Footer/index.js b/boilerplate/web_modules/Footer/index.js
deleted file mode 100644
index ed1e98ec5..000000000
--- a/boilerplate/web_modules/Footer/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component } from "react"
-import { Link } from "react-router"
-
-import styles from "./index.css"
-
-export default class Footer extends Component {
-
- render() {
- return (
-
- )
- }
-}
diff --git a/boilerplate/web_modules/LayoutContainer/index.css b/boilerplate/web_modules/LayoutContainer/index.css
deleted file mode 100644
index e5cd843cd..000000000
--- a/boilerplate/web_modules/LayoutContainer/index.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.layout {
- /* placeholder */
-}
-
-.content {
- max-width: 60rem;
- margin: auto;
- padding: 1rem 0.75rem;
-}
diff --git a/docs/content/404.md b/docs/content/404.md
index 51aabaa4e..16984de79 100644
--- a/docs/content/404.md
+++ b/docs/content/404.md
@@ -2,4 +2,4 @@
layout: PageError
route: 404.html
---
-Content here not used, see ``web_modules/layouts/PageError``
+Content here not used, see ``src/layouts/PageError``
diff --git a/docs/content/contributing/index.md b/docs/content/contributing/index.md
index 198120e52..742c87766 100644
--- a/docs/content/contributing/index.md
+++ b/docs/content/contributing/index.md
@@ -2,15 +2,15 @@
title: How to contribute to Phenomic
---
-## Update the boilerplate
+## Update the phenomic-theme-base
-To work on the boilerplate, run the following:
+To work on the phenomic-theme-base, run the following:
```sh
-npm run boilerplate-start
+npm run phenomic-theme-base-start
```
-Then you can edit files in the `boilerplate` folder.
+Then you can edit files in the `phenomic-theme-base` folder.
## Update the docs
@@ -33,7 +33,7 @@ _After every modification, please run the entire test suite by using
Note that the full test suite can take a few minutes, as it runs unit tests and
integration tests (with several builds, including docs and a new project from
-the default boilerplate).
+the phenomic-theme-base).
To speed things up, you can limit tests to the specific component you are working on.
diff --git a/docs/content/docs/advanced/engine.md b/docs/content/docs/advanced/engine.md
deleted file mode 100644
index 06ee6edf3..000000000
--- a/docs/content/docs/advanced/engine.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Explanation about how the engine works
-incomplete: true
----
-
-During the build process, markdown files are transformed into JSON; one part
-with the YAML metadata, and one part with the HTML body. So both client and
-server can easily consume these markdown files (as JSON) in order to render
-pages from React components.
-
-On top of that, you can easily add your own logic to style your pages the way
-that you like, whether that is via CSS files or inline styles. You can even
-create your own pages from plain React components; Phenomic is just a helper.
-
-## The boilerplate
-
-* initialize your bundles
- (
- [client](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/scripts/index-client.js) +
- [static](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/scripts/index-static.js)
- ) with:
- - your [layout components](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/web_modules/layouts/index.js)
- - some [routes](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/web_modules/app/routes.js)
- - a [store](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/web_modules/app/store.js) to keep data in memory
-* create your [build script](https://github.com/MoOx/phenomic/blob/master/src/boilerplate/scripts/build.js) so you can:
- * define your configuration
- (eg: webpack loaders to add your favorite css preprocessor)
- * run the dev server (`(babel-)node build --server --dev`)
- * build the static version for production (`(babel-)node build --static --production`)
-
-Optionally, you can:
-
-* write or reuse [React components](http://react-components.com/)
-* tweak [webpack configuration](http://webpack.github.io/docs) in the build script
- so you can consume images, svg, css or whatever you want.
-
-### Packages used
-
-* [React](https://github.com/facebook/react)
- for writing UI
-* [Babel](http://babeljs.io)
- to be able to use ES6/ES2015 today,
-* [Webpack](http://webpack.github.io)
- for bundling,
-* [Redux](https://github.com/gaearon/redux)
- for handling application state
- (a better [Flux](http://facebook.github.io/flux/) implementation)
-
-#### Some more (but still) important packages
-
-* [React Router](https://github.com/rackt/react-router)
- for routing
-* [React Helmet](https://github.com/nfl/react-helmet)
- for handling pages meta tags (title and meta...)
-* [Redux Dev Tools](https://github.com/gaearon/redux-devtools)
- for an awesome DX (developer experience).
-* [Express](http://expressjs.com/) with some middlewares for development:
- * [Webpack Dev Middleware](http://webpack.github.io/docs/webpack-dev-server.html)
- for watching
- * [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)
- for hot reload
diff --git a/docs/content/docs/advanced/good-practices.md b/docs/content/docs/advanced/good-practices.md
index 228074996..d58615676 100644
--- a/docs/content/docs/advanced/good-practices.md
+++ b/docs/content/docs/advanced/good-practices.md
@@ -4,14 +4,14 @@ title: Good practices
## Linting
-Our boilerplate comes with best-in-class tools for linting both JavaScript
+Our phenomic-theme-base comes with best-in-class tools for linting both JavaScript
and CSS. Linting your code is a good practice because it reduces the probability
of errors and helps to enforce code consistency.
## JavaScript Linting
[ESLint](http://eslint.org/) is a must have JavaScript linter; the default
-boilerplate provides you with a nice [standard set of rules](https://github.com/MoOx/eslint-config-i-am-meticulous)
+phenomic-theme-base provides you with a nice [standard set of rules](https://github.com/MoOx/eslint-config-i-am-meticulous)
for ES2015+ & React.
That being said, you might want less rules (or semicolons).
@@ -63,5 +63,5 @@ This will fix all the errors that ESLint or its plugins can handle.
## CSS Linting
[stylelint](http://stylelint.io/) is a must have CSS linter; the default
-boilerplate provides you with a nice [standard set of rules](https://github.com/stylelint/stylelint-config-standard)
+phenomic-theme-base provides you with a nice [standard set of rules](https://github.com/stylelint/stylelint-config-standard)
for modern CSS development.
diff --git a/docs/content/docs/advanced/index.md b/docs/content/docs/advanced/index.md
index fe6842341..7ef802af6 100644
--- a/docs/content/docs/advanced/index.md
+++ b/docs/content/docs/advanced/index.md
@@ -3,6 +3,5 @@ title: Advanced Usage and tips
---
- [Good practices](good-practices/)
-- [Understanding the engine](engine/)
- [Adding custom Redux reducers](redux/)
- [Offline browsing](offline-browsing/)
diff --git a/docs/content/docs/advanced/redux.md b/docs/content/docs/advanced/redux.md
index e27b9c568..bd7b1e663 100644
--- a/docs/content/docs/advanced/redux.md
+++ b/docs/content/docs/advanced/redux.md
@@ -7,7 +7,7 @@ incomplete: true
Here is an example of a store that will allow you to add
your own reducers, _with hot loading support_. It is based on the
-default boilerplate.
+phenomic-theme-base.
```js
import { combineReducers } from "redux"
diff --git a/docs/content/docs/faq/gatsby.md b/docs/content/docs/faq/gatsby.md
index a29cc1e28..f95cedddd 100644
--- a/docs/content/docs/faq/gatsby.md
+++ b/docs/content/docs/faq/gatsby.md
@@ -39,7 +39,7 @@ Here are some points we want to highlight :
For example, Gatsby has in it's dependencies LESS, Sass and PostCSS (yeah
maybe that's too much).
By default, Phenomic will just install PostCSS (since it's required in the
- default boilerplate), but you can remove it (since it will be added in your
+ phenomic-theme-base), but you can remove it (since it will be added in your
package.json) and replace with any dependency you want (or none).
- Phenomic is covered by a lot of **automated unit, integration and functional
tests** to avoid bugs and regressions.
diff --git a/docs/content/docs/getting-started.md b/docs/content/docs/getting-started.md
index 4a391e171..9f570a3d0 100644
--- a/docs/content/docs/getting-started.md
+++ b/docs/content/docs/getting-started.md
@@ -110,16 +110,16 @@ It's the latest version of JavaScript. Here are some links:
Easy. There 2 parts you can adjust that are referenced in the app routes:
-### ``src/web_modules/LayoutContainer``
+### ``src/AppContainer.js``
It's the global website wrapper.
It contains the header, the content and the footer of your website/app.
-### ``src/web_modules/layouts/*``
+### ``src/layouts/*``
Here is the place where you should find and add all page layouts.
The page we just created use the default page layout, which is (by default)
-``Page`` so we will need to adjust ``src/web_modules/layouts/Page``.
+``Page`` so we will need to adjust ``src/layouts/Page``.
**Layouts are just React components**, so you should be able to do anything
you want!
diff --git a/docs/content/docs/setup.md b/docs/content/docs/setup.md
index e7ee5df34..095aa0f92 100644
--- a/docs/content/docs/setup.md
+++ b/docs/content/docs/setup.md
@@ -7,7 +7,7 @@ Phenomic require at least
We recommend you to use [nvm](https://github.com/creationix/nvm) to manage
different versions of node.
-**A minimal boilerplate is required, in order to provide you some
+**A minimal phenomic-theme-base is required, in order to provide you some
flexibility.** But don't worry, a command will set it up for you.
## One command setup
@@ -51,7 +51,7 @@ mkdir $DIR && cd $DIR
### Get Phenomic
-You will need to install Phenomic first, to generate the required boilerplate.
+You will need to install Phenomic first, to generate the required phenomic-theme-base.
You can install Phenomic from npm to get latest stable version, or install
it from git to get latest bleeding edge updates.
@@ -87,7 +87,7 @@ npm install babel-cli babel-preset-react babel-preset-es2015 babel-preset-stage-
npm install https://github.com/MoOx/phenomic.git
```
-### Setup boilerplate
+### Setup phenomic-theme-base
**Notice:** This step will create (and overwrite) any existing ``package.json``.
@@ -98,7 +98,7 @@ npm install https://github.com/MoOx/phenomic.git
**â ď¸ If you got errors here, please double check that you have required version of
Node and NPM specified at the top of this page.**
-After you answer some questions, your boilerplate is ready.
+After you answer some questions, your project is ready.
_Tip:_ You can open `package.json` and adjust some values to fit your needs.
diff --git a/docs/content/docs/usage/configuration/build.md b/docs/content/docs/usage/configuration/build.md
index ee4a79bf5..2f130fbcb 100644
--- a/docs/content/docs/usage/configuration/build.md
+++ b/docs/content/docs/usage/configuration/build.md
@@ -15,7 +15,7 @@ configuration to fit its requirements, but changes should not affect you.
One particular piece of the webpack configuration is important for Phenomic.
The section that defines the loader for ``.md`` files (or whatever you use)
-is crucial (in the default boilerplate, it's the first loader) :
+is crucial (in the phenomic-theme-base, it's the first loader) :
- it allows you to control what text engine to use
(default to Markdown using [remark](http://remark.js.org/)
diff --git a/docs/content/docs/usage/configuration/document-head.md b/docs/content/docs/usage/configuration/document-head.md
index f6712e726..ab6f4350e 100644
--- a/docs/content/docs/usage/configuration/document-head.md
+++ b/docs/content/docs/usage/configuration/document-head.md
@@ -15,7 +15,7 @@ and changes to your documents head with support for
_document title, meta, link, script, and base tags._
It's like ``react-document-title`` but on steroids.
-The default boilerplate uses ``react-helmet`` in several places
+The phenomic-theme-base uses ``react-helmet`` in several places
(look for ``
+
@@ -124,7 +124,7 @@ if (isClient) {
requireAuth = (nextState, replace) => {
console.log(auth)
if (!auth.loggedIn()) {
- replace({ pathname: '/login' })
+ replace({ pathname: '/login' })
}
}
}
diff --git a/docs/content/docs/usage/scripting.md b/docs/content/docs/usage/scripting.md
index d651a0ebc..0d757ff8e 100644
--- a/docs/content/docs/usage/scripting.md
+++ b/docs/content/docs/usage/scripting.md
@@ -36,12 +36,12 @@ Several constants are exposed (injected) in your JavaScript code in
Component to define and declare all pages layouts.
```js
-import PageContainer from "phenomic/lib/PageContainer"
+``import { PageContainer } from "phenomic"``
// @todo show usage
```
-[Check the usage in the default boilerplate.](https://github.com/MoOx/phenomic/blob/master/docs/web_modules/app/routes.js)
+[Check the usage in the phenomic-theme-base.](https://github.com/MoOx/phenomic/blob/master/docs/src/routes.js)
#### ``BodyContainer``
@@ -73,7 +73,7 @@ class Page extends Component {
}
```
-[Check the usage in the default boilerplate.](https://github.com/MoOx/phenomic/blob/master/boilerplate/web_modules/layouts/Page/index.js)
+[Check the usage in the phenomic-theme-base.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/src/layouts/Page/index.js)
### Utilities
diff --git a/docs/content/docs/usage/styling.md b/docs/content/docs/usage/styling.md
index 4237ca5fc..eb4f7d6bc 100644
--- a/docs/content/docs/usage/styling.md
+++ b/docs/content/docs/usage/styling.md
@@ -4,7 +4,7 @@ title: How to style your app/website in Phenomic
## Syntax and Architecture
-The default boilerplate allows you to write, by default, stylesheets with two
+The phenomic-theme-base allows you to write, by default, stylesheets with two
different approaches:
Global (normal) CSS and/or
[CSS modules](#css-modules).
@@ -23,7 +23,7 @@ so you have a built-in modular CSS pre-processor.
The future-proof syntax / Local CSS is the recommended solution that plays nice
with React.
-**Not that the default CSS loaders only apply to ``web_modules`` folder.
+**Not that the default CSS loaders only apply to ``src`` folder.
If you want to consume CSS from ``node_modules``, you should adjust the
webpack configuration (a commented piece of code should be waiting for you).**
diff --git a/docs/content/docs/usage/write.md b/docs/content/docs/usage/write.md
index 36e0b8184..7d194d389 100644
--- a/docs/content/docs/usage/write.md
+++ b/docs/content/docs/usage/write.md
@@ -10,7 +10,7 @@ You can write your files using any text based language like
[Txt2tags](https://en.wikipedia.org/wiki/Txt2tags) or
[LaTeX](https://en.wikipedia.org/wiki/LaTeX).
-Default boilerplate provides a markdown engine but you can use anything you want.
+phenomic-theme-base provides a markdown engine but you can use anything you want.
See [Configuration](../configuration/) to specify your own engine.
One common thing that text files will require is front matter that
@@ -30,7 +30,7 @@ Here is a review of the important fields you can use.
title: "Page title"
# layout default = "Page"
-layout: "MyComponent" # name referenced in `web_modules/layouts/index.js`
+layout: "MyComponent" # name referenced in `src/routes.js`
# route default = normalized path of the markdown file
# eg: content/some/thing.md => /some/thing/(index.html)
diff --git a/docs/content/loading.md b/docs/content/loading.md
index d4f8b3b00..b8af60b5b 100644
--- a/docs/content/loading.md
+++ b/docs/content/loading.md
@@ -1,6 +1,6 @@
---
layout: PageLoading
---
-Content here not used, see ``web_modules/layouts/PageLoading``.
+Content here not used, see ``src/layouts/PageLoading``.
This page is a demo for loading state.
You can safely delete it if you want.
diff --git a/docs/package.json b/docs/package.json
index 8566b5499..4c03b6dda 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,7 @@
"scripts": {
"showcase-screenshots": "babel-node scripts/showcase-screenshots.js",
"lint:js": "eslint --ignore-path .gitignore --fix .",
- "lint:css": "stylelint \"web_modules/**/*.css\"",
+ "lint:css": "stylelint \"src/**/*.css\"",
"lint": "npm-run-all --parallel lint:*",
"start": "phenomic start",
"build": "phenomic build",
diff --git a/docs/scripts/phenomic.browser.js b/docs/scripts/phenomic.browser.js
index 2d913c883..495b65f5f 100644
--- a/docs/scripts/phenomic.browser.js
+++ b/docs/scripts/phenomic.browser.js
@@ -1,8 +1,8 @@
import "whatwg-fetch"
import phenomicClient from "phenomic/lib/client"
-import metadata from "../web_modules/app/metadata"
-import routes from "../web_modules/app/routes"
-import store from "../web_modules/app/store"
+import metadata from "../src/metadata.js"
+import routes from "../src/routes.js"
+import store from "../src/store.js"
phenomicClient({
metadata,
diff --git a/docs/scripts/phenomic.node.js b/docs/scripts/phenomic.node.js
index c529df27a..d40451b18 100644
--- a/docs/scripts/phenomic.node.js
+++ b/docs/scripts/phenomic.node.js
@@ -1,6 +1,6 @@
-import metadata from "../web_modules/app/metadata"
-import routes from "../web_modules/app/routes"
-import store from "../web_modules/app/store"
+import metadata from "../src/metadata.js"
+import routes from "../src/routes.js"
+import store from "../src/store.js"
import phenomicStatic from "phenomic/lib/static"
diff --git a/docs/scripts/showcase-screenshots.js b/docs/scripts/showcase-screenshots.js
index a690edc68..4fe47b7cb 100644
--- a/docs/scripts/showcase-screenshots.js
+++ b/docs/scripts/showcase-screenshots.js
@@ -25,7 +25,7 @@ showcasesFile.forEach((file) => {
const list = listTmp
// .slice(0,2) // for tests
-import urlToSlug from "../web_modules/url-to-slug"
+import urlToSlug from "../src/utils/url-to-slug"
import Nightmare from "nightmare"
const screenshotsLocation = resolve(
diff --git a/docs/src/AppContainer.js b/docs/src/AppContainer.js
new file mode 100644
index 000000000..4bd261c67
--- /dev/null
+++ b/docs/src/AppContainer.js
@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from "react"
+
+import "./index.global.css"
+import "./hightlightjs.global.css"
+
+import GoogleAnalyticsTracker from "./components/GoogleAnalyticsTracker"
+import Container from "./components/Container"
+import DefaultHeadMeta from "./components/DefaultHeadMeta"
+import AppCacheBanner from "./components/AppCacheBanner"
+import Header from "./components/Header"
+import Content from "./components/Content"
+import Footer from "./components/Footer"
+
+export default class AppContainer extends Component {
+
+ static propTypes = {
+ children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]),
+ params: PropTypes.object,
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+ { this.props.children }
+
+
+
+
+ )
+ }
+}
diff --git a/docs/web_modules/AppCacheBanner/index.css b/docs/src/components/AppCacheBanner/index.css
similarity index 100%
rename from docs/web_modules/AppCacheBanner/index.css
rename to docs/src/components/AppCacheBanner/index.css
diff --git a/docs/web_modules/AppCacheBanner/index.js b/docs/src/components/AppCacheBanner/index.js
similarity index 100%
rename from docs/web_modules/AppCacheBanner/index.js
rename to docs/src/components/AppCacheBanner/index.js
diff --git a/docs/web_modules/Banner/backgrounds/grass-sun.jpg b/docs/src/components/Banner/backgrounds/grass-sun.jpg
similarity index 100%
rename from docs/web_modules/Banner/backgrounds/grass-sun.jpg
rename to docs/src/components/Banner/backgrounds/grass-sun.jpg
diff --git a/docs/web_modules/Banner/backgrounds/grass.jpg b/docs/src/components/Banner/backgrounds/grass.jpg
similarity index 100%
rename from docs/web_modules/Banner/backgrounds/grass.jpg
rename to docs/src/components/Banner/backgrounds/grass.jpg
diff --git a/docs/web_modules/Banner/backgrounds/molecules.jpg b/docs/src/components/Banner/backgrounds/molecules.jpg
similarity index 100%
rename from docs/web_modules/Banner/backgrounds/molecules.jpg
rename to docs/src/components/Banner/backgrounds/molecules.jpg
diff --git a/docs/web_modules/Banner/index.css b/docs/src/components/Banner/index.css
similarity index 100%
rename from docs/web_modules/Banner/index.css
rename to docs/src/components/Banner/index.css
diff --git a/docs/web_modules/Banner/index.js b/docs/src/components/Banner/index.js
similarity index 89%
rename from docs/web_modules/Banner/index.js
rename to docs/src/components/Banner/index.js
index ecc45340a..3ab98ef9f 100644
--- a/docs/web_modules/Banner/index.js
+++ b/docs/src/components/Banner/index.js
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from "react"
import cx from "classnames"
-import Content from "../Content"
+import ContentWrapper from "../ContentWrapper"
import GradientLine from "../GradientLine"
import styles from "./index.css"
@@ -33,9 +33,9 @@ class Banner extends Component {
[styles.tiny]: props.tiny,
}) }
>
-
+
{ children }
-
+