From 61e594786c8b6dfba2756f66a122645858696cc0 Mon Sep 17 00:00:00 2001
From: Misha Vyrtsev <reeywhaar@gmail.com>
Date: Mon, 13 May 2019 18:51:17 +0300
Subject: [PATCH] Define remark host in runtime (#325)

* convert closest-polyfill to ts

* make remark respect host property in client setup
---
 README.md                               | 54 +++++++++++++++++--------
 frontend/app/common/closest-polyfill.js | 15 -------
 frontend/app/common/closest-polyfill.ts | 17 ++++++++
 frontend/app/common/config-types.ts     |  3 ++
 frontend/app/common/constants.ts        |  4 +-
 frontend/app/embed.ts                   |  8 ++--
 frontend/app/utils/parseQuery.ts        | 22 ++++++++++
 frontend/comments.ejs                   | 17 ++++----
 frontend/counter.ejs                    | 17 ++++----
 frontend/deleteme.html                  |  5 +++
 frontend/iframe.html                    |  9 +++++
 frontend/index.ejs                      | 22 +++++-----
 frontend/last-comments.ejs              | 15 ++++---
 13 files changed, 138 insertions(+), 70 deletions(-)
 delete mode 100644 frontend/app/common/closest-polyfill.js
 create mode 100644 frontend/app/common/closest-polyfill.ts
 create mode 100644 frontend/app/utils/parseQuery.ts

diff --git a/README.md b/README.md
index 378a68e1d8..237edd299a 100644
--- a/README.md
+++ b/README.md
@@ -308,18 +308,28 @@ Add this snippet to the bottom of web page:
 ```html
 <script>
   var remark_config = {
+    host: "REMARK_URL", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
     site_id: 'YOUR_SITE_ID',
+    components: ['embed'] // optional param; which components to load. default to ["embed"]
+                          // to load all components define components as ['embed', 'last-comments', 'counter']
+                          // available component are:
+                          //     - 'embed': basic comments widget
+                          //     - 'last-comments': last comments widget, see `Last Comments` section below
+                          //     - 'counter': counter widget, see `Counter` section below
     url: 'PAGE_URL', // optional param; if it isn't defined window.location.href will be used
     max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
     theme: 'dark', // optional param; if it isn't defined default value ('light') will be used
     page_title: 'Moving to Remark42' // optional param; if it isn't defined `document.title` will be used
   };
 
-  (function() {
-    var d = document, s = d.createElement('script');
-    s.src = '/web/embed.js'; // prepends this address with domain where remark42 is placed
-    (d.head || d.body).appendChild(s);
-  })();
+  (function(c) {
+    for(var i = 0; i < c.length; i++){
+      var d = document, s = d.createElement('script');
+      s.src = remark_config.host + '/web/' +c[i] +'.js';
+      s.defer = true;
+      (d.head || d.body).appendChild(s);
+    }
+  })(remark_config.components || ['embed']);
 </script>
 ```
 
@@ -348,19 +358,24 @@ window.REMARK42.changeTheme('light');
 
 It's a widget which renders list of last comments from your site.
 
-Add this snippet to the bottom of web page:
+Add this snippet to the bottom of web page, or adjust already present `remark_config` to have `last-comments` in `components` list:
 
 ```html
 <script>
   var remark_config = {
+    host: "REMARK_URL", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
     site_id: 'YOUR_SITE_ID',
+    components: ['last-comments']
   };
 
-  (function() {
-    var d = document, s = d.createElement('script');
-    s.src = '/web/last-comments.js'; // prepends this address with domain where remark42 is placed
-    (d.head || d.body).appendChild(s);
-  })();
+  (function(c) {
+    for(var i = 0; i < c.length; i++){
+      var d = document, s = d.createElement('script');
+      s.src = remark_config.host + '/web/' +c[i] +'.js';
+      s.defer = true;
+      (d.head || d.body).appendChild(s);
+    }
+  })(remark_config.components || ['embed']);
 </script>
 ```
 
@@ -376,19 +391,24 @@ And then add this node in the place where you want to see last comments widget:
 
 It's a widget which renders a number of comments for the specified page.
 
-Add this snippet to the bottom of web page:
+Add this snippet to the bottom of web page, or adjust already present `remark_config` to have `counter` in `components` list:
 
 ```html
 <script>
   var remark_config = {
+    host: "REMARK_URL", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
     site_id: 'YOUR_SITE_ID',
+    components: ['counter']
   };
 
-  (function() {
-    var d = document, s = d.createElement('script');
-    s.src = '/web/counter.js'; // prepends this address with domain where remark42 is placed
-    (d.head || d.body).appendChild(s);
-  })();
+  (function(c) {
+    for(var i = 0; i < c.length; i++){
+      var d = document, s = d.createElement('script');
+      s.src = remark_config.host + '/web/' +c[i] +'.js';
+      s.defer = true;
+      (d.head || d.body).appendChild(s);
+    }
+  })(remark_config.components || ['embed']);
 </script>
 ```
 
diff --git a/frontend/app/common/closest-polyfill.js b/frontend/app/common/closest-polyfill.js
deleted file mode 100644
index d83819b246..0000000000
--- a/frontend/app/common/closest-polyfill.js
+++ /dev/null
@@ -1,15 +0,0 @@
-if (!Element.prototype.matches) {
-  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-}
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
-    let el = this;
-
-    do {
-      if (el.matches(s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null && el.nodeType === 1);
-    return null;
-  };
-}
diff --git a/frontend/app/common/closest-polyfill.ts b/frontend/app/common/closest-polyfill.ts
new file mode 100644
index 0000000000..1fe57b046f
--- /dev/null
+++ b/frontend/app/common/closest-polyfill.ts
@@ -0,0 +1,17 @@
+if (!Element.prototype.matches) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Element.prototype.matches = (Element.prototype as any).msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s: string) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let el: any = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
diff --git a/frontend/app/common/config-types.ts b/frontend/app/common/config-types.ts
index df727d3ac5..369e5db2d3 100644
--- a/frontend/app/common/config-types.ts
+++ b/frontend/app/common/config-types.ts
@@ -1,6 +1,7 @@
 import { UserInfo, Theme } from './types';
 
 export interface CounterConfig {
+  host: string;
   site_id: string;
   url?: string;
 }
