This blog now features comments
I've add the Github powered comments via Utterances.
I followed this blog post here.
It's all pretty straightforward, here's my implementation:
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
What a fantastic tool. It took all of about 10-15 minutes to set up.
Questions? Comments? Criticisms? Get in the comments! 👇
Spotted an error? Edit this page with Github