Merge branch 'updated-intro' of github.com:diegopoza/jsonwebtoken.github.io into updated-intro

Author: diegopoza

css/app.css

@@ -20,22 +20,21 @@ <h2 id="which-is-the-json-web-token-structure-">Which is the JSON Web Token stru
 <ul>
 <li>Header</li>
 <li>Payload</li>
-<li>Signature </li>
+<li>Signature</li>
 </ul>
 <p>Therefore, a JWT typically looks like the following.</p>
 <p><code>xxxxx.yyyyy.zzzzz</code></p>
 <p>Let&#39;s break down the different parts.</p>
 <h3 id="header">Header</h3>
-<p>The header <em>typically</em> consists of two parts: the type of the token, which is JWT, and the hashing algorithm such as HMAC SHA256 or RSA.
-;aksjdhf ;kajhsdfl gkjafgljsdf;gkjdflskgjs;dkfj gl;skjdfg </p>
+<p>The header <em>typically</em> consists of two parts: the type of the token, which is JWT, and the hashing algorithm such as HMAC SHA256 or RSA.</p>
 <p>For example:</p>
 <pre><code>{
   &quot;alg&quot;: &quot;HS256&quot;,
   &quot;typ&quot;: &quot;JWT&quot;
 }
 </code></pre><p>Then, this JSON is <strong>Base64Url</strong> encoded to form the first part of the JWT.</p>
 <h3 id="payload">Payload</h3>
-<p>The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata. 
+<p>The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata.
 There are three types of claims: <em>reserved</em>, <em>public</em>, and <em>private</em> claims.</p>
 <ul>
 <li><p><strong>Reserved claims</strong>: These are a set of predefined claims, which are not mandatory but recommended, thought to provide a set of useful, interoperable claims. Some of them are: <strong>iss</strong> (issuer), <strong>exp</strong> (expiration time), <strong>sub</strong> (subject), <strong>aud</strong> (audience), among others.</p>
@@ -88,7 +87,7 @@ <h2 id="why-should-we-use-json-web-tokens-">Why should we use JSON Web Tokens?</
 <em>Comparison of the length of an encoded JWT and an encoded SAML</em></p>
 <p>If you want to read more about JSON Web Tokens and even start using them to perform authentication in your own applications, browse to the <a href="http://auth0.com/learn/json-web-tokens">JSON Web Token landing page</a> in Auth0.</p>
 </div></section><section class="go-tool"><div class="container"><p>Get started with JWT today</p><a href="/#debugger" class="btn btn-success">Start using the tool</a></div></section><div class="tokens-created"><div class="container"><img src="/img/pic_logo_ft.svg"><p>JWT.io is brought to you by Auth0.</p><p>A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.</p><a href="https://auth0.com/signup" target="_blank" class="btn btn-success">Create free account</a><div class="token"><h5>TOKENS CREATED</h5></div><div class="counter"></div></div></div><footer><div class="container"><div class="columns"><div class="column"><a href="https://auth0.com/" target="_blank">Supported by<img src="/img/ico_logo.svg"></a></div><div class="column pull-request"><span>Missing something?</span><a href="https://github.com/jsonwebtoken/jsonwebtoken.github.io/tree/master/views" target="_blank">Send a Pull Request</a></div><div class="column social-counter"><a href="https://twitter.com/auth0" data-show-count="true" class="twitter-follow-button">Follow @auth0</a></div></div></div></footer><!--Bootstrap core JavaScript
-==================================================--><!-- Placed at the end of the document so the pages load faster--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script><!-- build:js dist/js/app.js--><script src="/vendor/zepto/zepto.js"></script><script src="/vendor/jsonlint/lib/jsonlint.js"></script><script src="/vendor/json-sans-eval-min/index.js"></script><script src="/vendor/codemirror/lib/codemirror.js"></script><script src="/vendor/codemirror/mode/javascript/javascript.js"></script><script src="/vendor/codemirror/addon/lint/lint.js"></script><script src="/vendor/codemirror/addon/lint/javascript-lint.js"></script><script src="/vendor/codemirror/addon/lint/json-lint.js"></script><script src="/vendor/jsrsasign/index.js"></script><script src="/vendor/jws.js/index.js"></script><script src="/js/jwt_mode.js"></script><script src="/js/jwt.js"></script><script src="/js/isotope.pkgd.min.js"></script><script src="/js/flipclock.js"></script><script src="/js/accordion.js"></script><script src="/js/app.js"></script><!-- endbuild--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+==================================================--><!-- Placed at the end of the document so the pages load faster--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script><!-- build:js dist/js/app.js--><script src="/vendor/zepto/zepto.js"></script><script src="/vendor/jsonlint/lib/jsonlint.js"></script><script src="/vendor/json-sans-eval-min/index.js"></script><script src="/vendor/codemirror/lib/codemirror.js"></script><script src="/vendor/codemirror/mode/javascript/javascript.js"></script><script src="/vendor/codemirror/addon/lint/lint.js"></script><script src="/vendor/codemirror/addon/lint/javascript-lint.js"></script><script src="/vendor/codemirror/addon/lint/json-lint.js"></script><script src="/vendor/jsrsasign/index.js"></script><script src="/vendor/jws.js/index.js"></script><script src="/js/jwt_mode.js"></script><script src="/js/jwt.js"></script><script src="/js/isotope.pkgd.min.js"></script><script src="/js/flipclock.js"></script><script src="/js/accordion.js"></script><script src="/js/highlight.min.js"></script><script src="/js/app.js"></script><!-- endbuild--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

