Astro Ethereum Comments

Drop-in Ethereum Comments Protocol integration for Astro blogs and websites.

Installation

npm install astro-ethereum-comments
# or
yarn add astro-ethereum-comments
# or
pnpm add astro-ethereum-comments

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom viem wagmi @tanstack/react-query @tanstack/query-core

Usage

Basic Usage (Comments Display Only)

---
import { EthereumCommentsEmbed } from 'astro-ethereum-comments/embed';
---

<article>
  <h1>My Blog Post</h1>
  <p>Content...</p>
  
  <!-- Add comments at the end of your post -->
  <EthereumCommentsEmbed />
</article>

Full Featured (Display + Editor)

---
import { EthereumComments } from 'astro-ethereum-comments';
---

<article>
  <h1>My Blog Post</h1>
  <p>Content...</p>
  
  <!-- Add comments with editor -->
  <EthereumComments 
    showEditor={true}
    theme={{ mode: 'dark' }}
  />
</article>

Custom Configuration

---
import { EthereumComments } from 'astro-ethereum-comments';

const customTheme = {
  mode: 'light',
  primaryColor: '#3b82f6',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  borderColor: '#e5e7eb',
  fontFamily: 'Inter, system-ui, sans-serif'
};

const editorConfig = {
  placeholder: 'Share your thoughts...',
  autoFocus: false,
  maxLength: 5000,
  allowUploads: true,
  pinataGatewayUrl: 'https://gateway.pinata.cloud',
  maxFileSize: 10 * 1024 * 1024 // 10MB
};
---

<EthereumComments 
  uri="https://myblog.com/posts/my-article"
  useCurrentUrl={false}
  theme={customTheme}
  showEditor={true}
  editorConfig={editorConfig}
  className="my-custom-comments"
/>

Using Individual Components

---
// Just the display component
import { EthereumCommentsEmbed } from 'astro-ethereum-comments/embed';

// Just the editor component
import { EthereumCommentsEditor } from 'astro-ethereum-comments/editor';
---

<!-- Display comments -->
<EthereumCommentsEmbed 
  theme={{ mode: 'auto' }}
/>

<!-- Separate editor -->
<EthereumCommentsEditor 
  editorConfig={{
    placeholder: 'Add your comment...'
  }}
/>

Configuration

Theme Options

| Property | Type | Default | Description | |----------|------|---------|-------------| | mode | 'light' \| 'dark' \| 'auto' | 'light' | Color scheme | | primaryColor | string | '#3b82f6' | Primary accent color | | backgroundColor | string | '#ffffff' | Background color | | textColor | string | '#1f2937' | Text color | | borderColor | string | '#e5e7eb' | Border color | | fontFamily | string | System font | Font family |

Editor Configuration

| Property | Type | Default | Description | |----------|------|---------|-------------| | placeholder | string | 'Write your comment...' | Placeholder text | | autoFocus | boolean | false | Auto focus on mount | | maxLength | number | - | Maximum character length | | allowUploads | boolean | false | Enable file uploads | | pinataGatewayUrl | string | - | Pinata IPFS gateway URL | | uploadUrl | string | - | Custom upload endpoint | | allowedMimeTypes | string[] | Images & videos | Allowed file types | | maxFileSize | number | 10MB | Maximum file size |

Styling

The component comes with default styles but can be customized using CSS:

/* Override default styles */
.ethereum-comments-container {
  /* Your custom styles */
}

.ecp-add-comment-btn {
  background-color: var(--primary-color);
  /* More custom styles */
}

.ecp-editor-container {
  border-radius: 1rem;
  /* More custom styles */
}

TypeScript Support

This package includes TypeScript definitions. Import types as needed:

import type { 
  EthereumCommentsProps,
  ThemeConfig,
  EditorConfig 
} from 'astro-ethereum-comments';

Astro Configuration

Make sure your astro.config.mjs supports React components:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

Features

• 🚀 Easy Integration - Drop-in component for any Astro site
• 🎨 Customizable - Flexible theming and configuration options
• 📝 Rich Text Editor - Full-featured editor with mentions and uploads
• 🔗 ENS & Farcaster Support - Built-in support for Web3 identities
• 📱 Responsive - Works on all device sizes
• 🌙 Dark Mode - Automatic and manual theme switching
• 🔒 Secure - Ethereum-based authentication
• ⚡ Performance - Optimized for fast loading

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.