0.1.0

Close #35

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.
+💥

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

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

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

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.
 
+<!--
 ## Setup a website in a flash
 
 ```console
@@ -39,5 +57,8 @@ $ npm start
 ```
 
 **[The _new_ command above is not ready yet](https://github.com/MoOx/statinamic/issues/16).**
+-->
+
+---
 
-[Read the documentation](docs/)
+➠ [Read the documentation](docs/)

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

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;

demo/web_modules/Layout/index.js

@@ -5,13 +5,16 @@ 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
 
 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" }
             />
           </a>
+          { separator }
+          <a
+            className={ styles.version }
+            href={ changelogUrl }
+          >
+            { `v${ npmPkg.version }` }
+          </a>
         </nav>
         { this.props.children }
         <footer className={ styles.footer }>