feat: Utterance 댓글 기능 추가

Author: toothlessdev

.vitepress/theme/index.ts

@@ -3,15 +3,12 @@ import { h } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import PostCardList from "@/components/PostCardList/PostCardList.vue";
+import PostLayout from "@/components/PostLayout/PostLayout.vue";
 import "./style.css";
 
 export default {
     extends: DefaultTheme,
-    Layout: () => {
-        return h(DefaultTheme.Layout, null, {
-            // https://vitepress.dev/guide/extending-default-theme#layout-slots
-        });
-    },
+    Layout: PostLayout,
     enhanceApp({ app, router, siteData }) {
         app.component("PostCardList", PostCardList);
     },

src/components/PostComment/PostComment.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, watch, ref, nextTick, toRef, type Ref } from "vue";
+
+const props = defineProps<{
+    theme: string;
+}>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+
+function mountUtterances(theme: string) {
+    const container = containerRef.value;
+    if (!container) return;
+
+    if (container.querySelector("iframe.utterances-frame")) return;
+
+    const script = document.createElement("script");
+
+    script.src = "https://utteranc.es/client.js";
+    script.async = true;
+    script.crossOrigin = "anonymous";
+
+    script.setAttribute("repo", "toothlessdev/toothlessdev-comments");
+    script.setAttribute("issue-term", "pathname");
+    script.setAttribute("label", "blog-comment");
+    script.setAttribute("theme", theme);
+
+    container.appendChild(script);
+}
+
+function setUtterancesTheme(theme: string) {
+    const iframe = containerRef.value?.querySelector<HTMLIFrameElement>("iframe.utterances-frame");
+    if (!iframe?.contentWindow) return;
+    iframe.contentWindow.postMessage({ type: "set-theme", theme }, "https://utteranc.es");
+}
+
+onMounted(async () => {
+    await nextTick();
+    mountUtterances(props.theme);
+});
+
+watch(toRef(props, "theme"), (t) => {
+    if (!containerRef.value?.querySelector("iframe.utterances-frame")) {
+        mountUtterances(t);
+        return;
+    }
+    setUtterancesTheme(t);
+});
+
+onBeforeUnmount(() => {
+    const container = containerRef.value;
+    if (!container) return;
+
+    container.querySelector("iframe.utterances-frame")?.remove();
+});
+</script>
+
+<template>
+    <div ref="containerRef" />
+</template>

src/components/PostLayout/PostLayout.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from "vue";
+import { useData } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import PostComment from "@/components/PostComment/PostComment.vue";
+const { Layout } = DefaultTheme;
+
+const COMMENT_THEME_DARK = "photon-dark";
+const COMMENT_THEME_LIGHT = "github-light";
+
+const { frontmatter, page, isDark } = useData();
+
+const commentTheme = computed(() => (isDark.value ? COMMENT_THEME_DARK : COMMENT_THEME_LIGHT));
+</script>
+
+<template>
+    <Layout>
+        <template #doc-after>
+            <PostComment
+                v-if="frontmatter.comment"
+                :key="page.relativePath"
+                :theme="commentTheme"
+            ></PostComment>
+        </template>
+    </Layout>
+</template>