64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { h, render } from 'preact';
|
|
import { IntlProvider } from 'react-intl';
|
|
|
|
import { getLastComments } from 'common/api.getLastComments';
|
|
import { BASE_URL } from 'common/constants.config';
|
|
import { loadLocale } from 'utils/loadLocale';
|
|
import { getLocale } from 'utils/getLocale';
|
|
import { ListComments } from 'components/list-comments';
|
|
|
|
const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
|
|
const DEFAULT_LAST_COMMENTS_MAX = 15;
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
|
|
async function init(): Promise<void> {
|
|
__webpack_public_path__ = `${BASE_URL}/web/`;
|
|
|
|
const nodes = document.getElementsByClassName(LAST_COMMENTS_NODE_CLASSNAME);
|
|
|
|
if (!nodes) {
|
|
throw new Error("Remark42: Can't find last comments nodes.");
|
|
}
|
|
|
|
if (!window.remark_config) {
|
|
throw new Error('Remark42: Config object is undefined');
|
|
}
|
|
|
|
const { site_id, max_last_comments } = window.remark_config;
|
|
|
|
if (!site_id) {
|
|
throw new Error('Remark42: Site ID is undefined.');
|
|
}
|
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
const styles = document.createElement('link');
|
|
styles.href = `${BASE_URL}/web/last-comments.css`;
|
|
styles.rel = 'stylesheet';
|
|
(document.head || document.body).appendChild(styles);
|
|
}
|
|
|
|
(Array.from(nodes) as HTMLElement[]).forEach((node) => {
|
|
const max = (node.dataset.max && parseInt(node.dataset.max, 10)) || max_last_comments || DEFAULT_LAST_COMMENTS_MAX;
|
|
const locale = getLocale(window.remark_config);
|
|
|
|
Promise.all([getLastComments(site_id, max), loadLocale(locale)]).then(([comments, messages]) => {
|
|
try {
|
|
render(
|
|
<IntlProvider locale={locale} messages={messages}>
|
|
<ListComments comments={comments} />
|
|
</IntlProvider>,
|
|
node
|
|
);
|
|
} catch (e) {
|
|
console.error('Remark42: Something went wrong with last comments rendering');
|
|
console.error(e);
|
|
}
|
|
});
|
|
});
|
|
}
|