More preparations for extension/website merge. Extra algs enabled.

jsonwebtoken · Jan 12, 2018 · 7467794 · 7467794
1 parent ddc0e67
commit 7467794
Show file tree

Hide file tree

Showing 15 changed files with 360 additions and 330 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -24,7 +24,8 @@ module.exports = grunt => {
             'node_modules/bootstrap/dist/css/bootstrap.min.css',
             'node_modules/codemirror/lib/codemirror.css',
             'node_modules/codemirror/addon/lint/lint.css',
-            'css/budicon.css'
+            'css/budicon.css',
+            'css/google-roboto-mono.css'
           ],
           dest: 'dist/website/css/'
         }]

diff --git a/css/google-roboto-mono.css b/css/google-roboto-mono.css
@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpYzTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpYzUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpY0bcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpY2o_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpY76up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpYyYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(http://fonts.gstatic.com/s/robotomono/v5/hMqPNLsu_dywMa4C_DEpY44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
diff --git a/src/website/index.js b/src/website/index.js
@@ -56,6 +56,16 @@ function loadToken() {
   }
 }
 
+function pickEbookOrExtensionBanner() {
+  var extensionSection = document.getElementsByClassName("update-site")[0];
+  var ebookSection = document.getElementsByClassName("jtw-ebook-banner")[0];
+  if (Math.random() >= .5) {
+    extensionSection.style.display = 'block';
+  } else {
+    ebookSection.style.display = 'block';
+  }
+}
+
 // Initialization
 setupNavbar();
 setupExtensionButton();
@@ -66,3 +76,4 @@ loadToken();
 parseLocationQuery();
 setupHighlighting();
 setupJwtCounter();
