158 lines
5.0 KiB
JavaScript
158 lines
5.0 KiB
JavaScript
/**
|
|
* Waline comment JSX component.
|
|
* @module view/comment/waline
|
|
*/
|
|
const { Component } = require('inferno');
|
|
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
|
|
|
|
/**
|
|
* Waline comment JSX component.
|
|
*
|
|
* @see https://waline.js.org/guide/get-started.html
|
|
* @example
|
|
* <Waline
|
|
* serverURL="https://path/to/waline/server"
|
|
* path="window.location.pathname"
|
|
* lang="zh-CN"
|
|
* locale={{placeholder: "", ...}}
|
|
* emoji={["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]}
|
|
* dark="auto"
|
|
* meta={["nick", "mail", "link"]}
|
|
* requiredMeta={[]}
|
|
* login="enable"
|
|
* wordLimit={0},
|
|
* pageSize={10}
|
|
* imageUploader={true}
|
|
* highlighter={true}
|
|
* texRenderer={false}
|
|
* search={true}
|
|
* visitor={false}
|
|
* pageview={false}
|
|
* comment={false}
|
|
* copyright={true}
|
|
* jsUrl="/path/to/Waline.js" />
|
|
*/
|
|
class Waline extends Component {
|
|
render() {
|
|
const {
|
|
serverURL,
|
|
path = 'window.location.pathname',
|
|
lang = 'zh-CN',
|
|
locale,
|
|
emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo'],
|
|
dark = '',
|
|
meta = ['nick', 'mail', 'link'],
|
|
requiredMeta = [],
|
|
login = 'enable',
|
|
wordLimit = 0,
|
|
pageSize = 10,
|
|
imageUploader = false,
|
|
highlighter = false,
|
|
texRenderer = false,
|
|
search = false,
|
|
pageview = false,
|
|
comment = false,
|
|
copyright = true,
|
|
jsUrl,
|
|
cssUrl,
|
|
} = this.props;
|
|
if (!serverURL) {
|
|
return (
|
|
<div class="notification is-danger">
|
|
You forgot to set the <code>server_url</code> for Waline. Please set it in{' '}
|
|
<code>_config.yml</code>.
|
|
</div>
|
|
);
|
|
}
|
|
const js = `Waline.init({
|
|
el: '#waline-thread',
|
|
serverURL: ${JSON.stringify(serverURL)},
|
|
path: ${path},
|
|
${lang ? `lang: ${JSON.stringify(lang)},` : ''}
|
|
${locale ? `locale: ${JSON.stringify(locale)},` : ''}
|
|
${emoji ? `emoji: ${JSON.stringify(emoji)},` : ''}
|
|
${dark ? `dark: ${JSON.stringify(dark)},` : ''}
|
|
${meta ? `meta: ${JSON.stringify(meta)},` : ''}
|
|
${Array.isArray(requiredMeta) ? `requiredMeta: ${JSON.stringify(requiredMeta)},` : ''}
|
|
${login ? `login: ${JSON.stringify(login)},` : ''}
|
|
${wordLimit ? `wordLimit: ${JSON.stringify(wordLimit)},` : ''}
|
|
${pageSize ? `pageSize: ${JSON.stringify(pageSize)},` : ''}
|
|
${imageUploader === false ? `imageUploader: false,` : ''}
|
|
${highlighter === false ? `highlighter: false,` : ''}
|
|
${texRenderer === false ? `texRenderer: false,` : ''}
|
|
${search === false ? `search: false,` : ''}
|
|
${typeof pageview !== 'undefined' ? `pageview: ${JSON.stringify(pageview)},` : ''}
|
|
${typeof comment !== 'undefined' ? `comment: ${JSON.stringify(comment)},` : ''}
|
|
${`copyright: ${JSON.stringify(copyright)},`}
|
|
});`;
|
|
return (
|
|
<>
|
|
<div id="waline-thread" class="content"></div>
|
|
<link rel="stylesheet" href={cssUrl} />
|
|
<script src={jsUrl}></script>
|
|
<script dangerouslySetInnerHTML={{ __html: js }}></script>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Cacheable Waline comment JSX component.
|
|
* <p>
|
|
* This class is supposed to be used in combination with the <code>locals</code> hexo filter
|
|
* ({@link module:hexo/filter/locals}).
|
|
*
|
|
* @see module:util/cache.cacheComponent
|
|
* @example
|
|
* <Waline.Cacheable
|
|
* comment={{
|
|
* server_url: "https://path/to/waline/server",
|
|
* path: "window.location.pathname",
|
|
* lang: "zh-CN",
|
|
* locale: {placeholder: "", ...},
|
|
* emoji: "https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo",
|
|
* dark: "",
|
|
* meta: ["nick", "mail", "link"],
|
|
* required_meta: [],
|
|
* login: false,
|
|
* word_limit: 0,
|
|
* page_size: 10,
|
|
* image_uploader: true,
|
|
* highlighter: true,
|
|
* tex_renderer: false,
|
|
* search: true,
|
|
* pageview: false,
|
|
* comment: false,
|
|
* copyright: true,
|
|
* }}
|
|
* helper={{ cdn: function() {...} }} />
|
|
*/
|
|
Waline.Cacheable = cacheComponent(Waline, 'comment.waline', (props) => {
|
|
const { comment, helper, page, config } = props;
|
|
|
|
return {
|
|
serverURL: comment.server_url,
|
|
path: comment.path,
|
|
lang: comment.lang || page.lang || page.language || config.language || 'zh-CN',
|
|
locale: comment.locale,
|
|
emoji: comment.emoji,
|
|
dark: comment.dark,
|
|
meta: comment.meta,
|
|
requiredMeta: comment.required_meta,
|
|
login: comment.login,
|
|
wordLimit: comment.word_limit,
|
|
pageSize: comment.page_size,
|
|
imageUploader: comment.image_uploader,
|
|
highlighter: comment.highlighter,
|
|
texRenderer: comment.tex_renderer,
|
|
search: comment.search,
|
|
pageview: comment.pageview,
|
|
comment: comment.comment,
|
|
copyright: comment.copyright,
|
|
jsUrl: helper.cdn('@waline/client', '2.15.8', 'dist/waline.js'),
|
|
cssUrl: helper.cdn('@waline/client', '2.15.8', 'dist/waline.css'),
|
|
};
|
|
});
|
|
|
|
module.exports = Waline;
|