diff --git a/.flowconfig b/.flowconfig index 565988fc4..c90a8b46f 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,7 +1,7 @@ [ignore] .*/node_modules/.* .*/docs/node_modules/.* -.*/test-boilerplate/.* +.*/test-phenomic-theme-base/.* .*/lib/.* .*/coverage/.* .*/.nyc_output/.* diff --git a/.gitignore b/.gitignore index 192404a13..9b8f780c4 100644 --- a/.gitignore +++ b/.gitignore @@ -25,10 +25,10 @@ docs/node_modules docs/dist docs/content/assets/showcases/* -# boilerplate files to work on it -boilerplate/package.json -boilerplate/dist -test-boilerplate +# phenomic-theme-base files to work on it +themes/phenomic-theme-base/package.json +themes/phenomic-theme-base/dist +test-phenomic-theme-base # logo logo/*.png diff --git a/.travis.yml b/.travis.yml index cfa5e7a1d..51746d11a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -13,7 +13,7 @@ matrix: cache: directories: - node_modules - - test-boilerplate/node_modules + - test-phenomic-theme-base/node_modules - docs/node_modules before_install: diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d5f182c7..58a4a9aa6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,33 @@ # HEAD +- Removed: ``BodyContainer`` now avoid wrapping content in a ``
`` 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 } - +
diff --git a/docs/web_modules/Button/index.css b/docs/src/components/Button/index.css similarity index 100% rename from docs/web_modules/Button/index.css rename to docs/src/components/Button/index.css diff --git a/docs/web_modules/Button/index.js b/docs/src/components/Button/index.js similarity index 100% rename from docs/web_modules/Button/index.js rename to docs/src/components/Button/index.js diff --git a/docs/src/components/Container/index.css b/docs/src/components/Container/index.css new file mode 100644 index 000000000..2e97cb057 --- /dev/null +++ b/docs/src/components/Container/index.css @@ -0,0 +1,5 @@ +.container { + min-height: 100vh; + display: flex; + flex-direction: column; +} diff --git a/docs/src/components/Container/index.js b/docs/src/components/Container/index.js new file mode 100644 index 000000000..c4cf9e798 --- /dev/null +++ b/docs/src/components/Container/index.js @@ -0,0 +1,18 @@ +import React, { Component, PropTypes } from "react" + +import styles from "./index.css" + +export default class Container extends Component { + + static propTypes = { + children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]), + }; + + render() { + return ( +
+ { this.props.children } +
+ ) + } +} diff --git a/docs/web_modules/LayoutContainer/index.css b/docs/src/components/Content/index.css similarity index 66% rename from docs/web_modules/LayoutContainer/index.css rename to docs/src/components/Content/index.css index 0b3ee6abe..28d634134 100644 --- a/docs/web_modules/LayoutContainer/index.css +++ b/docs/src/components/Content/index.css @@ -1,9 +1,6 @@ -.layout { - min-height: 100vh; - display: flex; - flex-direction: column; -} - .content { flex: 1; + display: flex; + align-items: stretch; + flex-direction: column; } diff --git a/docs/web_modules/Content/index.js b/docs/src/components/Content/index.js similarity index 100% rename from docs/web_modules/Content/index.js rename to docs/src/components/Content/index.js diff --git a/docs/web_modules/Content/index.css b/docs/src/components/ContentWrapper/index.css similarity index 100% rename from docs/web_modules/Content/index.css rename to docs/src/components/ContentWrapper/index.css diff --git a/docs/src/components/ContentWrapper/index.js b/docs/src/components/ContentWrapper/index.js new file mode 100644 index 000000000..59a95fe49 --- /dev/null +++ b/docs/src/components/ContentWrapper/index.js @@ -0,0 +1,18 @@ +import React, { Component, PropTypes } from "react" + +import styles from "./index.css" + +export default class Content extends Component { + + static propTypes = { + children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]), + }; + + render() { + return ( +
+ { this.props.children } +
+ ) + } +} diff --git a/boilerplate/web_modules/LayoutContainer/index.js b/docs/src/components/DefaultHeadMeta/index.js similarity index 65% rename from boilerplate/web_modules/LayoutContainer/index.js rename to docs/src/components/DefaultHeadMeta/index.js index 4b567ca3c..2a3a8176f 100644 --- a/boilerplate/web_modules/LayoutContainer/index.js +++ b/docs/src/components/DefaultHeadMeta/index.js @@ -1,18 +1,7 @@ import React, { Component, PropTypes } from "react" import Helmet from "react-helmet" -// Import global CSS before other components and their styles -import "./index.global.css" -import styles from "./index.css" - -import Header from "../Header" -import Footer from "../Footer" - -export default class Layout extends Component { - - static propTypes = { - children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]), - }; +export default class DefaultHeadMeta extends Component { static contextTypes = { metadata: PropTypes.object.isRequired, @@ -23,9 +12,13 @@ export default class Layout extends Component { pkg, } = this.context.metadata + /* eslint-disable react/jsx-key */ return ( -
+ ) } diff --git a/docs/web_modules/EditThisPage/index.js b/docs/src/components/EditThisPage/index.js similarity index 100% rename from docs/web_modules/EditThisPage/index.js rename to docs/src/components/EditThisPage/index.js diff --git a/docs/web_modules/Footer/index.css b/docs/src/components/Footer/index.css similarity index 100% rename from docs/web_modules/Footer/index.css rename to docs/src/components/Footer/index.css diff --git a/docs/web_modules/Footer/index.js b/docs/src/components/Footer/index.js similarity index 100% rename from docs/web_modules/Footer/index.js rename to docs/src/components/Footer/index.js diff --git a/docs/web_modules/GoogleAnalyticsTracker/index.js b/docs/src/components/GoogleAnalyticsTracker/index.js similarity index 100% rename from docs/web_modules/GoogleAnalyticsTracker/index.js rename to docs/src/components/GoogleAnalyticsTracker/index.js diff --git a/docs/web_modules/GradientLine/index.css b/docs/src/components/GradientLine/index.css similarity index 100% rename from docs/web_modules/GradientLine/index.css rename to docs/src/components/GradientLine/index.css diff --git a/docs/web_modules/GradientLine/index.js b/docs/src/components/GradientLine/index.js similarity index 100% rename from docs/web_modules/GradientLine/index.js rename to docs/src/components/GradientLine/index.js diff --git a/docs/web_modules/Header/chat.svg b/docs/src/components/Header/chat.svg similarity index 100% rename from docs/web_modules/Header/chat.svg rename to docs/src/components/Header/chat.svg diff --git a/docs/web_modules/Header/github.svg b/docs/src/components/Header/github.svg similarity index 100% rename from docs/web_modules/Header/github.svg rename to docs/src/components/Header/github.svg diff --git a/docs/web_modules/Header/index.css b/docs/src/components/Header/index.css similarity index 100% rename from docs/web_modules/Header/index.css rename to docs/src/components/Header/index.css diff --git a/docs/web_modules/Header/index.js b/docs/src/components/Header/index.js similarity index 96% rename from docs/web_modules/Header/index.js rename to docs/src/components/Header/index.js index 8d826365c..2af0070b3 100755 --- a/docs/web_modules/Header/index.js +++ b/docs/src/components/Header/index.js @@ -3,13 +3,13 @@ import Link from "phenomic/lib/Link" import Color from "color" -import Content from "../Content" +import ContentWrapper from "../ContentWrapper" import GradientLine from "../GradientLine" import styles from "./index.css" -import npmPkg from "../../../package.json" +import npmPkg from "../../../../package.json" import Svg from "react-svg-inline" -import phenomicLogoSvg from "../../../logo/phenomic.svg" +import phenomicLogoSvg from "../../../../logo/phenomic.svg" import chatSvg from "./chat.svg" import twitterSvg from "./twitter.svg" import githubSvg from "./github.svg" @@ -24,7 +24,7 @@ class Header extends Component { let i = 1 return (
- + - +
) diff --git a/docs/web_modules/Header/twitter.svg b/docs/src/components/Header/twitter.svg similarity index 100% rename from docs/web_modules/Header/twitter.svg rename to docs/src/components/Header/twitter.svg diff --git a/docs/web_modules/Showcase/index.css b/docs/src/components/Showcase/index.css similarity index 100% rename from docs/web_modules/Showcase/index.css rename to docs/src/components/Showcase/index.css diff --git a/docs/web_modules/Showcase/index.js b/docs/src/components/Showcase/index.js similarity index 97% rename from docs/web_modules/Showcase/index.js rename to docs/src/components/Showcase/index.js index 51e039d7e..aff1550bc 100644 --- a/docs/web_modules/Showcase/index.js +++ b/docs/src/components/Showcase/index.js @@ -2,9 +2,9 @@ import React, { Component, PropTypes } from "react" import { Link } from "phenomic/lib/Link" import enhanceCollection from "phenomic/lib/enhance-collection" -import urlToSlug from "../url-to-slug" +import urlToSlug from "../../utils/url-to-slug" -import Page from "../layouts/Page" +import Page from "../../layouts/Page" import styles from "./index.css" @@ -60,7 +60,7 @@ class Showcase extends Component { head={ { title: "See who's using Phenomic", } } - __filename={ "../web_modules/Showcase/index.js" } + __filename={ "../layouts/Showcase/index.js" } __url={ "/showcase/" } > { addYourOwn } diff --git a/docs/web_modules/LayoutContainer/hightlightjs.global.css b/docs/src/hightlightjs.global.css similarity index 100% rename from docs/web_modules/LayoutContainer/hightlightjs.global.css rename to docs/src/hightlightjs.global.css diff --git a/docs/web_modules/LayoutContainer/index.global.css b/docs/src/index.global.css similarity index 98% rename from docs/web_modules/LayoutContainer/index.global.css rename to docs/src/index.global.css index 5521a0ce8..00afacaff 100644 --- a/docs/web_modules/LayoutContainer/index.global.css +++ b/docs/src/index.global.css @@ -66,12 +66,11 @@ blockquote { pre { margin: 1rem 0; + max-width: calc(100vw - 2rem); + overflow: auto; font-size: 1rem; line-height: 1.5rem; - - overflow: auto; - max-width: calc(100vw - 4rem); } code { diff --git a/docs/web_modules/layouts/Homepage/index.css b/docs/src/layouts/Homepage/index.css similarity index 100% rename from docs/web_modules/layouts/Homepage/index.css rename to docs/src/layouts/Homepage/index.css diff --git a/docs/web_modules/layouts/Homepage/index.js b/docs/src/layouts/Homepage/index.js similarity index 95% rename from docs/web_modules/layouts/Homepage/index.js rename to docs/src/layouts/Homepage/index.js index 56127f2a6..c7f358d8b 100644 --- a/docs/web_modules/layouts/Homepage/index.js +++ b/docs/src/layouts/Homepage/index.js @@ -6,9 +6,9 @@ import Link from "phenomic/lib/Link" // import phenomicLogoSvg from "../../../../logo/phenomic-logo-white.svg" import phenomicLogo from "../../../../logo/phenomic-logo-white.png" -import Button from "../../Button" -import Banner from "../../Banner" -// import Content from "../../Content" +import Button from "../../components/Button" +import Banner from "../../components/Banner" +// import Content from "../../components/Content" import Page from "../Page" diff --git a/docs/web_modules/layouts/Page/index.css b/docs/src/layouts/Page/index.css similarity index 100% rename from docs/web_modules/layouts/Page/index.css rename to docs/src/layouts/Page/index.css diff --git a/docs/web_modules/layouts/Page/index.js b/docs/src/layouts/Page/index.js similarity index 92% rename from docs/web_modules/layouts/Page/index.js rename to docs/src/layouts/Page/index.js index f40c724d9..3c3d03cf9 100644 --- a/docs/web_modules/layouts/Page/index.js +++ b/docs/src/layouts/Page/index.js @@ -3,9 +3,9 @@ import Helmet from "react-helmet" import invariant from "invariant" import { joinUri, BodyContainer } from "phenomic" -import EditThisPage from "../../EditThisPage" -import Banner from "../../Banner" -import Content from "../../Content" +import EditThisPage from "../../components/EditThisPage" +import Banner from "../../components/Banner" +import ContentWrapper from "../../components/ContentWrapper" import styles from "./index.css" @@ -64,7 +64,7 @@ export default class Page extends Component { ) return ( -
+
} - + { // to avoid "weird" visual result, we put actions at the top only // if page has a title, other wise (eg: homepage) it can be a little @@ -107,7 +107,7 @@ export default class Page extends Component { } { this.props.children } { PageActions } - +
) } diff --git a/boilerplate/web_modules/layouts/PageError/index.css b/docs/src/layouts/PageError/index.css similarity index 100% rename from boilerplate/web_modules/layouts/PageError/index.css rename to docs/src/layouts/PageError/index.css diff --git a/boilerplate/web_modules/layouts/PageError/index.js b/docs/src/layouts/PageError/index.js similarity index 100% rename from boilerplate/web_modules/layouts/PageError/index.js rename to docs/src/layouts/PageError/index.js diff --git a/docs/web_modules/layouts/PageLoading/index.css b/docs/src/layouts/PageLoading/index.css similarity index 100% rename from docs/web_modules/layouts/PageLoading/index.css rename to docs/src/layouts/PageLoading/index.css diff --git a/docs/web_modules/layouts/PageLoading/index.js b/docs/src/layouts/PageLoading/index.js similarity index 93% rename from docs/web_modules/layouts/PageLoading/index.js rename to docs/src/layouts/PageLoading/index.js index c07ef3107..4165ab53e 100644 --- a/docs/web_modules/layouts/PageLoading/index.js +++ b/docs/src/layouts/PageLoading/index.js @@ -2,7 +2,7 @@ import React, { Component } from "react" import Helmet from "react-helmet" import TopBarProgressIndicator from "react-topbar-progress-indicator" -import Banner from "../../Banner" +import Banner from "../../components/Banner" import styles from "./index.css" diff --git a/boilerplate/web_modules/app/metadata.js b/docs/src/metadata.js similarity index 100% rename from boilerplate/web_modules/app/metadata.js rename to docs/src/metadata.js diff --git a/docs/web_modules/app/routes.js b/docs/src/routes.js similarity index 60% rename from docs/web_modules/app/routes.js rename to docs/src/routes.js index f15e32ffb..edd3850df 100644 --- a/docs/web_modules/app/routes.js +++ b/docs/src/routes.js @@ -1,15 +1,15 @@ import React, { Component } from "react" import { Route } from "react-router" -import LayoutContainer from "../LayoutContainer" -import PhenomicPageContainer from "phenomic/lib/PageContainer" +import AppContainer from "./AppContainer.js" +import { PageContainer as PhenomicPageContainer } from "phenomic" -import Page from "../layouts/Page" -import PageError from "../layouts/PageError" -import PageLoading from "../layouts/PageLoading" -import Homepage from "../layouts/Homepage" +import Page from "./layouts/Page" +import PageError from "./layouts/PageError" +import PageLoading from "./layouts/PageLoading" +import Homepage from "./layouts/Homepage" -import Showcase from "../Showcase" +import Showcase from "./components/Showcase" class PageContainer extends Component { render() { @@ -29,7 +29,7 @@ class PageContainer extends Component { } export default ( - + diff --git a/boilerplate/web_modules/app/store.js b/docs/src/store.js similarity index 100% rename from boilerplate/web_modules/app/store.js rename to docs/src/store.js diff --git a/docs/web_modules/url-to-slug/index.js b/docs/src/utils/url-to-slug/index.js similarity index 100% rename from docs/web_modules/url-to-slug/index.js rename to docs/src/utils/url-to-slug/index.js diff --git a/docs/webpack.config.babel.js b/docs/webpack.config.babel.js index d55115731..513d59ad3 100644 --- a/docs/webpack.config.babel.js +++ b/docs/webpack.config.babel.js @@ -42,7 +42,7 @@ export const makeConfig = (config = {}) => { ], include: [ path.resolve(__dirname, "scripts"), - path.resolve(__dirname, "web_modules"), + path.resolve(__dirname, "src"), // BECAUSE DOCS USE NON TRANSPILED CODE path.resolve(__dirname, "..", "src"), @@ -52,6 +52,7 @@ export const makeConfig = (config = {}) => { { test: /\.css$/, exclude: /\.global\.css$/, + include: path.resolve(__dirname, "src"), loader: ExtractTextPlugin.extract( "style-loader", [ `css-loader?modules&localIdentName=${ @@ -65,6 +66,7 @@ export const makeConfig = (config = {}) => { }, { test: /\.global\.css$/, + include: path.resolve(__dirname, "src"), loader: ExtractTextPlugin.extract( "style-loader", [ "css-loader", "postcss-loader" ].join("!"), diff --git a/npm/postinstall.js b/npm/postinstall.js index 260e54a64..c13cefafc 100644 --- a/npm/postinstall.js +++ b/npm/postinstall.js @@ -8,20 +8,22 @@ if (process.env.CI) { process.exit(0) } -const boilerplateDir = join(__dirname, "../boilerplate") +const phenomicThemeBaseDir = join(__dirname, "../themes/phenomic-theme-base") -stat(join(boilerplateDir, ".npmignore"), function(err) { +stat(join(phenomicThemeBaseDir, ".npmignore"), function(err) { if (err) { - console.log("No .npmignore in boilerplate to rename") + console.log("No .npmignore in phenomic-theme-base to rename") return true } fs.move( - join(boilerplateDir, ".npmignore"), - join(boilerplateDir, ".gitignore"), + join(phenomicThemeBaseDir, ".npmignore"), + join(phenomicThemeBaseDir, ".gitignore"), function(err) { if (err) { - throw new Error("Cannot rename .npmignore to .gitignore in boilerplate") + throw new Error( + "Cannot rename .npmignore to .gitignore in phenomic-theme-base" + ) } } ) diff --git a/package.json b/package.json index 0d3bb97c7..f23f37eb3 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "npm", "lib", "src", - "boilerplate", + "themes", "docs/content", "!**/__tests__" ], @@ -172,26 +172,25 @@ "transpile": "babel --ignore __tests__ --copy-files src --out-dir lib", "prepublish": "rimraf lib && npm run transpile", "#lint:js:eslint": "https://github.com/eslint/eslint/issues/5679", - "lint:js:eslint": "eslint --ignore-path .gitignore --fix src __tests__ scripts npm docs/scripts docs/src docs/web_modules boilerplate/scripts boilerplate/src boilerplate/web_modules", + "lint:js:eslint": "eslint --ignore-path .gitignore --fix src __tests__ scripts npm docs/scripts docs/src themes/phenomic-theme-base/scripts themes/phenomic-theme-base/src", "lint:js:flow": "flow check", "lint:js": "npm-run-all --parallel lint:js:*", - "lint:css": "stylelint \"+(boilerplate|docs)/web_modules/**/*.css\"", "lint": "npm-run-all --parallel lint:*", "tests": "ava", "#integration-tests": "needs this order (index test the build, and cli is cleaning it)", "integration-tests": "ava __tests__/index.js && ava __tests__/cli.js", - "pretest-boilerplate": "npm run transpile", - "test-boilerplate": "babel-node scripts/test-boilerplate.js", - "posttest-boilerplate": "npm run integration-tests", + "pretest-phenomic-theme-base": "npm run transpile", + "test-phenomic-theme-base": "babel-node scripts/test-phenomic-theme-base.js", + "posttest-phenomic-theme-base": "npm run integration-tests", "docs": "babel-node scripts/docs.js && cd docs && npm -s run showcase-screenshots", "predocs-start": "npm -s run docs", "docs-start": "cd docs && npm start", "predocs-deploy": "cd docs && npm run build", "docs-deploy": "cd docs && ./scripts/deploy.sh", - "preboilerplate-start": "npm -s run transpile && babel-node scripts/boilerplate.js", - "boilerplate-start": "cd boilerplate && npm start", + "prephenomic-theme-base-start": "npm -s run transpile && babel-node scripts/phenomic-theme-base.js", + "phenomic-theme-base-start": "cd themes/phenomic-theme-base && npm start", "preall-tests": "npm run lint", - "all-tests": "cross-env NODE_ENV=test npm run tests && npm run test-boilerplate && npm run docs", + "all-tests": "cross-env NODE_ENV=test npm run tests && npm run test-phenomic-theme-base && npm run docs", "test": "npm run all-tests", "test-with-coverage": "nyc --check-coverage --lines 70 npm run all-tests", "coverage": "nyc report --reporter=text-lcov | coveralls", diff --git a/scripts/boilerplate.js b/scripts/boilerplate.js deleted file mode 100644 index c9ceac6af..000000000 --- a/scripts/boilerplate.js +++ /dev/null @@ -1,15 +0,0 @@ -import lnfs from "lnfs" -import testFolder from "./utils/test-folder.js" - -const target = "boilerplate" -testFolder( - target, - { - test: false, - - // boilerplate cleanup - cleanup: async () => Promise.all([ - await lnfs("docs/package.json", "boilerplate/package.json"), - ]), - } -) diff --git a/scripts/phenomic-theme-base.js b/scripts/phenomic-theme-base.js new file mode 100644 index 000000000..6d3b6494d --- /dev/null +++ b/scripts/phenomic-theme-base.js @@ -0,0 +1,18 @@ +import lnfs from "lnfs" +import testFolder from "./utils/test-folder.js" + +const target = "themes/phenomic-theme-base" +testFolder( + target, + { + test: false, + + // phenomic-theme-base cleanup + cleanup: async () => Promise.all([ + await lnfs( + "docs/package.json", + "themes/phenomic-theme-base/package.json" + ), + ]), + } +) diff --git a/scripts/test-boilerplate.js b/scripts/test-phenomic-theme-base.js similarity index 58% rename from scripts/test-boilerplate.js rename to scripts/test-phenomic-theme-base.js index d8ab56396..0546cf3bc 100644 --- a/scripts/test-boilerplate.js +++ b/scripts/test-phenomic-theme-base.js @@ -1,15 +1,15 @@ import { remove as rm } from "fs-promise" import testFolder, { exec } from "./utils/test-folder.js" -const target = "test-boilerplate" +const target = "test-phenomic-theme-base" testFolder( target, { - // test-boilerplate cleanup + // test-phenomic-theme-base cleanup cleanup: async () => Promise.all([ - rm("boilerplate/node_modules"), - rm("boilerplate/package.json"), - rm("test-boilerplate/!(node_modules)"), + rm("themes/phenomic-theme-base/node_modules"), + rm("themes/phenomic-theme-base/package.json"), + rm("test-phenomic-theme-base/!(node_modules)"), ]), init: async () => { diff --git a/scripts/utils/test-folder.js b/scripts/utils/test-folder.js index 6f7146722..482e31724 100644 --- a/scripts/utils/test-folder.js +++ b/scripts/utils/test-folder.js @@ -1,5 +1,5 @@ -// All these weird steps for this 'simple' test-boilerplate has been made to -// boost CI testing, tune with care if you dare to +// All these weird steps for this 'simple' test-phenomic-theme-base has been +// made to boost CI testing, tune with care if you dare to import pify from "pify" import { remove as rm } from "fs-promise" diff --git a/src/PageContainer/index.js b/src/PageContainer/index.js index 408359ad1..d67a0a411 100644 --- a/src/PageContainer/index.js +++ b/src/PageContainer/index.js @@ -1,16 +1,10 @@ -import { connect } from "react-redux" -import * as pageActions from "../redux/modules/pages" +// deprecated +import PageContainer from "../components/PageContainer" +import colors from "chalk" -import PageContainer from "./component" +console.log("⚠️ " + colors.yellow( + "'phenomic/lib/PageContainer' reference is deprecated.\n" + + "Please use `import { PageContainer } from \"phenomic\" instead`." +)) -export default connect( - ({ pages }) => { - return { pages } - }, - (dispatch) => { - return { - getPage: (...args) => dispatch(pageActions.get(...args)), - setPageNotFound: (...args) => dispatch(pageActions.setNotFound(...args)), - } - }, -)(PageContainer) +export default PageContainer diff --git a/src/bin/commands/setup/__tests__/stub/spawn-prompt.js b/src/bin/commands/setup/__tests__/stub/spawn-prompt.js index 95a3d83b1..dce78390b 100644 --- a/src/bin/commands/setup/__tests__/stub/spawn-prompt.js +++ b/src/bin/commands/setup/__tests__/stub/spawn-prompt.js @@ -1,7 +1,7 @@ require("babel-register") const inquirer = require("inquirer") // For testing purpose only -// Spawn a new process with inquirer auto acive +// Spawn a new process with inquirer auto active // Receive "Done" message indicate that test is passed const questions = { type: "input", diff --git a/src/bin/commands/setup/index.js b/src/bin/commands/setup/index.js index c73d6a97d..aa65eb7ae 100644 --- a/src/bin/commands/setup/index.js +++ b/src/bin/commands/setup/index.js @@ -11,6 +11,8 @@ import { optionalPeerDependencies as opPeerDeps, } from "../../../../package.json" +const themePath = join(__dirname, "../../../../themes/phenomic-theme-base") + export default async function setup(argv) { const cwd = process.cwd() const testMode = argv.test @@ -42,9 +44,8 @@ export default async function setup(argv) { await fs.writeJson(join(cwd, "package.json"), pkg) console.log(color.green("Generated package.json file")) - const boilerplatePath = join(__dirname, "../../../../boilerplate") - await fs.copy(boilerplatePath, cwd) - console.log(color.green("Copied boilerplate")) + await fs.copy(themePath, cwd) + console.log(color.green("Copied theme")) console.log( color.green("Setup done. Now run \"npm install\" to get started") diff --git a/src/bin/commands/setup/template.js b/src/bin/commands/setup/template.js index b9ded7018..de1fe8bbe 100644 --- a/src/bin/commands/setup/template.js +++ b/src/bin/commands/setup/template.js @@ -7,7 +7,7 @@ const template = { "repository": undefined, "scripts": { "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/src/client/index.js b/src/client/index.js index 53448d70a..5db5c39a2 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -7,7 +7,7 @@ import createBrowserHistory from "history/lib/createBrowserHistory" import useScroll from "react-router-scroll/lib/useScroll" import { Provider as ReduxContextProvider } from "react-redux" -import PhenomicContextProvider from "../ContextProvider" +import PhenomicContextProvider from "../components/ContextProvider" export const browserHistory = typeof window !== "undefined" // just for node testing diff --git a/src/components/BodyContainer/__tests__/index.js b/src/components/BodyContainer/__tests__/index.js index 4ab76ce05..c4a4941a5 100644 --- a/src/components/BodyContainer/__tests__/index.js +++ b/src/components/BodyContainer/__tests__/index.js @@ -5,10 +5,11 @@ import { createRenderer } from "react-addons-test-utils" import expect from "expect" import expectJSX from "expect-jsx" -expect.extend(expectJSX) - import BodyContainer from "../index.js" +expect.extend(expectJSX) +const Noop = () => {} + test("should wrap html", () => { const html = "test" const renderer = createRenderer() @@ -16,19 +17,15 @@ test("should wrap html", () => { { html } ) expect(renderer.getRenderOutput()).toEqualJSX( -
-
-
+
) }) test("should wrap html and children", () => { const html = "test" - const Noop = () => {} const renderer = createRenderer() renderer.render( @@ -53,3 +50,35 @@ test("should wrap html and children", () => {
) }) + +test("should accept props", () => { + const html = "test" + const renderer = createRenderer() + renderer.render( + { html } + ) + expect(renderer.getRenderOutput()).toEqualJSX( +
+ ) +}) + +test("should accept props for wrapper", () => { + const html = "test" + const renderer = createRenderer() + renderer.render( + { html } + ) + expect(renderer.getRenderOutput()).toEqualJSX( +
+
+ +
+ ) +}) diff --git a/src/components/BodyContainer/index.js b/src/components/BodyContainer/index.js index 87d690044..705bf8e97 100644 --- a/src/components/BodyContainer/index.js +++ b/src/components/BodyContainer/index.js @@ -10,11 +10,35 @@ class BodyContainer extends Component { render(): React$Element { const { props }: { props: Props } = this + const { children, ...otherProps } = props + + let child + if (typeof children === "string") { + child = children + } + else { + try { + child = React.Children.only(children) + } + catch (e) { + console.log("phenomic: BodyContainer: multiple childs") + } + } + + if (child) { + return ( +
+ ) + } return ( -
+
{ - React.Children.map(props.children, (child: any, i) => { + React.Children.map(children, (child: any, i) => { if (typeof child === "string") { return (
{ + return { pages } + }, + (dispatch) => { + return { + getPage: (...args) => dispatch(pageActions.get(...args)), + setPageNotFound: (...args) => dispatch(pageActions.setNotFound(...args)), + } + }, +)(PageContainer) diff --git a/src/index.js b/src/index.js index fb280c883..647987cdc 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ // because // https://github.com/facebook/flow/issues/1674 +export { default as PageContainer } from "./components/PageContainer" export { default as BodyContainer } from "./components/BodyContainer" export { default as joinUri } from "url-join" diff --git a/src/static/to-html/url-as-html.js b/src/static/to-html/url-as-html.js index 44cfdbacb..947a8af9a 100644 --- a/src/static/to-html/url-as-html.js +++ b/src/static/to-html/url-as-html.js @@ -9,7 +9,7 @@ import Helmet from "react-helmet" import htmlMetas from "../../_utils/html-metas" import pathToUri from "../../_utils/path-to-uri" import Html from "./Html" -import PhenomicContextProvider from "../../ContextProvider" +import PhenomicContextProvider from "../../components/ContextProvider" import serialize from "../../_utils/serialize" import minifyCollection from "../../phenomic-loader/minify" diff --git a/boilerplate/.gitignore b/themes/phenomic-theme-base/.gitignore similarity index 100% rename from boilerplate/.gitignore rename to themes/phenomic-theme-base/.gitignore diff --git a/boilerplate/README.md b/themes/phenomic-theme-base/README.md similarity index 68% rename from boilerplate/README.md rename to themes/phenomic-theme-base/README.md index 6a0d1afd3..3bfede67a 100644 --- a/boilerplate/README.md +++ b/themes/phenomic-theme-base/README.md @@ -1,4 +1,4 @@ -# [Phenomic](https://github.com/MoOx/phenomic) boilerplate +# [Phenomic](https://github.com/MoOx/phenomic) phenomic-theme-base ## Install dependencies diff --git a/themes/phenomic-theme-base/content/404.md b/themes/phenomic-theme-base/content/404.md new file mode 100644 index 000000000..16984de79 --- /dev/null +++ b/themes/phenomic-theme-base/content/404.md @@ -0,0 +1,5 @@ +--- +layout: PageError +route: 404.html +--- +Content here not used, see ``src/layouts/PageError`` diff --git a/boilerplate/content/assets/react.svg b/themes/phenomic-theme-base/content/assets/react.svg similarity index 100% rename from boilerplate/content/assets/react.svg rename to themes/phenomic-theme-base/content/assets/react.svg diff --git a/themes/phenomic-theme-base/content/index.md b/themes/phenomic-theme-base/content/index.md new file mode 100644 index 000000000..f209a7b6d --- /dev/null +++ b/themes/phenomic-theme-base/content/index.md @@ -0,0 +1,33 @@ +--- +title: Phenomic base theme +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/) +* [Getting Started](https://phenomic.io/docs/getting-started/) +* [Usage](https://phenomic.io/docs/usage/) +* [FAQ](https://phenomic.io/docs/faq/) + +Also take a look to +[existing websites that use Phenomic](https://phenomic.io/showcase/), +some projects share their source code! + +Built with + + + React +. + +--- + +You may want to take a look to the 404.html page and +the loading page. + +If you want to adjust those, directly adjust them in ``src/layouts/``. + +--- diff --git a/boilerplate/content/loading.md b/themes/phenomic-theme-base/content/loading.md similarity index 61% rename from boilerplate/content/loading.md rename to themes/phenomic-theme-base/content/loading.md index 0e926efb2..34e6f160f 100644 --- a/boilerplate/content/loading.md +++ b/themes/phenomic-theme-base/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 if you want. diff --git a/boilerplate/content/posts/first-post.md b/themes/phenomic-theme-base/content/posts/first-post.md similarity index 100% rename from boilerplate/content/posts/first-post.md rename to themes/phenomic-theme-base/content/posts/first-post.md diff --git a/boilerplate/content/posts/hello-world.md b/themes/phenomic-theme-base/content/posts/hello-world.md similarity index 100% rename from boilerplate/content/posts/hello-world.md rename to themes/phenomic-theme-base/content/posts/hello-world.md diff --git a/boilerplate/scripts/phenomic.browser.js b/themes/phenomic-theme-base/scripts/phenomic.browser.js similarity index 81% rename from boilerplate/scripts/phenomic.browser.js rename to themes/phenomic-theme-base/scripts/phenomic.browser.js index a5e246bb4..365a35065 100644 --- a/boilerplate/scripts/phenomic.browser.js +++ b/themes/phenomic-theme-base/scripts/phenomic.browser.js @@ -1,8 +1,8 @@ import "whatwg-fetch" -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 phenomicClient from "phenomic/lib/client" diff --git a/boilerplate/scripts/phenomic.node.js b/themes/phenomic-theme-base/scripts/phenomic.node.js similarity index 52% rename from boilerplate/scripts/phenomic.node.js rename to themes/phenomic-theme-base/scripts/phenomic.node.js index c529df27a..d40451b18 100644 --- a/boilerplate/scripts/phenomic.node.js +++ b/themes/phenomic-theme-base/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/themes/phenomic-theme-base/src/AppContainer.js b/themes/phenomic-theme-base/src/AppContainer.js new file mode 100644 index 000000000..39679b894 --- /dev/null +++ b/themes/phenomic-theme-base/src/AppContainer.js @@ -0,0 +1,29 @@ +import React, { Component, PropTypes } from "react" + +import "./index.global.css" + +import Container from "./components/Container" +import DefaultHeadMeta from "./components/DefaultHeadMeta" +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 ]), + }; + + render() { + return ( + + +
+ + { this.props.children } + +