Merge branch 'master' of github.com:umputun/remark

web/TODO.md

@@ -1,20 +1,21 @@
-critical features:
-
-- get settings from outside
-  - get path from url or by params
-  - get siteid by params
-- load css by js ?
-
-
 optimizations:
 
 - rewrite fetcher if we need it (do we really need axios?)
-- remove mimic and other dev-tools
-- remove babel if we don't need it
+- remove dev-tools if we have some
+- remove babel-polyfill if we don't need it
 
 
 major features:
 
+- improve design
+  - add true preloader
+  - disable inputs for guests
+  - hide reply links for guests
+  - check mobile ui
+  - add icons for social networks 
+  - remove grey avatars 'cause we have default img
+  - add time format 'X hours ago'
+  - use static buttons 'reply', 'pin', etc instead of dynamic
 - edit comment
   - `PUT /api/v1/comment/{id}?site=site-id&url=post-url`
 - add description of web part to readme

web/app/common/constants.js

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

web/app/common/fetcher.js

@@ -3,7 +3,8 @@ import 'common/promises';
 // TODO: i think we need to use unfetch here instead of heavy axios
 import axios from 'axios';
 
-import { baseUrl, apiBase, siteId } from './settings';
+import { BASE_URL, API_BASE } from './constants';
+import { siteId } from './settings';
 
 const fetcher = {};
 const methods = ['get', 'post', 'put', 'patch', 'delete', 'head'];
