Merge branch 'iframe'

djyde · May 20, 2021 · c00ec7d · c00ec7d
2 parents 037d992 + 582dadd
commit c00ec7d
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 292 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,9 @@
     "start": "next start -p 3000",
     "start:with-migrate": "npm run db:generate && npm run db:deploy && next start -p 3000",
     "cp-widget-lang": "mkdir -p public/js/widget/lang && cp -r widget/lang public/js/widget",
-    "build:widget": "vite build --config vite.widget.config.js && npm run cp-widget-lang",
-    "build:sdk": "vite build --config vite.sdk.config.js"
+    "build:widget": "vite build --config vite.widget.config.js && npm run cp-widget-lang && npm run build:iframe",
+    "build:sdk": "vite build --config vite.sdk.config.js",
+    "build:iframe": "vite build --config vite.iframe.config.js"
   },
   "prettier": "@egoist/prettier-config",
   "dependencies": {

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,15 @@
 module.exports = {
   plugins: {
     tailwindcss: {
-      prefix: 'comment'
+      purge: [
+        "widget/**/*.svelte"
+      ],
+      darkMode: 'class',
+      variants: {
+        extend: {
+          outline: ['dark']
+        }
+      }
     },
     autoprefixer: {},
   },

diff --git a/public/doc/advanced/sdk.md b/public/doc/advanced/sdk.md
@@ -50,25 +50,3 @@ Render widget to specific DOM element.
 #### window.CUSDIS.setTheme(theme: 'dark' | 'light' | 'auto')
 
 Manually set theme. 
-
-## Style customization
-
-We use css variables to define our style. Here is the available variables you can override:
-
-```css
-:root {
-  --cusdis--color-text-default: rgba(0, 0, 0, 0.8);
-  --cusdis--color-input-border: #ddd;
-  --cusdis--color-btn-text: rgba(0, 0, 0, 0.8);
-  --cusdis--color-btn-bg-default: #ddd;
-  --cusdis--color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-  --cusdis--color-btn-border: none;
-  --cusdis--color-message-text: #fff;
-  --cusdis--color-message-bg: #046582;
-  --cusdis--color-pagination-bg-selected: #ddd;
-  --cusdis--color-comment-indicator-border: #ddd;
-  --cusdis--color-comment-username-text: #000;
-  --cusdis--color-mod-text: rgba(0, 0, 0, 0.8);
-  --cusdis--color-mod-bg: #ddd;
-}
-```
diff --git a/vite.config.js b/vite.config.js
@@ -1,6 +1,9 @@
 module.exports = {
   root: "widget",
   server: {
+    hmr: {
+      host: 'localhost'
+    },
     port: 3001,
   },
   plugins: [

diff --git a/vite.iframe.config.js b/vite.iframe.config.js
@@ -0,0 +1,19 @@
+import path from 'path'
+
+module.exports = {
+  root: 'widget',
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'widget', 'iframe.js'),
+      name: 'iframe',
+      fileName: 'iframe',
+      formats: ['umd']
+    },
+    outDir: path.resolve(__dirname, 'public', 'js'),
+  },
+  plugins: [
+    require('rollup-plugin-svelte')({
+      emitCss: false,
+    }),
+  ],
+}
diff --git a/widget/Widget.svelte b/widget/Widget.svelte
@@ -1,4 +1,5 @@
 <script>
+  import './theme.css'
   import { onMount, setContext } from 'svelte'
   import axios from 'redaxios'
   import Comment from './components/Comment.svelte'
@@ -26,9 +27,28 @@
     message = msg
   }
 
-  window.CUSDIS.setTheme = function(themeName) {
-    theme = themeName
-  }
+  onMount(() => {
+
+    function onMessage(e) {
+      try {
+        const msg = JSON.parse(e.data)
+        if (msg.from === 'cusdis') {
+          switch (msg.event) {
+            case 'setTheme':
+              {
+                theme = msg.data
+              }
+              break
+          }
+        }
+      } catch (e) {}
+    }
+    window.addEventListener('message', onMessage)
+
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  })
 
   setContext('api', api)
   setContext('attrs', attrs)
