styling

client/assets/scss/main.scss

@@ -83,10 +83,11 @@ select{
 }
 
 .Loading {
-    display: flex;
     flex: 1;
+    display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 600px;
 }
 
 .btn {

client/js/components/Post.js

@@ -28,16 +28,18 @@ export default class Post extends React.Component {
     const post = this.props.app.post;
     const fetched = this.props.app.fetched;
     const fetching = this.props.app.fetching;
-
+    
+    if(!fetched){
+      return <Loading/>;
+    }
+    
     return (
       <div class="Content">
-          {fetched ?
+        <div>
-          <div>
+          <div dangerouslySetInnerHTML={{__html : marked(post, {renderer : renderer})}}/>
-            <div dangerouslySetInnerHTML={{__html : marked(post, {renderer : renderer})}}/>
+          <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
-            <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
-          </div>
-          : <Loading/>}
         </div>
+      </div>
     );
   }
 }

client/js/components/Preview.js

@@ -36,19 +36,21 @@ export default class Preview extends React.Component {
   render() {
     const posts = this.props.app.preview.posts;
     const postLimit = this.props.app.postLimit;
-    const fetched = this.props.app.fetched;
+    let fetched = this.props.app.fetched;
     const increasePostLimit = this.props.appActions.increasePostLimit;
-
+    
+    if (!fetched){
+      return <Loading/>; 
+    } 
+    
     return (
       <div class="Content">
-        {fetched ?
         <div>
           {posts.length > 0 ? this.insertPosts(posts): null}
           {posts.length > postLimit ?
             <button class="btn" onClick={increasePostLimit}>Load More</button>
             : null}
         </div>
-        : <Loading/>}
       </div>
     );
   }

client/js/components/sensors/SensorInfo.js

@@ -81,27 +81,32 @@ export default class SensorInfo extends React.Component {
     render() {
         let sensor = this.props.sensor;
         let data = this.filterData(sensor.info);
+        
+        if(!sensor.fetchedUniqueDates){
+            return <Loading/>;
+        }
+        
         return (
             <div class="SensorInfo">
-                {sensor.fetchedUniqueDates ?
+                <div class="selector-row">
-                    <div class="selector-row">
+                    <h2>{this.props.params.location}</h2>
-                        <h2>{this.props.params.location}</h2>
+                    <select onChange={(e) => {this.onChange(e, 'year')}}>
-                        <select onChange={(e) => {this.onChange(e, 'year')}}>
+                        {sensor.uniqueDates.map(this.loadYearOptions)}
-                            {sensor.uniqueDates.map(this.loadYearOptions)}
+                    </select>
-                        </select>
+                    
-                        
+                    <select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
-                        <select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
+                        {sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
-                            {sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
+                    </select>
-                        </select>
+                </div>
-                    </div>
+                
-                : <Loading/>}
+                {sensor.fetchedInfo ? <LineChart data={data} options={ChartOptions} redraw/> : null}
+                
+                <p>Sensor data is recorded with a <a href="https://www.sparkfun.com/products/245">DS18B20</a> and <a href="https://www.sparkfun.com/products/13678">ESP8266</a> WiFi microcontroller.</p>
+                
+                <div>
+                    <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
+                </div>
                 
-                {sensor.fetchedUniqueDates && sensor.fetchedInfo
-                    ? <LineChart data={data} options={ChartOptions} redraw/>
-                    : null}
-                {sensor.fetchedUniqueDates && sensor.fetchedInfo
-                    ? <div class="home"><Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link></div>
-                    : null}
             </div>
         );
     }

client/js/components/sensors/SensorInfo.scss

@@ -1,20 +1,13 @@
 .SensorInfo{
     flex: 1;
-    display: flex;
+    padding-right: 1em;
-    flex-direction: column;
+    padding-left: 1em;
-    align-items: center;
     min-width: 0;
-    min-height: 600px;
-    width: 80%;
     .selector-row{
         display: flex;
         justify-content: center;
-        margin-bottom: 2em;
         select{
             margin-left: 5px;
         }
     }
-    .home{
-        margin-top: 1em;
-    }
 }

client/js/pages/Index.js

@@ -19,13 +19,13 @@ export default class Index extends React.Component {
   render() {
     return (
       <div>
-            <Header/>
+        <Header/>
-              <div class="Main">
+          <div class="Main">
-                {React.cloneElement(this.props.children, this.props)}
+            {React.cloneElement(this.props.children, this.props)}
-                <Sidebar sensor={Object.assign({}, this.props.sensor)}/>
+            <Sidebar sensor={Object.assign({}, this.props.sensor)}/>
-              </div>
-            <Footer/>
           </div>
+        <Footer/>
+      </div>
     );
   }
 }

posts/Web Stuff/2016-09-26-webpack.md

@@ -15,10 +15,8 @@ Webpack is something that is extremely useful when you start using javascript fr
 First we will create a new project and initialize it with npm. Then install webpack globally and save it. This will allow us to run `webpack` from the command line.
 
 ```bash
-
     npm init
     npm install -g --save webpack
-
 ```
 
 You should now have a package.json file. Create an `index.html` file in a `public` folder and create an `src` folder as well. Within src create `app.js`. This is your main javascript file in which everything will be contained.
@@ -27,11 +25,9 @@ You should now have a package.json file. Create an `index.html` file in a `publi
 Let's put some dummy code in `app.js`
 
 ```javascript
-
     window.onload = function(){
         console.log("test123");
     }
-
 ```
 
 Create a new file called webpack.config.js. This is the file that webpack will look for when you run the command `webpack`. Within this file we need to define a few things in order to get started.
@@ -39,7 +35,6 @@ Create a new file called webpack.config.js. This is the file that webpack will l
 `webpack.config.js`
 
 ```javascript
-
     //dependencies
     var webpack = require('webpack');
     var path = require('path');
@@ -53,26 +48,23 @@ Create a new file called webpack.config.js. This is the file that webpack will l
             filename: 'bundle.min.js'
         }
     }
-
 ```
 
 The folder structure will look like this
 
-```
+```bash
     root
       |-package.json
       |-webpack.config.js
       |-src
          |-app.js
-
 ```
 
 Let's issue the command `webpack`. You will notice the public directory is created with `bundle.min.js`. When we are ready to deploy to production we can use `webpack -p` to minify the javascript.
 
 The new folder structure will look like:
 
-```
+```bash
-
     root
       |-webpack.config.js
       |-package.json
@@ -81,7 +73,6 @@ The new folder structure will look like:
       |-public
          |-index.html
          |-bundle.min.js
-
 ```
 
 ## Webpack Loaders
@@ -93,15 +84,12 @@ Let's upgrade to ES6, because it is the new thing right? If you are unaware, ES6
 There are a few different things we need to install to get all of the features of ES6. We need babel-loader as well as babel-preset-2015 for syntax and babel-polyfill for extra features.
 
 ```bash
-
     npm install --save babel-loader babel-preset-es2015 babel-polyfill
-
 ```
 
 Let's add the loader to the webpack config file so our ES6 gets converted to ES5 when we build with webpack. Notice `babel-polyfill` and `presets: ['es2015']`.
 
 ```javascript
-
     //dependencies
     var webpack = require('webpack');
     var path = require('path');
@@ -131,7 +119,6 @@ Let's add the loader to the webpack config file so our ES6 gets converted to ES5
             ]
         }
     }
