Switch theme
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
{{- with .Site.Params.comments.cactus -}}
|
||||
{{- partial "helper/external" (dict "Context" $ "Namespace" "Cactus") -}}
|
||||
|
||||
<style>
|
||||
.cactus-editor-textarea {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
||||
.cactus-comment-header {
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
|
||||
.cactus-message-text > p {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="comment-section"></div>
|
||||
|
||||
<script>
|
||||
initComments({
|
||||
node: document.getElementById("comment-section"),
|
||||
defaultHomeserverUrl: "{{ .defaultHomeserverUrl | safeJS }}",
|
||||
serverName: "{{ .serverName }}",
|
||||
siteName: "{{ .siteName }}",
|
||||
commentSectionId: "{{ $.File.UniqueID }}"
|
||||
})
|
||||
</script>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,21 @@
|
||||
{{- $host := default "https://cusdis.com" .Site.Params.comments.cusdis.host -}}
|
||||
<div id="cusdis_thread"
|
||||
data-host="{{ $host }}"
|
||||
data-app-id="{{ .Site.Params.comments.cusdis.id }}"
|
||||
data-page-id="{{ .File.UniqueID }}"
|
||||
data-page-url="{{ .Permalink }}"
|
||||
data-page-title="{{ .Title }}"></div>
|
||||
<script async defer src="{{ $host }}/js/cusdis.es.js"></script>
|
||||
|
||||
<script>
|
||||
function setCusdisTheme(theme) {
|
||||
let cusdis = document.querySelector('#cusdis_thread iframe');
|
||||
if (cusdis) {
|
||||
window.CUSDIS.setTheme(theme)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
setCusdisTheme(e.detail)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="disqus-container">
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.disqus-container {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
if (typeof DISQUS == 'object') {
|
||||
DISQUS.reset({
|
||||
reload: true
|
||||
});
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
{{- $pc := .Site.Config.Privacy.Disqus -}}
|
||||
{{- $disqusjs := .Site.Params.Comments.disqusjs -}}
|
||||
{{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
|
||||
|
||||
{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | resources.ToCSS | minify -}}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||
|
||||
<div class="disqus-container">
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="application/javascript">
|
||||
let disqusjs;
|
||||
function loadDisqusJS() {
|
||||
disqusjs = new DisqusJS({
|
||||
shortname: {{ $disqusjs.Shortname }},
|
||||
siteName: {{ .Site.Title }},
|
||||
apikey: {{ $disqusjs.ApiKey }},
|
||||
{{ with $disqusjs.ApiUrl }}api: {{ . }},{{ end }}
|
||||
{{ with $disqusjs.Admin }}admin: {{ . }},{{ end }}
|
||||
{{ with $disqusjs.AdminLabel }}adminLabel: {{ . }}{{ end }}
|
||||
});
|
||||
}
|
||||
|
||||
function lazyLoadDisqusJS() {
|
||||
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
|
||||
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
|
||||
return;
|
||||
}
|
||||
|
||||
let d = document.createElement('script');
|
||||
d.src = 'https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js';
|
||||
d.async = false;
|
||||
document.body.appendChild(d);
|
||||
d.onload = () => {
|
||||
loadDisqusJS();
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
if (disqusjs) {
|
||||
loadDisqusJS();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let runningOnBrowser = typeof window !== "undefined";
|
||||
let isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
|
||||
let supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
|
||||
|
||||
if (!isBot && supportsIntersectionObserver) {
|
||||
let disqus_observer = new IntersectionObserver(function(entries) {
|
||||
if (entries[0].isIntersecting) {
|
||||
lazyLoadDisqusJS();
|
||||
disqus_observer.disconnect();
|
||||
}
|
||||
});
|
||||
disqus_observer.observe(document.getElementById('disqus_thread'));
|
||||
} else {
|
||||
lazyLoadDisqusJS();
|
||||
}
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
</div>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,51 @@
|
||||
{{- 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-strict="{{- default 0 .strict -}}"
|
||||
data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
|
||||
data-emit-metadata="{{- default 0 .emitMetadata -}}"
|
||||
data-input-position="{{- default `top` .inputPosition -}}"
|
||||
data-theme="{{- default `light` .lightTheme -}}"
|
||||
data-lang="{{- default `en` .lang -}}"
|
||||
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 -}}
|
||||
@@ -0,0 +1,30 @@
|
||||
{{- with .Site.Params.comments.gitalk -}}
|
||||
<div id="gitalk-container"></div>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.18.0/js/md5.min.js"></script>
|
||||
<script>
|
||||
const gitalk = new Gitalk({
|
||||
clientID: "{{- .clientID -}}",
|
||||
clientSecret: "{{- .clientSecret -}}",
|
||||
repo: "{{- .repo -}}",
|
||||
owner: "{{- .owner -}}",
|
||||
admin: ["{{- .admin -}}"],
|
||||
distractionFreeMode: false, // Facebook-like distraction free mode
|
||||
id: md5(location.pathname), // Max Location.pathname Legth:75 https://github.com/gitalk/gitalk/issues/102
|
||||
});
|
||||
(function () {
|
||||
if (
|
||||
["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1
|
||||
) {
|
||||
document.getElementById("gitalk-container").innerHTML =
|
||||
"Gitalk comments not available by default when the website is previewed locally.";
|
||||
return;
|
||||
}
|
||||
gitalk.render("gitalk-container");
|
||||
})();
|
||||
</script>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,29 @@
|
||||
{{- with .Site.Params.comments.remark42 -}}
|
||||
<div id="remark42"></div>
|
||||
<script>
|
||||
var remark_config = {
|
||||
host: '{{ .host }}',
|
||||
site_id: '{{ .site }}',
|
||||
components: ['embed'],
|
||||
url: '{{ $.Permalink }}',
|
||||
max_shown_comments: {{ default 15 .max_shown_comments }},
|
||||
theme: document.documentElement.dataset.scheme,
|
||||
page_title: '{{ $.Title }}',
|
||||
locale: '{{ default "en" .locale }}',
|
||||
show_email_subscription: {{ default true .show_email_subscription }}
|
||||
};
|
||||
|
||||
!function(e, n) {
|
||||
for (var o = 0; o < e.length; o++) {
|
||||
var r = n.createElement('script'),
|
||||
c = '.js',
|
||||
d = n.head || n.body;
|
||||
'noModule' in r ? (r.type = 'module', c = '.mjs') : r.async = !0, r.defer = !0, r.src = remark_config.host + '/web/' + e[o] + c, d.appendChild(r)
|
||||
}
|
||||
}(remark_config.components || ['embed'], document);
|
||||
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
window.REMARK42.changeTheme(e.detail);
|
||||
})
|
||||
</script>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,58 @@
|
||||
<script src="//cdn.jsdelivr.net/npm/twikoo@1.6.21/dist/twikoo.all.min.js"></script>
|
||||
<div id="tcomment"></div>
|
||||
<style>
|
||||
.twikoo {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
:root[data-scheme="dark"] {
|
||||
--twikoo-body-text-color-main: rgba(255, 255, 255, 0.9);
|
||||
--twikoo-body-text-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.twikoo .el-input-group__prepend,
|
||||
.twikoo .tk-action-icon,
|
||||
.twikoo .tk-submit-action-icon,
|
||||
.twikoo .tk-time,
|
||||
.twikoo .tk-comments-no,
|
||||
.twikoo .tk-comments-count {
|
||||
color: var(--twikoo-body-text-color);
|
||||
}
|
||||
.twikoo .el-input__inner,
|
||||
.twikoo .el-textarea__inner,
|
||||
.twikoo .tk-preview-container,
|
||||
.twikoo .tk-content,
|
||||
.twikoo .tk-nick,
|
||||
.twikoo .tk-send {
|
||||
color: var(--twikoo-body-text-color-main);
|
||||
}
|
||||
.twikoo .el-button{
|
||||
color: var(--twikoo-body-text-color)!important;
|
||||
}
|
||||
.twikoo .el-input__count {
|
||||
color: var(--twikoo-body-text-color) !important;
|
||||
}
|
||||
.OwO .OwO-body {
|
||||
background-color: var(--body-background) !important;
|
||||
color: var(--body-text-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{- with .Site.Params.comments.twikoo -}}
|
||||
<script>
|
||||
twikoo.init({
|
||||
envId: '{{- .envId -}}',
|
||||
el: '#tcomment',
|
||||
{{- with .region -}}
|
||||
region: '{{- . -}}',
|
||||
{{- end -}}
|
||||
{{- with .path -}}
|
||||
path: '{{- . -}}',
|
||||
{{- end -}}
|
||||
{{- with .lang -}}
|
||||
lang: '{{- . -}}',
|
||||
{{- end -}}
|
||||
})
|
||||
</script>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,46 @@
|
||||
<script src="https://utteranc.es/client.js"
|
||||
repo="{{ .Site.Params.comments.utterances.repo }}"
|
||||
issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
|
||||
{{ with .Site.Params.comments.utterances.label }}
|
||||
label="{{ . }}"
|
||||
{{ end }}
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.utterances {
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let utterancesLoaded = false;
|
||||
|
||||
function setUtterancesTheme(theme) {
|
||||
let utterances = document.querySelector('.utterances iframe');
|
||||
if (utterances) {
|
||||
utterances.contentWindow.postMessage(
|
||||
{
|
||||
type: 'set-theme',
|
||||
theme: `github-${theme}`
|
||||
},
|
||||
'https://utteranc.es'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('message', event => {
|
||||
if (event.origin !== 'https://utteranc.es') return;
|
||||
|
||||
/// Called when Utterances is ready
|
||||
utterancesLoaded = true;
|
||||
setUtterancesTheme(document.documentElement.dataset.scheme)
|
||||
});
|
||||
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
if (!utterancesLoaded) return;
|
||||
setUtterancesTheme(e.detail)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
{{- with .Site.Params.comments.vssue -}}
|
||||
<link rel="stylesheet" href="https://unpkg.com/vssue/dist/vssue.min.css" />
|
||||
|
||||
<div id="vssue"></div>
|
||||
|
||||
<script src="https://unpkg.com/vue@2/dist/vue.runtime.min.js"></script>
|
||||
<script src="https://unpkg.com/vssue/dist/vssue.{{ .platform }}.min.js"></script>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#vssue",
|
||||
render: (h) =>
|
||||
h("Vssue", {
|
||||
props: {
|
||||
title: "{{ $.Title }}",
|
||||
options: {
|
||||
autoCreateIssue: {{ default false .autoCreateIssue }},
|
||||
owner: "{{ .owner }}",
|
||||
repo: "{{ .repo }}",
|
||||
clientId: "{{ .clientId }}",
|
||||
clientSecret: "{{ .clientSecret }}",
|
||||
},
|
||||
},
|
||||
}),
|
||||
});
|
||||
</script>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,34 @@
|
||||
<script src='//unpkg.com/@waline/client@v2/dist/waline.js'></script>
|
||||
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet'/>
|
||||
<div id="waline" class="waline-container"></div>
|
||||
<style>
|
||||
.waline-container {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
padding: var(--card-padding);
|
||||
--waline-font-size: var(--article-font-size);
|
||||
}
|
||||
.waline-container .wl-count {
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
</style>
|
||||
|
||||
{{- with .Site.Params.comments.waline -}}
|
||||
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
|
||||
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" -}}
|
||||
|
||||
{{- range $key, $val := . -}}
|
||||
{{- if ne $val nil -}}
|
||||
{{- $replaceKey := index $replaceKeys $key -}}
|
||||
{{- $k := default $key $replaceKey -}}
|
||||
|
||||
{{- $config = merge $config (dict $k $val) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<script>
|
||||
/// Waline client configuration see: https://waline.js.org/en/reference/client.html
|
||||
Waline.init({{ $config | jsonify | safeJS }});
|
||||
</script>
|
||||
{{- end -}}
|
||||
Reference in New Issue
Block a user