app: basic layout with bulma

monastery-dating · May 28, 2017 · b08dc81 · b08dc81
1 parent dce4070
commit b08dc81
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 32 deletions.
diff --git a/packages/@lucidity/app/app/index.html b/packages/@lucidity/app/app/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id='root'></div>
+    <script type='text/javascript' src='build/vendor.js'></script>
     <script type='text/javascript' src='build/app.js'></script>
   </body>
 </html>
diff --git a/packages/@lucidity/app/package.json b/packages/@lucidity/app/package.json
@@ -8,13 +8,17 @@
   "repository": "git@github.com:luciditeam/lucidity.git",
   "scripts": {
     "start": "webpack-dev-server --inline --content-base app",
-    "build": "webpack --config webpack.config.js",
+    "build": "npm run build:vendor && npm run build:app",
+    "build:app": "webpack --config webpack.config.js",
+    "build:vendor": "webpack --config vendor.webpack.config.js",
     "coverage": "node scripts/test.js --env=jsdom --coverage",
     "test": "node scripts/test.js --env=jsdom",
+    "prestart": "npm run build:vendor",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d app -r git@github.com:luciditeam/lucidity.git"
   },
   "dependencies": {
+    "bulma": "^0.4.2",
     "cerebral": "2.0.0-b-alpha.d6efd5f3",
     "font-awesome": "^4.7.0",
     "react": "^15.4.2",
@@ -26,16 +30,18 @@
     "@types/jest": "^19.2.2",
     "@types/react": "^15.0.21",
     "@types/react-dom": "^0.14.23",
-    "css-loader": "0.23.1",
     "coveralls": "^2.12.0",
+    "css-loader": "0.23.1",
     "dotenv": "^2.0.0",
     "enzyme": "^2.6.0",
     "enzyme-to-json": "^1.3.0",
     "file-loader": "^0.9.0",
     "gh-pages": "^0.12.0",
+    "git-revision-webpack-plugin": "^2.5.1",
     "html-webpack-plugin": "1.6.1",
     "jest": "^17.0.3",
     "node-sass": "^3.13.0",
+    "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^15.4.2",
     "sass-loader": "3.1.2",
     "style-loader": "0.13.0",

diff --git a/packages/@lucidity/app/src/components/App/index.tsx b/packages/@lucidity/app/src/components/App/index.tsx
@@ -1,7 +1,8 @@
 import { connect, JSX } from '../Component'
 
-import './style.css'
-
+import './style.scss'
+declare var require: any
+const VERSION: string = require ( 'raw-loader!../../../app/build/VERSION' )
 /*
 export default connect
 ( {}
@@ -10,10 +11,43 @@ export default connect
 export default
 function App () {
     return (
-      <div className='App'>
-        <div className='App-header'>
-          <h2>Lucidity</h2>
-        </div>
+       <div className='App'>
+        <section className='hero is-primary'>
+          <div className='hero-head'>
+            <div className='container'>
+              <nav className='nav'>
+                <div className='nav-left'>
+                  <a className='nav-item is-brand'>
+                    <h1 className='title'>Lucidity</h1>
+                  </a>
+                </div>
+              </nav>
+            </div>
+          </div>
+          <div className='hero-body'>
+            <div className='container'>
+            </div>
+          </div>
+          <div className='container'>
+            <div className='hero-footer'>
+            </div>
+          </div>
+        </section>
+        <section className='Main section'>
+          <div className='columns'>
+            <div className='Code column'>Code</div>
+            <div className='Visuals column'>Visuals</div>
+          </div>
+        </section>
+        <footer className='footer'>
+          <div className='container'>
+            <div className='content has-text-centered'>
+              <p>
+                <strong>Lucidity</strong> <small>- version: { VERSION }</small>
+              </p>
+            </div>
+          </div>
+        </footer>
       </div>
     )
   }

diff --git a/packages/@lucidity/app/src/components/App/style.css b/packages/@lucidity/app/src/components/App/style.css
diff --git a/packages/@lucidity/app/src/components/App/style.scss b/packages/@lucidity/app/src/components/App/style.scss
@@ -0,0 +1,26 @@
+@import "./variables.scss";
+
+$primary: #222222;
+
+@import "../../../node_modules/bulma/bulma.sass";
+
+.hero.is-primary .title {
+  color: #353535;
+}
+.Code, .Visuals {
+  min-height: 600px;
+}
+
+.Visuals {
+  color: #888;
+  background: #444;
+}
+
+.Main {
+  padding-right: 0;
+}
+
+.Visuals {
+  margin-top: -36px;
+  margin-bottom: -36px;
+}
diff --git a/packages/@lucidity/app/src/components/App/variables.scss b/packages/@lucidity/app/src/components/App/variables.scss
diff --git a/packages/@lucidity/app/vendor.webpack.config.js b/packages/@lucidity/app/vendor.webpack.config.js
@@ -0,0 +1,49 @@
+const GitRevisionPlugin = require ( 'git-revision-webpack-plugin' )
+const path = require ( 'path' )
+const webpack = require('webpack')
+
+module.exports =
+{ output:
+  { path: path.resolve ( __dirname, 'app', 'build' )
+  , filename: 'vendor.js'
+  , library: 'vendor_lib'
+  }
+, entry:
+  { vendor:
+    [ 'cerebral'
+    , 'cerebral-router'
+    , 'cerebral/devtools'
+    , 'cerebral/react'
+    , 'cerebral/operators'
+    , 'cerebral/tags'
+    , 'function-tree'
+    , 'react'
+    , 'react-dom'
+    /*
+    , 'font-awesome'
+    , 'bulma'
+    */
+    ]
+  }
+, devtool: 'source-map'
+
+, module:
+  { loaders:
+    [ { test: /\.s?css|\.sass$/
+      , loaders: [ 'style', 'css', 'sass' ]
+      }
+    ]
+  }
+
+, plugins:
+  [ new webpack.DllPlugin
+    ( // The path to the manifest file which maps between
+      // modules included in a bundle and the internal IDs
+      // within that bundle
+      { name: 'vendor_lib'
+      , path: 'app/build/vendor-manifest.json'
+      }
+    )
+  , new GitRevisionPlugin ()
+  ]
+}
diff --git a/packages/@lucidity/app/webpack.config.js b/packages/@lucidity/app/webpack.config.js
@@ -50,4 +50,11 @@ module.exports =
       }
     ]
   }
+, plugins:
+  [ new webpack.DllReferencePlugin
+    ( { context: '.'
+      , manifest: require('./app/build/vendor-manifest.json')
+      }
+    )
+  ]
 }