Fix introduction counter and add metrics to introduction.

Author: sebadoom

src/website/counter.js

@@ -1,4 +1,4 @@
-import { counterElement } from './dom-elements.js';
+import { counterElement } from './dom-elements-common.js';
 import { isInViewport } from './utils.js';
 import { httpGet } from '../utils.js';
 
@@ -25,7 +25,7 @@ const flipCounter = $(counterElement).FlipClock(initialCount, {
 });
 
 function getLoginCount() {
-  return baselineCount + 
+  return baselineCount +
          Math.round((new Date() - baselineDate) / 1000 * loginsPerSecond);
 }
 
@@ -37,5 +37,5 @@ function updateCounter() {
 
 export function setupJwtCounter() {
   updateCounter();
-  setInterval(updateCounter, intervalMs);  
+  setInterval(updateCounter, intervalMs);
 }

src/website/dom-elements-common.js

@@ -0,0 +1,2 @@
+export const codeElements = document.querySelectorAll('.plain-text pre code');
+export const counterElement = document.querySelector('.counter');

src/website/dom-elements.js

@@ -1,9 +1,10 @@
 export * from '../dom-elements.js';
+export * from './dom-elements-common.js';
 
 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 = 
+export const menuScrollableLinks =
   navbarElement.querySelectorAll('a.scrollto');
 
 export const sectionElements = document.getElementsByTagName('section');
@@ -16,8 +17,6 @@ export const extensionButtonText = extensionButton ?
   extensionButton.querySelector('.button-text') :
   undefined;
 
-export const codeElements = document.querySelectorAll('.plain-text pre code');
-
 export const debuggerSection = document.getElementById('debugger-io');
 
 export const shareJwtButton = document.querySelector('.website-share button');
@@ -26,5 +25,3 @@ 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 counterElement = document.querySelector('.counter');

src/website/highlighting.js

@@ -1,4 +1,4 @@
-import { codeElements } from './dom-elements.js';
+import { codeElements } from './dom-elements-common.js';
 
 import hljs from 'highlight.js/lib/highlight.js';
 import jsHighlight from 'highlight.js/lib/languages/javascript';

src/website/index.js

@@ -1,5 +1,6 @@
 import '../google-analytics.js';
 import * as metrics from '../metrics.js';
+import metricsApiKey from './metrics-api-key.js';
 import { setupNavbar } from './navbar.js';
 import { setupExtensionButton } from './extension.js';
 import { setupLibraries } from './libraries.js';
@@ -65,9 +66,7 @@ function pickEbookOrExtensionBanner() {
 }
 
 function setupMetrics() {
-  metrics.init(PRODUCTION ?
-    '693wciz6BgZdlmW0qDlbgxpyj7gtVxRR' :
-    'xBxBArADMejN3aqs9NhISky9PHPXIr80');
+  metrics.init(metricsApiKey);
 
   // Section visible metrics
   window.addEventListener('scroll', e => {

src/website/introduction/index.js

@@ -1,6 +1,13 @@
 import { setupHighlighting } from '../highlighting.js';
 import { setupJwtCounter } from '../counter.js';
+import * as metrics from '../../metrics.js';
+import metricsApiKey from '../metrics-api-key.js';
+
+function setupMetrics() {
+  metrics.init(metricsApiKey);
+}
 
 // Initialization
+setupMetrics();
 setupHighlighting();
 setupJwtCounter();

src/website/metrics-api-key.js

@@ -0,0 +1,3 @@
+export default PRODUCTION ?
+  '693wciz6BgZdlmW0qDlbgxpyj7gtVxRR' :
+  'xBxBArADMejN3aqs9NhISky9PHPXIr80';