@@ -25,9 +26,9 @@ methods.forEach(method => {
       url,
       body = {},
       withCredentials = false,
-      overriddenApiBase = apiBase,
+      overriddenApiBase = API_BASE,
     } = (typeof data === 'string' ? { url: data } : data);
-    const basename = `${baseUrl}${overriddenApiBase}`;
+    const basename = `${BASE_URL}${overriddenApiBase}`;
 
     return new Promise((resolve, reject) => {
       const headers = {

web/app/common/settings.js

@@ -1,15 +1,8 @@
-const baseUrl = 'https://demo.remark42.com';
-const apiBase = '/api/v1'
-const siteId = 'remark';
-const id = 'remark42';
-const url = 'https://radio-t.com/p/2017/12/16/podcast-576/';
-const userId = 'dev'; // for develop only
+const querySettings = window.location.search.substr(1).split('&').reduce((acc, param) => {
+  const pair = param.split('=');
+  acc[pair[0]] = decodeURIComponent(pair[1]);
+  return acc;
+}, {}) || {};
 
-module.exports = {
-  baseUrl,
-  siteId,
-  apiBase,
-  id,
-  url,
-  userId,
-};
+export const siteId = querySettings['site_id'];
+export const url = querySettings['url'];

web/app/components/comment/comment.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 
 import api from 'common/api';
+import { API_BASE, BASE_URL } from 'common/constants';
 import { url } from 'common/settings';
 import store from 'common/store';
 
@@ -155,6 +156,10 @@ export default class Comment extends Component {
         value: Math.abs(score),
         sign: score > 0 ? '+' : (score < 0 ? '−' : ''),
       },
+      user: {
+        ...data.user,
+        picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture,
+      },
     };
 
     const defaultMods = {

web/app/components/document/document.scss

@@ -0,0 +1,6 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

web/app/components/document/index.js

@@ -0,0 +1 @@
+require('./document.scss');

web/app/components/root/root.jsx

@@ -1,7 +1,8 @@
 import { h, Component } from 'preact';
 import api from 'common/api';
 
-import { baseUrl, url, id } from 'common/settings';
+import { BASE_URL, NODE_ID } from 'common/constants';
+import { url } from 'common/settings';
 import store from 'common/store';
 
 import AuthPanel from 'components/auth-panel';
@@ -54,7 +55,7 @@ export default class Root extends Component {
   }
 
   onSignIn(provider) {
-    const newWindow = window.open(`${baseUrl}/auth/${provider}/login?from=${encodeURIComponent(location.href)}`);
+    const newWindow = window.open(`${BASE_URL}/auth/${provider}/login?from=${encodeURIComponent(location.href)}`);
 
     let secondsPass = 0;
     const checkMsDelay = 200;
@@ -89,7 +90,7 @@ export default class Root extends Component {
   render({}, { config = {}, comments = [], user, loaded }) {
     if (!loaded) {
       return (
-        <div id={id}>
+        <div id={NODE_ID}>
           <div className="root root_loading"/>
         </div>
       );
@@ -99,8 +100,8 @@ export default class Root extends Component {
     const pinnedComments = store.getPinnedComments();
 
     return (
-      <div id={id}>
-        <div className="root root__loading" id={id}>
+      <div id={NODE_ID}>
+        <div className="root root__loading">
           <AuthPanel
             mix="root__auth-panel"
             user={user}

web/app/embed.js

@@ -1,3 +1,5 @@
+import { NODE_ID } from 'common/constants';
+
 if (document.readyState !== 'interactive') {
   document.addEventListener('DOMContentLoaded', initEmbed);
 } else {
@@ -5,19 +7,34 @@ if (document.readyState !== 'interactive') {
 }
 
 function initEmbed() {
-  remark_config = remark_config || {}
-
-  const siteId = remark_config.site_id || 'remark42';
-  const node = document.getElementById(siteId);
+  const node = document.getElementById(NODE_ID);
 
   if (!node) {
     console.error('Remark42: Can\'t find root node.');
     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;
+  }
+
+  remark_config.url = remark_config.url || window.location.href;
+
+  const query = Object.keys(remark_config)
+    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(remark_config[key])}`)
+    .join('&');
+
   node.innerHTML = `
     <iframe
-      src="https://demo.remark42.com/web/iframe.html"
+      src="${process.env.NODE_ENV === 'production' ? 'https://demo.remark42.com/web' : 'http://localhost:8080'}/iframe.html?${query}"
       width="100%"
       frameborder="0"
       allowtransparency="true"

web/app/remark.js

@@ -4,12 +4,14 @@ import 'common/polyfills'; // TODO: check it
 import { h, render } from 'preact';
 import Root from './components/root';
 
-import { id } from './common/settings';
+import { NODE_ID } from './common/constants';
+
+require('./components/document');
 
 init();
 
 function init() {
-  const node = document.getElementById(id);
+  const node = document.getElementById(NODE_ID);
 
   if (!node) {
     console.error('Remark42: Can\'t find root node.');

web/dev.ejs

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>remark42</title>
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 40px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div id="remark42"></div>
+  </div>
+
+  <script>
+    var remark_config = {
+      site_id: 'remark',
+      url: 'https://radio-t.com/p/2017/12/16/podcast-576/',
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = '/embed.js';
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+</body>
+</html>

web/iframe.html

@@ -4,19 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>remark42</title>
-  <link rel="stylesheet" href="/web/remark.css">
+  <link rel="stylesheet" href="remark.css">
 </head>
 <body>
-<div id="remark42"></div>
-<script type="text/javascript" src="/web/remark.js"></script>
-<script>
-  var lastHeight = 0;
-  setInterval(() => {
-    if (document.body.offsetHeight !== lastHeight) {
-      lastHeight = document.body.offsetHeight;
-      window.parent.postMessage(JSON.stringify({ remarkIframeHeight: lastHeight }), '*');
-    }
-  }, 200);
-</script>
+  <div id="remark42"></div>
+  <script type="text/javascript" src="remark.js"></script>
+  <script>
+    var lastHeight = 0;
+    setInterval(() => {
+      if (document.body.offsetHeight !== lastHeight) {
+        lastHeight = document.body.offsetHeight;
+        window.parent.postMessage(JSON.stringify({ remarkIframeHeight: lastHeight }), '*');
+      }
+    }, 200);
+  </script>
 </body>
 </html>

web/index.ejs

@@ -21,5 +21,22 @@
   <div class="container">
     <div id="remark42"></div>
   </div>
+
+  <script>
+    var remark_config = {
+      site_id: 'remark',
+      url: 'https://radio-t.com/p/2017/12/16/podcast-576/',
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://demo.remark42.com/web/embed.js';
+      s.type = 'text/javascript';
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>
+    Please enable JavaScript to view the comments powered by Remark.
+  </noscript>
 </body>
 </html>

web/test-embed.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Test page</title>
-</head>
-<body>
-<div id="remark42"></div>
-<script>
-  var remark_config = {
-    // site_id: 'YOUR_SITE_ID',
-    // page_id: 'YOUR_IDENTIFIER';
-  };
-
-  (function() {
-    var d = document, s = d.createElement('script');
-    // s.src = 'https://demo.remark42.com/web/embed.js';
-    s.src = 'https://demo.remark42.com/web/embed.js';
-    (d.head || d.body).appendChild(s);
-  })();
-</script>
-<noscript>
-  Please enable JavaScript to view the comments powered by Remark.
-</noscript>
-</body>
-</html>

web/webpack.config.js

@@ -9,10 +9,9 @@ const Html = require('html-webpack-plugin');
 const Provide = webpack.ProvidePlugin;
 const Define = webpack.DefinePlugin;
 
-const { id } = require('./app/common/settings');
+const { NODE_ID } = require('./app/common/constants');
 const publicFolder = path.resolve(__dirname, 'public');
 const env = process.env.NODE_ENV || 'dev';
-const hash = env === 'production' ? '' : '.[hash]';
 
 const commonStyleLoaders = [
   'css-loader',
@@ -22,7 +21,7 @@ const commonStyleLoaders = [
       plugins: [
         require('autoprefixer')({ browsers: ['> 1%'] }),
         require('postcss-url')({ url: 'inline', maxSize: 5 }),
-        require('postcss-wrap')({ selector: `#${id}` }),
+        require('postcss-wrap')({ selector: `#${NODE_ID}` }),
         require('postcss-csso'),
       ]
     }
@@ -44,7 +43,7 @@ module.exports = {
   },
   output: {
     path: publicFolder,
-    filename: `[name]${hash}.js`
+    filename: `[name].js`
   },
   resolve: {
     extensions: ['.jsx', '.js'],
@@ -99,14 +98,19 @@ module.exports = {
     new Define({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     }),
-    new Html({ template: path.resolve(__dirname, 'index.ejs') }), // TODO: we should add it only in dev
+    new Html({ template: path.resolve(__dirname, 'index.ejs'), inject: false }), // TODO: we should add it only on demo serv
+    ...(env === 'production' ? [] : [new Html({
+      template: path.resolve(__dirname, 'dev.ejs'),
+      filename: 'dev.html',
+      inject: false,
+    })]),
     new ExtractText({
-      filename: `remark${hash}.css`,
+      filename: `remark.css`,
       allChunks: true
     }),
     new webpack.optimize.ModuleConcatenationPlugin(),
     ...(env === 'production' ? [new webpack.optimize.UglifyJsPlugin()] : []),
-    ...(env === 'production' ? [new Copy(['./iframe.html', './test-embed.html'])] : []),
+    new Copy(['./iframe.html']),
   ],
   watch: env === 'dev',
   watchOptions: {