refactor(layout): search and share to jsx

This commit is contained in:
ppoffice 2019-12-22 00:37:57 -05:00
parent e03c3ca572
commit 725bce4cd5
36 changed files with 338 additions and 221 deletions

View File

@ -7,7 +7,7 @@ class ChangeYan extends Component {
render() {
const { appId, conf, path } = this.props;
if (!appId || !conf) {
return <div class="notification is-danger">
return <div className="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>;

View File

@ -7,7 +7,7 @@ class Disqus extends Component {
render() {
const { shortname, disqusId, path, permalink } = this.props;
if (!shortname) {
return <div class="notification is-danger">
return <div className="notification is-danger">
You forgot to set the <code>shortname</code> for Disqus.
Please set it in <code>_config.yml</code>.
</div>;

View File

@ -14,7 +14,7 @@ class Facebook extends Component {
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>
<div className="fb-comments" data-width="100%" data-href={permalink} data-num-posts="5"></div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}

View File

@ -20,7 +20,7 @@ class Gitalk extends Component {
} = this.props;
if (!id || !repo || !owner || !admin || !clientId || !clientSecret) {
return <div class="notification is-danger">
return <div className="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>.

View File

@ -15,7 +15,7 @@ class Gitment extends Component {
} = this.props;
if (!id || !repo || !owner || !clientId || !clientSecret) {
return <div class="notification is-danger">
return <div className="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>.

View File

@ -7,7 +7,7 @@ class Isso extends Component {
render() {
const { url } = this.props;
if (!url) {
return <div class="notification is-danger">
return <div className="notification is-danger">
You forgot to set the <code>url</code> for Isso.
Please set it in <code>_config.yml</code>.
</div>;

View File

@ -7,7 +7,7 @@ class LiveRe extends Component {
render() {
const { uid } = this.props;
if (!uid) {
return <div class="notification is-danger">
return <div className="notification is-danger">
You forgot to set the <code>uid</code> for LiveRe.
Please set it in <code>_config.yml</code>.
</div>;

View File

@ -7,7 +7,7 @@ class Valine extends Component {
render() {
const { appId, appKey, notify, verify, placeholder } = this.props;
if (!appId || !appKey) {
return <div class="notification is-danger">
return <div className="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>;
@ -21,7 +21,7 @@ class Valine extends Component {
placeholder: '${placeholder}'
});`;
return <Fragment>
<div id="valine-thread" class="content"></div>
<div id="valine-thread" className="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>

View File

@ -7,17 +7,17 @@ class Alipay extends Component {
render() {
const { type, qrcode, __, url_for } = this.props;
if (!qrcode) {
return <div class="notification is-danger">
return <div className="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>
return <a className="button is-info donate">
<span className="icon is-small">
<i className="fab fa-alipay"></i>
</span>
<span>{__('donate.' + type)}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
<span className="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
</a>;
}
}

View File

@ -7,14 +7,14 @@ class Patreon extends Component {
render() {
const { type, url, __, url_for } = this.props;
if (!url) {
return <div class="notification is-danger">
return <div className="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>
return <a className="button is-danger donate" href={url_for(url)} target="_blank" rel="noopener">
<span className="icon is-small">
<i className="fab fa-patreon"></i>
</span>
<span>{__('donate.' + type)}</span>
</a>;

View File

@ -7,15 +7,15 @@ class Paypal extends Component {
render() {
const { type, business, currencyCode, __ } = this.props;
if (!business || !currencyCode) {
return <div class="notification is-danger">
return <div className="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>
<a className="button is-warning donate" onclick="document.getElementById('paypal-donate-form').submit()">
<span className="icon is-small">
<i className="fab fa-paypal"></i>
</span>
<span>{__('donate.' + type)}</span>
</a>

View File

@ -7,17 +7,17 @@ class Wechat extends Component {
render() {
const { type, qrcode, __, url_for } = this.props;
if (!qrcode) {
return <div class="notification is-danger">
return <div className="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>
return <a className="button is-info donate">
<span className="icon is-small">
<i className="fab fa-weixin"></i>
</span>
<span>{__('donate.' + type)}</span>
<span class="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
<span className="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span>
</a>;
}
}

View File

@ -1,29 +0,0 @@
<%- _css('css/search') %>
<div class="searchbox">
<div class="searchbox-container">
<div class="searchbox-input-wrapper">
<form class="search-form">
<input name="wd" type="text" class="searchbox-input" placeholder="<%= __('search.hint') %>" />
<span class="searchbox-close searchbox-selectable"><i class="fa fa-times-circle"></i></span>
</form>
</div>
</div>
</div>
<script>
(function ($) {
$('.search-form').on('submit', function (e) {
var keyword = $('.searchbox-input[name="wd"]').val();
window.location = 'https://www.baidu.com/s?wd=site:<%= config.url.replace(/http(s)*:\/\//, "") %> ' + keyword;
return false;
});
})(jQuery);
(function (document, $) {
$(document).on('click', '.navbar-main .search', function () {
$('.searchbox').toggleClass('show');
}).on('click', '.searchbox .searchbox-mask', function () {
$('.searchbox').removeClass('show');
}).on('click', '.searchbox-close', function () {
$('.searchbox').removeClass('show');
});
})(document, jQuery);
</script>

50
layout/search/baidu.jsx Normal file
View File

@ -0,0 +1,50 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Baidu extends Component {
render() {
const { url, __, url_for } = this.props;
const js = `(function ($) {
$('.search-form').on('submit', function (e) {
var keyword = $('.searchbox-input[name="wd"]').val();
window.location = 'https://www.baidu.com/s?wd=site:${url.replace(/http(s)*:\/\//, '')} ' + keyword;
return false;
});
})(jQuery);
(function (document, $) {
$(document).on('click', '.navbar-main .search', function () {
$('.searchbox').toggleClass('show');
}).on('click', '.searchbox .searchbox-mask', function () {
$('.searchbox').removeClass('show');
}).on('click', '.searchbox-close', function () {
$('.searchbox').removeClass('show');
});
})(document, jQuery);`;
return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<div className="searchbox">
<div className="searchbox-container">
<div className="searchbox-input-wrapper">
<form className="search-form">
<input name="wd" type="text" className="searchbox-input" placeholder={__('search.hint')} />
<span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span>
</form>
</div>
</div>
</div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Baidu, 'search.baidu', props => {
return {
url: props.config.url,
__: props.__,
url_for: props.url_for
};
});

View File

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

View File

@ -1,67 +0,0 @@
<%- _css('css/search') %>
<div class="searchbox google-cse-search">
<div class="searchbox-container">
<div class="searchbox-input-wrapper">
<input type="text" class="searchbox-input" placeholder="<%= __('search.hint') %>" />
<span class="searchbox-close searchbox-selectable"><i class="fa fa-times-circle"></i></span>
</div>
<% if (has_config('search.cx')) { %>
<div class="searchbox-result-wrapper">
<gcse:searchresults-only></gcse:searchresults-only>
</div>
<% } else { %>
<div class="notification is-danger">
It seems that you forget to set the <code>cx</code> value for the Google CSE. Please set it in <code>_config.yml</code>.
</div>
<% } %>
</div>
<% if (has_config('search.cx')) { %>
<script>
(function() {
var cx = '<%= get_config('search.cx') %>';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<% } %>
</div>
<script>
(function (document, $) {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
$(document).on('click', '.navbar-main .search', function () {
$('.searchbox').toggleClass('show');
}).on('click', '.searchbox .searchbox-mask', function () {
$('.searchbox').removeClass('show');
}).on('click', '.searchbox-close', function () {
$('.searchbox').removeClass('show');
}).on('keydown', '.searchbox-input', debounce(function () {
var value = $(this).val();
try {
var element = google.search.cse.element.getElement('searchresults-only0');
if (value.trim() === '') {
element.clearAllResults();
} else {
element.execute(value);
}
} catch (e) {}
}, 300));
})(document, jQuery);
</script>

View File

@ -0,0 +1,88 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Google extends Component {
render() {
const { cx, __, url_for } = this.props;
const js1 = `(function() {
var cx = '${cx}';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();`;
const js2 = `(function (document, $) {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
$(document).on('click', '.navbar-main .search', function () {
$('.searchbox').toggleClass('show');
}).on('click', '.searchbox .searchbox-mask', function () {
$('.searchbox').removeClass('show');
}).on('click', '.searchbox-close', function () {
$('.searchbox').removeClass('show');
}).on('keydown', '.searchbox-input', debounce(function () {
var value = $(this).val();
try {
var element = google.search.cse.element.getElement('searchresults-only0');
if (value.trim() === '') {
element.clearAllResults();
} else {
element.execute(value);
}
} catch (e) {}
}, 300));
})(document, jQuery);`;
return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<div className="searchbox google-cse-search">
<div className="searchbox-container">
<div className="searchbox-input-wrapper">
<input type="text" className="searchbox-input" placeholder={__('search.hint')} />
<span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span>
</div>
{(() => {
if (cx) {
const innerHtml = '<gcse:searchresults-only></gcse:searchresults-only>';
return <div className="searchbox-result-wrapper" dangerouslySetInnerHTML={{ __html: innerHtml }}></div>;
}
return <div className="notification is-danger">
It seems that you forget to set the <code>cx</code> value for the Google CSE.
Please set it in <code>_config.yml</code>.
</div>;
})()}
</div>
{cx ? <script dangerouslySetInnerHTML={{ __html: js1 }}></script> : null}
</div>
<script dangerouslySetInnerHTML={{ __html: js2 }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Google, 'search.google', props => {
return {
cx: props.cx,
__: props.__,
url_for: props.url_for
};
});

View File

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

View File

@ -1,29 +0,0 @@
<div class="searchbox ins-search">
<div class="searchbox-container ins-search-container">
<div class="searchbox-input-wrapper">
<input type="text" class="searchbox-input ins-search-input" placeholder="<%= __('insight.hint') %>" />
<span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
</div>
<div class="searchbox-result-wrapper ins-section-wrapper">
<div class="ins-section-container"></div>
</div>
</div>
</div>
<script>
(function (window) {
var INSIGHT_CONFIG = {
TRANSLATION: {
POSTS: '<%= __("insight.posts") %>',
PAGES: '<%= __("insight.pages") %>',
CATEGORIES: '<%= __("insight.categories") %>',
TAGS: '<%= __("insight.tags") %>',
UNTITLED: '<%= __("insight.untitled") %>',
},
CONTENT_URL: '<%- url_for("/content.json")%>',
};
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<%- _js('js/insight', true) %>
<%- _css('css/search') %>
<%- _css('css/insight') %>

49
layout/search/insight.jsx Normal file
View File

@ -0,0 +1,49 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Insight extends Component {
render() {
const { __, url_for } = this.props;
const js = `(function (window) {
var INSIGHT_CONFIG = {
TRANSLATION: {
POSTS: '${__('insight.posts')}',
PAGES: '${__('insight.pages')}',
CATEGORIES: '${__('insight.categories')}',
TAGS: '${__('insight.tags')}',
UNTITLED: '${__('insight.untitled')}',
},
CONTENT_URL: '${url_for('/content.json')}',
};
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);`;
return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<link rel="stylesheet" href={url_for('/css/insight.css')} />
<div className="searchbox ins-search">
<div className="searchbox-container ins-search-container">
<div className="searchbox-input-wrapper">
<input type="text" className="searchbox-input ins-search-input" placeholder={__('insight.hint')} />
<span className="searchbox-close ins-close ins-selectable"><i className="fa fa-times-circle"></i></span>
</div>
<div className="searchbox-result-wrapper ins-section-wrapper">
<div className="ins-section-container"></div>
</div>
</div>
</div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
<script src={url_for('/js/insight.js')} defer={true}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Insight, 'search.insight', props => {
return {
__: props.__,
url_for: props.url_for
};
});

View File

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

View File

@ -1,8 +0,0 @@
<% if (!has_config('share.install_url')) { %>
<div class="notification is-danger">
You need to set <code>install_url</code> to use AddThis. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div class="addthis_inline_share_toolbox"></div>
<script type="text/javascript" src="<%= get_config('share.install_url') %>"></script>
<% } %>

26
layout/share/addthis.jsx Normal file
View File

@ -0,0 +1,26 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class AddThis extends Component {
render() {
const { installUrl } = this.props;
if (!installUrl) {
return <div className="notification is-danger">
You need to set <code>install_url</code> to use AddThis.
Please set it in <code>_config.yml</code>.
</div>;
}
return <Fragment>
<div className="addthis_inline_share_toolbox"></div>
<script src={installUrl} async={true}></script>
</Fragment>;
}
}
module.exports = cacheComponent(AddThis, 'share.addthis', props => {
return {
installUrl: props.install_url
};
});

View File

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

View File

@ -1,11 +0,0 @@
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_telegram"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_button_reddit"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

24
layout/share/addtoany.jsx Normal file
View File

@ -0,0 +1,24 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class AddToAny extends Component {
render() {
return <Fragment>
<div className="a2a_kit a2a_kit_size_32 a2a_default_style">
<a className="a2a_dd" href="https://www.addtoany.com/share"></a>
<a className="a2a_button_facebook"></a>
<a className="a2a_button_twitter"></a>
<a className="a2a_button_telegram"></a>
<a className="a2a_button_whatsapp"></a>
<a className="a2a_button_reddit"></a>
</div>
<script src="https://static.addtoany.com/menu/page.js" async={true}></script>
</Fragment>;
}
}
module.exports = cacheComponent(AddToAny, 'share.addtoany', props => {
return {};
});

View File

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

View File

@ -1,9 +0,0 @@
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>

25
layout/share/bdshare.jsx Normal file
View File

@ -0,0 +1,25 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class BdShare extends Component {
render() {
const js = `window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];`;
return <Fragment>
<div className="bdsharebuttonbox">
<a href="#" className="bds_more" data-cmd="more"></a>
<a href="#" className="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" className="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" className="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" className="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" className="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
<script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(BdShare, 'share.bdshare', props => {
return {};
});

View File

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

View File

@ -1,3 +0,0 @@
<div class="social-share"></div>
<%- _css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %>
<%- _js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %>

23
layout/share/sharejs.jsx Normal file
View File

@ -0,0 +1,23 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class ShareJs extends Component {
render() {
const { cdn } = this.props;
return <Fragment>
<link rel="stylesheet" href={cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')} />
<div class="social-share"></div>
<script src={cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')}></script>
</Fragment>;
}
}
module.exports = cacheComponent(ShareJs, 'share.sharejs', props => {
return {
cdn: props.cdn,
// for cache purpose only
_providers: props.providers.cdn
};
});

View File

@ -1,9 +0,0 @@
module.exports = (ctx, locals) => {
const { get_config } = ctx;
return Object.assign(locals, {
// just for diff detection
_providers: {
_cdn: get_config('providers.cdn')
}
});
}

View File

@ -1,8 +0,0 @@
<% if (!has_config('share.install_url')) { %>
<div class="notification is-danger">
You need to set <code>install_url</code> to use ShareThis. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div class="sharethis-inline-share-buttons"></div>
<script type='text/javascript' src='<%= get_config('share.install_url') %>' async='async'></script>
<% } %>

View File

@ -0,0 +1,26 @@
'use strict';
const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class ShareThis extends Component {
render() {
const { installUrl } = this.props;
if (!installUrl) {
return <div className="notification is-danger">
You need to set <code>install_url</code> to use ShareThis.
Please set it in <code>_config.yml</code>.
</div>;
}
return <Fragment>
<div class="sharethis-inline-share-buttons"></div>
<script src={installUrl} async={true}></script>
</Fragment>;
}
}
module.exports = cacheComponent(ShareThis, 'share.sharethis', props => {
return {
installUrl: props.install_url
};
});

View File

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