+pickEbookOrExtensionBanner();
diff --git a/views/extension/index.pug b/views/extension/index.pug
diff --git a/views/extension/layout.pug b/views/extension/layout.pug
@@ -0,0 +1,10 @@
+doctype html
+html(lang='en')
+  head
+    include ../title.pug
+    include ../stylesheets.pug
+    include ../icons.pug
+
+  body
+    block content
+
diff --git a/views/icons.pug b/views/icons.pug
@@ -0,0 +1,17 @@
+link(rel='apple-touch-icon', sizes='57x57', href='/img/favicon/apple-icon-57x57.png')
+link(rel='apple-touch-icon', sizes='60x60', href='/img/favicon/apple-icon-60x60.png')
+link(rel='apple-touch-icon', sizes='72x72', href='/img/favicon/apple-icon-72x72.png')
+link(rel='apple-touch-icon', sizes='76x76', href='/img/favicon/apple-icon-76x76.png')
+link(rel='apple-touch-icon', sizes='114x114', href='/img/favicon/apple-icon-114x114.png')
+link(rel='apple-touch-icon', sizes='120x120', href='/img/favicon/apple-icon-120x120.png')
+link(rel='apple-touch-icon', sizes='144x144', href='/img/favicon/apple-icon-144x144.png')
+link(rel='apple-touch-icon', sizes='152x152', href='/img/favicon/apple-icon-152x152.png')
+link(rel='apple-touch-icon', sizes='180x180', href='/img/favicon/apple-icon-180x180.png')
+link(rel='icon', type='image/png', sizes='192x192', href='/img/favicon/android-icon-192x192.png')
+link(rel='icon', type='image/png', sizes='32x32', href='/img/favicon/favicon-32x32.png')
+link(rel='icon', type='image/png', sizes='96x96', href='/img/favicon/favicon-96x96.png')
+link(rel='icon', type='image/png', sizes='16x16', href='/img/favicon/favicon-16x16.png')
+link(rel='manifest', href='/img/favicon/manifest.json')
+meta(name='msapplication-TileColor', content='#000000')
+meta(name='msapplication-TileImage', content='/img/favicon/ms-icon-144x144.png')
+meta(name='theme-color', content='#000000')
diff --git a/views/stylesheets.pug b/views/stylesheets.pug
@@ -0,0 +1,6 @@
+link(rel="stylesheet", type="text/css", href="/css/google-roboto-mono.css")
+link(rel="stylesheet", href="/css/bootstrap.min.css")
+link(rel='stylesheet', href='/css/codemirror.css', type='text/css', media='all')
+link(rel='stylesheet', href='/css/lint.css', type='text/css', media='all')
+link(rel="stylesheet", href='/css/budicon.css', type="text/css", media="all")
+link(rel='stylesheet', href='/css/app.css', type='text/css', media='all')
diff --git a/views/title.pug b/views/title.pug
@@ -0,0 +1,7 @@
+block meta
+  title JSON Web Tokens - jwt.io
+  meta(charset='utf-8')
+  meta(http-equiv='X-UA-Compatible', content='IE=edge')
+  meta(name='viewport', content='width=device-width, minimum-scale=1.0, maximum-scale=1.0')
+  meta(name='author', content='auth0.com')
+  meta(name='description', content='JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS).')
diff --git a/views/token-editor.pug b/views/token-editor.pug
@@ -0,0 +1,67 @@
+section#debugger-io.debugger-jwt
+  .container
+    //- a(name='debugger')
+    h1 Debugger
+
+    .jwt-playground
+      .selections
+        .algorithm
+          span Algorithm
+          .jwt-select
+            select#algorithm-select
+              option(name='algorithm',value='HS256', selected='') HS256
+              option(name='algorithm',value='HS384') HS384
+              option(name='algorithm',value='HS512') HS512
+              option(name='algorithm',value='RS256') RS256
+              option(name='algorithm',value='RS384') RS384
+              option(name='algorithm',value='RS512') RS512
+              option(name='algorithm',value='ES256') ES256
+              option(name='algorithm',value='ES384') ES384
+              //- Unsupported by jsrsasign
+                option(name='algorithm',value='ES512') ES512
+              option(name='algorithm',value='PS256') PS256
+              option(name='algorithm',value='PS384') PS384
+              option(name='algorithm',value='PS512') PS512
+
+      .algorithm-code
+        .tab-nav
+          .tab-link.current
+            a(href='#encoded-jwt') Encoded
+              small paste a token here
+          .tab-link
+            a(href='#decoded-jwt') Decoded
+              small edit the payload and secret
+
+        .tab-content
+          #encoded-jwt.box-content.current
+            .input.js-input
+          #decoded-jwt.box-content
+            .output
+              .jwt-explained.jwt-header
+                p.text-line HEADER:
+                  span ALGORITHM & TOKEN TYPE
+                .js-header
+
+              .jwt-explained.jwt-payload
+                p.text-line PAYLOAD:
+                  span DATA
+                .js-payload
+                  #js-payload-tooltip placeholder
+
+              .jwt-explained.jwt-signature
+                p.text-line VERIFY SIGNATURE
+                pre.pre-encode.HS256.
+                  <span id="hmacsha-text">HMACSHA256</span>(
+                    base64UrlEncode(header) + "." +
+                    base64UrlEncode(payload),
+                    <input type="text" name="secret" value="secret">
+                  )<span class="is-base64-encoded-label"> <input id="is-base64-encoded" type="checkbox" name="is-base64-encoded"><label for="is-base64-encoded">secret base64 encoded</label></span>
+                pre.pre-encode.RS256.
+                  <span id="rsasha-text">RSASHA256</span>(
+                    base64UrlEncode(header) + "." +
+                    base64UrlEncode(payload),
+                    <textarea rows="4" name="public-key" placeholder="Public Key or Certificate. Enter it in plain text only if you want to verify a token"></textarea>,
+                    <textarea rows="5" name="private-key" placeholder="Private Key. Enter the it in plain text only if you want to generate a new token. The key never leaves your browser."></textarea>
+                  )
+
+      .validation-status.js-signature
diff --git a/views/website/assets.pug b/views/website/assets.pug
@@ -0,0 +1,40 @@
+section.sources
+  .container
+    .columns
+      .column.badges
+        h2 Badges
+        .hold
+          a(href='http://jwt.io/assets/badge.svg', target='_blank')
+            img(src='assets/badge.svg')
+        .text-hold
+          a(href='http://jwt.io/assets/badge.svg', target='_blank')
+            i.icon-budicon-722
+          p http://jwt.io/assets/badge.svg
+        .hold
+          a(href='http://jwt.io/assets/badge-compatible.svg', target='_blank')
+            img(src='assets/badge-compatible.svg')
+        .text-hold
+          a(href='http://jwt.io/assets/badge-compatible.svg', target='_blank')
+            i.icon-budicon-722
+          p http://jwt.io/assets/badge-compatible.svg
+      .column.logotype
+        h2 Logotype
+        .hold
+          a(href='http://jwt.io/assets/icon.svg', target='_blank')
+            img(src='assets/icon.svg')
+        .text-hold
+          a(href='http://jwt.io/assets/icon.svg', target='_blank')
+            i.icon-budicon-722
+          p http://jwt.io/assets/icon.svg
+        .hold
+          a(href='http://jwt.io/assets/logo.svg', target='_blank')
+            img(src='assets/logo.svg')
+        .text-hold
+          a(href='http://jwt.io/assets/logo.svg', target='_blank')
+            i.icon-budicon-722
+          p http://jwt.io/assets/logo.svg
+      .column.tshirt
+        h2 Store
+        img(src='img/pic_tshirt.png')
+        a.buy(href='http://swag.auth0.com/', target='_blank') Buy T-Shirt
+
diff --git a/views/website/ebook.pug b/views/website/ebook.pug
@@ -0,0 +1,5 @@
+section.jtw-ebook-banner
+  span
+    strong Get the JWT Handbook for free!
+    | Spread the word and download it now.
+  a.btn.btn-download-ebook(href='https://auth0.com/e-books/jwt-handbook?utm_source=jwtio&utm_medium=sc&utm_campaign=rotating_banner', target='_blank') Download Ebook
diff --git a/views/website/extension.pug b/views/website/extension.pug
@@ -0,0 +1,17 @@
+section.update-site
+  span
+    strong Love JWT.IO?
+    | Bring the debugger to your favorite browser with our new chrome extension.
+  a#extension-button.extension-button
+    svg(width='14px', height='13px', viewbox='24 11 14 13', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
+      defs
+        path#path-1(d='M30.0287226,15.7142857 L30.0287226,11 L31.600907,11 L31.600907,15.7142857 L36.3174603,15.7142857 L36.3174603,17.2857143 L31.600907,17.2857143 L31.600907,22 L30.0287226,22 L30.0287226,17.2857143 L25.3121693,17.2857143 L25.3121693,15.7142857 L30.0287226,15.7142857 Z')
+        filter#filter-2(x='-50%', y='-50%', width='200%', height='200%', filterunits='objectBoundingBox')
+          feoffset(dx='0', dy='1', in='SourceAlpha', result='shadowOffsetOuter1')
+          fegaussianblur(stddeviation='0.5', in='shadowOffsetOuter1', result='shadowBlurOuter1')
+          fecolormatrix(values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0', type='matrix', in='shadowBlurOuter1')
+      g#Rectangle-213(stroke='none', fill='none')
+        use(fill='black', fill-opacity='1', filter='url(#filter-2)', xlink:href='#path-1')
+        use(fill='#FFFFFF', fill-rule='evenodd', xlink:href='#path-1')
+
+    span.button-text Add to chrome