Stage 6

.gitignore

@@ -3,3 +3,4 @@ dist
 .tmp
 .DS_Store
 npm-debug.log
+

Gruntfile.js

@@ -1,4 +1,6 @@
 const extensionManifest = require('./manifest.json');
+const getLanguages =
+  require('./views/website/libraries/support/get-languages.js');
 
 module.exports = grunt => {
   grunt.loadNpmTasks('grunt-contrib-copy');
@@ -108,6 +110,12 @@ module.exports = grunt => {
 
     pug: {
       website: {
+        options: {
+          //pretty: true,
+          data: {
+            languages: getLanguages()
+          }
+        },
         files: {
           'dist/website/index.html': 'views/website/index.pug',
           'dist/website/introduction/index.html': 
@@ -173,6 +181,9 @@ module.exports = grunt => {
         files: [
           'stylus/*.styl',
           'stylus/extension/**',
+          // Yes, we still share styles with the website, it's really hard
+          // to refactor them out without breaking stuff
+          'stylus/website/**',
           'views/*.pug',
           'views/extension/**'
         ],

README.md

@@ -1,9 +1,85 @@
-##JWT.io
+## JWT.io
 
 <img src="https://cdn.auth0.com/blog/jwtio/jwtio.png"/>
 
 [![Build Status](https://travis-ci.org/jsonwebtoken/jsonwebtoken.github.io.png?branch=master)](https://travis-ci.org/jsonwebtoken/jsonwebtoken.github.io)
 
+### How to add a library
+To add a library, simply edit the right JSON file located at `views/website/libraries`. Each language gets its own file. Multiple libraries share the same language file.
+
+To add a new language, simply add a JSON file in the same folder as the others. It will get automatically recognized. If you add a new language, you will need to provide a proper icon for it and place it in the `img` folder.
+
+Here's a commented example of the .NET language file (`0-.NET.json`). All fields must have valid values unless noted:
+
+```javascript
+{
+  // Language name (unique)
+  "name": ".NET",
+
+  // Unique identifier that will be used as a CSS class
+  // for this language (only valid CSS class names).
+  "uniqueClass": "net",
+
+  // The language icon, SVG format preferred, should be placed
+  // in /img directory.
+  "image": "/img/1.svg",
+
+  // The color of header that displays the name of the language
+  // and the icon. This is a valid CSS color definition.
+  "bgColor": "rgb(42, 168, 229)",
+
+  // An array of libraries for this language.
+  "libs": [
+    {
+      // In case the library suffered from a vulnerability, the
+      // minimum version in which the vuln was fixed must be
+      // listed here. Optional (can be null).
+      "minimumVersion": "1.0.1", // or null
+
+      // Supported features, true for supported,
+      // false for not supported.
+      "support": {
+        "sign": true,
+        "verify": true,
+        "iss": true,
+        "sub": true,
+        "aud": true,
+        "exp": true,
+        "nbf": true,
+        "iat": true,
+        "jti": true,
+        "hs256": true,
+        "hs384": true,
+        "hs512": true,
+        "rs256": true,
+        "rs384": true,
+        "rs512": true,
+        "es256": true,
+        "es384": true,
+        "es512": true
+      },
+
+      // Author URL, can be GitHub profile, personal page
+      // company page, etc. Can be null.
+      "authorUrl": "https://www.microsoft.com", // or null
+
+      // Author name.
+      "authorName": "Microsoft",
+
+      // For the star count, this is the GitHub repository path,
+      // (usually user/repo). Can be null (no star count shown).
+      "gitHubRepoPath": "AzureAD/azure-activedirectory-identitymodel-extensions-for-dotnet", // or null
+
+      // URL for source code.
+      "repoUrl": "https://github.com/MSOpenTech/azure-activedirectory-identitymodel-extensions-for-dotnet",
+
+      // Install command, can be HTML or plain text.
+      "installCommandHtml": "Install-Package<br><a href=\"https://www.nuget.org/packages/System.IdentityModel.Tokens.Jwt/\">System.IdentityModel.Tokens.Jwt</a>"
+    }
+  ]
+}
+```
+
 ### How to build
 
 First, install the required dependencies:
@@ -15,11 +91,19 @@ npm install
 In order to build (and run) the project execute:
 
 ```sh
-grunt
+./node_modules/.bin/grunt
 ```
 
-You will find the generated files in the `dist` directory. For the website, you can run a server at its root. For example: `http-server dist/website`.
+You will find the generated files in the `dist` directory. For the website, you can run a server at its root. For example: `http-server dist/website`. The default `grunt` task runs a server
+at [https://127.0.0.1:8000](https://127.0.0.1:8000) and watches
+for changes.
 
-### Happy hacking!
+To run tests, execute:
 
+```
+./node_modules/.bin/grunt test
+```
 
+Look at the end of the `Gruntfile` for other common tasks.
+
+### Happy hacking!

package.json

@@ -1,13 +1,14 @@
 {
   "name": "jwt.io",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsonwebtoken/jsonwebtoken.github.io"
   },
   "dependencies": {
     "express": "^4.16.2",
-    "express-sslify": "^1.2.0"
+    "express-sslify": "^1.2.0",
+    "querystring": "^0.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.36",
@@ -18,7 +19,10 @@
     "chai": "^4.1.2",
     "chai-arrays": "^2.0.0",
     "chai-as-promised": "^7.1.1",
+    "chai-json-schema": "^1.5.0",
+    "clipboard-polyfill": "^2.4.6",
     "codemirror": "^5.33.0",
+    "deep-freeze": "0.0.1",
     "flipclock": "^0.7.8",
     "grunt": "^1.0.1",
     "grunt-cli": "^1.2.0",
@@ -48,6 +52,8 @@
     "sinon-chai": "^2.14.0",
     "source-map-support": "^0.5.3",
     "stylus": "^0.54.5",
+    "tippy.js": "^2.3.0",
+    "tv4-formats": "^3.0.3",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "web-ext": "^2.4.0",
     "webpack": "^4.1.0",

src/dom-elements.js

@@ -4,12 +4,12 @@ export const decodedTabLink =
   document.querySelector('.tab-link a[href="#decoded-jwt"]');
 export const encodedTabElement = document.getElementById('encoded-jwt');
 export const decodedTabElement = document.getElementById('decoded-jwt');
+
 export const editorElement = document.querySelector('#encoded-jwt .input');
 export const decodedElement = document.querySelector('#decoded-jwt .output');
+
 export const headerElement = document.querySelector('.js-header');
 export const payloadElement = document.querySelector('.js-payload');
-export const payloadTooltipElement = 
-  document.getElementById('js-payload-tooltip');
 
 export const signatureStatusElement =
   document.querySelector('.validation-status.js-signature');