web/_includes/comments/giscus.html

56 lines
2 KiB
HTML

<!-- 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;
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& 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 }}",
"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>