-
 ```
 
 Just like that we can start writing ES6 javascript. We can also start using imports now and split up our javascript into multiple files.
@@ -139,7 +126,6 @@ Just like that we can start writing ES6 javascript. We can also start using impo
 `print.js`
 
 ```javascript
-    
     //this is imported by default if functions aren't specified
     export default function print(text){
         console.log(text);
@@ -152,7 +138,6 @@ Just like that we can start writing ES6 javascript. We can also start using impo
     export function printAgainAgain(text){
         console.log(text);
     }
-
 ```
 
 Let's import these functions into the app. Only javascript files do not need to have file extensions when imported.
@@ -160,7 +145,6 @@ Let's import these functions into the app. Only javascript files do not need to
 `app.js`
 
 ```javascript
-    
     //x can be named anything because it is exported from print.js by default
     //we have to specify each function in {} if it is not default
     import x, {printAgain, printAgainAgain} from './print';
@@ -170,7 +154,6 @@ Let's import these functions into the app. Only javascript files do not need to
         printAgain(2);
         printAgainAgain(3);
     }
-
 ```
 
 ## Loading CSS with webpack
@@ -180,28 +163,23 @@ This part is going to seem confusing at first because you are probably used to i
 It may seem odd to load CSS this way, but it's nice loading everything as if the webapp is a complete javascript application. For example, in Angular or React the CSS can be loaded in each component separately. This can be nice since all of your application is going to be injected into a div of the index.html file. This will make more sense if you are familiar with single page web applications.
 
 ```bash
