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): cache cdn and i18n earlier

pull/588/head
ppoffice 2019-12-22 12:38:31 -05:00
parent b0f16cf892
commit 0dab77811f
14 changed files with 82 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
layout/comment/gitalk.jsx
View File

@ -15,8 +15,8 @@ class Gitalk extends Component {
clientSecret, clientSecret,
createIssueManually, createIssueManually,
distractionFreeMode, distractionFreeMode,
cdn, jsUrl,
url_for cssUrl
} = this.props; } = this.props;
if (!id || !repo || !owner || !admin || !clientId || !clientSecret) { if (!id || !repo || !owner || !admin || !clientId || !clientSecret) {
@ -39,8 +39,8 @@ class Gitalk extends Component {
gitalk.render('comment-container')`; gitalk.render('comment-container')`;
return <Fragment> return <Fragment>
<div id="comment-container"></div> <div id="comment-container"></div>
<link rel="stylesheet" href={url_for(cdn('gitalk', '1.4.1', 'dist/gitalk.css'))} /> <link rel="stylesheet" href={cssUrl} />
<script src={url_for(cdn('gitalk', '1.4.1', 'dist/gitalk.min.js'))}></script> <script src={jsUrl}></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script> <script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>; </Fragment>;
} }
@ -58,9 +58,7 @@ module.exports = cacheComponent(Gitalk, 'comment.gitalk', props => {
clientSecret: props.clientSecret, clientSecret: props.clientSecret,
createIssueManually: props.createIssueManually, createIssueManually: props.createIssueManually,
distractionFreeMode: props.distractionFreeMode, distractionFreeMode: props.distractionFreeMode,
cdn: props.cdn, cssUrl: props.cdn('gitalk', '1.4.1', 'dist/gitalk.css'),
url_for: props.url_for, jsUrl: props.cdn('gitalk', '1.4.1', 'dist/gitalk.min.js')
// for cache purpose only
_providers: props.providers.cdn
}; };
}); });

