use new giscus options

components/Comments/Comments.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Giscus from "@giscus/react";
 import useTheme from "../../hooks/useTheme";
 import { styled, theme } from "../../lib/styles/stitches.config";
@@ -16,18 +17,24 @@ export type CommentsProps = ComponentProps<typeof Wrapper> & {
   title: string;
 };
 
-const Comments = ({ title, ...rest }: CommentsProps) => {
+const Comments = ({ title, className, ...rest }: CommentsProps) => {
   const { activeTheme } = useTheme();
 
   // TODO: use custom `<Loading />` spinner component during suspense
   return (
-    <Wrapper {...rest}>
+    <Wrapper
+      id="comments"
+      className={clsx([className, "giscus"])} // https://github.com/giscus/giscus/blob/fa0975c980d91e691e7e4b4f59fd10bec2e20d90/client.ts#L81
+      {...rest}
+    >
       <Giscus
         {...(giscusConfig as GiscusProps)}
         term={title}
         mapping="specific"
         reactionsEnabled="1"
         emitMetadata="0"
+        inputPosition="top"
+        loading="eager" // still lazily loaded with react-intersection-observer
         theme={activeTheme === "dark" ? activeTheme : "light"}
       />
     </Wrapper>