working with header animations - marked/highlightjs fixes

.gitignore

@@ -4,3 +4,4 @@ config.json
 node_modules
 dist
 public
+npm-debug.log

client/assets/js/bubble.js

@@ -0,0 +1,92 @@
+var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
+
+// Main
+export function bubble() {
+    initHeader();
+    addListeners();
+}
+
+function initHeader() {
+    width = window.innerWidth;
+    height = 500;
+    target = {
+        x: 0,
+        y: height
+    };
+
+    largeHeader = document.getElementById('header');
+    largeHeader.style.height = height + 'px';
+
+    canvas = document.getElementById('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    ctx = canvas.getContext('2d');
+
+    // create particles
+    circles = [];
+    for (var x = 0; x < width * 0.5; x++) {
+        var c = new Circle();
+        circles.push(c);
+    }
+    animate();
+}
+
+// Event handling
+function addListeners() {
+    window.addEventListener('scroll', scrollCheck);
+    window.addEventListener('resize', resize);
+}
+
+function scrollCheck() {
+    if (document.body.scrollTop > height) animateHeader = false;
+    else animateHeader = true;
+}
+
+function resize() {
+    width = window.innerWidth;
+    height = 500;
+    largeHeader.style.height = height + 'px';
+    canvas.width = width;
+    canvas.height = height;
+}
+
+function animate() {
+    if (animateHeader) {
+        ctx.clearRect(0, 0, width, height);
+        for (var i in circles) {
+            circles[i].draw();
+        }
+    }
+    requestAnimationFrame(animate);
+}
+
+// Canvas manipulation
+function Circle() {
+    var _this = this;
+
+    // constructor
+    (function() {
+        _this.pos = {};
+        init();
+    })();
+
+    function init() {
+        _this.pos.x = Math.random() * width;
+        _this.pos.y = height + Math.random() * 100;
+        _this.alpha = 0.1 + Math.random() * 0.3;
+        _this.scale = 0.1 + Math.random() * 0.3;
+        _this.velocity = Math.random();
+    }
+
+    this.draw = function() {
+        if (_this.alpha <= 0) {
+            init();
+        }
+        _this.pos.y -= _this.velocity;
+        _this.alpha -= 0.0005;
+        ctx.beginPath();
+        ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
+        ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
+        ctx.fill();
+    };
+}

client/assets/js/constellation/EasePack.min.js

@@ -0,0 +1,12 @@
+/*!
+ * VERSION: beta 1.9.4
+ * DATE: 2014-07-17
+ * UPDATES AND DOCS AT: http://www.greensock.com
+ *
+ * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
+ * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
+ * Club GreenSock members, the software agreement that was issued with your membership.
+ * 
+ * @author: Jack Doyle, jack@greensock.com
+ **/
+var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();

client/assets/js/constellation/constellation.js

@@ -0,0 +1,186 @@
+import './TweenLite.min';
+import './EasePack.min';
+
+    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
+
+    // Main
+export function constellation(){
+  initHeader();
+  initAnimation();
+  addListeners();
+}
+
+    function initHeader() {
+        width = window.innerWidth;
+        height = '400';
+        target = {x: width/2, y: height/2};
+
+        largeHeader = document.getElementById('header');
+        largeHeader.style.height = height+'px';
+
+        canvas = document.getElementById('demo-canvas');
+        canvas.width = width;
+        canvas.height = height;
+        ctx = canvas.getContext('2d');
+
+        // create points
+        points = [];
+        for(var x = 0; x < width; x = x + width/20) {
+            for(var y = 0; y < height; y = y + height/20) {
+                var px = x + Math.random()*width/20;
+                var py = y + Math.random()*height/20;
+                var p = {x: px, originX: px, y: py, originY: py };
+                points.push(p);
+            }
+        }
+
+        // for each point find the 5 closest points
+        for(var i = 0; i < points.length; i++) {
+            var closest = [];
+            var p1 = points[i];
+            for(var j = 0; j < points.length; j++) {
+                var p2 = points[j]
+                if(!(p1 == p2)) {
+                    var placed = false;
+                    for(var k = 0; k < 5; k++) {
+                        if(!placed) {
+                            if(closest[k] == undefined) {
+                                closest[k] = p2;
+                                placed = true;
+                            }
+                        }
+                    }
+
+                    for(var k = 0; k < 5; k++) {
+                        if(!placed) {
+                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
+                                closest[k] = p2;
+                                placed = true;
+                            }
+                        }
+                    }
+                }
+            }
+            p1.closest = closest;
+        }
+
+        // assign a circle to each point
+        for(var i in points) {
+            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
+            points[i].circle = c;
+        }
+    }
+
+    // Event handling
+    function addListeners() {
+        if(!('ontouchstart' in window)) {
+            window.addEventListener('mousemove', mouseMove);
+        }
+        window.addEventListener('scroll', scrollCheck);
+        window.addEventListener('resize', resize);
+    }
+
+    function mouseMove(e) {
+        var posx = 0, posy = 0;
+        if (e.pageX || e.pageY) {
+            posx = e.pageX;
+            posy = e.pageY;
+        }
+        else if (e.clientX || e.clientY)    {
+            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+        }
+        target.x = posx;
+        target.y = posy;
+    }
+
+    function scrollCheck() {
+        if(document.body.scrollTop > height) animateHeader = false;
+        else animateHeader = true;
+    }
+
+    function resize() {
+        width = window.innerWidth;
+        height = '400';
+        largeHeader.style.height = height+'px';
+        canvas.width = width;
+        canvas.height = height;
+    }
+
+    // animation
+    function initAnimation() {
+        animate();
+        for(var i in points) {
+            shiftPoint(points[i]);
+        }
+    }
+
+    function animate() {
+        if(animateHeader) {
+            ctx.clearRect(0,0,width,height);
+            for(var i in points) {
+                // detect points in range
+                if(Math.abs(getDistance(target, points[i])) < 4000) {
+                    points[i].active = 0.3;
+                    points[i].circle.active = 0.6;
+                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
+                    points[i].active = 0.1;
+                    points[i].circle.active = 0.3;
+                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
+                    points[i].active = 0.02;
+                    points[i].circle.active = 0.1;
+                } else {
+                    points[i].active = 0;
+                    points[i].circle.active = 0;
+                }
+
+                drawLines(points[i]);
+                points[i].circle.draw();
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
+    function shiftPoint(p) {
+        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
+            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
+            onComplete: function() {
+                shiftPoint(p);
+            }});
+    }
+
+    // Canvas manipulation
+    function drawLines(p) {
+        if(!p.active) return;
+        for(var i in p.closest) {
+            ctx.beginPath();
+            ctx.moveTo(p.x, p.y);
+            ctx.lineTo(p.closest[i].x, p.closest[i].y);
+            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
+            ctx.stroke();
+        }
+    }
+
+    function Circle(pos,rad,color) {
+        var _this = this;
+
+        // constructor
+        (function() {
+            _this.pos = pos || null;
+            _this.radius = rad || null;
+            _this.color = color || null;
+        })();
+
+        this.draw = function() {
+            if(!_this.active) return;
+            ctx.beginPath();
+            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
+            ctx.fill();
+        };
+    }
+
+    // Util
+    function getDistance(p1, p2) {
+        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
+    }

client/assets/scss/main.scss

@@ -1,12 +1,14 @@
 @import './utils.scss';
 html {
-    font-family: 'Roboto Slab', serif;
+    //font-family: 'Roboto Slab', serif;
+        font-family: 'Raleway', Calibri, Arial, sans-serif;
 }
 body {
     max-width: 100%;
     overflow-x: hidden;
     position: relative;
     -webkit-font-smoothing: subpixel-antialiased;
+    font-weight: 300;
 }
 h1,
 h2,
@@ -15,10 +17,11 @@ h4,
 h5,
 h6 {
     margin: 0;
-    font-weight: 500;
+    font-weight: 300;
 }
 p {
-    font-weight: 300;
+    font-weight: 200;
+    font-size: 1.1em;
 }
 *,
 *:after,
@@ -36,16 +39,14 @@ a {
     }
 }
 code,
