Community comments

import { useEffect } from 'react';

const DisqusComments = ({ identifier, url, title }) => {
  useEffect(() => {
    if (window.DISQUS) {
      window.DISQUS.reset({
        reload: true,
        config: function() {
          this.page.identifier = identifier;
          this.page.url = url;
          this.page.title = title;
        }
      });
      return;
    }

    window.disqus_config = function() {
      this.page.url = url;
      this.page.identifier = identifier;
      this.page.title = title;
    };

    const script = document.createElement('script');
    script.src = 'https://YOUR_SHORTNAME.disqus.com/embed.js';
    script.setAttribute('data-timestamp', +new Date());
    document.body.appendChild(script);

    return () => {
      const disqusThread = document.getElementById('disqus_thread');
      if (disqusThread) {
        while (disqusThread.hasChildNodes()) {
          disqusThread.removeChild(disqusThread.lastChild);
        }
      }
    };
  }, [identifier, url, title]);

  return (
    <div className="comments-section">
      <h3>Comments</h3>
      <div id="disqus_thread" />
      <noscript>
        Please enable JavaScript to view the comments.
      </noscript>
    </div>
  );
};

export default DisqusComments;

const BlogPost = ({ post }) => {
  const commentsEnabled = post.fields.enable_comments;
  const pageUrl = `https://yoursite.com/blog/${post.slug}`;

  return (
    <article>
      <h1>{post.fields.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.fields.body }} />

      {commentsEnabled && (
        <DisqusComments
          identifier={post.slug}
          url={pageUrl}
          title={post.fields.title}
        />
      )}
    </article>
  );
};

import { useEffect, useRef } from 'react';

const UtterancesComments = ({ repo, issueTerm }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.setAttribute('repo', repo);
    script.setAttribute('issue-term', issueTerm);
    script.setAttribute('theme', 'github-light');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    containerRef.current.appendChild(script);

    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [repo, issueTerm]);

  return <div ref={containerRef} className="utterances-container" />;
};

// Usage
<UtterancesComments
  repo="yourname/yourrepo"
  issueTerm={post.slug}
/>

const express = require('express');
const Butter = require('buttercms');

const butter = Butter('YOUR_WRITE_API_TOKEN');
const router = express.Router();

// Fetch comments for a post
router.get('/api/comments/:postSlug', async (req, res) => {
  try {
    const response = await butter.content.retrieve(['comments'], {
      'fields.post_slug': req.params.postSlug,
      'fields.approved': true,
      order: '-fields.created_at'
    });

    res.json(response.data.data.comments);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch comments' });
  }
});

// Submit a new comment
router.post('/api/comments', async (req, res) => {
  const { postSlug, authorName, authorEmail, commentBody, parentId } = req.body;

  if (!postSlug || !authorName || !commentBody) {
    return res.status(400).json({ error: 'Missing required fields' });
  }

  try {
    await butter.content.create('comments', {
      post_slug: postSlug,
      author_name: authorName,
      author_email: authorEmail,
      comment_body: commentBody,
      parent_comment_id: parentId || null,
      approved: false,
      created_at: new Date().toISOString()
    });

    res.json({
      success: true,
      message: 'Comment submitted for moderation'
    });
  } catch (error) {
    res.status(500).json({ error: 'Failed to submit comment' });
  }
});

module.exports = router;

import { useState, useEffect } from 'react';

const CustomComments = ({ postSlug }) => {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState({ name: '', email: '', body: '' });
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    fetchComments();
  }, [postSlug]);

  const fetchComments = async () => {
    const response = await fetch(`/api/comments/${postSlug}`);
    const data = await response.json();
    setComments(data);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch('/api/comments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        postSlug,
        authorName: newComment.name,
        authorEmail: newComment.email,
        commentBody: newComment.body
      })
    });

    if (response.ok) {
      setSubmitted(true);
      setNewComment({ name: '', email: '', body: '' });
    }
  };

  return (
    <section className="comments">
      <h3>Comments ({comments.length})</h3>

      <div className="comment-list">
        {comments.map(comment => (
          <div key={comment.meta.id} className="comment">
            <div className="comment-header">
              <strong>{comment.author_name}</strong>
              <time>{new Date(comment.created_at).toLocaleDateString()}</time>
            </div>
            <p>{comment.comment_body}</p>
          </div>
        ))}
      </div>

      {submitted ? (
        <p className="success">Thanks! Your comment is awaiting moderation.</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="Name"
            value={newComment.name}
            onChange={(e) => setNewComment({ ...newComment, name: e.target.value })}
          />
          <input
            type="email"
            placeholder="Email"
            value={newComment.email}
            onChange={(e) => setNewComment({ ...newComment, email: e.target.value })}
          />
          <textarea
            placeholder="Comment"
            value={newComment.body}
            onChange={(e) => setNewComment({ ...newComment, body: e.target.value })}
          />
          <button type="submit">Submit</button>
        </form>
      )}
    </section>
  );
};