68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
|
const changeTheme = (e: CustomEventMap["themechange"]) => {
|
||
|
|
const theme = e.detail.theme
|
||
|
|
const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement
|
||
|
|
if (!iframe) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!iframe.contentWindow) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
iframe.contentWindow.postMessage(
|
||
|
|
{
|
||
|
|
giscus: {
|
||
|
|
setConfig: {
|
||
|
|
theme: theme,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
"https://giscus.app",
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
type GiscusElement = Omit<HTMLElement, "dataset"> & {
|
||
|
|
dataset: DOMStringMap & {
|
||
|
|
repo: `${string}/${string}`
|
||
|
|
repoId: string
|
||
|
|
category: string
|
||
|
|
categoryId: string
|
||
|
|
mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
|
||
|
|
strict: string
|
||
|
|
reactionsEnabled: string
|
||
|
|
inputPosition: "top" | "bottom"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("nav", () => {
|
||
|
|
const giscusContainer = document.querySelector(".giscus") as GiscusElement
|
||
|
|
if (!giscusContainer) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const giscusScript = document.createElement("script")
|
||
|
|
giscusScript.src = "https://giscus.app/client.js"
|
||
|
|
giscusScript.async = true
|
||
|
|
giscusScript.crossOrigin = "anonymous"
|
||
|
|
giscusScript.setAttribute("data-loading", "lazy")
|
||
|
|
giscusScript.setAttribute("data-emit-metadata", "0")
|
||
|
|
giscusScript.setAttribute("data-repo", giscusContainer.dataset.repo)
|
||
|
|
giscusScript.setAttribute("data-repo-id", giscusContainer.dataset.repoId)
|
||
|
|
giscusScript.setAttribute("data-category", giscusContainer.dataset.category)
|
||
|
|
giscusScript.setAttribute("data-category-id", giscusContainer.dataset.categoryId)
|
||
|
|
giscusScript.setAttribute("data-mapping", giscusContainer.dataset.mapping)
|
||
|
|
giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict)
|
||
|
|
giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled)
|
||
|
|
giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)
|
||
|
|
|
||
|
|
const theme = document.documentElement.getAttribute("saved-theme")
|
||
|
|
if (theme) {
|
||
|
|
giscusScript.setAttribute("data-theme", theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
giscusContainer.appendChild(giscusScript)
|
||
|
|
|
||
|
|
document.addEventListener("themechange", changeTheme)
|
||
|
|
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
|
||
|
|
})
|