-
     npm install --save style-loader css-loader
-
 ```
 
 Let's now add the loader object to the loaders array in our webpack.config.js file.
 
 ```javascript
-
     {
         test: /\.css$/,
         loader: "style-loader!css-loader"
     }
-
 ```
 
 We can add some CSS now. It's also a good idea to adjust the folder structer now that we are adding some new types of files. Keep in mind when we do this the entry in webpack.config.js needs to be updated accordingly. We must also adjust the imports in the javascript files.
 
 Create a CSS file in a new folder.
 
-```
+```bash
-
     root
       |-webpack.config.js
       |-package.json
@@ -214,23 +192,19 @@ Create a CSS file in a new folder.
       |-public
          |-bundle.min.js
          |-index.html
-
 ```
 
 Let's add some CSS to test it out.
 
 ```CSS
-
     html{
         color: red;
     }
-
 ```
 
 Now we can import the CSS into our `app.js` file.
 
 ```javascript
-
     //x can be named anything because it is exported from print.js by default
     //we have to specify each function in {} if it is not default
     import x, {printAgain, printAgainAgain} from './print';
@@ -244,6 +218,7 @@ Now we can import the CSS into our `app.js` file.
         printAgainAgain(3);
     }
 
+
 ```
 
 We can then start creating more CSS files and import them into relative Angular/React components.
@@ -251,26 +226,21 @@ We can then start creating more CSS files and import them into relative Angular/
 CSS is boring these days so let's use [SCSS](http://sass-lang.com/). Let's also add [autoprefixer](https://github.com/postcss/autoprefixer) so our CSS works across browsers out of the box.
 
 ```bash
-
     npm install --save sass-loader node-sass postcss-loader autoprefixer
-
 ```
 
 We have a few more thins to do now before this works. We need to add a new loader for SCSS files.
 
 ```javascript
-
     {
         test: /\.scss$/,
         loader: "style-loader!css-loader!postcss-loader!sass-loader"
     }
-
 ```
 
 We also need to import `autoprefixer` and tell postcss to use it. The new `webpack.config.js` file is below.
 
 ```javascript
-
     //dependencies
     var webpack = require('webpack');
     var path = require('path');
@@ -310,7 +280,6 @@ We also need to import `autoprefixer` and tell postcss to use it. The new `webpa
             return [autoprefixer]
         }
     }
-
 ```
 
 Now we just need to change our CSS file to an SCSS file. Also remember to change the import in the javscript file. Just like that we can start writing SCSS and not have to worry about the annoyance of adding CSS prefixes.

readme.md

@@ -1,20 +1,21 @@
 # A new branch to rebuild this entire application using:
 
 - ReactJS
-- Go App Engine
+- GoLang Server
+- Hosted on Digital Ocean
 
-`npm run build` - builds the application using webpack and runs metadata.js
-`npm run 
 - metadata.js recursivly scans the posts folder for markdown files and then parses each into into a json object
 - the posts folder is then copied into the dist folder
 
+- `npm run deploy`
+    - installs go/npm dependencies
+    - builds Go files into executable
+    - builds/minifies js/css files into pulic folder
+    - parses markdown files with metadata.js
+    - executes server binary
+
 ## TODO
 - sticky footer
 - clean up css
-- adjust animations
+- adjust/remove? animations
-
 - fix go and webpack-dev-server so paths work correctly
-- add sensor page
-- add paging
-
-- finally do writeups on my projects