From b4ba4d121adc0341e54b89433d3662d8251e0f4e Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 27 Dec 2023 18:44:05 +0800
Subject: [PATCH] =?UTF-8?q?Fukasawa=20=E4=B8=BB=E9=A2=98=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?MailChimp=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/lang/en-US.js                           |  5 ++
 lib/lang/zh-CN.js                           |  5 ++
 themes/fukasawa/components/AsideLeft.js     |  7 ++-
 themes/fukasawa/components/MailChimpForm.js | 62 +++++++++++++++++++++
 themes/fukasawa/config.js                   |  1 +
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 themes/fukasawa/components/MailChimpForm.js

diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 98c102bd..063da7f8 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -67,5 +67,10 @@ export default {
   POST: {
     BACK: 'Back',
     TOP: 'Top'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: 'Subscribe',
+    MSG: 'Get the latest news and articles to your inbox every month.',
+    EMAIL: 'Email'
   }
 }
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index acd87919..2f4af10f 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -69,5 +69,10 @@ export default {
   POST: {
     BACK: '返回上页',
     TOP: '回到顶部'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: '邮件订阅',
+    MSG: '订阅以获取每月更新的新闻和文章，直接发送至您的邮箱。',
+    EMAIL: '邮箱'
   }
 }
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 991b9ce4..955cc628 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -13,6 +13,7 @@ import { useFukasawaGlobal } from '..'
 import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
+import MailChimpForm from './MailChimpForm'
 
 /**
  * 侧边栏
@@ -82,7 +83,11 @@ function AsideLeft(props) {
             </section>
 
             <section>
-                 <AdSlot type='in-article'/>
+                <MailChimpForm />
+            </section>
+
+            <section>
+                <AdSlot type='in-article' />
             </section>
 
             {router.asPath !== '/tag' && <section className='flex flex-col'>
diff --git a/themes/fukasawa/components/MailChimpForm.js b/themes/fukasawa/components/MailChimpForm.js
new file mode 100644
index 00000000..f2e990e5
--- /dev/null
+++ b/themes/fukasawa/components/MailChimpForm.js
@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
+import { subscribeToNewsletter } from '@/lib/mailchimp'
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 邮件订阅表单
+ * @returns
+ */
+export default function MailChimpForm() {
+  const formRef = useRef()
+  const [success, setSuccess] = useState(false)
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    const form = formRef.current
+    const handleSubmit = (e) => {
+      e.preventDefault()
+      const email = document.querySelector('#newsletter').value
+      subscribeToNewsletter(email).then(response => {
+        console.log('Subscription succeeded:', response)
+        // 在此处添加成功订阅后的操作
+        setSuccess(true)
+      })
+        .catch(error => {
+          console.error('Subscription failed:', error)
+          // 在此处添加订阅失败后的操作
+        })
+    }
+    form?.addEventListener('submit', handleSubmit)
+    return () => {
+      form?.removeEventListener('submit', handleSubmit)
+    }
+  }, [subscribeToNewsletter])
+
+  return <>
+        {siteConfig('FUKASAWA_MAILCHIMP_FORM', null, CONFIG) && <div className="sm:col-span-6 md:col-span-3 lg:col-span-3">
+            <h6 className="text-gray-800 font-medium mb-2">{locale.MAILCHIMP.SUBSCRIBE}</h6>
+            <p className="text-sm text-gray-600 mb-4">{locale.MAILCHIMP.MSG}</p>
+            <form ref={formRef}>
+                <div className="flex flex-wrap mb-4">
+                    <div className="w-full">
+                        <label className="block text-sm sr-only" htmlFor="newsletter">{locale.MAILCHIMP.EMAIL}</label>
+                        <div className="relative flex items-center max-w-xs">
+                            <input disabled={success} id="newsletter" type="email" className="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm" placeholder={locale.MAILCHIMP.EMAIL} required />
+                            <button disabled={success} type="submit" className="absolute inset-0 left-auto" aria-label="Subscribe">
+                                <span className="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span>
+                                <svg className="w-3 h-3 fill-current text-blue-600 mx-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />
+                                </svg>
+                            </button>
+                        </div>
+                        {/* Success message */}
+                        {success && <p className="mt-2 text-green-600 text-sm">Thanks for subscribing!</p>}
+                    </div>
+                </div>
+            </form>
+        </div>
+        }
+    </>
+}
diff --git a/themes/fukasawa/config.js b/themes/fukasawa/config.js
index 86e641bd..7145ec1d 100644
--- a/themes/fukasawa/config.js
+++ b/themes/fukasawa/config.js
@@ -1,4 +1,5 @@
 const CONFIG = {
+  FUKASAWA_MAILCHIMP_FORM: true, // 邮件订阅表单
 
   FUKASAWA_POST_LIST_COVER: true, // 文章列表显示图片封面
   FUKASAWA_POST_LIST_COVER_FORCE: false, // 即使没有封面也将站点背景图设置为封面