แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website

<script
  src="https://giscus.app/client.js"
  data-repo="[ENTER REPO HERE]"
  data-repo-id="[ENTER REPO ID HERE]"
  data-category="[ENTER CATEGORY NAME HERE]"
  data-category-id="[ENTER CATEGORY ID HERE]"
  data-mapping="pathname"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-theme="light"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

const script = document.createElement('script')
    script.setAttribute('data-repo', '')
    script.setAttribute('data-repo-id', '')
    ...
    ...

import React, { useState, useEffect, useCallback } from 'react'

const GiscusComment = ({ mapping }) => {
  const [isShowComment, setIsShowComment] = useState(true)

  const COMMENTS_ID = 'comments-container'

  const config = {
    repo: '',
    repoId: '',
    category: '',
    categoryId: '',
    reactions: '1',
    metadata: '0',
    theme: ''
  }

  const fetchComments = useCallback(() => {
    setEnabledLoadComments(false)
    const script = document.createElement('script')
    script.src = 'https://giscus.app/client.js'
    script.setAttribute('data-repo', config.repo)
    script.setAttribute('data-repo-id', config.repoId)
    script.setAttribute('data-category', config.category)
    script.setAttribute('data-category-id', config.categoryId)
    script.setAttribute('data-mapping', mapping)
    script.setAttribute('data-reactions-enabled', config.reactions)
    script.setAttribute('data-emit-metadata', config.metadata)
    script.setAttribute('data-theme', config.theme)
    script.setAttribute('crossorigin', 'anonymous')
    script.setAttribute('data-lang', 'en')
    script.async = true

    const comments = document.getElementById(COMMENTS_ID)
    if (comments) comments.appendChild(script)

    return () => {
      const comments = document.getElementById(COMMENTS_ID)
      if (comments) comments.innerHTML = ''
    }
  }, [giscusTheme, mapping])

  // Reload on theme change
  useEffect(() => {
    const iframe = document.querySelector('iframe.giscus-frame')
    if (!iframe) return
    fetchComments()
  }, [fetchComments])

  return (
    <div>
      {enableLoadComments && (
        <button onClick={fetchComments}>
          Load Comments
        </button>
      )}
      <div className="giscus" id={COMMENTS_ID} />
    </div>
  )
}

export default GiscusComment

import GiscusComment from './GiscusComment'

// pathname
<GiscusComment mapping={location.pathname} />

// url
<GiscusComment managing={location.href} />