add mailchimp subscrube

assets/scss/footer.scss

@@ -61,6 +61,10 @@
             }
           }
         }
+        #message {
+          color: red;
+          margin-left: 16px;
+        }
       }
       .right-div {
         width: 720px;

config/_default/config.toml

@@ -9,6 +9,7 @@ baseURL = "https://hugo-first.netlify.app"
 
 [params]
 logo = "images/logo.svg"
+mailchimpSubscribeUrl = "https://gmail.us18.list-manage.com/subscribe/post?u=553ce463e00897cc36ed80866&id=f4b5009074"
 
 [languages.en]
 contentDir = "content/en"

config/upstream/config.toml

@@ -1 +1,4 @@
-baseURL = "https://dev.kubesphere.io/"
+baseURL = "https://dev.kubesphere.io/"
+
+[params]
+mailchimpSubscribeUrl = ""

i18n/en.yaml

@@ -22,5 +22,9 @@
   translation: KubeSphere is committed to the open source contribution of cloud native technology, enriching the ecology of the open source community
 - id: introduction12
   translation: Goto Github
+- id: email is required
+  translation: email is required!
+- id: Please enter a valid email address.
+  translation: Please enter a valid email address!
 
 

layouts/partials/footer.html

@@ -7,9 +7,17 @@
                     <img src="{{ .Site.Params.logo | absURL }}" alt="{{ .Site.Title }}" class="foot-logo">
                     <p>{{ i18n "introduction7" }}</p>
                     <div>
-                        <input type="text" placeholder='{{ i18n "introduction6" }}'>
-                        <button>{{ i18n "introduction5" }}</button>
+                        <form 
+                            action="{{ .Site.Params.mailchimpSubscribeUrl }}" 
+                            method="post" 
+                            target="_blank" 
+                            novalidate
+                        >
+                            <input name="EMAIL" id="email-input" type="text" placeholder='{{ i18n "introduction6" }}'>
+                            <button type="submit" id="email-submit">{{ i18n "introduction5" }}</button>
+                        </form>
                     </div>
+                    <span id="message" data-message1='{{ i18n "email is required" }}' data-message2='{{ i18n "Please enter a valid email address." }}'></span>
                 </div>
                 <div class="right-div">
                     <ul>
@@ -38,4 +46,42 @@
             </div>
         </div>
     </div>
-</footer>
+    
+</footer>
+
+<script>
+    var bindSubmit = function() {
+        var input = $('#email-input')
+        $('#email-submit').click(function(event) {
+            event.stopPropagation()
+            var email = input.val()
+            var message1 = $('#message').data('message1')
+            var message2 = $('#message').data('message2')
+            if (!email) {
+                event.preventDefault()
+                showMessage(message1)
+            } else if (!validateEmail(email)) {
+                event.preventDefault()
+                showMessage(message2)
+            }
+        })
+    }
+
+    var bindHideMessage = function() {
+        $(window).click(function() {
+            $('#message').hide()
+        })
+    }
+
+    var showMessage = function(message) {
+        $('#message').html(message).show()
+    }
+
+    var validateEmail = function(email) {
+        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        return reg.test(email)
+    }
+
+    bindSubmit()
+    bindHideMessage()
+</script>