diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index ac67c62..425a142 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -93,6 +93,17 @@ params: path: lang: + giscus: + repo: + repoID: + category: + categoryID: + mapping: + lightTheme: + darkTheme: + reactionsEnabled: 1 + emitMetadata: 0 + widgets: enabled: - search @@ -143,8 +154,8 @@ menu: weight: -100 pre: home params: - ### For demonstration purpose, the home link will be open in a new tab - newTab: true + ### For demonstration purpose, the home link will be open in a new tab + newTab: true related: includeNewer: true diff --git a/layouts/partials/comments/provider/giscus.html b/layouts/partials/comments/provider/giscus.html new file mode 100644 index 0000000..f36ead9 --- /dev/null +++ b/layouts/partials/comments/provider/giscus.html @@ -0,0 +1,49 @@ +{{- with .Site.Params.comments.giscus -}} +<script + src="https://giscus.app/client.js" + data-repo="{{- .repo -}}" + data-repo-id="{{- .repoID -}}" + data-category="{{- .category -}}" + data-category-id="{{- .categoryID -}}" + data-mapping="{{- default `title` .mapping -}}" + data-reactions-enabled="{{- default 1 .reactionsEnabled -}}" + data-emit-metadata="{{- default 0 .emitMetadata -}}" + data-theme="{{- default `light` .lightTheme -}}" + crossorigin="anonymous" + async +></script> +<script> + function setGiscusTheme(theme) { + let giscus = document.querySelector('iframe.giscus-frame'); + if (giscus) { + giscus.contentWindow.postMessage( + { + giscus: { + setConfig: { + theme: theme + } + } + }, + "https://giscus.app" + ); + }; + }; + + (function(){ + addEventListener('message', (e) => { + if (event.origin !== 'https://giscus.app') return; + handler() + }); + window.addEventListener('onColorSchemeChange', handler); + + function handler() { + if (document.documentElement.dataset.scheme === "light") { + setGiscusTheme('{{- default "light" .lightTheme -}}'); + } else { + setGiscusTheme('{{- default "dark_dimmed" .darkTheme -}}'); + }; + }; + }()); +</script> +{{- end -}} +