web/_includes/comments/utterances.html
Cotes Chung 0f6b170e24 Use constants to define resources for utterances
Self-host the JS for `utterances` is not necessary, because the list of comments cannot be loaded if the network is offline.
2022-02-12 05:47:48 +08:00

51 lines
1.4 KiB
HTML

<!-- https://utteranc.es/ -->
<script src="https://utteranc.es/client.js"
repo="{{ site.comments.utterances.repo }}"
issue-term="{{ site.comments.utterances.issue_term }}"
crossorigin="anonymous"
async>
</script>
<script type="text/javascript">
$(function() {
const origin = "https://utteranc.es";
const iframe = "iframe.utterances-frame";
const lightTheme = "github-light";
const darkTheme = "github-dark";
let initTheme = lightTheme;
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
initTheme = darkTheme;
}
addEventListener("message", (event) => {
let theme;
/* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
if (event.origin === origin) {
/* page initial */
theme = initTheme;
} else if (event.source === window && event.data &&
event.data.direction === ModeToggle.ID) {
/* global theme mode changed */
const mode = event.data.message;
theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
} else {
return;
}
const message = {
type: "set-theme",
theme: theme
};
const utterances = document.querySelector(iframe).contentWindow;
utterances.postMessage(message, origin);
});
});
</script>