13
layout/donate/alipay.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Alipay extends Component { class Alipay extends Component {
render() { render() {
const { type, qrcode, __, url_for } = this.props; const { title, qrcode, url_for } = this.props;
if (!qrcode) { if (!qrcode) {
return <div className="notification is-danger"> return <div className="notification is-danger">
You forgot to set the <code>qrcode</code> for Alipay. You forgot to set the <code>qrcode</code> for Alipay.
@ -16,19 +16,16 @@ class Alipay extends Component {
<span className="icon is-small"> <span className="icon is-small">
<i className="fab fa-alipay"></i> <i className="fab fa-alipay"></i>
</span> </span>
<span>{__('donate.' + type)}</span> <span>{title}</span>
<span className="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span> <span className="qrcode"><img src={url_for(qrcode)} alt={title} /></span>
</a>; </a>;
} }
} }
module.exports = cacheComponent(Alipay, 'donate.alipay', props => { module.exports = cacheComponent(Alipay, 'donate.alipay', props => {
return { return {
type: props.type,
qrcode: props.qrcode, qrcode: props.qrcode,
__: props.__, title: props.__('donate.' + props.type),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

11
layout/donate/patreon.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Patreon extends Component { class Patreon extends Component {
render() { render() {
const { type, url, __, url_for } = this.props; const { title, url, url_for } = this.props;
if (!url) { if (!url) {
return <div className="notification is-danger"> return <div className="notification is-danger">
You forgot to set the <code>url</code> Patreon. You forgot to set the <code>url</code> Patreon.
@ -16,18 +16,15 @@ class Patreon extends Component {
<span className="icon is-small"> <span className="icon is-small">
<i className="fab fa-patreon"></i> <i className="fab fa-patreon"></i>
</span> </span>
<span>{__('donate.' + type)}</span> <span>{title}</span>
</a>; </a>;
} }
} }
module.exports = cacheComponent(Patreon, 'donate.petreon', props => { module.exports = cacheComponent(Patreon, 'donate.petreon', props => {
return { return {
type: props.type,
url: props.url, url: props.url,
__: props.__, title: props.__('donate.' + props.type),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

11
layout/donate/paypal.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Paypal extends Component { class Paypal extends Component {
render() { render() {
const { type, business, currencyCode, __ } = this.props; const { title, business, currencyCode } = this.props;
if (!business || !currencyCode) { if (!business || !currencyCode) {
return <div className="notification is-danger"> return <div className="notification is-danger">
You forgot to set the <code>business</code> or <code>currency_code</code> for Paypal. You forgot to set the <code>business</code> or <code>currency_code</code> for Paypal.
@ -17,7 +17,7 @@ class Paypal extends Component {
<span className="icon is-small"> <span className="icon is-small">
<i className="fab fa-paypal"></i> <i className="fab fa-paypal"></i>
</span> </span>
<span>{__('donate.' + type)}</span> <span>{title}</span>
</a> </a>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" rel="noopener" id="paypal-donate-form"> <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="cmd" value="_donations" />
@ -30,12 +30,9 @@ class Paypal extends Component {
module.exports = cacheComponent(Paypal, 'donate.paypal', props => { module.exports = cacheComponent(Paypal, 'donate.paypal', props => {
return { return {
type: props.type,
business: props.business, business: props.business,
currencyCode: props.currency_code, currencyCode: props.currency_code,
__: props.__, title: props.__('donate.' + props.type),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

13
layout/donate/wechat.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Wechat extends Component { class Wechat extends Component {
render() { render() {
const { type, qrcode, __, url_for } = this.props; const { title, qrcode, url_for } = this.props;
if (!qrcode) { if (!qrcode) {
return <div className="notification is-danger"> return <div className="notification is-danger">
You forgot to set the <code>qrcode</code> for Wechat. You forgot to set the <code>qrcode</code> for Wechat.
@ -16,19 +16,16 @@ class Wechat extends Component {
<span className="icon is-small"> <span className="icon is-small">
<i className="fab fa-weixin"></i> <i className="fab fa-weixin"></i>
</span> </span>
<span>{__('donate.' + type)}</span> <span>{title}</span>
<span className="qrcode"><img src={url_for(qrcode)} alt={__('donate.' + type)} /></span> <span className="qrcode"><img src={url_for(qrcode)} alt={title} /></span>
</a>; </a>;
} }
} }
module.exports = cacheComponent(Wechat, 'donate.wechat', props => { module.exports = cacheComponent(Wechat, 'donate.wechat', props => {
return { return {
type: props.type,
qrcode: props.qrcode, qrcode: props.qrcode,
__: props.__, title: props.__('donate.' + props.type),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

10
layout/plugin/back-to-top.jsx
View File

@ -5,13 +5,13 @@ const { cacheComponent } = require('../util/cache');
class BackToTop extends Component { class BackToTop extends Component {
render() { render() {
const { head, __, url_for } = this.props; const { head, title, url_for } = this.props;
if (head) { if (head) {
return <link rel="stylesheet" href={url_for('/css/back-to-top.css')} />; return <link rel="stylesheet" href={url_for('/css/back-to-top.css')} />;
} }
return <Fragment> return <Fragment>
<a id="back-to-top" title={__('plugin.backtotop')} href="javascript:;"> <a id="back-to-top" title={title} href="javascript:;">
<i className="fas fa-chevron-up"></i> <i className="fas fa-chevron-up"></i>
</a> </a>
<script src={url_for('/js/back-to-top.js')} defer={true}></script> <script src={url_for('/js/back-to-top.js')} defer={true}></script>
@ -23,9 +23,7 @@ class BackToTop extends Component {
module.exports = cacheComponent(BackToTop, 'plugin.backtotop', props => { module.exports = cacheComponent(BackToTop, 'plugin.backtotop', props => {
return { return {
head: props.head, head: props.head,
__: props.__, title: props.__('plugin.backtotop'),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

21
layout/plugin/gallery.jsx
View File

@ -5,16 +5,16 @@ const { cacheComponent } = require('../util/cache');
class Gallery extends Component { class Gallery extends Component {
render() { render() {
const { head, cdn, url_for } = this.props; const { head, lightGallery, justifiedGallery, url_for } = this.props;
if (head) { if (head) {
return <Fragment> return <Fragment>
<link rel="stylesheet" href={cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')} /> <link rel="stylesheet" href={lightGallery.cssUrl} />
<link rel="stylesheet" href={cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')} /> <link rel="stylesheet" href={justifiedGallery.cssUrl} />
</Fragment>; </Fragment>;
} }
return <Fragment> return <Fragment>
<script src={cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js')} defer={true}></script> <script src={lightGallery.jsUrl} defer={true}></script>
<script src={cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js')} defer={true}></script> <script src={justifiedGallery.jsUrl} defer={true}></script>
<script src={url_for('/js/gallery.js')} defer={true}></script> <script src={url_for('/js/gallery.js')} defer={true}></script>
</Fragment>; </Fragment>;
@ -24,9 +24,14 @@ class Gallery extends Component {
module.exports = cacheComponent(Gallery, 'plugin.gallery', props => { module.exports = cacheComponent(Gallery, 'plugin.gallery', props => {
return { return {
head: props.head, head: props.head,
cdn: props.cdn,
url_for: props.url_for, url_for: props.url_for,
// for cache purpose only lightGallery: {
_providers: props.providers.cdn jsUrl: props.cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'),
cssUrl: props.cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')
},
justifiedGallery: {
jsUrl: props.cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js'),
cssUrl: props.cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')
}
}; };
}); });

8
layout/plugin/mathjax.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Mathjax extends Component { class Mathjax extends Component {
render() { render() {
const { cdn } = this.props; const { jsUrl } = this.props;
const js = `document.addEventListener('DOMContentLoaded', function () { const js = `document.addEventListener('DOMContentLoaded', function () {
MathJax.Hub.Config({ MathJax.Hub.Config({
@ -28,7 +28,7 @@ class Mathjax extends Component {
});`; });`;
return <Fragment> return <Fragment>
<script src={cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')} async={true}></script> <script src={jsUrl} async={true}></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script> <script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>; </Fragment>;
} }
@ -39,8 +39,6 @@ module.exports = cacheComponent(Mathjax, 'plugin.mathjax', props => {
return null; return null;
} }
return { return {
cdn: props.cdn, jsUrl: props.cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')
// for cache purpose only
_providers: props.providers.cdn
}; };
}); });

13
layout/plugin/outdated-browser.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class OutdatedBrowser extends Component { class OutdatedBrowser extends Component {
render() { render() {
const { head, cdn } = this.props; const { head, jsUrl, cssUrl } = this.props;
const js = `document.addEventListener("DOMContentLoaded", function () { const js = `document.addEventListener("DOMContentLoaded", function () {
outdatedBrowser({ outdatedBrowser({
@ -16,18 +16,18 @@ class OutdatedBrowser extends Component {
});`; });`;
if (head) { if (head) {
return <link rel="stylesheet" href={cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')} />; return <link rel="stylesheet" href={cssUrl} />;
} }
return <Fragment> return <Fragment>
<div id="outdated"> <div id="outdated">
<h6>Your browser is out-of-date!</h6> <h6>Your browser is out-of-date!</h6>
<p> <p>
Update your browser to view this website correctly.&npsb; Update your browser to view this website correctly.&npsb;
<a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a> <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a>
</p> </p>
<p className="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p> <p className="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div> </div>
<script src={cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')} async={true}></script> <script src={jsUrl} async={true}></script>
<script dangerouslySetInnerHTML={{ __html: js }}></script> <script dangerouslySetInnerHTML={{ __html: js }}></script>
</Fragment>; </Fragment>;
@ -37,8 +37,7 @@ class OutdatedBrowser extends Component {
module.exports = cacheComponent(OutdatedBrowser, 'plugin.outdatedbrowser', props => { module.exports = cacheComponent(OutdatedBrowser, 'plugin.outdatedbrowser', props => {
return { return {
head: props.head, head: props.head,
cdn: props.cdn, cssUrl: props.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css'),
// for cache purpose only jsUrl: props.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')
_providers: props.providers.cdn
}; };
}); });

8
layout/plugin/progressbar.jsx
View File

@ -5,11 +5,11 @@ const { cacheComponent } = require('../util/cache');
class ProgressBar extends Component { class ProgressBar extends Component {
render() { render() {
const { url_for, cdn } = this.props; const { url_for, jsUrl } = this.props;
return <Fragment> return <Fragment>
<link rel="stylesheet" href={url_for('/css/progressbar.css')} /> <link rel="stylesheet" href={url_for('/css/progressbar.css')} />
<script src={cdn('pace-js', '1.0.2', 'pace.min.js')}></script> <script src={jsUrl}></script>
</Fragment>; </Fragment>;
} }
} }
@ -20,8 +20,6 @@ module.exports = cacheComponent(ProgressBar, 'plugin.progressbar', props => {
} }
return { return {
url_for: props.url_for, url_for: props.url_for,
cdn: props.cdn, jsUrl: props.cdn('pace-js', '1.0.2', 'pace.min.js')
// for cache purpose only
_providers: props.providers.cdn
}; };
}); });

10
layout/search/baidu.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Baidu extends Component { class Baidu extends Component {
render() { render() {
const { url, __, url_for } = this.props; const { url, hint, url_for } = this.props;
const js = `(function ($) { const js = `(function ($) {
$('.search-form').on('submit', function (e) { $('.search-form').on('submit', function (e) {
@ -30,7 +30,7 @@ class Baidu extends Component {
<div className="searchbox-container"> <div className="searchbox-container">
<div className="searchbox-input-wrapper"> <div className="searchbox-input-wrapper">
<form className="search-form"> <form className="search-form">
<input name="wd" type="text" className="searchbox-input" placeholder={__('search.hint')} /> <input name="wd" type="text" className="searchbox-input" placeholder={hint} />
<span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span> <span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span>
</form> </form>
</div> </div>
@ -44,9 +44,7 @@ class Baidu extends Component {
module.exports = cacheComponent(Baidu, 'search.baidu', props => { module.exports = cacheComponent(Baidu, 'search.baidu', props => {
return { return {
url: props.config.url, url: props.config.url,
__: props.__, hint: props.__('search.hint'),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

10
layout/search/google-cse.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Google extends Component { class Google extends Component {
render() { render() {
const { cx, __, url_for } = this.props; const { cx, hint, url_for } = this.props;
const js1 = `(function() { const js1 = `(function() {
var cx = '${cx}'; var cx = '${cx}';
@ -57,7 +57,7 @@ class Google extends Component {
<div className="searchbox google-cse-search"> <div className="searchbox google-cse-search">
<div className="searchbox-container"> <div className="searchbox-container">
<div className="searchbox-input-wrapper"> <div className="searchbox-input-wrapper">
<input type="text" className="searchbox-input" placeholder={__('search.hint')} /> <input type="text" className="searchbox-input" placeholder={hint} />
<span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span> <span className="searchbox-close searchbox-selectable"><i className="fa fa-times-circle"></i></span>
</div> </div>
{(() => { {(() => {
@ -82,9 +82,7 @@ class Google extends Component {
module.exports = cacheComponent(Google, 'search.google', props => { module.exports = cacheComponent(Google, 'search.google', props => {
return { return {
cx: props.cx, cx: props.cx,
__: props.__, hint: props.__('search.hint'),
url_for: props.url_for, url_for: props.url_for
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
}; };
}); });

27
layout/search/insight.jsx
View File

@ -5,16 +5,16 @@ const { cacheComponent } = require('../util/cache');
class Insight extends Component { class Insight extends Component {
render() { render() {
const { __, url_for } = this.props; const { hint, translation, url_for } = this.props;
const js = `(function (window) { const js = `(function (window) {
var INSIGHT_CONFIG = { var INSIGHT_CONFIG = {
TRANSLATION: { TRANSLATION: {
POSTS: '${__('insight.posts')}', POSTS: '${translation.posts}',
PAGES: '${__('insight.pages')}', PAGES: '${translation.pages}',
CATEGORIES: '${__('insight.categories')}', CATEGORIES: '${translation.categories}',
TAGS: '${__('insight.tags')}', TAGS: '${translation.tags}',
UNTITLED: '${__('insight.untitled')}', UNTITLED: '${translation.untitled}',
}, },
CONTENT_URL: '${url_for('/content.json')}', CONTENT_URL: '${url_for('/content.json')}',
}; };
@ -27,7 +27,7 @@ class Insight extends Component {
<div className="searchbox ins-search"> <div className="searchbox ins-search">
<div className="searchbox-container ins-search-container"> <div className="searchbox-container ins-search-container">
<div className="searchbox-input-wrapper"> <div className="searchbox-input-wrapper">
<input type="text" className="searchbox-input ins-search-input" placeholder={__('insight.hint')} /> <input type="text" className="searchbox-input ins-search-input" placeholder={hint} />
<span className="searchbox-close ins-close ins-selectable"><i className="fa fa-times-circle"></i></span> <span className="searchbox-close ins-close ins-selectable"><i className="fa fa-times-circle"></i></span>
</div> </div>
<div className="searchbox-result-wrapper ins-section-wrapper"> <div className="searchbox-result-wrapper ins-section-wrapper">
@ -43,9 +43,14 @@ class Insight extends Component {
module.exports = cacheComponent(Insight, 'search.insight', props => { module.exports = cacheComponent(Insight, 'search.insight', props => {
return { return {
__: props.__, hint: props.__('search.hint'),
url_for: props.url_for, translation: {
// for cache purpose only posts: props.__('insight.posts'),
_language: props.page.lang || props.page.language || props.language pages: props.__('insight.pages'),
categories: props.__('insight.categories'),
tags: props.__('insight.tags'),
untitled: props.__('insight.untitled')
},
url_for: props.url_for
}; };
}); });

11
layout/share/sharejs.jsx
View File

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