From 1019ee3ad66cf300b4525ebc15a0d4cdb7364f31 Mon Sep 17 00:00:00 2001
From: andwati <andwatiian@gmail.com>
Date: Sat, 14 Feb 2026 15:04:07 +0300
Subject: [PATCH] feat: Add Utterances comments to blog posts and update icon
 dependencies.

---
 app/components/UtterancesComments.vue | 21 +++++++++++++++++++++
 app/pages/blog/[...slug].vue          |  1 +
 package.json                          |  2 ++
 pnpm-lock.yaml                        | 20 ++++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 app/components/UtterancesComments.vue

diff --git a/app/components/UtterancesComments.vue b/app/components/UtterancesComments.vue
new file mode 100644
index 0000000..2bf7808
--- /dev/null
+++ b/app/components/UtterancesComments.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const commentsRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	if (!commentsRef.value) return;
+
+	const script = document.createElement("script");
+	script.src = "https://utteranc.es/client.js";
+	script.setAttribute("repo", "andwati/personal-website");
+	script.setAttribute("issue-term", "pathname");
+	script.setAttribute("theme", "github-dark");
+	script.setAttribute("crossorigin", "anonymous");
+	script.async = true;
+
+	commentsRef.value.appendChild(script);
+});
+</script>
+
+<template>
+  <div ref="commentsRef" class="mt-12 pt-8 border-t border-(--ui-border)" />
+</template>
diff --git a/app/pages/blog/[...slug].vue b/app/pages/blog/[...slug].vue
index 7f177af..6f95713 100644
--- a/app/pages/blog/[...slug].vue
+++ b/app/pages/blog/[...slug].vue
@@ -46,6 +46,7 @@ useSeoMeta({
 
       <div class="prose prose-primary dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-pre:rounded-xl prose-pre:border prose-pre:border-(--ui-border)">
         <ContentRenderer :value="post" />
+        <UtterancesComments />
       </div>
     </div>
   </UContainer>
diff --git a/package.json b/package.json
index 17b286c..155fd00 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
 		"preview": "nuxt preview"
 	},
 	"dependencies": {
+		"@iconify-json/lucide": "^1.2.90",
+		"@iconify-json/simple-icons": "^1.2.70",
 		"@nuxt/content": "^3.11.2",
 		"@nuxt/hints": "1.0.0-alpha.6",
 		"@nuxt/image": "2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de7eece..d5282dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.90
+        version: 1.2.90
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.70
+        version: 1.2.70
       '@nuxt/content':
         specifier: ^3.11.2
         version: 3.11.2(better-sqlite3@12.6.2)(magicast@0.5.2)
@@ -594,6 +600,12 @@ packages:
   '@floating-ui/vue@1.1.10':
     resolution: {integrity: sha512-vdf8f6rHnFPPLRsmL4p12wYl+Ux4mOJOkjzKEMYVnwdf7UFdvBtHlLvQyx8iKG5vhPRbDRgZxdtpmyigDPjzYg==}
 
+  '@iconify-json/lucide@1.2.90':
+    resolution: {integrity: sha512-dPn1pRhfBa9KR+EVpdyM1Rvw3T36hCKYxd6TxK1ifffiNt0f5yXx8ZVhqnzPH4Vkz87yLMj5xFCXomNrnzd2kQ==}
+
+  '@iconify-json/simple-icons@1.2.70':
+    resolution: {integrity: sha512-CYNRCgN6nBTjN4dNkrBCjHXNR2e4hQihdsZUs/afUNFOWLSYjfihca4EFN05rRvDk4Xoy2n8tym6IxBZmcn+Qg==}
+
   '@iconify/collections@1.0.650':
     resolution: {integrity: sha512-rGtrLIeHu4qVTfe/Bsy5TIoRmj0KmvSNrPWu8RFX7bHeq5NqAz/VNXQBPRhtCX43D/ZIozB9vLwLWr+ETHbhEg==}
 
@@ -6083,6 +6095,14 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@iconify-json/lucide@1.2.90':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/simple-icons@1.2.70':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.650':
     dependencies:
       '@iconify/types': 2.0.0