next-mdx-remote v4 (#737)

components/Comments/Comments.module.css

@@ -0,0 +1,6 @@
+.wrapper :global(.giscus) {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 2px solid var(--light);
+  min-height: 350px;
+}

components/Comments/Comments.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes";
+import { Giscus } from "@giscus/react";
+import { giscusConfig } from "../../lib/config";
+import type { GiscusProps } from "@giscus/react";
+
+import styles from "./Comments.module.css";
+
+type Props = {
+  title: string;
+};
+
+const Comments = ({ title }: Props) => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <div className={styles.wrapper}>
+      <Giscus
+        {...(giscusConfig as GiscusProps)}
+        term={title}
+        mapping="specific"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        theme={resolvedTheme === "dark" ? "dark" : "light"}
+      />
+    </div>
+  );
+};
+
+export default Comments;