umputun#5 implement POC for theming api

frontend/app/common/config-types.ts

@@ -16,6 +16,8 @@ export interface CommentsConfig {
   theme?: Theme;
   page_title?: string;
   node?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  __colors__?: any;
 }
 
 export interface LastCommentsConfig {

frontend/app/embed.ts

@@ -15,6 +15,38 @@ if (document.readyState === 'loading') {
   init();
 }
 
+function createFrame({
+  host,
+  query,
+  height,
+  __colors__ = {},
+}: {
+  host: string;
+  query: string;
+  height?: string;
+  __colors__?: any;
+}) {
+  const iframe = document.createElement('iframe');
+  iframe.src = `${host}/web/iframe.html?${query}`;
+  iframe.name = JSON.stringify({ __colors__ });
+  iframe.setAttribute('width', '100%');
+  if (height) {
+    iframe.setAttribute('height', height);
+  }
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('allowtransparency', 'true');
+  iframe.setAttribute('scrolling', 'no');
+  iframe.setAttribute('tabindex', '0');
+  iframe.setAttribute('title', 'Remark42');
+  iframe.setAttribute('horizontalscrolling', 'no');
+  iframe.setAttribute('verticalscrolling', 'no');
+  iframe.setAttribute(
+    'style',
+    'width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;'
+  );
+  return iframe;
+}
+
 async function init(): Promise<void> {
   __webpack_public_path__ = HOST + '/web/';
   await loadPolyfills();
@@ -44,25 +76,14 @@ async function init(): Promise<void> {
   (window as any).REMARK42.changeTheme = changeTheme;
 
   const query = Object.keys(remark_config)
-    .map((key: any) => `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`)
+    .filter((key: any) => key !== `__colors__`)
+    .map((key: any) => {
+      return `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`;
+    })
     .join('&');
+  const iframe = createFrame({ host: HOST, query, __colors__: remark_config.__colors__ });
 
-  node.innerHTML = `
-    <iframe
-      src="${HOST}/web/iframe.html?${query}"
-      width="100%"
-      frameborder="0"
-      allowtransparency="true"
-      scrolling="no"
-      tabindex="0"
-      title="Remark42"
-      style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
-      horizontalscrolling="no"
-      verticalscrolling="no"
-    ></iframe>
-  `;
-
-  const iframe = node.getElementsByTagName('iframe')[0];
+  node.appendChild(iframe);
 
   window.addEventListener('message', receiveMessages);
   window.addEventListener('hashchange', postHashToIframe);
@@ -173,20 +194,9 @@ async function init(): Promise<void> {
         query +
         '&page=user-info&' +
         `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
-      this.node.innerHTML = `
-      <iframe
-        src="${HOST}/web/iframe.html?${queryUserInfo}"
-        width="100%"
-        height="100%"
-        frameborder="0"
-        allowtransparency="true"
-        scrolling="no"
-        tabindex="0"
-        title="Remark42"
-        verticalscrolling="no"
-        horizontalscrolling="no"
-      />`;
-      this.iframe = this.node.querySelector('iframe');
+      const iframe = createFrame({ host: HOST, query: queryUserInfo, height: '100%' });
+      this.node.appendChild(iframe);
+      this.iframe = iframe;
       this.node.appendChild(this.closeEl);
       document.body.appendChild(this.style);
       document.body.appendChild(this.back);
@@ -200,6 +210,9 @@ async function init(): Promise<void> {
     },
     close() {
       if (this.node) {
+        if (this.iframe) {
+          this.node.removeChild(this.iframe);
+        }
         this.onAnimationClose();
         this.node.removeAttribute('data-animation');
       }

frontend/iframe.html

@@ -9,6 +9,28 @@
       if (window.location.search === '?selfClose') {
         window.close();
       }
+      (function() {
+        function isCSSVariablesSupported() {
+          if (typeof window === `undefined`) {
+            return true;
+          }
+
+          return window.CSS && window.CSS.supports && window.CSS.supports(`color`, `var(--fake-var)`);
+        }
+        if (isCSSVariablesSupported()) {
+          var name;
+          try {
+            name = JSON.parse(window.name);
+            if (name.__colors__) {
+              const colors = name.__colors__;
+              for (var color in colors) {
+                var root = document.documentElement;
+                root.style.setProperty(color, colors[color]);
+              }
+            }
+          } catch (e) {}
+        }
+      })();
     </script>
     <link rel="stylesheet" href="remark.css" />
     <style>
@@ -47,7 +69,9 @@
       }
 
       .preloader {
+        /* stylelint-disable-next-line */
         color: #fff;
+        color: var(--color6, #fff);
         position: relative;
         transform: translate3d(0, -10px, 0);
         animation-delay: -0.16s;
@@ -71,7 +95,9 @@
 
       .preloader_view_iframe {
         margin: 0 auto;
+        /* stylelint-disable-next-line */
         color: #888;
+        color: var(--color13, #888);
       }
 
       :focus:not(.focus-visible):not(.button) {

frontend/index.ejs

@@ -126,6 +126,9 @@
         host: window.location.origin,
         url: 'https://remark42.com/demo/',
         components: ['embed', 'counter'],
+        // __colors__: {
+        //   "--color0": "red",
+        // },
         theme: theme
       };
 

frontend/package.json

@@ -41,7 +41,6 @@
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
-    "color": "^3.1.2",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.2.0",
     "document-register-element": "^1.14.3",