Skip to content

Commit

Permalink
refactor: separate comment systems (#417)
Browse files Browse the repository at this point in the history
* refactor: seperate waline

* refactor: separate valine

* refactor: separate giscus

* refactor: separate remark42

* refactor: separate utterances

* refactor: separate vssue

* refactor: separate gitalk
  • Loading branch information
HEIGE-PCloud authored Dec 22, 2021
1 parent 80816ae commit e14380b
Show file tree
Hide file tree
Showing 17 changed files with 968 additions and 121 deletions.
2 changes: 1 addition & 1 deletion assets/js/lib/cookieconsent.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cookieconsent from 'cookieconsent'

if (window.config.cookieconsent) {
if (window.config?.cookieconsent) {
const container = document.getElementById('cookieconsent-container')
// if there is nothing in the container, then init the cookieconsent
if (container.innerHTML === '') {
Expand Down
29 changes: 29 additions & 0 deletions assets/js/lib/giscus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
if (window.config?.comment?.giscus) {
const giscusConfig = window.config.comment.giscus
const script = document.createElement('script')
script.src = 'https://giscus.app/client.js'
script.type = 'text/javascript'
script.setAttribute('data-repo', giscusConfig.dataRepo)
script.setAttribute('data-repo-id', giscusConfig.dataRepoId)
if (giscusConfig.dataCategory) script.setAttribute('data-category', giscusConfig.dataCategory)
script.setAttribute('data-category-id', giscusConfig.dataCategoryId)
script.setAttribute('data-mapping', giscusConfig.dataMapping)
script.setAttribute('data-reactions-enabled', giscusConfig.dataReactionsEnabled)
script.setAttribute('data-emit-metadata', giscusConfig.dataEmitMetadata)
script.setAttribute('data-theme', window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme)
script.crossOrigin = 'anonymous'
script.async = true
document.getElementById('giscus').appendChild(script)
window._giscusOnSwitchTheme = () => {
const message = {
giscus: {
setConfig: {
theme: window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
}
}
}
const iframe = document.querySelector('.giscus-frame')
iframe.contentWindow.postMessage(message, 'https://giscus.app')
}
window.switchThemeEventSet.add(window._giscusOnSwitchTheme)
}
6 changes: 6 additions & 0 deletions assets/js/lib/gitalk.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* eslint-disable no-undef */
if (window.config?.comment?.gitalk) {
window.config.comment.gitalk.body = decodeURI(window.location.href)
const gitalk = new Gitalk(window.config.comment.gitalk)
gitalk.render('gitalk')
}
2 changes: 1 addition & 1 deletion assets/js/lib/katex.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import renderMathInElement from 'katex/dist/contrib/auto-render'

if (window.config.math) renderMathInElement(document.body, window.config.math)
if (window.config?.math) renderMathInElement(document.body, window.config.math)
26 changes: 26 additions & 0 deletions assets/js/lib/remark42.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
if (window.config?.comment?.remark42) {
const remark42 = window.config.comment.remark42
// eslint-disable-next-line camelcase
const remark_config = {
host: remark42.host,
site_id: remark42.site_id,
components: ['embed'],
max_shown_comments: remark42.max_shown_comments,
theme: window.isDark ? 'dark' : 'light',
locale: remark42.locale,
show_email_subscription: remark42.show_email_subscription,
simple_view: remark42.simple_view
}
// eslint-disable-next-line camelcase
window.remark_config = remark_config
// eslint-disable-next-line no-sequences, no-unused-expressions
!(function (e, n) { for (let o = 0; o < e.length; o++) { const r = n.createElement('script'); let c = '.js'; const 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._remark42OnSwitchTheme = () => {
if (window.isDark) {
window.REMARK42.changeTheme('dark')
} else {
window.REMARK42.changeTheme('light')
}
}
window.switchThemeEventSet.add(window._remark42OnSwitchTheme)
}
2 changes: 1 addition & 1 deletion assets/js/lib/twemoji.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import twemoji from 'twemoji'

if (window.config.twemoji) twemoji.parse(document.body)
if (window.config?.twemoji) twemoji.parse(document.body)
2 changes: 1 addition & 1 deletion assets/js/lib/twikoo.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const twikoo = require('twikoo')

if (window.config.comment) {
if (window.config?.comment) {
const config = window.config.comment.twikoo
if (config) {
twikoo.init(config)
Expand Down
22 changes: 22 additions & 0 deletions assets/js/lib/utterances.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
if (window.config?.comment?.utterances) {
const utterancesConfig = window.config.comment.utterances
const script = document.createElement('script')
script.src = 'https://utteranc.es/client.js'
script.type = 'text/javascript'
script.setAttribute('repo', utterancesConfig.repo)
script.setAttribute('issue-term', utterancesConfig.issueTerm)
if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label)
script.setAttribute('theme', window.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme)
script.crossOrigin = 'anonymous'
script.async = true
document.getElementById('utterances').appendChild(script)
window._utterancesOnSwitchTheme = () => {
const message = {
type: 'set-theme',
theme: window.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
}
const iframe = document.querySelector('.utterances-frame')
iframe.contentWindow.postMessage(message, 'https://utteranc.es')
}
window.switchThemeEventSet.add(window._utterancesOnSwitchTheme)
}
6 changes: 6 additions & 0 deletions assets/js/lib/valine.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* eslint-disable no-new */
import Valine from 'valine'

if (window.config?.comment?.valine) {
new Valine(window.config.comment.valine)
}
19 changes: 19 additions & 0 deletions assets/js/lib/vssue.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable no-undef */
/* eslint-disable no-new */
if (window.config?.comment?.vssue) {
const vssue = window.config.comment.vssue
new Vue({
el: vssue.el,
render: h => h('Vssue', {
props: {
title: vssue.title,
options: {
owner: vssue.owner,
repo: vssue.repo,
clientId: vssue.clientId,
clientSecret: vssue.clientSecret
}
}
})
})
}
6 changes: 6 additions & 0 deletions assets/js/lib/waline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* eslint-disable no-new */
import Waline from '@waline/client'

if (window.config?.comment?.waline) {
new Waline(window.config.comment.waline)
}
1 change: 1 addition & 0 deletions assets/js/shims/valine.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = window.Valine
1 change: 1 addition & 0 deletions assets/js/shims/waline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = window.Waline
107 changes: 0 additions & 107 deletions assets/js/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -742,112 +742,6 @@ function initTypeit () {
}
}

function initComment () {
if (window.config.comment) {
if (window.config.comment.gitalk) {
window.config.comment.gitalk.body = decodeURI(window.location.href)
const gitalk = new Gitalk(window.config.comment.gitalk)
gitalk.render('gitalk')
}
if (window.config.comment.valine) new Valine(window.config.comment.valine)
if (window.config.comment.waline) new Waline(window.config.comment.waline)
if (window.config.comment.utterances) {
const utterancesConfig = window.config.comment.utterances
const script = document.createElement('script')
script.src = 'https://utteranc.es/client.js'
script.type = 'text/javascript'
script.setAttribute('repo', utterancesConfig.repo)
script.setAttribute('issue-term', utterancesConfig.issueTerm)
if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label)
script.setAttribute('theme', window.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme)
script.crossOrigin = 'anonymous'
script.async = true
document.getElementById('utterances').appendChild(script)
window._utterancesOnSwitchTheme = () => {
const message = {
type: 'set-theme',
theme: window.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
}
const iframe = document.querySelector('.utterances-frame')
iframe.contentWindow.postMessage(message, 'https://utteranc.es')
}
window.switchThemeEventSet.add(window._utterancesOnSwitchTheme)
}
if (window.config.comment.vssue) {
const vssue = window.config.comment.vssue
new Vue({
el: vssue.el,
render: h => h('Vssue', {
props: {
title: vssue.title,
options: {
owner: vssue.owner,
repo: vssue.repo,
clientId: vssue.clientId,
clientSecret: vssue.clientSecret
}
}
})
})
}
if (window.config.comment.remark42) {
const remark42 = window.config.comment.remark42
// eslint-disable-next-line camelcase
const remark_config = {
host: remark42.host,
site_id: remark42.site_id,
components: ['embed'],
max_shown_comments: remark42.max_shown_comments,
theme: window.isDark ? 'dark' : 'light',
locale: remark42.locale,
show_email_subscription: remark42.show_email_subscription,
simple_view: remark42.simple_view
}
// eslint-disable-next-line camelcase
window.remark_config = remark_config
// eslint-disable-next-line no-sequences, no-unused-expressions
!(function (e, n) { for (let o = 0; o < e.length; o++) { const r = n.createElement('script'); let c = '.js'; const 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._remark42OnSwitchTheme = () => {
if (window.isDark) {
window.REMARK42.changeTheme('dark')
} else {
window.REMARK42.changeTheme('light')
}
}
window.switchThemeEventSet.add(window._remark42OnSwitchTheme)
}
if (window.config.comment.giscus) {
const giscusConfig = window.config.comment.giscus
const script = document.createElement('script')
script.src = 'https://giscus.app/client.js'
script.type = 'text/javascript'
script.setAttribute('data-repo', giscusConfig.dataRepo)
script.setAttribute('data-repo-id', giscusConfig.dataRepoId)
if (giscusConfig.dataCategory) script.setAttribute('data-category', giscusConfig.dataCategory)
script.setAttribute('data-category-id', giscusConfig.dataCategoryId)
script.setAttribute('data-mapping', giscusConfig.dataMapping)
script.setAttribute('data-reactions-enabled', giscusConfig.dataReactionsEnabled)
script.setAttribute('data-emit-metadata', giscusConfig.dataEmitMetadata)
script.setAttribute('data-theme', window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme)
script.crossOrigin = 'anonymous'
script.async = true
document.getElementById('giscus').appendChild(script)
window._giscusOnSwitchTheme = () => {
const message = {
giscus: {
setConfig: {
theme: window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
}
}
}
const iframe = document.querySelector('.giscus-frame')
iframe.contentWindow.postMessage(message, 'https://giscus.app')
}
window.switchThemeEventSet.add(window._giscusOnSwitchTheme)
}
}
}

function initMeta () {
function getMeta (metaName) {
const metas = document.getElementsByTagName('meta')
Expand Down Expand Up @@ -965,7 +859,6 @@ function init () {
initTypeit()
initMapbox()
initToc()
initComment()
onScroll()
onResize()
onClickMask()
Expand Down
42 changes: 39 additions & 3 deletions layouts/partials/comment.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@
{{- with $gitalk.proxy -}}
{{- $commentConfig = dict "proxy" . | dict "gitalk" | merge $commentConfig -}}
{{- end -}}
{{- $options := dict "targetPath" "js/gitalk.min.js" "minify" true -}}
{{- $js := resources.Get "js/lib/gitalk.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://github.com/gitalk/gitalk"></a>Gitalk</a>.
</noscript>
Expand All @@ -40,7 +44,7 @@
{{- $options := dict "targetPath" "lib/valine/valine.min.css" -}}
{{- dict "Source" "lib/valine/Valine.scss" "ToCSS" $options | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxStyle.html" -}}
{{- $source := $cdn.valineJS | default "lib/valine/Valine.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- $commentConfig = dict "el" "#valine" "appId" $valine.appId "appKey" $valine.appKey "lang" ($valine.lang | default (T "valineLang")) "visitor" $valine.visitor "recordIP" $valine.recordIP "placeholder" ($valine.placeholder | default (T "valinePlaceholder")) "highlight" (ne $valine.highlight false) "enableQQ" $valine.enableQQ | dict "valine" | merge $commentConfig -}}
{{- with $valine.avatar -}}
{{- $commentConfig = dict "avatar" . | dict "valine" | merge $commentConfig -}}
Expand All @@ -55,6 +59,14 @@
{{- $commentConfig = dict "serverURLs" . | dict "valine" | merge $commentConfig -}}
{{- end -}}
{{- $commentConfig = $valine.emoji | default "google.yml" | printf "data/emoji/%v" | resources.Get | transform.Unmarshal | dict "valine" | merge $commentConfig -}}
{{- $shims := dict "valine" "js/shims/valine.js" -}}
{{- $options := dict -}}
{{- $options = dict "targetPath" "js/valine.min.js" | merge $options -}}
{{- $options = dict "minify" true | merge $options -}}
{{- $options = dict "shims" $shims | merge $options -}}
{{- $js := resources.Get "js/lib/valine.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
</noscript>
Expand All @@ -65,7 +77,7 @@
{{- if $waline.enable -}}
<div id="waline" class="comment"></div>
{{- $source := $cdn.walineJS | default "lib/waline/Waline.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[theme='dark'], body[theme='black']" "copyright" true | dict "waline" | merge $commentConfig -}}
{{- with $waline.visitor -}}
{{- $commentConfig = dict "visitor" . | dict "waline" | merge $commentConfig -}}
Expand Down Expand Up @@ -97,6 +109,14 @@
{{- with $waline.mathTagSupport -}}
{{- $commentConfig = dict "mathTagSupport" . | dict "waline" | merge $commentConfig -}}
{{- end -}}
{{- $shims := dict "@waline/client" "js/shims/waline.js" -}}
{{- $options := dict -}}
{{- $options = dict "targetPath" "js/waline.min.js" | merge $options -}}
{{- $options = dict "minify" true | merge $options -}}
{{- $options = dict "shims" $shims | merge $options -}}
{{- $js := resources.Get "js/lib/waline.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://waline.js.org/">Waline</a>.
</noscript>
Expand Down Expand Up @@ -168,6 +188,10 @@
{{- $commentConfig = dict "label" $utterances.label | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
{{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
{{- $options := dict "targetPath" "js/utterances.min.js" "minify" true -}}
{{- $js := resources.Get "js/lib/utterances.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
</noscript>
Expand All @@ -186,7 +210,7 @@
{{- $options = dict "shims" $shims | merge $options -}}
{{- $js := resources.Get "js/lib/twikoo.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
{{- $commentConfig = dict "el" "#twikoo" "envId" $twikoo.envId | dict "twikoo" | merge $commentConfig -}}
{{- $commentConfig = dict "lang" .Lang | dict "twikoo" | merge $commentConfig -}}
{{- with $twikoo.region -}}
Expand Down Expand Up @@ -240,6 +264,10 @@
{{- with $vssue.clientSecret -}}
{{- $commentConfig = dict "clientSecret" . | dict "vssue" | merge $commentConfig -}}
{{- end -}}
{{- $options := dict "targetPath" "js/vssue.min.js" "minify" true -}}
{{- $js := resources.Get "js/lib/vssue.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://vssue.js.org/">Vssue</a>.
</noscript>
Expand All @@ -259,6 +287,10 @@
{{- with $remark42.simple_view -}}
{{- $commentConfig = dict "simple_view" . | dict "remark42" | merge $commentConfig -}}
{{- end -}}
{{- $options := dict "targetPath" "js/remark42.min.js" "minify" true -}}
{{- $js := resources.Get "js/lib/remark42.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://remark42.com/">Remark42</a>.
</noscript>
Expand All @@ -277,6 +309,10 @@
{{- $commentConfig = $giscus.dataEmitMetadata | default "0" | dict "dataEmitMetadata" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
{{- $commentConfig = $giscus.darkTheme | default "dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
{{- $options := dict "targetPath" "js/giscus.min.js" "minify" true -}}
{{- $js := resources.Get "js/lib/giscus.js" | js.Build $options -}}
{{- $_ := $js.RelPermalink -}}
{{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/pjaxScript.html" -}}
<noscript>
Please enable JavaScript to view the comments powered by <a href="https://giscus.app/">giscus</a>.
</noscript>
Expand Down
Loading

1 comment on commit e14380b

@vercel
Copy link

@vercel vercel bot commented on e14380b Dec 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.