Define remark host in runtime (#325)

* convert closest-polyfill to ts

* make remark respect host property in client setup

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>
 ```
 

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;
+  };
+}

frontend/app/common/config-types.ts

@@ -1,13 +1,15 @@
 import { UserInfo, Theme } from './types';
 
 export interface CounterConfig {
+  host: string;
   site_id: string;
   url?: string;
 }
 
 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;
 }

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';

frontend/app/embed.ts

@@ -7,14 +7,16 @@ 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 {
   init();
 }
 
 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"

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;
+    }, {});
+}

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>

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.

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>

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>

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.

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.