@@ -8,6 +9,7 @@ export interface CounterConfig {
 export type UserInfoConfig = UserInfo;
 
 export interface CommentsConfig {
+  host: string;
   site_id: string;
   url?: string;
   max_shown_comments?: number;
@@ -16,6 +18,7 @@ export interface CommentsConfig {
 }
 
 export interface LastCommentsConfig {
+  host: string;
   site_id: string;
   max_last_comments: number;
 }
diff --git a/frontend/app/common/constants.ts b/frontend/app/common/constants.ts
index 014f59cb31..e95482f75e 100644
--- a/frontend/app/common/constants.ts
+++ b/frontend/app/common/constants.ts
@@ -1,6 +1,8 @@
 import { Sorting, AuthProvider, BlockingDuration, Theme } from './types';
 
-export const BASE_URL: string = process.env.REMARK_URL!;
+export const BASE_URL: string =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ((window as any).remark_config && (window as any).remark_config.host) || process.env.REMARK_URL!;
 export const API_BASE = '/api/v1';
 export const NODE_ID: string = process.env.REMARK_NODE!;
 export const COUNTER_NODE_CLASSNAME = 'remark42__counter';
diff --git a/frontend/app/embed.ts b/frontend/app/embed.ts
index 538dc267b4..f86e6397b8 100644
--- a/frontend/app/embed.ts
+++ b/frontend/app/embed.ts
@@ -7,6 +7,8 @@ import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from '@app/common/co
 import { UserInfo, Theme } from '@app/common/types';
 import { CommentsConfig } from '@app/common/config-types';
 
+const HOST = remark_config.host || BASE_URL;
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', init);
 } else {
@@ -14,7 +16,7 @@ if (document.readyState === 'loading') {
 }
 
 async function init(): Promise<void> {
-  __webpack_public_path__ = BASE_URL + '/web/';
+  __webpack_public_path__ = HOST + '/web/';
   await loadPolyfills();
 
   const node = document.getElementById(NODE_ID);
@@ -47,7 +49,7 @@ async function init(): Promise<void> {
 
   node.innerHTML = `
     <iframe
-      src="${BASE_URL}/web/iframe.html?${query}"
+      src="${HOST}/web/iframe.html?${query}"
       width="100%"
       frameborder="0"
       allowtransparency="true"
@@ -173,7 +175,7 @@ async function init(): Promise<void> {
         `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
       this.node.innerHTML = `
       <iframe
-        src="${BASE_URL}/web/iframe.html?${queryUserInfo}"
+        src="${HOST}/web/iframe.html?${queryUserInfo}"
         width="100%"
         height="100%"
         frameborder="0"
diff --git a/frontend/app/utils/parseQuery.ts b/frontend/app/utils/parseQuery.ts
new file mode 100644
index 0000000000..26d4720497
--- /dev/null
+++ b/frontend/app/utils/parseQuery.ts
@@ -0,0 +1,22 @@
+/** converts widnow.location.search into object */
+export function parseQuery(search: string): { [key: string]: string } {
+  if (search.length < 2) return {};
+  return search
+    .substr(1)
+    .split('&')
+    .map(
+      (chunk): [string, string] => {
+        const parts = chunk.split('=');
+        if (parts.length < 2) {
+          parts[1] = '';
+        } else {
+          parts[1] = decodeURIComponent(parts[1]);
+        }
+        return parts as [string, string];
+      }
+    )
+    .reduce<{ [key: string]: string }>((c, x) => {
+      c[x[0]] = x[1];
+      return c;
+    }, {});
+}
diff --git a/frontend/comments.ejs b/frontend/comments.ejs
index 40a8653cda..caba10fcb3 100644
--- a/frontend/comments.ejs
+++ b/frontend/comments.ejs
@@ -68,16 +68,17 @@
 
         var remark_config = {
           site_id: query.site_id,
-          url: query.url,
+          host: window.location.origin,
+          url: query.url
         };
 
-        (function() {
-          var d = document,
-            s = d.createElement('script');
-          s.src = '/web/embed.js';
-          s.type = 'text/javascript';
-          (d.head || d.body).appendChild(s);
-        })();
+        (function(c) {
+          for(var i = 0; i < c.length; i++){
+            var d = document, s = d.createElement('script');
+            s.src = remark_config.host + '/web/' +c[i] +'.js';
+            (d.head || d.body).appendChild(s);
+          }
+        })(remark_config.components || ['embed']);
       }
     </script>
     <noscript> Please enable JavaScript to view the comments powered by Remark. </noscript>
diff --git a/frontend/counter.ejs b/frontend/counter.ejs
index 7c64f9cd9d..b0f6392008 100644
--- a/frontend/counter.ejs
+++ b/frontend/counter.ejs
@@ -39,15 +39,18 @@
   <script>
     var remark_config = {
       site_id: 'remark',
-			url: 'https://remark42.com/demo/',
+      host: window.location.origin,
+      url: 'https://remark42.com/demo/',
+      components: ['counter']
     };
 
-    (function() {
-      var d = document, s = d.createElement('script');
-      s.src = '/web/counter.js';
-      s.type = 'text/javascript';
-      (d.head || d.body).appendChild(s);
-    })();
+    (function(c) {
+      for(var i = 0; i < c.length; i++){
+        var d = document, s = d.createElement('script');
+        s.src = remark_config.host + '/web/' +c[i] +'.js';
+        (d.head || d.body).appendChild(s);
+      }
+    })(remark_config.components || ['embed']);
   </script>
   <noscript>
     Please enable JavaScript to view the comments powered by Remark.
diff --git a/frontend/deleteme.html b/frontend/deleteme.html
index 32081e7a8e..39eb20382f 100644
--- a/frontend/deleteme.html
+++ b/frontend/deleteme.html
@@ -66,6 +66,11 @@
       <div class="preloader__bounce"></div>
     </div>
   </div>
+	<script>
+		var remark_config = {
+			host: window.location.origin
+		}
+	</script>
   <script src="deleteme.js"></script>
 </body>
 </html>
diff --git a/frontend/iframe.html b/frontend/iframe.html
index a9fbda546a..21c5263afe 100644
--- a/frontend/iframe.html
+++ b/frontend/iframe.html
@@ -111,6 +111,15 @@
       } catch (e) {}
     }
 
+    var remark_config = window.location.search.length < 2 ? {} : window.location.search.substr(1).split("&").reduce(function (c, x) {
+      var splitted = x.split("=")
+      if(!splitted[1]) {
+        splitted[1] = ""
+      }
+      c[splitted[0]] = decodeURIComponent(splitted[1])
+      return c
+    }, {})
+
     window.parent.postMessage(JSON.stringify({ inited: true }), '*');
   </script>
   <script type="text/javascript" src="remark.js"></script>
diff --git a/frontend/index.ejs b/frontend/index.ejs
index 8aeff6dee0..ad30ee785c 100644
--- a/frontend/index.ejs
+++ b/frontend/index.ejs
@@ -74,22 +74,18 @@
   <script>
     var remark_config = {
       site_id: 'remark',
+      host: window.location.origin,
       url: 'https://remark42.com/demo/',
+      components: ['embed', 'counter']
     };
 
-    (function() {
-      var d = document, s = d.createElement('script');
-      s.src = '/web/embed.js';
-      s.type = 'text/javascript';
-      (d.head || d.body).appendChild(s);
-    })();
-
-    (function() {
-      var d = document, s = d.createElement('script');
-      s.src = '/web/counter.js';
-      s.type = 'text/javascript';
-      (d.head || d.body).appendChild(s);
-    })();
+    (function(c) {
+      for(var i = 0; i < c.length; i++){
+        var d = document, s = d.createElement('script');
+        s.src = remark_config.host + '/web/' +c[i] +'.js';
+        (d.head || d.body).appendChild(s);
+      }
+    })(remark_config.components || ['embed']);
   </script>
   <noscript>
     Please enable JavaScript to view the comments powered by Remark.
diff --git a/frontend/last-comments.ejs b/frontend/last-comments.ejs
index 339973eb07..4bce1d8eb3 100644
--- a/frontend/last-comments.ejs
+++ b/frontend/last-comments.ejs
@@ -25,14 +25,17 @@
   <script>
     var remark_config = {
       site_id: 'remark',
+      host: window.location.origin,
+      components: ["last-comments"]
     };
 
-    (function() {
-      var d = document, s = d.createElement('script');
-      s.src = '/web/last-comments.js';
-      s.type = 'text/javascript';
-      (d.head || d.body).appendChild(s);
-    })();
+    (function(c) {
+      for(var i = 0; i < c.length; i++){
+        var d = document, s = d.createElement('script');
+        s.src = remark_config.host + '/web/' +c[i] +'.js';
+        (d.head || d.body).appendChild(s);
+      }
+    })(remark_config.components || ['embed']);
   </script>
   <noscript>
     Please enable JavaScript to view the comments powered by Remark.