This is an automated email from the ASF dual-hosted git repository.
xiangfu pushed a commit to branch new-site-dev
in repository https://gitbox.apache.org/repos/asf/pinot-site.git
The following commit(s) were added to refs/heads/new-site-dev by this push:
new 62f46070 WB-396 - Add newsletter using HS API (#136)
62f46070 is described below
commit 62f46070a39daa04a59b6c4335871d807443e13d
Author: Gio <[email protected]>
AuthorDate: Mon Sep 23 10:31:39 2024 +0200
WB-396 - Add newsletter using HS API (#136)
---
app/lib/api.utils.ts | 2 +
components/Footer.tsx | 21 ++++------
components/Newsletter.tsx | 103 ++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 112 insertions(+), 14 deletions(-)
diff --git a/app/lib/api.utils.ts b/app/lib/api.utils.ts
new file mode 100644
index 00000000..ba59ad7f
--- /dev/null
+++ b/app/lib/api.utils.ts
@@ -0,0 +1,2 @@
+export const sleep = (ms: number): Promise<void> =>
+ new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 3f05299c..096c6f15 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,9 +1,8 @@
import Link from './Link';
-import siteMetadata from '@/data/siteMetadata';
-import SocialIcon from '@/components/social-icons';
import Logo from '@/data/logo.svg';
import GitHub from '@/data/github.svg';
-import { Rocket, ArrowRight, GithubIcon, Github, Slack } from 'lucide-react';
+import { Slack } from 'lucide-react';
+import Newsletter from './Newsletter';
// Links to be used in the footer
const links = [
@@ -107,7 +106,8 @@ export default function Footer() {
</div>
))}
</div>
- <div className="mt-4 flex justify-center md:mt-0">
+
+ <div className="mt-4 flex justify-center py-8 md:mt-0">
<Link
href="https://join.slack.com/t/apache-pinot/shared_invite/zt-5z7pav2f-yYtjZdVA~EDmrGkho87Vzw";
className="mr-4"
@@ -119,6 +119,9 @@ export default function Footer() {
</Link>
</div>
</div>
+ <div className="flex justify-center md:justify-end">
+ <Newsletter />
+ </div>
<div className="mt-8 border-t border-neutral-300 pt-4 text-left
text-sm text-gray-600">
Copyright © {new Date().getFullYear()} The Apache Software
Foundation. Apache
Pinot, Pinot, Apache, the Apache feather logo, and the Apache
Pinot project logo are
@@ -129,13 +132,3 @@ export default function Footer() {
</footer>
);
}
-
-{
- /* <div className="m-auto mt-8 border-t border-neutral-300 py-4
text-center text-sm text-gray-600 md:mt-0 md:text-left">
- Copyright © {new Date().getFullYear()} The Apache Software Foundation.
Apache Pinot, Pinot,
- Apache, the Apache feather logo, and the Apache Pinot project logo are
registered trademarks of
- The Apache Software Foundation. This page has references to third party
software - Presto,
- PrestoDB, ThirdEye, Trino, TrinoDB, that are not part of the Apache
Software Foundation and are
- not covered under the Apache License.
-</div>; */
-}
diff --git a/components/Newsletter.tsx b/components/Newsletter.tsx
new file mode 100644
index 00000000..f3734e43
--- /dev/null
+++ b/components/Newsletter.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { sleep } from '@/app/lib/api.utils';
+
+const Newsletter: React.FC = () => {
+ const [email, setEmail] = useState('');
+ const [status, setStatus] = useState<'idle' | 'loading' | 'success' |
'error'>('idle');
+ const baseUrl =
'https://api.hsforms.com/submissions/v3/integration/submit';
+ const portalId = '8658213';
+ const formId = '807be7ee-68cc-448e-9332-f9430d7caa77';
+
+ const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+ setStatus('loading');
+ const data = {
+ fields: [
+ {
+ objectTypeId: '0-1',
+ name: 'email',
+ value: email
+ }
+ ],
+ context: {
+ pageUri: window.location.href,
+ pageName: document.title
+ }
+ };
+
+ try {
+ const response = await fetch(`${baseUrl}/${portalId}/${formId}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(data)
+ });
+
+ if (response.ok) {
+ setStatus('success');
+ setEmail('');
+ } else {
+ setStatus('error');
+ }
+ await sleep(12000);
+ } catch (error) {
+ setStatus('error');
+ }
+ };
+
+ return (
+ <div className="w-full max-w-[459px] shrink-0">
+ <h3 className="mb-5 text-2xl font-normal leading-tight
tracking-tight text-gray-900 dark:text-gray-100 md:mb-7">
+ Join our newsletter
+ </h3>
+ <form
+ onSubmit={handleSubmit}
+ className="flex w-full items-center gap-x-4 rounded-full
border border-gray-200 bg-white px-5 py-3.5 dark:border-gray-700 md:px-6
md:py-3.5"
+ >
+ <input
+ type="email"
+ name="email"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ required
+ className="flex-1 border-0 bg-transparent p-0 text-sm
leading-tight tracking-tight text-gray-900 outline-0 ring-0
placeholder:text-gray-400 focus:ring-0 dark:text-gray-100
dark:placeholder:text-gray-500"
+ placeholder="Your email address"
+ disabled={status === 'loading'}
+ />
+ <Button type="submit" variant="ghost" size="icon"
className="h-6 w-6 p-0">
+ {status === 'loading' ? (
+ <span className="loading loading-spinner loading-xs" />
+ ) : (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ className="h-4 w-4"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ d="M14 5l7 7m0 0l-7 7m7-7H3"
+ />
+ </svg>
+ )}
+ <span className="sr-only">Subscribe</span>
+ </Button>
+ </form>
+ {status === 'success' && (
+ <p className="mt-2 text-green-600">Thank you for
subscribing!</p>
+ )}
+ {status === 'error' && (
+ <p className="mt-2 text-red-600">An error occurred. Please try
again.</p>
+ )}
+ </div>
+ );
+};
+
+export default Newsletter;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