index.html

@@ -38,6 +38,23 @@ if (location.href.indexOf("#libraries") != -1) {
   scrollTo($('#libraries-io'));
 }
 
+/*
+ * hljs
+ */
+hljs.configure({
+  classPrefix: ''
+});
+
+$('.plain-text pre code').each(function(i, block) {
+  var $snippet = $(this);
+
+  if(!$snippet.hasClass('hljs')) {
+    hljs.highlightBlock(block);
+    hljs.lineNumbersBlock(block);
+    $snippet.addClass('hljs');
+  }
+});
+
 /*
  * Show icon
  */

introduction/index.html

@@ -1,6 +1,7 @@
 @import 'mixins'
 @import 'codemirror'
 @import 'flip-clock'
+@import 'highlight'
 
 /*
  * Webfont
@@ -934,25 +935,130 @@ body
   .container
     max-width 630px
 
-  h2
-    margin-top 50px
+  h1
     font-size 25px
+    font-weight 300
+    color #333
+    margin-top 10px
+    line-height 1.3
+    +breakpoint("mobile-landscape")
+      font-size 40px
 
-  h3
+  & > h1, & > hr
+    display none
+
+  h2, h3, h4, h5, h6
+    &.anchor-heading
+      position relative
+
+      .anchor
+        display none
+        +breakpoint("tablet")
+          position absolute
+          top 0
+          left -25px
+          visibility hidden
+      &:hover
+        +breakpoint("tablet")
+          .anchor
+            visibility visible
+
+  h2, h3, h4
+    font-weight 700
+    color #333
+    line-height 1.3
+
+  h2
     font-size 20px
+    margin-top 40px
+    &:first-child
+      margin-top 0
 
-  p
-    line-height 1.8
-    font-size 18px
+  h3
+    font-size 16px
 
+  h4, h5, h6
+    font-size 13px
+    text-transform uppercase
+    letter-spacing 1px
+
+  p, ul li
+    color #5c666f
+    font-size 16px
+    line-height 2
+    strong
+      color #333
     code
-      background-color rgba(#D8D8D8,.35)
-      font-size 75%
-      border-radius 3px
-      padding 2px 4px
+      border-radius 4px
+      font-size 90%
+      padding 3px 8px
+      background-color #F7F7F7
+
+  blockquote
+    background-color lighten(#F7F7F7, 55%)
+    padding 60px 30px
+    border-radius 3px
+    margin 30px 0
+    text-align center
+    border none
+
+    p
+      margin 0
+      font-size 12px
+      +breakpoint("tablet")
+        font-size 16px
+
+    em
+      font-size 18px
+      line-height 1.5
+      +breakpoint("tablet")
+        font-size 25px
+
+    strong
+      display block
+      margin-top 15px
+      color rgba(#333,.5)
+      text-transform uppercase
+
+  sup
+    font-size 90%
 
   img
+    max-width 100%
+
+  table
+    border-collapse collapse
     width 100%
+    margin 20px 0 30px
+
+  thead tr th
+    font-family Helvetica, Arial, sans-serif
+    font-weight bold
+    text-align center
+    font-size 13px
+
+  td, th
+    border 1px solid #E0E0E0
+    padding 0.5rem
+    text-align left
+
+  tbody tr:nth-child(odd)
+    background rgba(#eee,.5)
+
+  pre
+    display block
+    font-size 13px
+    line-height 1.42857143
+    color #333
+    word-break break-all
+    background-color #f5f5f5
+    border-radius 4px
+    margin-bottom 30px
+
+  pre code
+    font-size inherit
+    border none
+    border-radius 0
 
 
 // go-tool

js/app.js

@@ -0,0 +1,142 @@
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#f0f0f0;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,.nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rule .hljs-value,.hljs-preprocessor,.hljs-pragma,.hljs-name,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute,.tp .hljs-variable{color:#800}.smartquote,.hljs-comment,.hljs-annotation,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-doctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status,.tp .hljs-data,.tp .hljs-io{font-weight:bold}.asciidoc .hljs-emphasis,.markdown .hljs-emphasis,.tp .hljs-units{font-style:italic}.nginx .hljs-built_in{font-weight:normal}
+
+.main-content
+  pre
+    padding 0
+    word-wrap normal
+
+pre
+  word-wrap normal
+  position relative
+
+  code.hljs
+    background-color #2F383D
+    white-space pre
+    padding 15px
+    color white
+
+  code.hljs-line-numbers.hljs-line-numbers
+    background-color darken(#2F383D, 10%)
+    border-right 1px solid rgba(#5C666F,.1)
+    text-align right
+    color rgba(255, 255, 255, 0.4)
+    -webkit-touch-callout none
+    -webkit-user-select none
+    -khtml-user-select none
+    -moz-user-select none
+    -ms-user-select none
+    user-select none
+
+.hljs
+  .subst,
+  .lisp .title,
+  .clojure .built_in,
+  .nginx .title
+    color color_oil
+
+  .string,
+  .title,
+  .constant,
+  .parent,
+  .tag .value,
+  .rules .value,
+  .rules .value .number,
+  .preprocessor,
+  .ruby .symbol,
+  .ruby .symbol .string,
+  .aggregate,
+  .template_tag,
+  .django .variable,
+  .smalltalk .class,
+  .addition,
+  .flow,
+  .stream,
+  .bash .variable,
+  .apache .tag,
+  .apache .cbracket,
+  .tex .command,
+  .tex .special,
+  .erlang_repl .function_or_atom,
+  .markdown .header
+    color #00FBCA // green
+
+  .comment,
+  .annotation,
+  .template_comment,
+  .diff .header,
+  .chunk,
+  .markdown .blockquote
+    color #899FAB // oil light
+
+  .number,
+  .title,
+  .date,
+  .regexp,
+  .literal,
+  .smalltalk .symbol,
+  .smalltalk .char,
+  .go .constant,
+  .change,
+  .markdown .bullet,
+  .markdown .link_url
+    color #42C7F4 // blue light
+
+  .label,
+  .tag,
+  .javadoc,
+  .ruby .string,
+  .decorator,
+  .filter .argument,
+  .localvars,
+  .array,
+  .attr_selector,
+  .important,
+  .pseudo,
+  .pi,
+  .doctype,
+  .deletion,
+  .envvar,
+  .shebang,
+  .apache .sqbracket,
+  .nginx .built_in,
+  .tex .formula,
+  .erlang_repl .reserved,
+  .prompt,
+  .markdown .link_label,
+  .vhdl .attribute,
+  .clojure .attribute,
+  .coffeescript .property
+    color #FFA0E7 // pink
+
+
+  .id,
+  .phpdoc,
+  .built_in,
+  .aggregate,
+  .css .tag,
+  .javadoctag,
+  .phpdoc,
+  .yardoctag,
+  .smalltalk .class,
+  .winutils,
+  .bash .variable,
+  .apache .tag,
+  .go .typename,
+  .tex .command,
+  .markdown .strong,
+  .request,
+  .status,
+  .tag .title,
+  .keyword
+    color #FF9A56 // orange
+
+  .coffeescript .javascript,
+  .javascript .xml,
+  .tex .formula,
+  .xml .javascript,
+  .xml .vbscript,
+  .xml .css,
+  .xml .cdata
+    opacity: 1;
+
+

js/highlight.min.js

@@ -125,6 +125,7 @@ html(lang='en')
     script(src='/js/isotope.pkgd.min.js')
     script(src='/js/flipclock.js')
     script(src='/js/accordion.js')
+    script(src='/js/highlight.min.js')
 
     script(src='/js/app.js')
     // endbuild

stylus/app.styl

@@ -19,7 +19,7 @@ JSON Web Tokens consist of three parts separated by dots (`.`), which are:
 
 - Header
 - Payload
-- Signature 
+- Signature
 
 Therefore, a JWT typically looks like the following.
 
@@ -30,7 +30,6 @@ Let's break down the different parts.
 ### Header
 
 The header *typically* consists of two parts: the type of the token, which is JWT, and the hashing algorithm such as HMAC SHA256 or RSA.
-;aksjdhf ;kajhsdfl gkjafgljsdf;gkjdflskgjs;dkfj gl;skjdfg 
 
 For example:
 
@@ -45,7 +44,7 @@ Then, this JSON is **Base64Url** encoded to form the first part of the JWT.
 
 ### Payload
 
-The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata. 
+The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata.
 There are three types of claims: *reserved*, *public*, and *private* claims.
 
 - **Reserved claims**: These are a set of predefined claims, which are not mandatory but recommended, thought to provide a set of useful, interoperable claims. Some of them are: **iss** (issuer), **exp** (expiration time), **sub** (subject), **aud** (audience), among others.