Changed(phenomic-theme-base): new default file tree

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``

Closes #529
Closes #444

CHANGELOG.md

@@ -3,6 +3,17 @@
 - Removed: ``PageContainer`` does not wrap its child into a ``<div>``
   ([#691](https://github.com/MoOx/phenomic/pull/691) - @MoOx, based on @DavidWells [idea](https://github.com/MoOx/phenomic/pull/690))
 
+## 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
 
 - Fixed: error during static build have an accurate stack trace.

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``

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!

docs/content/docs/usage/layouts.md

@@ -31,7 +31,7 @@ layout: MyCustomLayoutComponent
 `Page` will be used as the default layout.
 **It is required for Phenomic to work by default.**
 
-[Check out the default `Page` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/web_modules/layouts/Page/index.js)
+[Check out the default `Page` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/src/layouts/Page/index.js)
 
 ### `PageError`
 
@@ -41,7 +41,7 @@ layout: MyCustomLayoutComponent
 _This layout is optional_ and a `PageContainer` contains a minimal fallback if
 it is not available.
 
-[Check out the default `PageError` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/web_modules/layouts/PageError/index.js)
+[Check out the default `PageError` and the `props` it has.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/src/layouts/PageError/index.js)
 
 ### `PageLoading`
 

docs/content/docs/usage/routing.md

@@ -33,15 +33,15 @@ to use those to define new routes via ``react-router``.
 ⚠️ _For now, Phenomic can handle strings and numbers values,
 as well as Array of strings and numbers._
 
-You can for example adjust ``web_modules/app/routes.js``
+You can for example adjust ``src/routes.js``
 (default location of the file containing routes)
 to add routes to list files related to your tags:
 
 ```js
 // ...
 
 export default (
-  <Route component={ LayoutContainer }>
+  <Route component={ AppContainer }>
     <Route path="tag/:tag" component={ ContainerThatWillListPostByTag } />
     <Route path="*" component={ PageContainer } />
   </Route>
@@ -124,7 +124,7 @@ if (isClient) {
  requireAuth = (nextState, replace) => {
     console.log(auth)
     if (!auth.loggedIn()) {
-      replace({ pathname: '/login' }) 
+      replace({ pathname: '/login' })
     }
   }
 }

docs/content/docs/usage/scripting.md

@@ -73,7 +73,7 @@ class Page extends Component {
 }
 ```
 
-[Check the usage in the phenomic-theme-base.](https://github.com/MoOx/phenomic/blob/master/themes/phenomic-theme-base/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
 

docs/content/docs/usage/styling.md

@@ -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).**
 

docs/content/docs/usage/write.md

@@ -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)

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.

package.json

@@ -170,7 +170,7 @@
     "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 themes/phenomic-theme-base/scripts themes/phenomic-theme-base/src themes/phenomic-theme-base/web_modules",
+    "lint:js:eslint": "eslint --ignore-path .gitignore --fix src __tests__ scripts npm docs/scripts docs/web_modules themes/phenomic-theme-base/scripts themes/phenomic-theme-base/src",
     "lint:js:flow": "flow check",
     "lint:js": "npm-run-all --parallel lint:js:*",
     "lint": "npm-run-all --parallel lint:*",

scripts/phenomic-theme-base.js

@@ -1,15 +1,18 @@
 import lnfs from "lnfs"
 import testFolder from "./utils/test-folder.js"
 
-const target = "phenomic-theme-base"
+const target = "themes/phenomic-theme-base"
 testFolder(
   target,
   {
     test: false,
 
     // phenomic-theme-base cleanup
     cleanup: async () => Promise.all([
-      await lnfs("docs/package.json", "phenomic-theme-base/package.json"),
+      await lnfs(
+        "docs/package.json",
+        "themes/phenomic-theme-base/package.json"
+      ),
     ]),
   }
 )

scripts/test-phenomic-theme-base.js

@@ -7,8 +7,8 @@ testFolder(
   {
     // test-phenomic-theme-base cleanup
     cleanup: async () => Promise.all([
-      rm("phenomic-theme-base/node_modules"),
-      rm("phenomic-theme-base/package.json"),
+      rm("themes/phenomic-theme-base/node_modules"),
+      rm("themes/phenomic-theme-base/package.json"),
       rm("test-phenomic-theme-base/!(node_modules)"),
     ]),
 

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",

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",

themes/phenomic-theme-base/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``

themes/phenomic-theme-base/content/index.md

@@ -9,11 +9,25 @@ 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
 <a href="https://facebook.github.io/react/">
   <img alt="" src="assets/react.svg" width="16" height="16" />
   React
 </a>.
+
+---
+
+You may want to take a look to the <a href="/404.html">404.html</a> page and
+the <a href="/loading/">loading</a> page.
+
+If you want to adjust those, directly adjust them in ``src/layouts/``.
+
+---

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.

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"
 

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"
 

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 (
+      <Container>
+        <DefaultHeadMeta />
+        <Header />
+        <Content>
+          { this.props.children }
+        </Content>
+        <Footer />
+      </Container>
+    )
+  }
+}

themes/phenomic-theme-base/src/components/Container/index.css

@@ -0,0 +1,5 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

themes/phenomic-theme-base/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 (
+      <div className={ styles.container }>
+        { this.props.children }
+      </div>
+    )
+  }
+}

themes/phenomic-theme-base/src/components/Content/index.css

@@ -0,0 +1,6 @@
+.content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}

themes/phenomic-theme-base/src/components/Content/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 (
+      <div className={ styles.content }>
+        { this.props.children }
+      </div>
+    )
+  }
+}

themes/phenomic-theme-base/web_modules/LayoutContainer/index.js → themes/phenomic-theme-base/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,10 +12,12 @@ export default class Layout extends Component {
       pkg,
     } = this.context.metadata
 
+    /* eslint-disable react/jsx-key */
     return (
-      <div className={ styles.layout }>
+      <div hidden>
         <Helmet
           meta={ [
+            // Please keep this generator tag, that can help to make stats
             {
               name: "generator", content: `${
               process.env.PHENOMIC_NAME } ${ process.env.PHENOMIC_VERSION }`,
@@ -46,12 +37,6 @@ export default class Layout extends Component {
           } ] }
         />
         <style>{ "@-ms-viewport { width: device-width; }" }</style>
-
-        <Header />
-        <div className={ styles.content }>
-          { this.props.children }
-        </div>
-        <Footer />
       </div>
     )
   }

themes/phenomic-theme-base/web_modules/Footer/index.css → themes/phenomic-theme-base/src/components/Footer/index.css

@@ -1,16 +1,16 @@
 .footer {
-  margin-top: 1rem;
-  padding: 1rem;
-  font-size: 0.75rem;
+  background: #000;
+  color: #fff;
   text-align: center;
 }
 
-.link {
+.phenomicReference {
+  font-size: 0.75rem;
   opacity: 0.4;
   color: inherit;
   text-decoration: none;
 }
 
-.reference {
+.phenomicReferenceName {
   font-weight: 100;
 }