@@ -40,7 +60,7 @@
     try {
       const res = await api.get(`/api/open/comments`, {
         headers: {
-          'x-timezone-offset': -new Date().getTimezoneOffset()
+          'x-timezone-offset': -new Date().getTimezoneOffset(),
         },
         params: {
           page: p,
@@ -64,36 +84,36 @@
   onMount(() => {
     getComments()
   })
+
 </script>
 
 {#if !error}
-  <div class='cusdis-comment-main' class:dark={theme === 'dark'} class:auto={theme === 'auto'}>
+  <div class:dark={theme === 'dark'}>
     {#if message}
-      <div class="cusdis-message">
+      <div class="p-2 mb-4 bg-blue-500 text-white">
         {message}
       </div>
     {/if}
 
     <Reply />
 
-    <div>
+    <div class="my-8" />
+
+    <div class="mt-4">
       {#if loadingComments}
-        <div
-          class="cusdis-loading-text"
-          style="text-align: center; font-size: .8em;"
-        >
+        <div>
           {t('loading')}...
         </div>
       {:else}
         {#each commentsResult.data as comment (comment.id)}
           <Comment {comment} firstFloor={true} />
         {/each}
         {#if commentsResult.pageCount > 1}
-          <div class="cusdis-paginator">
+          <div>
             {#each Array(commentsResult.pageCount) as _, index}
               <button
-                class:selected={page === index + 1}
-                class="cusdis-pagination-button"
+                class="px-2 py-1 text-sm mr-2 dark:text-gray-200"
+                class:underline={page === index + 1}
                 on:click={(_) => onClickPage(index + 1)}>{index + 1}</button
               >
             {/each}
@@ -102,102 +122,10 @@
       {/if}
     </div>
 
-    <div class="cusdis-footer">
-      <a style="text-decoration: none;" href="https://cusdis.com"
-        >{t('powered_by')}</a
-      >
+    <div class="my-8" />
+
+    <div class="text-center text-sm text-gray-900 dark:text-gray-100">
+      <a class="underline " href="https://cusdis.com">{t('powered_by')}</a>
     </div>
   </div>
 {/if}
-
-<style>
-  :root {
-    --cusdis--color-text-default: rgba(0, 0, 0, 0.8);
-    --cusdis--color-input-border: #ddd;
-    --cusdis--color-btn-text: rgba(0, 0, 0, 0.8);
-    --cusdis--color-btn-bg-default: #ddd;
-    --cusdis--color-btn-bg-disabled: rgba(0, 0, 0, 0.5);
-    --cusdis--color-btn-border: none;
-    --cusdis--color-message-text: #fff;
-    --cusdis--color-message-bg: #046582;
-    --cusdis--color-pagination-bg-selected: #ddd;
-    --cusdis--color-comment-indicator-border: #ddd;
-    --cusdis--color-comment-username-text: #000;
-    --cusdis--color-mod-text: rgba(0, 0, 0, 0.8);
-    --cusdis--color-mod-bg: #ddd;
-  }
-
-  .dark {
-    --cusdis--color-text-default: rgba(243, 244, 246, 0.8);
-    --cusdis--color-input-border: rgb(229, 231, 235);
-    --cusdis--color-btn-text: var(--cusdis--color-text-default);
-    --cusdis--color-btn-bg-default: rgb(229, 231, 235, 0);
-    --cusdis--color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-    --cusdis--color-btn-border: 2px solid var(--cusdis--color-text-default);
-    --cusdis--color-message-text: rgba(243, 244, 246, 0.8);
-    --cusdis--color-pagination-bg-selected: rgb(229, 231, 235);
-    --cusdis--color-comment-indicator-border: rgb(229, 231, 235);
-    --cusdis--color-comment-username-text: #fff;
-    --cusdis--color-mod-text: rgba(55, 65, 81, 0.8);
-    --cusdis--color-mod-bg: rgb(229, 231, 235);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .auto {
-      --cusdis--color-text-default: rgba(243, 244, 246, 0.8);
-      --cusdis--color-input-border: rgb(229, 231, 235);
-      --cusdis--color-btn-text: var(--cusdis--color-text-default);
-      --cusdis--color-btn-bg-default: rgb(229, 231, 235, 0);
-      --cusdis--color-btn-bg-disabled: rgba(55, 65, 81, 0.5);
-      --cusdis--color-btn-border: 2px solid var(--cusdis--color-text-default);
-      --cusdis--color-message-text: rgba(243, 244, 246, 0.8);
-      --cusdis--color-message-bg: #046582; /* no need change for now */
-      --cusdis--color-pagination-bg-selected: rgb(229, 231, 235);
-      --cusdis--color-comment-indicator-border: rgb(229, 231, 235);
-      --cusdis--color-comment-username-text: #fff;
-      --cusdis--color-mod-text: rgba(55, 65, 81, 0.8);
-      --cusdis--color-mod-bg: rgb(229, 231, 235);
-    }
-  }
-
-  .cusdis-footer {
-    margin-top: 1em;
-    font-size: 0.8em;
-    text-align: center;
-    color: var(--cusdis--color-text-default);
-  }
-
-  .cusdis-loading-text {
-    color: var(--cusdis--color-text-default);
-  }
-  .cusdis-comment-main {
-    font-size: 17px;
-  }
-  .cusdis-message {
-    background-color: var(--cusdis--color-message-bg);
-    color: var(--cusdis--color-message-text);
-    padding: 0.5em;
-    font-size: 1em;
-  }
-
-  .cusdis-paginator {
-    display: flex;
-  }
-
-  .cusdis-pagination-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    margin-right: 0.5em;
-    padding: 0.2em 0.5em;
-    box-sizing: border-box;
-  }
-
-  .cusdis-pagination-button.selected {
-    background-color: var(--cusdis--color-pagination-bg-selected);
-  }
-
-  .cusdis-footer a {
-    color: var(--cusdis--color-text-default);
-  }
-</style>