Date: Tue, 10 Feb 2026 09:11:44 +0000
Subject: [PATCH 3/5] Add documentation for Disqus comments setup
Co-authored-by: wanoo21 <6537167+wanoo21@users.noreply.github.com>
---
COMMENTS_SETUP.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 56 insertions(+)
create mode 100644 COMMENTS_SETUP.md
diff --git a/COMMENTS_SETUP.md b/COMMENTS_SETUP.md
new file mode 100644
index 0000000..0723590
--- /dev/null
+++ b/COMMENTS_SETUP.md
@@ -0,0 +1,56 @@
+# Comments Configuration
+
+This blog now supports comments via Disqus. To enable comments on your blog posts, follow these steps:
+
+## Setting up Disqus Comments
+
+1. **Create a Disqus Account**
+ - Go to [https://disqus.com/](https://disqus.com/)
+ - Click "Get Started" and create an account
+ - Choose "I want to install Disqus on my site"
+
+2. **Register Your Site**
+ - Enter your website name
+ - Choose a unique Disqus shortname (e.g., `my-awesome-blog`)
+ - Select a category for your site
+ - Complete the registration process
+
+3. **Configure Your Blog**
+ - Open `src/consts.ts` in your project
+ - Find the `comments` section in `SITE_METADATA`
+ - Update the configuration:
+
+ ```typescript
+ comments: {
+ provider: 'disqus', // Change from '' to 'disqus'
+ disqusConfig: {
+ shortname: 'your-disqus-shortname', // Add your shortname here
+ },
+ },
+ ```
+
+4. **Build and Deploy**
+ - Run `npm run build` to build your site
+ - Deploy your updated site
+ - Comments will now appear at the bottom of each blog post
+
+## Features
+
+- Comments appear on both post layouts (standard and simple)
+- A "Scroll to Comment" button appears in the bottom-right corner when scrolling
+- Comments section includes the standard Disqus features:
+ - User authentication via multiple providers
+ - Moderation tools
+ - Reaction buttons
+ - Threading and replies
+ - Email notifications
+
+## Customization
+
+The comments section styling can be customized in `src/components/Comments.astro`. The Disqus component itself is located in `src/components/solidjs/Disqus.tsx`.
+
+## Troubleshooting
+
+- **Comments not showing**: Make sure you've set the `provider` to `'disqus'` and added your `shortname`
+- **Wrong site configuration**: Double-check your shortname matches exactly what you registered with Disqus
+- **Development vs Production**: Disqus may behave differently in development mode. Test on your deployed site for full functionality
From 9108ae4555c7143ea3566eeef6cacb0b82f59af1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:13:42 +0000
Subject: [PATCH 4/5] Address code review feedback - improve Disqus component
cleanup and remove unnecessary signals
Co-authored-by: wanoo21 <6537167+wanoo21@users.noreply.github.com>
---
src/components/solidjs/Disqus.tsx | 19 ++++++++++++++-----
.../solidjs/ScrollTopAndComments.tsx | 5 ++---
src/consts.ts | 7 +++++++
src/layouts/PostLayout.astro | 4 ++--
src/layouts/SimplePostLayout.astro | 4 ++--
5 files changed, 27 insertions(+), 12 deletions(-)
diff --git a/src/components/solidjs/Disqus.tsx b/src/components/solidjs/Disqus.tsx
index dc945a2..ad64e4d 100644
--- a/src/components/solidjs/Disqus.tsx
+++ b/src/components/solidjs/Disqus.tsx
@@ -1,4 +1,4 @@
-import { onMount, createEffect } from "solid-js";
+import { onMount, onCleanup, createEffect } from "solid-js";
interface DisqusProps {
slug: string;
@@ -11,7 +11,7 @@ interface DisqusProps {
}
export default function Disqus(props: DisqusProps) {
- let disqusDiv!: HTMLDivElement;
+ let scriptElement: HTMLScriptElement | null = null;
const loadDisqus = () => {
const { shortname, url, identifier, title } = props.config;
@@ -30,6 +30,7 @@ export default function Disqus(props: DisqusProps) {
script.src = `https://${shortname}.disqus.com/embed.js`;
script.setAttribute("data-timestamp", String(+new Date()));
(document.head || document.body).appendChild(script);
+ scriptElement = script;
};
onMount(() => {
@@ -38,10 +39,17 @@ export default function Disqus(props: DisqusProps) {
}
});
- // Reload Disqus when slug changes
+ onCleanup(() => {
+ if (scriptElement && scriptElement.parentNode) {
+ scriptElement.parentNode.removeChild(scriptElement);
+ }
+ });
+
+ // Reload Disqus when slug changes (skip initial mount)
+ let isInitialMount = true;
createEffect(() => {
const slug = props.slug;
- if (slug && (window as any).DISQUS) {
+ if (!isInitialMount && slug && (window as any).DISQUS) {
(window as any).DISQUS.reset({
reload: true,
config: function () {
@@ -50,11 +58,12 @@ export default function Disqus(props: DisqusProps) {
},
});
}
+ isInitialMount = false;
});
return (
-
+