This blog now features comments

1"use client"
2import React, { useEffect, useRef } from 'react'
3
4const PostComments = () => {
5    const commentBox = useRef<HTMLDivElement>(null);
6    const scriptRef = useRef<HTMLScriptElement | null>(null);
7
8    useEffect(() => {
9        if(!scriptRef.current){
10            const commentScript = document.createElement('script')
11            scriptRef.current = commentScript; 
12
13            commentScript.async = true
14            commentScript.src = 'https://utteranc.es/client.js'
15            // define the name of the repository you created here as 'owner/repo'
16            // or import it from your config file if you have one.
17            commentScript.setAttribute('repo', "dwjohnston/blacksheepcode")
18            // define the blog post -> issue mapping (e.g. page pathname, page url).
19            // here the issues will be created with the page pathname as the issue title.
20            commentScript.setAttribute('issue-term', 'pathname')
21            // define a custom label that you want added to your posts.
22            commentScript.setAttribute('label', 'blog-comment')
23            // define if you want to use dark or light theme.
24            commentScript.setAttribute('theme', 'preferred-color-scheme')
25            commentScript.setAttribute('crossorigin', 'anonymous')
26            // we will append this script as a child to the ref element we have created above
27        }
28
29        const containingEl = commentBox.current;
30        if (containingEl) {
31            if(!scriptRef.current){
32                throw new Error("Something has gone wrong - have got the containing el, but no script");
33            }
34            containingEl.appendChild(scriptRef.current)
35        } 
36
37        return () => {
38            if (containingEl && scriptRef.current &&  containingEl.contains(scriptRef.current)) {
39                containingEl.removeChild(scriptRef.current);
40            }
41        }
42    }, [commentBox])
43
44    return (
45        <>
46            <div ref={commentBox} className="comments" id="comments" tabIndex={0} />
47        </>
48    )
49}
50export default PostComments;
51