feat: added utterances comment system

README.md

@@ -13,7 +13,7 @@ Personal website created with Astro.
 - [x] Dark/Light Theme
 - [x] Multilang web-site
 - [x] Form handling via [Netlify Forms](https://www.netlify.com/products/forms/)
-- [ ] Comment system via [utterances](https://utteranc.es/)
+- [x] Comment system via [utterances](https://utteranc.es/)
 - [ ] SEO optimized
 
 ## License

package-lock.json

@@ -16,7 +16,7 @@
 				"@typescript-eslint/eslint-plugin": "^5.33.1",
 				"@typescript-eslint/parser": "^5.33.1",
 				"astro": "^1.0.6",
-				"astro-compress": "^0.0.19",
+				"astro-compress": "^1.0.1",
 				"astro-icon": "^0.7.3",
 				"eslint": "^8.22.0",
 				"eslint-plugin-solid": "^0.7.1",
@@ -1538,9 +1538,9 @@
 			}
 		},
 		"node_modules/astro-compress": {
-			"version": "0.0.19",
-			"resolved": "https://registry.npmjs.org/astro-compress/-/astro-compress-0.0.19.tgz",
-			"integrity": "sha512-Hgv1wX43vOwzUNuqRm7hbCMUXoH2xF+kTjBR+6RqAbM6hjqIlB8aKEGOVdELj6BiwnMDLf1dl6C1TmYPPgDMAg==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/astro-compress/-/astro-compress-1.0.1.tgz",
+			"integrity": "sha512-6w8n4KF5KbvEp86E5uUsRMB1uWNz04gml9EkyDXi5+7r8NKG/efOu+TVyhIaj7QWDevdDXLYPrMH//9HyNtCWA==",
 			"dev": true,
 			"dependencies": {
 				"csso": "5.0.5",
@@ -10382,9 +10382,9 @@
 			}
 		},
 		"astro-compress": {
-			"version": "0.0.19",
-			"resolved": "https://registry.npmjs.org/astro-compress/-/astro-compress-0.0.19.tgz",
-			"integrity": "sha512-Hgv1wX43vOwzUNuqRm7hbCMUXoH2xF+kTjBR+6RqAbM6hjqIlB8aKEGOVdELj6BiwnMDLf1dl6C1TmYPPgDMAg==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/astro-compress/-/astro-compress-1.0.1.tgz",
+			"integrity": "sha512-6w8n4KF5KbvEp86E5uUsRMB1uWNz04gml9EkyDXi5+7r8NKG/efOu+TVyhIaj7QWDevdDXLYPrMH//9HyNtCWA==",
 			"dev": true,
 			"requires": {
 				"csso": "5.0.5",

package.json

@@ -26,7 +26,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.33.1",
 		"@typescript-eslint/parser": "^5.33.1",
 		"astro": "^1.0.6",
-		"astro-compress": "^0.0.19",
+		"astro-compress": "^1.0.1",
 		"astro-icon": "^0.7.3",
 		"eslint": "^8.22.0",
 		"eslint-plugin-solid": "^0.7.1",

src/components/ArticleComments/ArticleComments.astro

@@ -1,7 +1,29 @@
 ---
+import { UTTERANCES_CONFIG } from "@root/config";
 import UIString from "../UIString";
 ---
 
 <footer>
 	<h2><UIString key={"articlePost.comments"} /></h2>
+	<div id="comments"></div>
 </footer>
+
+<script define:vars={{ UTTERANCES_CONFIG }}>
+	const $commentsWrapper = document.getElementById("comments");
+	const $commentsScript = document.createElement("script");
+
+	$commentsScript.async = true;
+	$commentsScript.src = "https://utteranc.es/client.js";
+	$commentsScript.setAttribute("repo", UTTERANCES_CONFIG.repo);
+	$commentsScript.setAttribute("issue-term", UTTERANCES_CONFIG.issueTerm);
+	$commentsScript.setAttribute("id", "utterances");
+	$commentsScript.setAttribute("crossorigin", "anonymous");
+
+	if (window.theme) {
+		$commentsScript.setAttribute("theme", theme === "dark" ? "dark-blue" : "github-light");
+	} else {
+		$commentsScript.setAttribute("theme", UTTERANCES_CONFIG.theme);
+	}
+
+	if ($commentsWrapper) $commentsWrapper.appendChild($commentsScript);
+</script>

src/config.ts

@@ -1,5 +1,12 @@
 export const DEFAULT_LANGUAGE: LanguageKeys = "ru";
 
+export const UTTERANCES_CONFIG: UtterancesConfigType = {
+	repo: "sergeyyarkov/comments",
+	issueTerm: "title",
+	label: "Comments",
+	theme: "github-light",
+};
+
 export const SITE_METADATA: SiteMetadataType = {
 	title: "Sergey Yarkov",
 	name: "yarkov.tech",

src/pages/blog/[...slug].astro

@@ -10,7 +10,6 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 export async function getStaticPaths() {
 	const modules = import.meta.glob<MDXInstance<ArticleType>>("../../../content/articles/**/*.mdx", { eager: true });
 	const entries = Object.keys(modules).map((key) => [key, key.split("/").slice(7)[0]]);
-	const data = await Astro.glob<ArticleType>("../../../content/articles/**/*.mdx");
 
 	return entries.map(([key, lang]) => {
 		const article = modules[key];

src/types/main.d.ts

@@ -15,6 +15,13 @@ declare global {
 	type LanguageKeys = keyof typeof languages;
 	type UIDictionaryKeys = keyof typeof uiKeys;
 
+	type UtterancesConfigType = {
+		repo: string;
+		label?: string;
+		issueTerm: string;
+		theme: string;
+	};
+
 	type SiteMetadataType = {
 		title: string;
 		name: string;