github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(layout): comment and donate to jsx

pull/588/head
ppoffice 2019-12-21 22:43:39 -05:00
parent 46fe8e7192
commit e03c3ca572
37 changed files with 494 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
layout/comment/changyan.ejs
View File

@ -1,14 +0,0 @@
<% if (!has_config('comment.appid') || !has_config('comment.conf')) { %>
<div class="notification is-danger">
You forgot to set the <code>appid</code> or <code>conf</code> for Changyan. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="SOHUCS" sid="<%= path %>"></div>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: '<%= get_config('comment.appid') %>',
conf: '<%= get_config('comment.conf') %>'
});
</script>
<% } %>

30
layout/comment/changyan.jsx Normal file
View File

@ -0,0 +1,30 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class ChangeYan extends Component {
render() {
const { appId, conf, path } = this.props;
if (!appId || !conf) {
return <div class="notification is-danger">
You forgot to set the <code>appid</code> or <code>conf</code> for Changyan.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `window.changyan.api.config({appid: '${appId}',conf: '${conf}'});`;
return <Fragment>
<div id="SOHUCS" sid={path}></div>
<script charset="utf-8" src="https://changyan.sohu.com/upload/changyan.js"></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(ChangeYan, 'comment.changyan', props => {
return {
appId: props.appid,
conf: props.conf,
path: props.page.path
};
});

4
layout/comment/changyan.locals.js
View File

@ -1,4 +0,0 @@
module.exports = (ctx, locals) => {
const { page } = ctx;
return Object.assign(locals, { path: page.path });
}

22
layout/comment/disqus.ejs
View File

@ -1,22 +0,0 @@
<% if (has_config('comment.shortname')) { %>
<script>
var disqus_config = function () {
this.page.url = '<%= permalink %>';
this.page.identifier = '<%= disqusId || path %>';
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//' + '<%= get_config('comment.shortname') %>' + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<% } %>
<div id="disqus_thread">
<% if (!has_config('comment.shortname')) { %>
<div class="notification is-danger">
You forgot to set the <code>shortname</code> for Disqus. Please set it in <code>_config.yml</code>.
</div>
<% } %>
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>

41
layout/comment/disqus.jsx Normal file
View File

@ -0,0 +1,41 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Disqus extends Component {
render() {
const { shortname, disqusId, path, permalink } = this.props;
if (!shortname) {
return <div class="notification is-danger">
You forgot to set the <code>shortname</code> for Disqus.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `var disqus_config = function () {
this.page.url = '${permalink}';
this.page.identifier = '${disqusId || path}';
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//' + '${shortname}' + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();`;
return <Fragment>
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Disqus, 'comment.disqus', props => {
return {
path: props.page.path,
shortname: props.shortname,
disqusId: props.page.disqusId,
permalink: props.page.permalink
};
});

4
layout/comment/disqus.locals.js
View File

@ -1,4 +0,0 @@
module.exports = (ctx, locals) => {
const { permalink, disqusId, path } = ctx.page;
return Object.assign(locals, { permalink, disqusId, path });
}

8
layout/comment/facebook.ejs
View File

@ -1,8 +0,0 @@
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/<%= get_config('language', 'en').split('-').join('_') %>/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-width="100%" data-href="<%= permalink %>" data-num-posts="5"></div>

28
layout/comment/facebook.jsx Normal file
View File

@ -0,0 +1,28 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Facebook extends Component {
render() {
const { language, permalink } = this.props;
const js = `(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/${(language || 'en').split('-').join('_')}/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));`;
return <Fragment>
<div class="fb-comments" data-width="100%" data-href={permalink} data-num-posts="5"></div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Facebook, 'comment.facebook', props => {
return {
language: props.language,
permalink: props.page.permalink
};
});

4
layout/comment/facebook.locals.js
View File

@ -1,4 +0,0 @@
module.exports = (ctx, locals) => {
const { permalink } = ctx.page;
return Object.assign(locals, { permalink });
}

24
layout/comment/gitalk.ejs
View File

@ -1,24 +0,0 @@
<% if (!has_config('comment.owner') || !has_config('comment.admin') || !has_config('comment.repo') || !has_config('comment.client_id') ||
!has_config('comment.client_secret')) { %>
<div class="notification is-danger">
You forgot to set the <code>owner</code>, <code>admin</code>, <code>repo</code>, <code>client_id</code>, or <code>client_secret</code> for Gittalk.
Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="comment-container"></div>
<%- _css(cdn('gitalk', '1.4.1', 'dist/gitalk.css')) %>
<%- _js(cdn('gitalk', '1.4.1', 'dist/gitalk.min.js')) %>
<script>
var gitalk = new Gitalk({
clientID: '<%= get_config('comment.client_id') %>',
clientSecret: '<%= get_config('comment.client_secret') %>',
id: '<%= md5(path) %>',
repo: '<%= get_config('comment.repo') %>',
owner: '<%= get_config('comment.owner') %>',
admin: <%- JSON.stringify(get_config('comment.admin'))%>,
createIssueManually: <%= get_config('comment.create_issue_manually', false) %>,
distractionFreeMode: <%= get_config('comment.distraction_free_mode', false) %>
})
gitalk.render('comment-container')
</script>
<% } %>

66
layout/comment/gitalk.jsx Normal file
View File

@ -0,0 +1,66 @@
'use strict';
const crypto = require('crypto');
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Gitalk extends Component {
render() {
const {
id,
repo,
owner,
admin,
clientId,
clientSecret,
createIssueManually,
distractionFreeMode,
cdn,
url_for
} = this.props;
if (!id || !repo || !owner || !admin || !clientId || !clientSecret) {
return <div class="notification is-danger">
You forgot to set the <code>owner</code>, <code>admin</code>, <code>repo</code>,
<code>client_id</code>, or <code>client_secret</code> for Gittalk.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `var gitalk = new Gitalk({
id: '${id}',
repo: '${repo}',
owner: '${owner}',
clientID: '${clientId}',
clientSecret: '${clientSecret}',
admin: ${JSON.stringify(admin)},
createIssueManually: ${createIssueManually || false},
distractionFreeMode: ${distractionFreeMode || false}
})
gitalk.render('comment-container')`;
return <Fragment>
<div id="comment-container"></div>
<link rel="stylesheet" href={url_for(cdn('gitalk', '1.4.1', 'dist/gitalk.css'))} />
<script src={url_for(cdn('gitalk', '1.4.1', 'dist/gitalk.min.js'))}></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Gitalk, 'comment.gitalk', props => {
// FIXME: config name change
const id = crypto.createHash('md5').update(props.page.path).digest('hex');
return {
id,
repo: props.repo,
owner: props.owner,
admin: props.admin,
clientId: props.clientId,
clientSecret: props.clientSecret,
createIssueManually: props.createIssueManually,
distractionFreeMode: props.distractionFreeMode,
cdn: props.cdn,
url_for: props.url_for,
// for cache purpose only
_providers: props.providers.cdn
};
});

4
layout/comment/gitalk.locals.js
View File

@ -1,4 +0,0 @@
module.exports = (ctx, locals) => {
const { path } = ctx.page;
return Object.assign(locals, { path });
}

23
layout/comment/gitment.ejs
View File

@ -1,23 +0,0 @@
<% if (!has_config('comment.owner') || !has_config('comment.repo') || !has_config('comment.client_id') ||
!has_config('comment.client_secret')) { %>
<div class="notification is-danger">
You forgot to set the <code>owner</code>, <code>repo</code>, <code>client_id</code>, or <code>client_secret</code> for Gitment.
Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="comment-container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: '<%= md5(path) %>',
owner: '<%= get_config('comment.owner') %>',
repo: '<%= get_config('comment.repo') %>',
oauth: {
client_id: '<%= get_config('comment.client_id') %>',
client_secret: '<%= get_config('comment.client_secret') %>',
},
})
gitment.render('comment-container')
</script>
<% } %>

52
layout/comment/gitment.jsx Normal file
View File

@ -0,0 +1,52 @@
'use strict';
const crypto = require('crypto');
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Gitment extends Component {
render() {
const {
id,
repo,
owner,
clientId,
clientSecret
} = this.props;
if (!id || !repo || !owner || !clientId || !clientSecret) {
return <div class="notification is-danger">
You forgot to set the <code>owner</code>, <code>repo</code>, <code>client_id</code>,
or <code>client_secret</code> for Gitment.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `var gitment = new Gitment({
id: '${id}',
repo: '${repo}',
owner: '${owner}',
oauth: {
client_id: '${clientId}',
client_secret: '${clientSecret}',
},
})
gitment.render('comment-container')`;
return <Fragment>
<div id="comment-container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css" />
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Gitment, 'comment.gitment', props => {
const id = crypto.createHash('md5').update(props.page.path).digest('hex');
return {
id,
repo: props.repo,
owner: props.owner,
clientId: props.client_id,
clientSecret: props.client_secret
};
});

4
layout/comment/gitment.locals.js
View File

@ -1,4 +0,0 @@
module.exports = (ctx, locals) => {
const { path } = ctx.page;
return Object.assign(locals, { path });
}

10
layout/comment/isso.ejs
View File

@ -1,10 +0,0 @@
<% if (!has_config('comment.url')) { %>
<div class="notification is-danger">
You forgot to set the <code>url</code> for Isso. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="isso-thread"></div>
<script data-isso="//<%= get_config('comment.url') %>" src="//<%= get_config('comment.url') %>/js/embed.min.js">
</script>
<% } %>

26
layout/comment/isso.jsx Normal file
View File

@ -0,0 +1,26 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Isso extends Component {
render() {
const { url } = this.props;
if (!url) {
return <div class="notification is-danger">
You forgot to set the <code>url</code> for Isso.
Please set it in <code>_config.yml</code>.
</div>;
}
return <Fragment>
<div id="isso-thread"></div>
<script data-isso={'//' + url} src={`//${url}/js/embed.min.js`}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Isso, 'comment.isso', props => {
return {
url: props.url
};
});

3
layout/comment/isso.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

22
layout/comment/livere.ejs
View File

@ -1,22 +0,0 @@
<% if (!has_config('comment.uid')) { %>
<div class="notification is-danger">
You forgot to set the <code>uid</code> for LiveRe. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="lv-container" data-id="city" data-uid="<%= get_config('comment.uid') %>">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript> Please activate JavaScript for write a comment in LiveRe</noscript>
</div>
<% } %>

37
layout/comment/livere.jsx Normal file
View File

@ -0,0 +1,37 @@
'use strict';
const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache');
class LiveRe extends Component {
render() {
const { uid } = this.props;
if (!uid) {
return <div class="notification is-danger">
You forgot to set the <code>uid</code> for LiveRe.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');`;
return <div id="lv-container" data-id="city" data-uid={uid}>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
<noscript>Please activate JavaScript for write a comment in LiveRe</noscript>
</div>;
}
}
module.exports = cacheComponent(LiveRe, 'comment.livere', props => {
return {
uid: props.uid
};
});

3
layout/comment/livere.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

19
layout/comment/valine.ejs
View File

@ -1,19 +0,0 @@
<% if (!has_config('comment.app_id') || !has_config('comment.app_key')) { %>
<div class="notification is-danger">
You forgot to set the <code>app_id</code> or <code>app_key</code> for Valine. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
new Valine({
el: '#valine-thread' ,
notify: <%= get_config('comment.notify') %>,
verify: <%= get_config('comment.verify') %>,
app_id: '<%= get_config('comment.app_id') %>',
app_key: '<%= get_config('comment.app_key') %>',
placeholder: '<%= get_config('comment.placeholder') %>'
});
</script>
<% } %>

40
layout/comment/valine.jsx Normal file
View File

@ -0,0 +1,40 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Valine extends Component {
render() {
const { appId, appKey, notify, verify, placeholder } = this.props;
if (!appId || !appKey) {
return <div class="notification is-danger">
You forgot to set the <code>app_id</code> or <code>app_key</code> for Valine.
Please set it in <code>_config.yml</code>.
</div>;
}
const js = `new Valine({
el: '#valine-thread' ,
notify: ${notify},
verify: ${verify},
app_id: '${appId}',
app_key: '${appKey}',
placeholder: '${placeholder}'
});`;
return <Fragment>
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Valine, 'comment.valine', props => {
return {
appId: props.app_id,
appKey: props.app_key,
notify: props.notify,
verify: props.verify,
placeholder: props.placeholder
};
});

3
layout/comment/valine.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

14
layout/donate/alipay.ejs
View File

@ -1,14 +0,0 @@
<% const qrcode = get_config_from_obj(service, 'qrcode');
if (qrcode) { %>
<a class="button is-info donate">
<span class="icon is-small">
<i class="fab fa-alipay"></i>
</span>
<span><%= __('donate.' + type) %></span>
<div class="qrcode"><img src="<%= url_for(qrcode) %>" alt="<%= __('donate.' + type) %>"></div>
</a>
<% } else { %>
<div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Alipay. Please set it in <code>_config.yml</code>.
</div>
<% } %>

32
layout/donate/alipay.jsx Normal file
View File

@ -0,0 +1,32 @@
'use strict';
const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Alipay extends Component {
render() {
const { type, qrcode, __, url_for } = this.props;
if (!qrcode) {
return <div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Alipay.
Please set it in <code>_config.yml</code>.
</div>;
}
return <a class="button is-info donate">
<span class="icon is-small">
<i class="fab fa-alipay"></i>
</span>
<span>{__('donate.' + type)}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
</a>;
}
}
module.exports = cacheComponent(Alipay, 'donate.alipay', props => {
return {
type: props.type,
qrcode: props.qrcode,
__: props.__,
url_for: props.url_for
};
});

3
layout/donate/alipay.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

13
layout/donate/patreon.ejs
View File

@ -1,13 +0,0 @@
<% const url = get_config_from_obj(service, 'url');
if (url) { %>
<a class="button is-danger donate" href="<%= url_for(url) %>" target="_blank" rel="noopener">
<span class="icon is-small">
<i class="fab fa-patreon"></i>
</span>
<span><%= __('donate.' + type) %></span>
</a>
<% } else { %>
<div class="notification is-danger">
You forgot to set the <code>url</code> Patreon. Please set it in <code>_config.yml</code>.
</div>
<% } %>

31
layout/donate/patreon.jsx Normal file
View File

@ -0,0 +1,31 @@
'use strict';
const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Patreon extends Component {
render() {
const { type, url, __, url_for } = this.props;
if (!url) {
return <div class="notification is-danger">
You forgot to set the <code>url</code> Patreon.
Please set it in <code>_config.yml</code>.
</div>;
}
return <a class="button is-danger donate" href={url_for(url)} target="_blank" rel="noopener">
<span class="icon is-small">
<i class="fab fa-patreon"></i>
</span>
<span>{__('donate.' + type)}</span>
</a>;
}
}
module.exports = cacheComponent(Patreon, 'donate.petreon', props => {
return {
type: props.type,
url: props.url,
__: props.__,
url_for: props.url_for
};
});

3
layout/donate/patreon.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

20
layout/donate/paypal.ejs
View File

@ -1,20 +0,0 @@
<!-- Visit https://www.paypal.com/donate/buttons/ to get your donate button -->
<% const business = get_config_from_obj(service, 'business');
const currency_code = get_config_from_obj(service, 'currency_code');
if (business && currency_code) { %>
<a class="button is-warning donate" onclick="<%= 'document.getElementById(\'paypal-donate-form\').submit()' %>">
<span class="icon is-small">
<i class="fab fa-paypal"></i>
</span>
<span><%= __('donate.' + type) %></span>
</a>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" rel="noopener" id="paypal-donate-form">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="<%= business %>" />
<input type="hidden" name="currency_code" value="<%= currency_code %>" />
</form>
<% } else { %>
<div class="notification is-danger">
You forgot to set the <code>business</code> and <code>currency_code</code> for Paypal. Please set it in <code>_config.yml</code>.
</div>
<% } %>

39
layout/donate/paypal.jsx Normal file
View File

@ -0,0 +1,39 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Paypal extends Component {
render() {
const { type, business, currencyCode, __ } = this.props;
if (!business || !currencyCode) {
return <div class="notification is-danger">
You forgot to set the <code>business</code> or <code>currency_code</code> for Paypal.
Please set it in <code>_config.yml</code>.
</div>;
}
return <Fragment>
<a class="button is-warning donate" onclick="document.getElementById('paypal-donate-form').submit()">
<span class="icon is-small">
<i class="fab fa-paypal"></i>
</span>
<span>{__('donate.' + type)}</span>
</a>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" rel="noopener" id="paypal-donate-form">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value={business} />
<input type="hidden" name="currency_code" value={currencyCode} />
</form>
</Fragment>;
}
}
module.exports = cacheComponent(Paypal, 'donate.paypal', props => {
return {
type: props.type,
business: props.business,
currencyCode: props.currency_code,
__: props.__,
url_for: props.url_for
};
});

3
layout/donate/paypal.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

14
layout/donate/wechat.ejs
View File

@ -1,14 +0,0 @@
<% const qrcode = get_config_from_obj(service, 'qrcode');
if (qrcode) { %>
<a class="button is-success donate">
<span class="icon is-small">
<i class="fab fa-weixin"></i>
</span>
<span><%= __('donate.' + type) %></span>
<div class="qrcode"><img src="<%= url_for(qrcode) %>" alt="<%= __('donate.' + type) %>"></div>
</a>
<% } else { %>
<div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Wechat. Please set it in <code>_config.yml</code>.
</div>
<% } %>

32
layout/donate/wechat.jsx Normal file
View File

@ -0,0 +1,32 @@
'use strict';
const { Component } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Wechat extends Component {
render() {
const { type, qrcode, __, url_for } = this.props;
if (!qrcode) {
return <div class="notification is-danger">
You forgot to set the <code>qrcode</code> for Wechat.
Please set it in <code>_config.yml</code>.
</div>;
}
return <a class="button is-info donate">
<span class="icon is-small">
<i class="fab fa-weixin"></i>
</span>
<span>{__('donate.' + type)}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
</a>;
}
}
module.exports = cacheComponent(Wechat, 'donate.wechat', props => {
return {
type: props.type,
qrcode: props.qrcode,
__: props.__,
url_for: props.url_for
};
});

3
layout/donate/wechat.locals.js
View File

@ -1,3 +0,0 @@
module.exports = (ctx, locals) => {
return locals;
}

40
layout/util/cache.jsx Normal file
View File

@ -0,0 +1,40 @@
const crypto = require('crypto');
const { Component } = require('inferno');
const { createElement } = require('inferno-create-element');
const cache = {};
function computeHash(props) {
return crypto.createHash('md5').update(JSON.stringify(props)).digest("hex");
}
module.exports = {
/**
* Create cached component from a given component class.
* The cache ID is caculated from the input props.
*
* @param {Component} type JSX component class
* @param {string} prefix Cache ID prefix
* @param {Function} transform Transform the input props to target props and
* its result is used to compute cache ID
* @returns Cached JSX element if cache ID is found.
* Otherwise, create a new element and cache it if the transform function is provided.
*/
cacheComponent(type, prefix, transform) {
if (typeof transform !== 'function') {
return props => createElement(type, props);
} else {
return props => {
const targetProps = transform(props);
const cacheId = prefix + '-' + computeHash(targetProps);
if (!cacheId) {
return createElement(type, targetProps);
}
if (!cache[cacheId]) {
cache[cacheId] = createElement(type, targetProps);
}
return cache[cacheId];
};
}
}
};