Merge pull request #47 from jinyang1994/main

feat: add newsletter component

Author: Sherlock113

docusaurus.config.ts

@@ -38,7 +38,28 @@ const config: Config = {
     defaultLocale: 'en',
     locales: ['en']
   },
-
+  plugins: [
+    function () {
+      return {
+        name: 'proxy-webpack-plugin',
+        configureWebpack() {
+          return {
+            mergeStrategy: { 'devServer.proxy': 'replace' },
+            devServer: {
+              proxy: {
+                '/api': {
+                  target: 'http://localhost:3001/',
+                  secure: false,
+                  changeOrigin: true,
+                  logLevel: 'debug'
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  ],
   presets: [
     [
       'classic',

src/components/Button/index.tsx

@@ -12,7 +12,10 @@ interface LinkButtonProps {
     | 'pink'
     | 'light-purple'
     | 'yellow'
+  buttonType?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
   className?: string
+  arrow?: boolean
 }
 
 const colors: { [key in LinkButtonProps['type']]: string } = {
@@ -28,16 +31,20 @@ const colors: { [key in LinkButtonProps['type']]: string } = {
 function Button({
   children,
   type,
-  className
+  buttonType = 'button',
+  className,
+  arrow = true,
+  disabled
 }: PropsWithChildren<LinkButtonProps>) {
   return (
     <button
-      type="button"
+      type={buttonType}
       className={clsx(styles.button, colors[type], className)}
+      disabled={disabled}
     >
       <span className={styles.buttonInner}>
         {children}
-        <ArrowSquare className={styles.buttonIcon} />
+        {arrow && <ArrowSquare className={styles.buttonIcon} />}
       </span>
     </button>
   )

src/components/Button/styles.module.css

@@ -1,5 +1,5 @@
 .button {
-  display: block;
+  display: inline-block;
   border: none;
   background: none;
   cursor: pointer;

src/components/Newsletter/index.tsx

@@ -0,0 +1,73 @@
+import { useState, useCallback, FormEvent } from 'react'
+import Button from '@site/src/components/Button'
+import styles from './styles.module.css'
+
+enum Text {
+  Subscribe = 'Subscribe',
+  Subscribing = 'Subscribing...',
+  Subscribed = 'Subscribed'
+}
+
+function LinkList() {
+  const [text, setText] = useState<Text>(Text.Subscribe)
+  const submit = useCallback(async (e: FormEvent<HTMLFormElement>) => {
+    try {
+      const email = e.target.email.value
+      const form = new FormData()
+      
+      e.preventDefault()
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        return
+      }
+      form.append(
+        'data',
+        JSON.stringify({ email, table: 'handbook-newsletter' })
+      )
+      setText(Text.Subscribing)
+      await fetch('/api/newsletter', {
+        method: 'POST',
+        body: form
+      })
+      setText(Text.Subscribed)
+    } catch (error) {
+      console.error(error)
+      setText(Text.Subscribe)
+    }
+  }, [])
+
+  return (
+    <div className={styles.root}>
+      <i className={styles.emailIcon} />
+      <h3>Stay updated with the handbook</h3>
+      <p>
+        Get the latest insights and updates on LLM inference and optimization
+        techniques.
+      </p>
+      <form onSubmit={submit}>
+        <input
+          type="email"
+          placeholder="Enter your email address"
+          name="email"
+        />
+        <Button
+          arrow={false}
+          disabled={text === Text.Subscribing}
+          type="green"
+          buttonType="submit"
+        >
+          {text}
+        </Button>
+      </form>
+      <p className={styles.note}>
+        No spam, unsubscribe at any time. We respect your privacy.
+      </p>
+      <ul>
+        <li>Monthly insights</li>
+        <li>Latest techniques</li>
+        <li>Handbook updates</li>
+      </ul>
+    </div>
+  )
+}
+
+export default LinkList

src/components/Newsletter/styles.module.css

@@ -0,0 +1,100 @@
+.emailIcon {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-image: url('/img/email.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.root {
+  border: 1px solid #dcfce7;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 1.5rem 0;
+  padding: 2rem 1rem;
+  background-image: linear-gradient(to right, #f8fafc, #f0fdf4);
+  text-align: center;
+}
+
+.root h3 {
+  font-size: 1.5rem;
+  line-height: 1.5;
+  font-weight: 700;
+  color: #111827;
+  margin: 0.5rem 0;
+}
+
+.root p {
+  color: #4b5563;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+.root ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  row-gap: 0.1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.root form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.root form input {
+  height: 32px;
+  font-family: inherit;
+  flex: 1;
+  display: block;
+  border: 1px solid #d1d5db;
+  border-radius: 0.625rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  max-width: 300px;
+  transition: all 0.3s ease-in-out;
+}
+
+.root form input:focus {
+  outline: none;
+  border: 1px solid #4ade80;
+  box-shadow: 0 0 0 2px #bbf7d0;
+}
+
+.root .note {
+  font-size: 0.875rem;
+}
+
+.root ul li {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.root ul li::before {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background-image: url('/img/check.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}