add counter script

web/app/common/constants.js

@@ -1,9 +1,11 @@
 const BASE_URL = 'https://demo.remark42.com';
 const API_BASE = '/api/v1';
 const NODE_ID = 'remark42';
+const COUNTER_NODE_CLASSNAME = 'remark42__counter';
 
 module.exports = {
   BASE_URL,
   API_BASE,
   NODE_ID,
+  COUNTER_NODE_CLASSNAME,
 };

web/app/counter.js

@@ -0,0 +1,37 @@
+import { COUNTER_NODE_CLASSNAME } from './common/constants'
+
+import api from 'common/api';
+
+if (document.readyState !== 'interactive') {
+  document.addEventListener('DOMContentLoaded', initEmbed);
+} else {
+  initCounter();
+}
+
+function initCounter() {
+  const nodes = document.getElementsByClassName(COUNTER_NODE_CLASSNAME);
+
+  if (!nodes) {
+    console.error('Remark42: Can\'t find counter nodes.');
+    return;
+  }
+
+  try {
+    remark_config = remark_config || {}
+  } catch (e) {
+    console.error('Remark42: Config object is undefined.');
+    return;
+  }
+
+  if (!remark_config.site_id) {
+    console.error('Remark42: Site ID is undefined.');
+    return;
+  }
+
+  [].slice.call(nodes).forEach(node => {
+    const url = node.dataset.url || remark_config.url || window.location.href;
+    api.count({ url, siteId: remark_config.site_id })
+      .then(({ count }) => { node.innerHTML = count; });
+  });
+}
+

web/app/embed.js

@@ -1,4 +1,4 @@
-import { NODE_ID } from 'common/constants';
+import { BASE_URL, NODE_ID } from 'common/constants';
 
 if (document.readyState !== 'interactive') {
   document.addEventListener('DOMContentLoaded', initEmbed);
@@ -34,7 +34,7 @@ function initEmbed() {
 
   node.innerHTML = `
     <iframe
-      src="${process.env.NODE_ENV === 'production' ? 'https://demo.remark42.com/web' : ''}/iframe.html?${query}"
+      src="${process.env.NODE_ENV === 'production' ? `${BASE_URL}/web` : ''}/iframe.html?${query}"
       width="100%"
       frameborder="0"
       allowtransparency="true"