From 10f65eb8536759c2ec684bf99bb2a309d128fab9 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 18 Feb 2018 00:33:12 +0200 Subject: [PATCH 01/13] move constants to separated file --- web/app/common/constants.js | 9 +++++++++ web/app/common/fetcher.js | 7 ++++--- web/app/components/root/root.jsx | 11 ++++++----- web/app/remark.js | 4 ++-- web/webpack.config.js | 4 ++-- 5 files changed, 23 insertions(+), 12 deletions(-) create mode 100644 web/app/common/constants.js diff --git a/web/app/common/constants.js b/web/app/common/constants.js new file mode 100644 index 00000000..b8250aee --- /dev/null +++ b/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, +}; diff --git a/web/app/common/fetcher.js b/web/app/common/fetcher.js index 23e03ec7..675384f6 100644 --- a/web/app/common/fetcher.js +++ b/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 = { diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index b6e2bb87..09c1cf99 100644 --- a/web/app/components/root/root.jsx +++ b/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 ( -
+
); @@ -99,8 +100,8 @@ export default class Root extends Component { const pinnedComments = store.getPinnedComments(); return ( -
-
+
+
1%'] }), require('postcss-url')({ url: 'inline', maxSize: 5 }), - require('postcss-wrap')({ selector: `#${id}` }), + require('postcss-wrap')({ selector: `#${NODE_ID}` }), require('postcss-csso'), ] } From ff9010f5344792b44efda07e78f3c834c52d8310 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 18 Feb 2018 00:35:05 +0200 Subject: [PATCH 02/13] parse query string for settings --- web/app/common/settings.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/web/app/common/settings.js b/web/app/common/settings.js index 4f521f23..d61c1d8c 100644 --- a/web/app/common/settings.js +++ b/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']; From e08313ea0ad612c50dc9c6a9f61342a0f748cff9 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 18 Feb 2018 00:35:49 +0200 Subject: [PATCH 03/13] prepend user avatar url by base url if it starts from api base --- web/app/components/comment/comment.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 7e701eb0..e6c9f9bc 100644 --- a/web/app/components/comment/comment.jsx +++ b/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 = { From d707449d5ccfd4bc9b0a76cb1a70fb4870612178 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 18 Feb 2018 00:36:08 +0200 Subject: [PATCH 04/13] build embed script only in production mode --- web/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/webpack.config.js b/web/webpack.config.js index 1a10b833..e60b4486 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -40,7 +40,7 @@ module.exports = { context: __dirname, entry: { remark: './app/remark', - embed: './app/embed', + ...(env === 'production' ? { embed: './app/embed' } : {}), }, output: { path: publicFolder, From 46e4027ae7afbddc61c1c7b46cb888bd434f829c Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 18 Feb 2018 00:36:49 +0200 Subject: [PATCH 05/13] pass params to main script from embed script by query string of iframe's src --- web/app/embed.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/web/app/embed.js b/web/app/embed.js index 1934a198..bf513c2c 100644 --- a/web/app/embed.js +++ b/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,29 @@ 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; } + remark_config = remark_config || {} + + 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 = `