From f20abf2ad2a4b4033098f90d27d5660b1a12361a Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Wed, 21 Oct 2015 09:36:45 +0200 Subject: [PATCH] 0.1.0 Close #35 --- CHANGELOG.md | 4 +- README.md | 5 +- demo/content/docs/setup.md | 22 +++++++- demo/content/docs/usage.md | 91 ++++++++++++++++++++++++------- demo/content/index.md | 45 +++++++++++---- demo/package.json | 13 ++--- demo/web_modules/Layout/index.css | 88 +++++++++++++++++++++++++++--- demo/web_modules/Layout/index.js | 10 ++++ package.json | 24 +++++++- 9 files changed, 243 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8efb76fba..1c20a656c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,3 @@ -# 0.0.0 +# 0.1.0 - 2015-10-21 -No release has been made yet. Everything is highly subject to changes. +💥 diff --git a/README.md b/README.md index b1b7d5390..ad82ff2e0 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,11 @@ # statinamic -> A static website generator that create dynamic website using React components. +> A static website generator to create dynamic website using React components. [![Travis Build Badge](https://img.shields.io/travis/MoOx/statinamic/master.svg)](https://travis-ci.org/MoOx/statinamic) [![Support on reactiflux#statinamic](https://img.shields.io/badge/support-reactiflux%23statinamic-738bd7.svg)](https://discord.gg/0ZcbPKXt5bW1pAiw) - -## [Check out the website](http://moox.io/statinamic) for documentation. +**[Check out the website](http://moox.io/statinamic) for documentation.** --- diff --git a/demo/content/docs/setup.md b/demo/content/docs/setup.md index 1ba660cb9..892604225 100644 --- a/demo/content/docs/setup.md +++ b/demo/content/docs/setup.md @@ -2,6 +2,25 @@ title: How to setup statinamic --- +## Install (from npm) + +For now, the easiest way to quickly get a project running will be to copy the +demo. +So create a project folder for you website then, get the +[demo](https://github.com/MoOx/statinamic/tree/master/demo) +(except the `node_modules` folder), then + +```console +$ npm install +$ npm install --save-dev statinamic +``` + +Now you will need to update `web_modules/Layout` and other components as needed. + +More explanation below and more to come. + +--- + ## Setup the boilerplate In order to get your engine ready, you need to: @@ -75,6 +94,3 @@ plain React components. This generator is just an helper. for unit tests. _⚠︎ The packages above are used in the [demo](https://github.com/MoOx/statinamic/tree/master/demo)._ - -This project has been inspired by -[react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example/) diff --git a/demo/content/docs/usage.md b/demo/content/docs/usage.md index e147a8a60..902794bbd 100644 --- a/demo/content/docs/usage.md +++ b/demo/content/docs/usage.md @@ -17,29 +17,78 @@ _More to come._ You will have multiples possibilities to deploy your `dist` folder on the `gh-pages` branch. + +### Get a package to automate deployment on a branch + +- [gh-pages](https://www.npmjs.com/package/gh-pages) + +```console +$ npm i -D gh-pages +``` + +### Add a script to deploy + +#### Manually, on the gh-pages branch + +In your `package.json`, add the following `scripts` + +```json +{ + "predeploy": "npm run static", + "deploy": "gh-pages -d dist" +} +``` + +Now run + +```console +$ npm run deploy +``` + +It should be good! + +#### Automatically with Travis-CI + Here is one quick and easy way to setup automatic deployment on each commit pushed to master that should take a couple of minutes to setup: -- [Enable Travis-CI for your repository](https://travis-ci.org/profile) - (you may need to hit the `Sync` button to see your repository if it's need) -- Create a `.travis.yml` file with this - ```yml - language: node_js - ``` -- [Generate a new token](https://github.com/settings/tokens/new) with only - `repo` or `public_repo` scopes. -- Copy and encrypt this new token - ```console - $ sudo gem install travis - $ travis encrypt --add --repo YOU/YOUR_REPO GH_TOKEN=the_token_here - ``` -- Get [gh-pages](https://www.npmjs.com/package/gh-pages) from npm - ```console - $ npm i -D gh-pages - ``` -- Add this in your `package.json` `scripts` section - ```json +##### Enable Travis-CI for your repository + +- https://travis-ci.org/profile + +You may need to hit the `Sync` button to see your repository if it's need. + +##### Create a `.travis.yml` + +```yml +language: node_js +node_js: + - 4 +``` + +##### Generate a new token + +- https://github.com/settings/tokens/new + +With only `repo` or `public_repo` scopes. + +##### Copy and encrypt this new token + +```console +$ sudo gem install travis +$ travis encrypt --add --repo YOU/YOUR_REPO GH_TOKEN=the_token_here +``` + +##### Add `test` script in your `package.json` + +```json +{ "ci-deploy": "if [ \"$TRAVIS_PULL_REQUEST\" = \"false\" ] && [ \"$TRAVIS_BRANCH\" = \"master\" ]; then gh-pages -d dist; fi;", "test": "npm run ci-deploy" - ``` -- Commit and push to master, wait a minute and it should be good. +} +``` + +Now, commit and push to master, wait a couple of minute and it should be good. + +**Note: `gh-pages` package doesn't seems to work well on Travis, please track this +issue https://github.com/MoOx/statinamic/issues/27** diff --git a/demo/content/index.md b/demo/content/index.md index 681e34326..7626ff22a 100644 --- a/demo/content/index.md +++ b/demo/content/index.md @@ -1,23 +1,40 @@ --- -title: Statinamic +title: Statinamic ➠ --- -> The only "static but dynamic" website generator +> A static website generator to create dynamic website using React components. -## Simple to use +--- + +**Note that _Statinamic_ is at an early stage, there is still some work to do, +some tests to write.** + +_Do not hesitate to:_ + +- ask question on [reactiflux#statinamic](https://discord.gg/0ZcbPKXt5bW1pAiw) +- [open an issue](https://github.com/MoOx/statinamic/issues/new) + when you find a bug (or think you have) + +**At the moment, please consider looking at the [demo](demo) folder as a +example.** + +--- + +## Easy to use + +Write your content in [Markdown](https://en.wikipedia.org/wiki/Markdown) files. +Implement your design with JavaScript files, using [React](http://facebook.github.io/react/). + +No template language to learn. Just JavaScript (or JSX if you like it). -Your database are [Markdown](https://en.wikipedia.org/wiki/Markdown) -files. -Your layouts are JavaScript files. -No pesky template language to learn. -No need for specific plugins. You can just grab some packages on the [NPM ecosystem](http://npmjs.org/) to help you building your website, blog or even your small app. -## Static and dynamic? +_Statinamic_ will help you to generate and deploy a generated website in a +breath. -Generate and deploy a static website take less than a minute. No server/cms -updates required. No hacking possible. It just works™. + +## Static and dynamic? The technology ([React](http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome)). @@ -27,6 +44,7 @@ rendering). So when the client has established a connection with your website, they can get the same UX as an app by grabbing the minimal amount of data for each new page. + + +--- -[Read the documentation](docs/) +➠ [Read the documentation](docs/) diff --git a/demo/package.json b/demo/package.json index 31997fa9f..4d8fa620c 100644 --- a/demo/package.json +++ b/demo/package.json @@ -1,14 +1,9 @@ { "private": true, - "name": "statinamic-demo", - "url": "http://moox.io/statinamic", - "version": "0.0.0", + "name": "Statinamic", "author": "Maxime Thirouin", "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/MoOx/statinamic.git" - }, + "repository": "https://github.com/MoOx/statinamic.git", "#dependencies": "dependencies that will be used on the client side", "dependencies": { "history": "^1.12.5", @@ -51,9 +46,9 @@ "webpack": "^1.12.1" }, "scripts": { - "static": "NODE_ENV=production babel-node build --static --production", "start": "babel-node build --server --open --dev", - "static+start": "babel-node build --static --server --open --dev", + "static": "NODE_ENV=production babel-node build --static --production", + "static+start": "NODE_ENV=production babel-node build --static --server --open --dev", "ci-deploy": "if [ \"$TRAVIS_PULL_REQUEST\" = \"false\" ] && [ \"$TRAVIS_BRANCH\" = \"master\" ]; then gh-pages -d dist; fi;", "lint": "eslint --fix .", "pretest": "npm run lint", diff --git a/demo/web_modules/Layout/index.css b/demo/web_modules/Layout/index.css index f51244831..45b44721a 100644 --- a/demo/web_modules/Layout/index.css +++ b/demo/web_modules/Layout/index.css @@ -1,15 +1,79 @@ /* GLOBAL STYLES, OMG ! */ +:global h1, +:global h2, +:global h3 { + font-weight: 400; +} + +:global h1, +:global h2, +:global h3, +:global h5, +:global h6 { + position: relative; +} + +:global .markdownIt-Anchor { + position: absolute; + left: -1.5rem; + opacity: .1; + transition: opacity .2s; +} + + :global h1:hover .markdownIt-Anchor, + :global h2:hover .markdownIt-Anchor, + :global h3:hover .markdownIt-Anchor, + :global h4:hover .markdownIt-Anchor, + :global h5:hover .markdownIt-Anchor, + :global h6:hover .markdownIt-Anchor { + opacity: 1; + } + :global a, :global a:visited { - color: inherit; - opacity: .8; + color: #7340c4; + text-decoration: none; } - :global a:hover, - :global a:focus { - opacity: 1; +:global blockquote { + opacity: .6; + margin: 2rem 0; + padding-left: 1.5rem; + border-left: 4px solid grey; +} + +:global pre { + margin: 1rem 0; + padding: 1rem; + + font-weight: 400; + + color: color(#7340c4) l(-10%)); + border: 1px solid #DDD; + border-radius: 0.3em; + background: color(#fafafa a(.6)); +} + +:global .hljs-comment { + opacity: .4; +} + + :global .hljs-comment:hover { + opacity: .6; } +:global .hljs-keyword { + font-weight: bold; +} + +:global .hljs-class, +:global .hljs-tag, +:global .hljs-keyword, +:global .hljs-pseudo, +:global .hljs-function { + color: #7340c4; +} + /***/ .wrapper { @@ -25,17 +89,27 @@ .separator { opacity: .2; - margin: 1rem; + margin: 0 .8rem; } .link { - text-decoration: none; + opacity: .8; } + .link:hover, + .link:focus { + opacity: 1; + } + .icon { vertical-align: middle; } +.version { + font-size: .8rem; + font-weight: bold; +} + .footer { margin-top: 2rem; border-top: 1px solid #ccc; diff --git a/demo/web_modules/Layout/index.js b/demo/web_modules/Layout/index.js index 61caae4f5..a71fbdce1 100644 --- a/demo/web_modules/Layout/index.js +++ b/demo/web_modules/Layout/index.js @@ -5,6 +5,7 @@ import { Link } from "react-router" import styles from "./index.css" import pkg from "../../package.json" +import npmPkg from "../../../package.json" import ga from "react-google-analytics" const GoogleAnalyticsInitiailizer = ga.Initializer @@ -12,6 +13,8 @@ const GoogleAnalyticsInitiailizer = ga.Initializer const supportUrl = "https://discord.gg/0ZcbPKXt5bW1pAiw" const supportBadge = "https://img.shields.io/badge/support-reactiflux%23statinamic-738bd7.svg" +const changelogUrl = + "https://github.com/MoOx/statinamic/blob/master/CHANGELOG.md" export default class Layout extends Component { @@ -103,6 +106,13 @@ export default class Layout extends Component { alt={ "Support on reactiflux#statinamic" } /> + { separator } + + { `v${ npmPkg.version }` } + { this.props.children }