-pre code{
+pre{
   white-space: pre-wrap;
-  position: relative;
 }
 .Layout {
     height: 100%;
     display: flex;
     flex-direction: column;
     .Footer,
-    .Header,
     .Main {
         display: flex;
         padding-right: calc(50% - 997px / 2);

client/js/components/Header.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import {bubble} from '../../assets/js/bubble';
 
 export default class Header extends React.Component{
+  componentDidMount(){
+    bubble();
+  }
 
   render(){
     return(
-      <header class="Header" />
+      <header id="header" class="Header">
+        <canvas id="canvas" width="854" height="709"></canvas>
+      </header>
     )
   }
 }

client/js/components/Post.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import marked from 'marked';
-import highlight from 'highlight.js';
+import hljs from 'highlight.js';
+
+const renderer = new marked.Renderer();
 
 marked.setOptions({
-    header: true,
+    langPrefix: 'hljs ',
     highlight: (code) => {
-        return highlight.highlightAuto(code).value;
+      return  hljs.highlightAuto(code).value;
     }
 });
 
@@ -13,7 +15,7 @@ export default class Post extends React.Component{
 
   render(){
     return(
-      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content)}}>
+      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
       </div>
     );
   }

client/js/components/Preview.js

@@ -13,7 +13,7 @@ export default class Preview extends React.Component{
           <div class="date">
             {posts[i].date}
           </div>
-          <h2 class="intro" >{posts[i].title.toString()}</h2>
+          <h1 class="intro" >{posts[i].title.toString()}</h1>
           <p>{posts[i].intro.toString()}</p>
           <p>
             <Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>

index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="Mitchell Gerber">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
+    <link href="http://fonts.googleapis.com/css?family=Raleway:200,300,400,800|Clicker+Script" rel="stylesheet" type="text/css">
     <title>mitchel.io</title>
 </head>
 

posts/Old Posts/2016-05-22-flashing-esp8266.md

@@ -72,15 +72,19 @@ Unfortunately the current version of ESP8266/Arduino does not offer alternative
 
 The methods to flash the ESP8266 within the Arduino IDE can be adjusted. I first thought I needed to download another method to flash with such as the [esptool.py](https://github.com/themadinventor/esptool), but I found a much easier solution. The "boards.txt" file can be edited, which allowed more customization to the flashing settings within the Arduino IDE. This is the path on my system.
 
-`/Users/$USER/Library/Arduino15/packages/esp8266/hardware/esp8266/2.1.0/boards.txt`
+/Users/$USER/Library/Arduino15/packages/esp8266/hardware/esp8266/2.1.0/boards.txt
 
 The reset method needs to be changed from "ck" to "none" in order for this to work properly.
 
-`generic.upload.resetmethod=ck`
+```bash
+generic.upload.resetmethod=ck
+```
 
 to
 
-`generic.upload.resetmethod=none`
+```bash
+generic.upload.resetmethod=none
+```
 
 Because we are not using the CK flashing method, we need to boot up the ESP8266 into boot loader mode manually.
 

readme.md

@@ -9,6 +9,10 @@
 - the posts folder is then copied into the dist folder
 
 ## TODO
+- fix font sizing
+- clean up css
+- adjust animations
+
 - fix goapp serve and webpack-dev-server so paths work correctly
 - posts page
 - add sensor page