From 21a9ce81b9a99e4dadb84b365887795e95b12a67 Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Thu, 1 Sep 2016 07:34:01 +0200 Subject: [PATCH] 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 | 11 ++++++ docs/content/404.md | 2 +- docs/content/docs/getting-started.md | 6 +-- docs/content/docs/usage/layouts.md | 4 +- docs/content/docs/usage/routing.md | 6 +-- docs/content/docs/usage/scripting.md | 2 +- docs/content/docs/usage/styling.md | 2 +- docs/content/docs/usage/write.md | 2 +- docs/content/loading.md | 2 +- package.json | 2 +- scripts/phenomic-theme-base.js | 7 +++- scripts/test-phenomic-theme-base.js | 4 +- .../setup/__tests__/stub/spawn-prompt.js | 2 +- src/bin/commands/setup/template.js | 2 +- themes/phenomic-theme-base/content/404.md | 2 +- themes/phenomic-theme-base/content/index.md | 14 +++++++ themes/phenomic-theme-base/content/loading.md | 2 +- .../scripts/phenomic.browser.js | 6 +-- .../scripts/phenomic.node.js | 6 +-- .../phenomic-theme-base/src/AppContainer.js | 29 ++++++++++++++ .../src/components/Container/index.css | 5 +++ .../src/components/Container/index.js | 18 +++++++++ .../src/components/Content/index.css | 6 +++ .../src/components/Content/index.js | 18 +++++++++ .../components/DefaultHeadMeta}/index.js | 23 ++--------- .../components}/Footer/index.css | 10 ++--- .../src/components/Footer/index.js | 25 ++++++++++++ .../components}/Header/index.css | 9 +++-- .../components}/Header/index.js | 4 +- .../components}/PagePreview/index.js | 0 .../components}/PagesList/index.js | 0 .../components}/icons/iconmonstr-github-1.svg | 0 .../icons/iconmonstr-twitter-1.svg | 0 .../LayoutContainer => src}/index.global.css | 7 +++- .../layouts/Homepage/index.js | 2 +- .../src/layouts/Page/index.css | 9 +++++ .../layouts/Page/index.js | 7 ++-- .../layouts/PageError/index.css | 0 .../layouts/PageError/index.js | 0 .../layouts/PageLoading/index.css | 0 .../layouts/PageLoading/index.js | 0 .../layouts/Post/index.js | 0 .../{web_modules/app => src}/metadata.js | 2 +- .../{web_modules/app => src}/routes.js | 16 ++++---- .../{web_modules/app => src}/store.js | 0 .../web_modules/Footer/index.js | 39 ------------------- .../web_modules/LayoutContainer/index.css | 9 ----- .../webpack.config.babel.js | 6 +-- 48 files changed, 205 insertions(+), 123 deletions(-) create mode 100644 themes/phenomic-theme-base/src/AppContainer.js create mode 100644 themes/phenomic-theme-base/src/components/Container/index.css create mode 100644 themes/phenomic-theme-base/src/components/Container/index.js create mode 100644 themes/phenomic-theme-base/src/components/Content/index.css create mode 100644 themes/phenomic-theme-base/src/components/Content/index.js rename themes/phenomic-theme-base/{web_modules/LayoutContainer => src/components/DefaultHeadMeta}/index.js (65%) rename themes/phenomic-theme-base/{web_modules => src/components}/Footer/index.css (63%) create mode 100644 themes/phenomic-theme-base/src/components/Footer/index.js rename themes/phenomic-theme-base/{web_modules => src/components}/Header/index.css (85%) rename themes/phenomic-theme-base/{web_modules => src/components}/Header/index.js (92%) rename themes/phenomic-theme-base/{web_modules => src/components}/PagePreview/index.js (100%) rename themes/phenomic-theme-base/{web_modules => src/components}/PagesList/index.js (100%) rename themes/phenomic-theme-base/{web_modules => src/components}/icons/iconmonstr-github-1.svg (100%) rename themes/phenomic-theme-base/{web_modules => src/components}/icons/iconmonstr-twitter-1.svg (100%) rename themes/phenomic-theme-base/{web_modules/LayoutContainer => src}/index.global.css (95%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/Homepage/index.js (92%) create mode 100644 themes/phenomic-theme-base/src/layouts/Page/index.css rename themes/phenomic-theme-base/{web_modules => src}/layouts/Page/index.js (93%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/PageError/index.css (100%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/PageError/index.js (100%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/PageLoading/index.css (100%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/PageLoading/index.js (100%) rename themes/phenomic-theme-base/{web_modules => src}/layouts/Post/index.js (100%) rename themes/phenomic-theme-base/{web_modules/app => src}/metadata.js (77%) rename themes/phenomic-theme-base/{web_modules/app => src}/routes.js (55%) rename themes/phenomic-theme-base/{web_modules/app => src}/store.js (100%) delete mode 100644 themes/phenomic-theme-base/web_modules/Footer/index.js delete mode 100644 themes/phenomic-theme-base/web_modules/LayoutContainer/index.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 2586d73b8..3aad1eda0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ - 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)) +## 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. 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/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/usage/layouts.md b/docs/content/docs/usage/layouts.md index 42fe2c0a9..e798ae998 100644 --- a/docs/content/docs/usage/layouts.md +++ b/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` diff --git a/docs/content/docs/usage/routing.md b/docs/content/docs/usage/routing.md index f7e89a072..837929d86 100644 --- a/docs/content/docs/usage/routing.md +++ b/docs/content/docs/usage/routing.md @@ -33,7 +33,7 @@ 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: @@ -41,7 +41,7 @@ to add routes to list files related to your tags: // ... export default ( - + @@ -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 54948ef62..82b0e5c1a 100644 --- a/docs/content/docs/usage/scripting.md +++ b/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 diff --git a/docs/content/docs/usage/styling.md b/docs/content/docs/usage/styling.md index 2a6b8b768..eb4f7d6bc 100644 --- a/docs/content/docs/usage/styling.md +++ b/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).** diff --git a/docs/content/docs/usage/write.md b/docs/content/docs/usage/write.md index ef0c10ce6..7d194d389 100644 --- a/docs/content/docs/usage/write.md +++ b/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) 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/package.json b/package.json index fb4de1365..3a0fdceba 100644 --- a/package.json +++ b/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:*", diff --git a/scripts/phenomic-theme-base.js b/scripts/phenomic-theme-base.js index cec7e7472..6d3b6494d 100644 --- a/scripts/phenomic-theme-base.js +++ b/scripts/phenomic-theme-base.js @@ -1,7 +1,7 @@ import lnfs from "lnfs" import testFolder from "./utils/test-folder.js" -const target = "phenomic-theme-base" +const target = "themes/phenomic-theme-base" testFolder( target, { @@ -9,7 +9,10 @@ testFolder( // 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" + ), ]), } ) diff --git a/scripts/test-phenomic-theme-base.js b/scripts/test-phenomic-theme-base.js index 685ec3f83..0546cf3bc 100644 --- a/scripts/test-phenomic-theme-base.js +++ b/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)"), ]), 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/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/themes/phenomic-theme-base/content/404.md b/themes/phenomic-theme-base/content/404.md index 51aabaa4e..16984de79 100644 --- a/themes/phenomic-theme-base/content/404.md +++ b/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`` diff --git a/themes/phenomic-theme-base/content/index.md b/themes/phenomic-theme-base/content/index.md index b7f9a622a..f209a7b6d 100644 --- a/themes/phenomic-theme-base/content/index.md +++ b/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 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/themes/phenomic-theme-base/content/loading.md b/themes/phenomic-theme-base/content/loading.md index 0e926efb2..34e6f160f 100644 --- a/themes/phenomic-theme-base/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/themes/phenomic-theme-base/scripts/phenomic.browser.js b/themes/phenomic-theme-base/scripts/phenomic.browser.js index a5e246bb4..365a35065 100644 --- a/themes/phenomic-theme-base/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/themes/phenomic-theme-base/scripts/phenomic.node.js b/themes/phenomic-theme-base/scripts/phenomic.node.js index c529df27a..d40451b18 100644 --- a/themes/phenomic-theme-base/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 } + +