next13 블로그 Utterances 로 댓글 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { useEffect } from 'react';

function Post() {
  useEffect(() => {
    const script = document.createElement('script');
    script.setAttribute('src', 'https://utteranc.es/client.js');
    script.setAttribute('crossorigin', 'anonymous');
    script.setAttribute('async', true);
    script.setAttribute('repo', 'myusername/mywebsite-comments');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'github-light');
    document.body.appendChild(script);
  }, []);

  return (
    <div>
      <h1>My Awesome Post</h1>
      <p>Welcome to my post! Here's some content...</p>
      <div id="utterances-container" />
    </div>
  );
}

1
2
3
4
5
6
7

function App() {
  return (
    <div>
      <Post />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

"use client";
import { useEffect } from "react";
import { CONFIG } from "../../../site.config";
import { useTheme } from "next-themes";

type Props = {
  issueTerm: string;
};

export default function Utterances({ issueTerm }: Props) {
  const { systemTheme, theme } = useTheme();
  const currentTheme = theme === "system" ? systemTheme : theme;

  useEffect(() => {
    const theme = currentTheme === "dark" ? "github-dark" : "github-light";
    // 'github-dark'
    const script = document.createElement("script");
    const anchor = document.getElementById("comments");
    if (!anchor) return;

    script.setAttribute("src", "https://utteranc.es/client.js");
    script.setAttribute("crossorigin", "anonymous");
    script.setAttribute("async", `true`);
    script.setAttribute("issue-term", issueTerm);
    script.setAttribute("theme", theme);
    const config: { [key: string]: string } = CONFIG.utterances.config;
    Object.keys(config).forEach((key) => {
      script.setAttribute(key, config[key]);
    });
    anchor.appendChild(script);
    return () => {
      anchor.innerHTML = "";
    };
  });
  return (
    <>
      <div id="comments" className="md:-ml-16">
        <div className="utterances-container"></div>
      </div>
    </>
  );
}