web/_includes/comments/giscus.html

66 lines
2.1 KiB
HTML
Raw Normal View History

<!-- https://giscus.app/ -->
<script type="text/javascript">
(function () {
const origin = 'https://giscus.app';
const iframe = 'iframe.giscus-frame';
const lightTheme = 'light';
const darkTheme = 'dark_dimmed';
let initTheme = lightTheme;
const html = document.documentElement;
if (
(html.hasAttribute('data-mode') &&
html.getAttribute('data-mode') === 'dark') ||
(!html.hasAttribute('data-mode') &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
initTheme = darkTheme;
}
let giscusAttributes = {
src: 'https://giscus.app/client.js',
'data-repo': '{{ site.comments.giscus.repo}}',
'data-repo-id': '{{ site.comments.giscus.repo_id }}',
'data-category': '{{ site.comments.giscus.category }}',
'data-category-id': '{{ site.comments.giscus.category_id }}',
'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
'data-emit-metadata': '0',
'data-theme': initTheme,
'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
'data-loading': 'lazy',
crossorigin: 'anonymous',
async: ''
};
let giscusScript = document.createElement('script');
Object.entries(giscusAttributes).forEach(([key, value]) =>
giscusScript.setAttribute(key, value)
);
document.getElementById('tail-wrapper').appendChild(giscusScript);
addEventListener('message', (event) => {
if (
event.source === window &&
event.data &&
event.data.direction === ModeToggle.ID
) {
/* global theme mode changed */
const mode = event.data.message;
const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
const message = {
setConfig: {
theme: theme
}
};
const giscus = document.querySelector(iframe).contentWindow;
giscus.postMessage({ giscus: message }, origin);
}
});
})();
</script>