mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Define remark host in runtime (#325)

Browse Source 
* convert closest-polyfill to ts

* make remark respect host property in client setup
This commit is contained in:
Misha Vyrtsev
2019-05-13 10:51:17 -05:00
committed by Umputun
parent 53f2f82e05
commit 61e594786c
13 changed files with 138 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+37 -17
View File
@@ -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.js
-15
View File
@@ -1,15 +0,0 @@
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
let el = this;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
frontend/app/common/closest-polyfill.ts
+17
View File
@@ -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
+3
View File
@@ -1,6 +1,7 @@
import { UserInfo, Theme } from './types';
export interface CounterConfig {
host: string;
site_id: string;
url?: string;
}
@@ -8,6 +9,7 @@ export interface CounterConfig {
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
+3 -1
View File
@@ -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
+5 -3
View File
@@ -7,6 +7,8 @@ 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 {
@@ -14,7 +16,7 @@ if (document.readyState === 'loading') {
}
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
+22
View File
@@ -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
+9 -8
View File
@@ -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
+10 -7
View File
@@ -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
+5
View File
@@ -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
+9
View File
@@ -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
+9 -13
View File
@@ -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
+9 -6
View File
@@ -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.