adding hn button

Author: rickyrauch

dist/css/app.css

@@ -3290,4 +3290,4 @@ footer.site-footer .col-md-11 {
   margin: 0;
 }
 .sidebar-box ul li i:before {
-  content: "\e16f";font-family:budicon-font!important;speak:none}.sidebar-box ul li i{width:10px;display:inline-block;font-family:budicon-font!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;margin-right:8px;position:relative;top:2px;height:14px}.sidebar-box ul li.selected a{color:#000!important}.try-banner{text-align:center;background:#f9f9f9;margin:80px 0;padding:50px 20px 44px;border-radius:3px}.try-banner span{font-size:30px;font-weight:100;display:inline-block}.try-banner .btn{margin-left:20px;margin-top:-20px}.try-banner .copy{color:#666;margin-top:30px}@media screen and (max-width:660px){.try-banner{padding:20px;margin-top:40px;text-align:center;margin-bottom:20px}.try-banner span{display:block;margin-bottom:20px}.try-banner .btn{width:100%;display:block;white-space:normal;margin:0}}@-moz-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-webkit-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-o-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-ms-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}body{overflow-x:hidden}.container{max-width:1016px}.banner-container{position:relative}.grid{background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,.05)25%,rgba(255,255,255,.05)26%,transparent 27%,transparent 74%,rgba(255,255,255,.05)75%,rgba(255,255,255,.05)76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.05)25%,rgba(255,255,255,.05)26%,transparent 27%,transparent 74%,rgba(255,255,255,.05)75%,rgba(255,255,255,.05)76%,transparent 77%,transparent);background-size:50px 50px;width:100%;position:absolute;top:0;bottom:0;right:0;left:0}.banner-container{display:block;-webkit-animation-name:appear;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:once;-webkit-animation-timing-function:ease-in}@-webkit-keyframes appear{0%{opacity:0}100%{opacity:1}}.bg-grey{border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;background:0 0}.float-right{float:right}.float-left{float:left}.align-center{text-align:center}.container.spacing-content{padding-top:80px;padding-bottom:80px}.help-circle{max-height:14px;max-width:14px;opacity:.2;margin-left:4px;position:relative;top:-2px}.help-circle:hover{opacity:1}section.section{margin-bottom:80px}span.icon-badge{background:#d0d2d3;width:60px;height:60px;border-radius:3px;display:inline-block;color:#eb5424;font-size:30px;line-height:72px}.narrow-content{max-width:680px;margin:auto;text-align:center;font-size:120%}.narrow-content p{color:#666}.narrow-content ul{padding-left:0}.narrow-content ul.ul-inline{margin:20px 0}.narrow-content ul.ul-inline li{background:url(/homepage/img/icon-checkmark.png) left 4px no-repeat;display:inline-block;padding-left:30px;margin:0 20px}.narrow-content ul.ul-large{text-align:left}.narrow-content ul li{margin-bottom:20px;background:url(/homepage/img/icon-checkmark.png) left 4px no-repeat;padding-left:30px;list-style:none}pre.code-snippet.prettyprint{background:rgba(255,255,255,.96);border:0;border-left:30px solid #f1f1f1;color:#333;font-size:11px;font-family:monospace;line-height:20px;margin-bottom:0;padding:10px 10px 10px 2px;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.4);list-style:dotted}pre.code-snippet.prettyprint ol{margin:0;padding:0;color:#999;width:600px}pre.code-snippet.prettyprint li.L1,pre.code-snippet.prettyprint li.L3,pre.code-snippet.prettyprint li.L5,pre.code-snippet.prettyprint li.L7,pre.code-snippet.prettyprint li.L9{background:0 0}pre.code-snippet.prettyprint li.L0,pre.code-snippet.prettyprint li.L1,pre.code-snippet.prettyprint li.L2,pre.code-snippet.prettyprint li.L3,pre.code-snippet.prettyprint li.L5,pre.code-snippet.prettyprint li.L6,pre.code-snippet.prettyprint li.L7,pre.code-snippet.prettyprint li.L8{list-style:inherit}pre.code-snippet.prettyprint li{padding-left:10px;margin:0}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:20px;border:0}pre.prettyprint.prettyprinted{border:0!important;padding:20px!important}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media screen and (max-width:768px){.quotes blockquote{min-height:10px;position:static}.zopim{display:none}}body{font-family:'Helvetica Neue',sans-serif,Helvetica;background:#fff;zoom:1;font-size:large}.CodeMirror{zoom:1;font-family:'Source Code Pro'}h1{margin-bottom:0}code,pre{padding:0;margin:0;font-family:'Source Code Pro',Consolas}.panel-footer{font-size:14px}.panel-title{font-weight:700}.container{min-width:1280px}.banner{background:linear-gradient(120deg,#14204d 0,#3cc8f4 100%)}.banner img{width:140px}.banner a{color:#fff}.jwt-playground{width:100%}.jwt-playground .input{border:1px solid #ECECEC;padding:10px;margin-bottom:2px;background:#fff}.jwt-playground .input.error{background:pink}.jwt-playground .input:hover{-webkit-box-shadow:0 0 4px #54a1e9;-moz-box-shadow:0 0 4px #54a1e9;box-shadow:0 0 4px #54a1e9}.jwt-playground .input .CodeMirror{width:100%;background:0 0;font-size:20px;min-height:369px;height:auto}.jwt-playground .input .CodeMirror .cm-jwt-dot{color:#000}.jwt-playground .input .CodeMirror .cm-jwt-header{color:#859900}.jwt-playground .input .CodeMirror .cm-jwt-payload{color:#268bd2}.jwt-playground .input .CodeMirror .cm-jwt-signature{color:#dc322f}.jwt-playground .output{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.jwt-playground .output .jwt-explained{background:#fff;border:1px solid #ECECEC;padding:10px;margin-bottom:2px}.jwt-playground .output .jwt-explained.error{background:rgba(100,0,0,.1)}.jwt-playground .output .jwt-explained:hover{-webkit-box-shadow:0 0 4px #54a1e9;-moz-box-shadow:0 0 4px #54a1e9;box-shadow:0 0 4px #54a1e9}.jwt-playground .output .jwt-explained .CodeMirror{width:100%;height:auto;background:0 0;font-size:20px}.jwt-playground .output .jwt-header,.jwt-playground .output .jwt-header .CodeMirror,.jwt-playground .output .jwt-header .CodeMirror .cm-atom,.jwt-playground .output .jwt-header .CodeMirror .cm-number,.jwt-playground .output .jwt-header .CodeMirror .cm-property,.jwt-playground .output .jwt-header .CodeMirror .cm-string{color:#859900}.jwt-playground .output .jwt-payload,.jwt-playground .output .jwt-payload .CodeMirror,.jwt-playground .output .jwt-payload .CodeMirror .cm-atom,.jwt-playground .output .jwt-payload .CodeMirror .cm-number,.jwt-playground .output .jwt-payload .CodeMirror .cm-property,.jwt-playground .output .jwt-payload .CodeMirror .cm-string{color:#268bd2}.jwt-playground .output .jwt-signature{color:#dc322f;font-family:monospace}.jwt-playground .output .jwt-signature pre{background-color:transparent;border:0;color:#dc322f}.jwt-playground .output .jwt-signature span.is-base64-encoded-label{font-size:x-small}.jwt-playground .validation-status{background:#fff;padding:15px;margin-top:20px;clear:both;text-align:center;width:100%;color:#fff;text-transform:uppercase;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.jwt-playground .validation-status.valid-token{background:green}.jwt-playground .validation-status.invalid-token{background:red}.library div i{padding-right:10px}html{position:relative;min-height:100%}body{margin-bottom:60px}#footer{position:absolute;bottom:0;width:100%;height:60px;background-color:#f5f5f5}body>.container{padding:60px 15px 0}.container .text-muted{margin:20px 0}#footer>.container{padding-right:15px;padding-left:15px}code{font-size:80%}.navbar{height:50px}
+  content: "\e16f";font-family:budicon-font!important;speak:none}.sidebar-box ul li i{width:10px;display:inline-block;font-family:budicon-font!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;margin-right:8px;position:relative;top:2px;height:14px}.sidebar-box ul li.selected a{color:#000!important}.try-banner{text-align:center;background:#f9f9f9;margin:80px 0;padding:50px 20px 44px;border-radius:3px}.try-banner span{font-size:30px;font-weight:100;display:inline-block}.try-banner .btn{margin-left:20px;margin-top:-20px}.try-banner .copy{color:#666;margin-top:30px}@media screen and (max-width:660px){.try-banner{padding:20px;margin-top:40px;text-align:center;margin-bottom:20px}.try-banner span{display:block;margin-bottom:20px}.try-banner .btn{width:100%;display:block;white-space:normal;margin:0}}@-moz-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-webkit-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-o-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@-ms-keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}@keyframes icon_banner{0%{top:-100px;opacity:0}100%{opacity:1;top:0}}body{overflow-x:hidden}.container{max-width:1016px}.banner-container{position:relative}.grid{background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,.05)25%,rgba(255,255,255,.05)26%,transparent 27%,transparent 74%,rgba(255,255,255,.05)75%,rgba(255,255,255,.05)76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.05)25%,rgba(255,255,255,.05)26%,transparent 27%,transparent 74%,rgba(255,255,255,.05)75%,rgba(255,255,255,.05)76%,transparent 77%,transparent);background-size:50px 50px;width:100%;position:absolute;top:0;bottom:0;right:0;left:0}.banner-container{display:block;-webkit-animation-name:appear;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:once;-webkit-animation-timing-function:ease-in}@-webkit-keyframes appear{0%{opacity:0}100%{opacity:1}}.bg-grey{border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;background:0 0}.float-right{float:right}.float-left{float:left}.align-center{text-align:center}.container.spacing-content{padding-top:80px;padding-bottom:80px}.help-circle{max-height:14px;max-width:14px;opacity:.2;margin-left:4px;position:relative;top:-2px}.help-circle:hover{opacity:1}section.section{margin-bottom:80px}span.icon-badge{background:#d0d2d3;width:60px;height:60px;border-radius:3px;display:inline-block;color:#eb5424;font-size:30px;line-height:72px}.narrow-content{max-width:680px;margin:auto;text-align:center;font-size:120%}.narrow-content p{color:#666}.narrow-content ul{padding-left:0}.narrow-content ul.ul-inline{margin:20px 0}.narrow-content ul.ul-inline li{background:url(/homepage/img/icon-checkmark.png) left 4px no-repeat;display:inline-block;padding-left:30px;margin:0 20px}.narrow-content ul.ul-large{text-align:left}.narrow-content ul li{margin-bottom:20px;background:url(/homepage/img/icon-checkmark.png) left 4px no-repeat;padding-left:30px;list-style:none}pre.code-snippet.prettyprint{background:rgba(255,255,255,.96);border:0;border-left:30px solid #f1f1f1;color:#333;font-size:11px;font-family:monospace;line-height:20px;margin-bottom:0;padding:10px 10px 10px 2px;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.4);list-style:dotted}pre.code-snippet.prettyprint ol{margin:0;padding:0;color:#999;width:600px}pre.code-snippet.prettyprint li.L1,pre.code-snippet.prettyprint li.L3,pre.code-snippet.prettyprint li.L5,pre.code-snippet.prettyprint li.L7,pre.code-snippet.prettyprint li.L9{background:0 0}pre.code-snippet.prettyprint li.L0,pre.code-snippet.prettyprint li.L1,pre.code-snippet.prettyprint li.L2,pre.code-snippet.prettyprint li.L3,pre.code-snippet.prettyprint li.L5,pre.code-snippet.prettyprint li.L6,pre.code-snippet.prettyprint li.L7,pre.code-snippet.prettyprint li.L8{list-style:inherit}pre.code-snippet.prettyprint li{padding-left:10px;margin:0}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:20px;border:0}pre.prettyprint.prettyprinted{border:0!important;padding:20px!important}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media screen and (max-width:768px){.quotes blockquote{min-height:10px;position:static}.zopim{display:none}}body{font-family:'Helvetica Neue',sans-serif,Helvetica;background:#fff;zoom:1;font-size:large}.CodeMirror{zoom:1;font-family:'Source Code Pro'}h1{margin-bottom:0}code,pre{padding:0;margin:0;font-family:'Source Code Pro',Consolas}.panel-footer{font-size:14px}.hn-button{margin-right:20px}.panel-title{font-weight:700}.container{min-width:1280px}.banner{background:linear-gradient(120deg,#14204d 0,#3cc8f4 100%)}.banner img{width:140px}.banner a{color:#fff}.jwt-playground{width:100%}.jwt-playground .input{border:1px solid #ECECEC;padding:10px;margin-bottom:2px;background:#fff}.jwt-playground .input.error{background:pink}.jwt-playground .input:hover{-webkit-box-shadow:0 0 4px #54a1e9;-moz-box-shadow:0 0 4px #54a1e9;box-shadow:0 0 4px #54a1e9}.jwt-playground .input .CodeMirror{width:100%;background:0 0;font-size:20px;min-height:369px;height:auto}.jwt-playground .input .CodeMirror .cm-jwt-dot{color:#000}.jwt-playground .input .CodeMirror .cm-jwt-header{color:#859900}.jwt-playground .input .CodeMirror .cm-jwt-payload{color:#268bd2}.jwt-playground .input .CodeMirror .cm-jwt-signature{color:#dc322f}.jwt-playground .output{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.jwt-playground .output .jwt-explained{background:#fff;border:1px solid #ECECEC;padding:10px;margin-bottom:2px}.jwt-playground .output .jwt-explained.error{background:rgba(100,0,0,.1)}.jwt-playground .output .jwt-explained:hover{-webkit-box-shadow:0 0 4px #54a1e9;-moz-box-shadow:0 0 4px #54a1e9;box-shadow:0 0 4px #54a1e9}.jwt-playground .output .jwt-explained .CodeMirror{width:100%;height:auto;background:0 0;font-size:20px}.jwt-playground .output .jwt-header,.jwt-playground .output .jwt-header .CodeMirror,.jwt-playground .output .jwt-header .CodeMirror .cm-atom,.jwt-playground .output .jwt-header .CodeMirror .cm-number,.jwt-playground .output .jwt-header .CodeMirror .cm-property,.jwt-playground .output .jwt-header .CodeMirror .cm-string{color:#859900}.jwt-playground .output .jwt-payload,.jwt-playground .output .jwt-payload .CodeMirror,.jwt-playground .output .jwt-payload .CodeMirror .cm-atom,.jwt-playground .output .jwt-payload .CodeMirror .cm-number,.jwt-playground .output .jwt-payload .CodeMirror .cm-property,.jwt-playground .output .jwt-payload .CodeMirror .cm-string{color:#268bd2}.jwt-playground .output .jwt-signature{color:#dc322f;font-family:monospace}.jwt-playground .output .jwt-signature pre{background-color:transparent;border:0;color:#dc322f}.jwt-playground .output .jwt-signature span.is-base64-encoded-label{font-size:x-small}.jwt-playground .validation-status{background:#fff;padding:15px;margin-top:20px;clear:both;text-align:center;width:100%;color:#fff;text-transform:uppercase;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.jwt-playground .validation-status.valid-token{background:green}.jwt-playground .validation-status.invalid-token{background:red}.library div i{padding-right:10px}html{position:relative;min-height:100%}body{margin-bottom:60px}#footer{position:absolute;bottom:0;width:100%;height:60px;background-color:#f5f5f5}body>.container{padding:60px 15px 0}.container .text-muted{margin:20px 0}#footer>.container{padding-right:15px;padding-left:15px}code{font-size:80%}.navbar{height:50px}

html/index.html

@@ -56,6 +56,11 @@
               <li><a href="#libraries">Libraries</a></li>
             </ul>
             <p class="navbar-text navbar-right">
+
+            <a href="https://news.ycombinator.com/submit" class="hn-button" data-title="JWT" data-url="jwt.io" data-count="horizontal">Vote on Hacker News</a>
+<script type="text/javascript">var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>
+
+
             <a href="https://twitter.com/authzero" class="twitter-follow-button" data-show-count="true">Follow @authzero</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
             </p>

index.html

@@ -51,6 +51,11 @@
               <li><a href="#libraries">Libraries</a></li>
             </ul>
             <p class="navbar-text navbar-right">
+
+            <a href="https://news.ycombinator.com/submit" class="hn-button" data-title="JWT" data-url="jwt.io" data-count="horizontal">Vote on Hacker News</a>
+<script type="text/javascript">var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>
+
+
             <a href="https://twitter.com/authzero" class="twitter-follow-button" data-show-count="true">Follow @authzero</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
             </p>

less/app.less

@@ -45,6 +45,9 @@ pre, code { padding: 0; margin: 0; font-family: 'Source Code Pro', Consolas; }
   font-size: 14px;
 }
 
+.hn-button{
+  margin-right: 20px;
+}
 .panel-title{
   font-weight: bold;
 }