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

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
Show Stats 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;

6
pages/notes/[slug].tsx
View File

@ -4,6 +4,7 @@ import { NextSeo, ArticleJsonLd } from "next-seo";
import { escape } from "html-escaper";
import Content from "../../components/Content";
import Meta from "../../components/notes/Meta";
import Comments from "../../components/notes/Comments";
import mdxComponents from "../../components/mdxComponents";
import { getNoteData, getNoteSlugs } from "../../lib/parse-notes";
import * as config from "../../lib/config";
@ -55,10 +56,9 @@ const Note = ({ frontMatter, source }) => (
<Meta {...frontMatter} />
<Content>
<div className="markdown">
<MDXRemote {...source} components={mdxComponents} />
</div>
<MDXRemote {...source} components={mdxComponents} />
</Content>
<Comments slug={frontMatter.slug} />
</>
);

1
public/humans.txt
View File

@ -32,6 +32,7 @@
- Next.js
- React
- Vercel
- utteranc.es
- Fathom Analytics
- ...and more: https://jarv.is/uses/