Fix libary filter js

Author: Sambego

src/website/dom-elements.js

@@ -5,7 +5,7 @@ export const navbarElement = document.querySelector('nav.navbar');
 export const menuTriggerElement = document.querySelector('.menu-trigger');
 export const menuLinks = document.querySelectorAll('.navbar .menu a');
 export const menuScrollableLinks =
-  navbarElement.querySelectorAll('a.scrollto');
+    navbarElement.querySelectorAll('a.scrollto');
 
 export const sectionElements = document.getElementsByTagName('section');
 
@@ -14,14 +14,12 @@ export const ebookSection = document.querySelector('.jtw-ebook-banner');
 
 export const extensionButton = document.getElementById('extension-button');
 export const extensionButtonText = extensionButton ?
-  extensionButton.querySelector('.button-text') :
-  undefined;
+    extensionButton.querySelector('.button-text') :
+    undefined;
 
 export const debuggerSection = document.getElementById('debugger-io');
 
 export const shareJwtButton = document.querySelector('.website-share button');
 export const shareJwtTextElement = shareJwtButton.querySelector('span');
 
-export const starsElements = document.getElementsByClassName('stars');
-export const librariesElement = document.querySelector('.libraries-sv');
-export const librariesSelect = document.getElementById('libraries-select');
+export const starsElements = document.getElementsByClassName('stars');

src/website/index.js

@@ -1,61 +1,53 @@
 import { setupNavbar } from "./navbar.js";
-import { setupExtensionButton } from "./extension.js";
-import { setupLibraries } from "./libraries.js";
 import { setupTokenEditor, setTokenEditorValue } from "../editor";
 import { setupJwtCounter } from "./counter.js";
 import { setupSmoothScrolling } from "./smooth-scrolling.js";
 import { setupHighlighting } from "./highlighting.js";
-import { isChrome, isFirefox, isPartiallyInViewport, once } from "./utils.js";
 import { setupShareJwtButton } from "../share-button.js";
 import {
-  publicKeyTextArea,
-  debuggerSection,
-  extensionSection,
-  ebookSection,
-  shareJwtButton,
-  shareJwtTextElement,
-  librariesElement
+    publicKeyTextArea,
+    debuggerSection,
+    shareJwtButton,
+    shareJwtTextElement,
 } from "./dom-elements.js";
 
 import queryString from "querystring";
 
 /* For initialization, look at the end of this file */
 
 function parseLocationQuery() {
-  const locSearch = queryString.parse(document.location.search.substr(1));
-  const locHash = queryString.parse(document.location.hash.substr(1));
-
-  const keys = [
-    "id_token",
-    "access_token",
-    "value",
-    "token",
-    "debugger-io?token"
-  ];
-  for (const key of keys) {
-    const token = locSearch[key] || locHash[key];
-
-    if (token) {
-      if (locSearch.publicKey || locHash.publicKey) {
-        publicKeyTextArea.value = locSearch.publicKey || locHash.publicKey;
-      }
-
-      setTokenEditorValue(token);
-
-      debuggerSection.scrollIntoView(true);
-
-      break;
+    const locSearch = queryString.parse(document.location.search.substr(1));
+    const locHash = queryString.parse(document.location.hash.substr(1));
+
+    const keys = [
+        "id_token",
+        "access_token",
+        "value",
+        "token",
+        "debugger-io?token"
+    ];
+    for (const key of keys) {
+        const token = locSearch[key] || locHash[key];
+
+        if (token) {
+            if (locSearch.publicKey || locHash.publicKey) {
+                publicKeyTextArea.value = locSearch.publicKey || locHash.publicKey;
+            }
+
+            setTokenEditorValue(token);
+
+            debuggerSection.scrollIntoView(true);
+
+            break;
+        }
     }
-  }
 }
 
 // Initialization
 setupNavbar();
-// setupExtensionButton();
 setupSmoothScrolling();
-setupLibraries();
 setupTokenEditor();
 parseLocationQuery();
 setupHighlighting();
 setupJwtCounter();
-setupShareJwtButton(shareJwtButton, shareJwtTextElement);
+setupShareJwtButton(shareJwtButton, shareJwtTextElement);

src/website/libraries/dom-elements.js

@@ -0,0 +1,2 @@
+export const librariesElement = document.querySelector('.libraries-sv');
+export const librariesSelect = document.getElementById('libraries-select');

src/website/libraries/index.js

@@ -0,0 +1,8 @@
+import { setupLibraries } from "./libraries.js";
+import { setupHighlighting } from "../highlighting.js";
+import { setupJwtCounter } from "../counter.js";
+
+// Initialization
+setupLibraries();
+setupHighlighting();
+setupJwtCounter();

src/website/libraries.js renamed to src/website/libraries/libraries.js

@@ -1,4 +1,3 @@
-import { httpGet } from "../utils.js";
 import { librariesElement, librariesSelect } from "./dom-elements.js";
 
 import Isotope from "isotope-layout";

views/website/libraries.pug

@@ -54,3 +54,7 @@ block content
         each lang in languages
           each lib in lang.libs
             include libraries/template.pug
+  
+  include counter.pug
+
+  script(src='/js/libraries.js')

views/website/navigation.pug

@@ -9,8 +9,8 @@ nav.navbar.closed
           img(src='/img/logo.svg' alt='JWT logo').logo
 
       nav.menu
-        a(href='/').scrollto Debugger
-        a(href='/libraries').scrollto Libraries
+        a(href='/') Debugger
+        a(href='/libraries') Libraries
         a(href='/introduction') Introduction
         a(href='https://community.auth0.com/c/identity/jwt', target='_blank') Ask
 

webpack.website-dev.js

@@ -4,15 +4,15 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
-  mode: 'development',
-  entry: {
-    index: './src/website/index.js',
-    introduction: './src/website/introduction/index.js'
-  },
-  output: {
-    filename: '[name].js',
-    path: __dirname + '/dist/website/js'
-  },
-  plugins: [
-  ]
-});
+    mode: 'development',
+    entry: {
+        index: './src/website/index.js',
+        introduction: './src/website/introduction/index.js',
+        libraries: './src/website/libraries/index.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: __dirname + '/dist/website/js'
+    },
+    plugins: []
+});

webpack.website-prod.js

@@ -5,12 +5,12 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const devConfig = require('./webpack.website-dev.js');
 
 module.exports = merge(devConfig, {
-  mode: 'production',
-  devtool: false,
-  plugins: [
-    new UglifyJsPlugin(),
-    new webpack.DefinePlugin({
-      PRODUCTION: true
-    })
-  ]
-});
+    mode: 'production',
+    devtool: false,
+    plugins: [
+        new UglifyJsPlugin(),
+        new webpack.DefinePlugin({
+            PRODUCTION: true
+        })
+    ]
+});