feat: added newsletter page from dev.near

website/.env.example

@@ -0,0 +1,8 @@
+# Your Mailchimp API Key 
+MAILCHIMP_API_KEY=your_api_key_here
+
+# Your Mailchimp server region (e.g., us1, us2, us3, etc.)
+MAILCHIMP_REGION=us1
+
+# Your Mailchimp Audience/List ID
+NEWSLETTER_AUDIENCE_ID=your_audience_id_here

website/docusaurus.config.js

@@ -74,6 +74,7 @@ const config = {
   plugins: [
     './src/plugins/monaco-editor',
     './src/plugins/node-polyfills',
+    './src/plugins/newsletter-api',
     'docusaurus-plugin-sass',
   ],
   themeConfig: {
@@ -319,6 +320,16 @@ const config = {
             },
           ],
         },
+        {
+          to: '/api/rpc/introduction',
+          label: 'RPC',
+          activeBaseRegex: '/api/rpc',
+        },
+        {
+          to: '/newsletter',
+          label: 'Newsletter',
+          position: 'right'
+        },
         { label: 'Blog', to: '/blog', activeBaseRegex: '/blog', position: 'right' },
         {
           type: 'html',

website/package.json

@@ -30,6 +30,7 @@
     "buffer": "^6.0.3",
     "concurrently": "^5.3.0",
     "crypto-browserify": "^3.12.0",
+    "dotenv": "^16.3.1",
     "file-loader": "^6.2.0",
     "glob": "^11.0.3",
     "monaco-editor-webpack-plugin": "^7.1.0",
@@ -48,11 +49,13 @@
     "@docusaurus/preset-classic": "3.8.1",
     "@docusaurus/theme-mermaid": "3.8.1",
     "@feelback/react": "^0.3.4",
+    "@mailchimp/mailchimp_marketing": "^3.0.80",
     "@saucelabs/theme-github-codeblock": "^0.2.3",
     "axios": "^1.8.2",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
     "clsx": "^1.1.1",
+    "dompurify": "^3.0.5",
     "docusaurus-plugin-remote-content": "^4.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "express": "^4.18.2",
@@ -68,11 +71,13 @@
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-is": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-monaco-editor": "^0.54.0",
     "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.69.5",
+    "styled-components": "^6.1.0",
     "url": "^0.11.3"
   }
 }

website/src/api/newsletter.js

@@ -0,0 +1,113 @@
+const mailchimp = require('@mailchimp/mailchimp_marketing');
+const { mailchimpApiKey, mailchimpRegion, newsletterAudienceId } = require('../config');
+
+mailchimp.setConfig({
+  apiKey: mailchimpApiKey,
+  server: mailchimpRegion,
+});
+
+async function getCampaigns(req, res) {
+  if (!mailchimpApiKey || !mailchimpRegion) {
+    res.status(200).json([]); // Return empty array if not configured
+    return;
+  }
+
+  try {
+    const response = await mailchimp.campaigns.list({
+      fields: [
+        'campaigns.settings.subject_line',
+        'campaigns.send_time',
+        'campaigns.id',
+        'campaigns.variate_settings.combinations',
+        'campaigns.variate_settings.subject_lines',
+      ],
+      count: 5,
+      status: 'sent',
+      sortField: 'send_time',
+      sortDir: 'DESC',
+    });
+
+    if ('campaigns' in response) {
+      res.status(200).json(response.campaigns);
+    } else {
+      res.status(500).json({ error: 'Failed to fetch campaigns' });
+    }
+  } catch (error) {
+    console.error('Mailchimp API error:', error);
+    res.status(500).json({ error: 'error' });
+  }
+}
+
+async function getCampaignContent(req, res) {
+  const { id } = req.params;
+
+  if (!id) {
+    res.status(400).json({ error: 'Missing id parameter' });
+    return;
+  }
+
+  if (!mailchimpApiKey || !mailchimpRegion) {
+    res.status(500).json({ error: 'Newsletter service is not configured' });
+    return;
+  }
+
+  try {
+    const response = await mailchimp.campaigns.getContent(id.toString());
+    if ('html' in response) {
+      res.status(200).json(response.html);
+    } else {
+      res.status(500).json({ error: 'Invalid response from Mailchimp' });
+    }
+  } catch (error) {
+    console.error('Mailchimp API error:', error);
+    res.status(500).json({ error: 'error' });
+  }
+}
+
+async function subscribeToNewsletter(req, res) {
+  if (req.method === 'POST') {
+    const { email } = req.body;
+
+    if (!mailchimpApiKey || !mailchimpRegion || !newsletterAudienceId) {
+      res.status(500).json({
+        success: false,
+        message: 'Newsletter service is not configured.',
+      });
+      return;
+    }
+
+    try {
+      const response = await mailchimp.lists.addListMember(newsletterAudienceId, {
+        email_address: email,
+        status: 'pending',
+      });
+
+      console.log(`response: ${response}`);
+
+      res.status(200).json({
+        success: true,
+        message: 'Form submitted successfully! Please confirm your email',
+      });
+    } catch (error) {
+      console.error('Error adding to list:', error);
+
+      if (error.status === 400 && error.response.body.title === 'Member Exists') {
+        res.status(500).json({
+          success: false,
+          message: 'Email already subscribed.',
+        });
+      } else {
+        res.status(500).json({
+          success: false,
+          message: 'An error occurred while processing your request.',
+        });
+      }
+    }
+  }
+}
+
+module.exports = {
+  getCampaigns,
+  getCampaignContent,
+  subscribeToNewsletter
+};

website/src/config.js

@@ -0,0 +1,7 @@
+require('dotenv').config();
+
+export const mailchimpApiKey = process.env.MAILCHIMP_API_KEY || process.env.REACT_APP_MAILCHIMP_API_KEY || '';
+export const mailchimpRegion = process.env.MAILCHIMP_REGION || process.env.REACT_APP_MAILCHIMP_REGION || '';
+export const newsletterAudienceId = process.env.NEWSLETTER_AUDIENCE_ID || process.env.REACT_APP_NEWSLETTER_AUDIENCE_ID || '';
+
+export const isProduction = process.env.NODE_ENV === 'production';