jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-01 04:26:37 -04:00
Code Issues Activity

add utteranc.es comments to notes

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-08 07:41:54 -05:00
parent 809a29b1cb
commit c35e33da8d
4 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/notes/Comments.module.css Normal file
View File

@ -0,0 +1,5 @@
.wrapper {
margin-top: 2em;
padding-top: 1em;
border-top: 2px solid var(--light);
}

51
components/notes/Comments.tsx Normal file
View File

@ -0,0 +1,51 @@
import { useRef, useEffect, useState } from "react";
import Head from "next/head";
import { useTheme } from "next-themes";
import { githubRepo } from "../../lib/config";
import styles from "./Comments.module.css";
const Comments = ({ slug }) => {
const [injected, setInjected] = useState(false);
const scriptRef = useRef<HTMLDivElement>(null);
const { resolvedTheme } = useTheme();
useEffect(() => {
// double check that we're ready for the script and it hasn't already been loaded
if (!scriptRef.current || injected) {
return;
}
// NOTE: utterances script can't be loaded w/ next/script since the iframe appears literally where the script tag is
const utterances = document.createElement("script");
utterances.src = "https://utteranc.es/client.js";
utterances.async = true;
utterances.defer = true;
utterances.crossOrigin = "anonymous";
// https://utteranc.es/
utterances.setAttribute("repo", githubRepo);
utterances.setAttribute("issue-term", `notes/${slug}`);
utterances.setAttribute("theme", resolvedTheme === "dark" ? "github-dark" : "github-light");
utterances.setAttribute("label", "💬 comments");
// add inside wrapper div (target for iframe)
scriptRef.current.appendChild(utterances);
setInjected(true);
// cleanup
return () => utterances.remove();
}, [resolvedTheme]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<>
<Head>
<link rel="preload" href="https://utteranc.es/client.js" as="script" crossOrigin="anonymous" />
</Head>
<div ref={scriptRef} id="comments" className={styles.wrapper} />
</>
);
};
export default Comments;