jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto switch theme for giscus and utterances

Browse Source
This commit is contained in:
Timothy Lin 2021-08-29 14:39:52 +08:00
parent 33ff1400b0
commit 9c5e267a59
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/comments/Giscus.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React, { useState, useEffect, useCallback } from 'react'
import { useTheme } from 'next-themes'
import siteMetadata from '@/data/siteMetadata'
@ -15,7 +15,7 @@ const Giscus = ({ mapping }) => {
const COMMENTS_ID = 'comments-container'
function LoadComments() {
const LoadComments = useCallback(() => {
setEnabledLoadComments(false)
const script = document.createElement('script')
script.src = 'https://giscus.app/client.js'
@ -37,7 +37,14 @@ const Giscus = ({ mapping }) => {
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.innerHTML = ''
}
}
}, [commentsTheme, mapping])
// Reload on theme change
useEffect(() => {
const iframe = document.querySelector('iframe.giscus-frame')
if (!iframe) return
LoadComments()
}, [LoadComments])
return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">

15
components/comments/Utterances.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React, { useState, useEffect, useCallback } from 'react'
import { useTheme } from 'next-themes'
import siteMetadata from '@/data/siteMetadata'
@ -13,7 +13,7 @@ const Utterances = ({ issueTerm }) => {
const COMMENTS_ID = 'comments-container'
function LoadComments() {
const LoadComments = useCallback(() => {
setEnabledLoadComments(false)
const script = document.createElement('script')
script.src = 'https://utteranc.es/client.js'
@ -31,13 +31,20 @@ const Utterances = ({ issueTerm }) => {
const comments = document.getElementById(COMMENTS_ID)
if (comments) comments.innerHTML = ''
}
}
}, [commentsTheme, issueTerm])
// Reload on theme change
useEffect(() => {
const iframe = document.querySelector('iframe.utterances-frame')
if (!iframe) return
LoadComments()
}, [LoadComments])
// Added `relative` to fix a weird bug with `utterances-frame` position
return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
<div className="utterances-frame relative" id={COMMENTS_ID} />
<div className="relative utterances-frame" id={COMMENTS_ID} />
</div>
)
}