new landing page, closes #32

package.json

@@ -35,10 +35,12 @@
     "gulp-connect": "~2.2.0",
     "gulp-gh-pages": "~0.5.4",
     "history": "~1.13.1",
+    "html-loader": "^0.3.0",
     "html-webpack-plugin": "~1.6.2",
     "ipfs-api": "~2.9.0",
     "json-loader": "~0.5.3",
     "lodash.sortedindex": "~3.1.1",
+    "markdown-loader": "^0.1.7",
     "moment": "~2.10.6",
     "react": "~0.14.3",
     "react-dom": "~0.14.3",

webapp/app.jsx

@@ -57,7 +57,20 @@ var Navbar = React.createClass({
 
 // Static pages
 
-var Homepage = React.createClass({
+var Static = React.createClass({
+  html: function(){
+    return { __html: this.props.content }
+  },
+  render: function(){
+    if(this.props.content){
+      return <div className={this.props.className} dangerouslySetInnerHTML={this.html()} />
+    } else {
+      return <NotFound />
+    }
+  }
+})
+
+/*var Homepage = React.createClass({
   render: function(){
     return (
       <div>
@@ -68,6 +81,12 @@ var Homepage = React.createClass({
       </div>
     )
   }
+})*/
+
+var Homepage = React.createClass({
+  render: function(){
+    return <Static className="homepage" content={require('landing.md')} />
+  }
 })
 
 var GetIPFS = React.createClass({
@@ -125,8 +144,9 @@ boards.init(err => {
     ReactDOM.render(
       <Router>
         <Route path="/" component={App}>
-          <IndexRoute component={GetIPFS} />
+          <IndexRoute component={Homepage} />
           <Route path="/settings" component={Settings} />
+          <Route path="*" component={GetIPFS} />
         </Route>
       </Router>
     , document.getElementById('root'))

webapp/landing.md

@@ -0,0 +1,126 @@
+# Social platforms are broken
+
+<h4 class="light">There's something terribly wrong with the Internet</h4>
+
+<div class="row">
+
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-server fa-3x light"></i></div>
+
+#### Centralized
+
+Online services are all centralized. Your data always goes through foreign servers and
+is stored in databases far away from your control.
+
+</div>
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-money fa-3x light"></i></div>
+
+#### Expensive
+
+Centralization costs a lot. Servers need to be paid for and engineers need to
+be hired to handle their load. That's why most sites have ads.
+
+</div>
+</div>
+
+<div class="row">
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-bomb fa-3x light"></i></div>
+
+#### Fragile
+
+When you use a centralized service, you rely on its owners. What if they go
+bankrupt or just pull the plug on your data?
+
+</div>
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-legal fa-3x light"></i></div>
+
+#### Controlled
+
+The owners control the service. What if you want to go back to an older version
+of the service? What if you want it to work like it used to, or you want to make
+it do something new?
+
+</div>
+</div>
+
+## How can we solve this?
+
+We found a solution. A new Social Platform that attempts to be the first to solve
+these problems: it has to allow people to express themselves, give power to control
+their content, their pages and their profiles but also the freedom to live without
+any rules. It has to work on all platforms, all networks, even without the
+Internet and become truly universal
+
+## Introducing Boards
+
+<h5 class="light">Yeah we totally need a better name</h5>
+
+<div class="row">
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-users fa-3x light"></i></div>
+
+#### Distributed
+
+__Every user is responsible for his own content__, Profile and Boards, but your computer
+helps your friends and favourite creators (and only them) by sending their
+content to people that want to see it. __Only the original creator has control
+over his data__.
+
+</div>
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-bolt fa-3x light"></i></div>
+
+#### Efficient
+
+There is no heavy __Blockchain__. This service is built to work everywhere from
+supercomputers to smartphones to the Internet of Things. __The more users see a page,
+the faster it travels to others__, making Denial of Service attack virtually impossible.
+
+</div>
+</div>
+
+<div class="row">
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-globe fa-3x light"></i></div>
+
+#### Free
+
+__Free, as in Freedom__. __We can't put ads on this__, because they'd be too easy
+to block: anyone can create his own App that connects to our service.
+__We can't control anything__, because the users control the content. There
+is no central service. There is only the users, their computers, and their content.
+
+</div>
+<div class="six columns">
+
+<div class="head-icon"><i class="fa fa-cogs fa-3x light"></i></div>
+
+#### Open
+
+__We're working on this in the open__. We already have a prototype, and all our
+code is _Free Software_. Got what it
+takes? [Join development on GitHub](https://github.com/fazo96/ipfs-boards) and
+help us build the social platform of tomorrow.
+
+</div>
+</div>
+
+#### We're doing this because we believe that Social Platforms can become more than what they are now
+
+<h5 class="light">Help us step into the next generation of the Internet</h5>
+
+----
+
+Built by [Enrico Fasoli](https://github.com/fazo96). This Application is a prototype
+distributed under the terms of the GPLv3 License. Every other bundled asset is
+distributed under the terms of its own license. Learn more at the [Project Page](https://github.com/fazo96/ipfs-boards)

webapp/style.css

@@ -101,6 +101,15 @@ a:hover {
   margin: 1rem auto;
   width: 80%
 }
+.homepage {
+  text-align: center;
+  max-width: 70rem;
+  margin: auto;
+}
+
+.homepage li {
+  text-decoration: none;
+}
 
 @media (min-width: 400px) {
   /* larger than mobile */

webpack.config.js

@@ -13,7 +13,7 @@ module.exports = {
   },
   resolve: {
     modulesDirectories: [
-      'node_modules', './webapp/', 'lib', './webapp/components/',
+      'node_modules', './webapp/', 'lib', './webapp/components/', './webapp/assets/',
       'node_modules/font-awesome/css', 'node_modules/font-awesome/fonts'
     ],
     alias: {
@@ -25,6 +25,7 @@ module.exports = {
     loaders: [
       { test: /\.(ttf|eot|svg|woff(2?))(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
       { test: /\.css$/, loaders: ['style','css'] },
+      { test: /\.md$/, loaders: ['html','markdown'] },
       { test: /\.json$/, loader: 'json' },
       {
         test: /\.jsx?$/,
@@ -52,7 +53,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Boards',
-      template: 'webapp/template.html',
+      template: 'webapp/index.html',
       inject: 'body'
     }),
     // Optimization