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

13
layout/donate/alipay.jsx
View File

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

11
layout/donate/patreon.jsx
View File

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

11
layout/donate/paypal.jsx
View File

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class Paypal extends Component {
render() {
const { type, business, currencyCode, __ } = this.props;
const { title, business, currencyCode } = this.props;
if (!business || !currencyCode) {
return <div className="notification is-danger">
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">
<i className="fab fa-paypal"></i>
</span>
<span>{__('donate.' + type)}</span>
<span>{title}</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" />
@ -30,12 +30,9 @@ class Paypal extends Component {
module.exports = cacheComponent(Paypal, 'donate.paypal', props => {
return {
type: props.type,
business: props.business,
currencyCode: props.currency_code,
__: props.__,
url_for: props.url_for,
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
title: props.__('donate.' + props.type),
url_for: props.url_for
};
});

13
layout/donate/wechat.jsx
View File

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

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

@ -5,13 +5,13 @@ const { cacheComponent } = require('../util/cache');
class BackToTop extends Component {
render() {
const { head, __, url_for } = this.props;
const { head, title, url_for } = this.props;
if (head) {
return <link rel="stylesheet" href={url_for('/css/back-to-top.css')} />;
}
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>
</a>
<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 => {
return {
head: props.head,
__: props.__,
url_for: props.url_for,
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
title: props.__('plugin.backtotop'),
url_for: props.url_for
};
});

21
layout/plugin/gallery.jsx
View File

@ -5,16 +5,16 @@ const { cacheComponent } = require('../util/cache');
class Gallery extends Component {
render() {
const { head, cdn, url_for } = this.props;
const { head, lightGallery, justifiedGallery, url_for } = this.props;
if (head) {
return <Fragment>
<link rel="stylesheet" href={cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')} />
<link rel="stylesheet" href={cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')} />
<link rel="stylesheet" href={lightGallery.cssUrl} />
<link rel="stylesheet" href={justifiedGallery.cssUrl} />
</Fragment>;
}
return <Fragment>
<script src={cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js')} defer={true}></script>
<script src={cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js')} defer={true}></script>
<script src={lightGallery.jsUrl} defer={true}></script>
<script src={justifiedGallery.jsUrl} defer={true}></script>
<script src={url_for('/js/gallery.js')} defer={true}></script>
</Fragment>;
@ -24,9 +24,14 @@ class Gallery extends Component {
module.exports = cacheComponent(Gallery, 'plugin.gallery', props => {
return {
head: props.head,
cdn: props.cdn,
url_for: props.url_for,
// for cache purpose only
_providers: props.providers.cdn
lightGallery: {
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 {
render() {
const { cdn } = this.props;
const { jsUrl } = this.props;
const js = `document.addEventListener('DOMContentLoaded', function () {
MathJax.Hub.Config({
@ -28,7 +28,7 @@ class Mathjax extends Component {
});`;
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>
</Fragment>;
}
@ -39,8 +39,6 @@ module.exports = cacheComponent(Mathjax, 'plugin.mathjax', props => {
return null;
}
return {
cdn: props.cdn,
// for cache purpose only
_providers: props.providers.cdn
jsUrl: props.cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')
};
});

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

@ -5,7 +5,7 @@ const { cacheComponent } = require('../util/cache');
class OutdatedBrowser extends Component {
render() {
const { head, cdn } = this.props;
const { head, jsUrl, cssUrl } = this.props;
const js = `document.addEventListener("DOMContentLoaded", function () {
outdatedBrowser({
@ -16,18 +16,18 @@ class OutdatedBrowser extends Component {
});`;
if (head) {
return <link rel="stylesheet" href={cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')} />;
return <link rel="stylesheet" href={cssUrl} />;
}
return <Fragment>
<div id="outdated">
<h6>Your browser is out-of-date!</h6>
<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>
</p>
<p className="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</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>
</Fragment>;
@ -37,8 +37,7 @@ class OutdatedBrowser extends Component {
module.exports = cacheComponent(OutdatedBrowser, 'plugin.outdatedbrowser', props => {
return {
head: props.head,
cdn: props.cdn,
// for cache purpose only
_providers: props.providers.cdn
cssUrl: props.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css'),
jsUrl: props.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')
};
});

8
layout/plugin/progressbar.jsx
View File

@ -5,11 +5,11 @@ const { cacheComponent } = require('../util/cache');
class ProgressBar extends Component {
render() {
const { url_for, cdn } = this.props;
const { url_for, jsUrl } = this.props;
return <Fragment>
<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>;
}
}
@ -20,8 +20,6 @@ module.exports = cacheComponent(ProgressBar, 'plugin.progressbar', props => {
}
return {
url_for: props.url_for,
cdn: props.cdn,
// for cache purpose only
_providers: props.providers.cdn
jsUrl: props.cdn('pace-js', '1.0.2', 'pace.min.js')
};
});

10
layout/search/baidu.jsx
View File

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

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

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

27
layout/search/insight.jsx
View File

@ -5,16 +5,16 @@ const { cacheComponent } = require('../util/cache');
class Insight extends Component {
render() {
const { __, url_for } = this.props;
const { hint, translation, 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')}',
POSTS: '${translation.posts}',
PAGES: '${translation.pages}',
CATEGORIES: '${translation.categories}',
TAGS: '${translation.tags}',
UNTITLED: '${translation.untitled}',
},
CONTENT_URL: '${url_for('/content.json')}',
};
@ -27,7 +27,7 @@ class Insight extends Component {
<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')} />
<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>
</div>
<div className="searchbox-result-wrapper ins-section-wrapper">
@ -43,9 +43,14 @@ class Insight extends Component {
module.exports = cacheComponent(Insight, 'search.insight', props => {
return {
__: props.__,
url_for: props.url_for,
// for cache purpose only
_language: props.page.lang || props.page.language || props.language
hint: props.__('search.hint'),
translation: {
posts: props.__('insight.posts'),
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 {
render() {
const { cdn } = this.props;
const { cssUrl, jsUrl } = this.props;
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>
<script src={cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')}></script>
<script src={jsUrl}></script>
</Fragment>;
}
}
module.exports = cacheComponent(ShareJs, 'share.sharejs', props => {
return {
cdn: props.cdn,
// for cache purpose only
_providers: props.providers.cdn
cssUrl: props.cdn('social-share.js', '1.0.16', 'dist/css/share.min.css'),
jsUrl: props.cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')
};
});