Newsletter form card (#6688)

hasparus · web-flow · commit 3ccd2c3e7b54 · 2025-04-07T12:57:16.000+05:30
diff --git a/packages/web/docs/package.json b/packages/web/docs/package.json
@@ -16,7 +16,7 @@
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.6",
-    "@theguild/components": "9.5.0",
+    "@theguild/components": "9.7.0",
     "date-fns": "4.1.0",
     "next": "15.2.4",
     "react": "19.0.0",
diff --git a/packages/web/docs/src/app/blog/components/blog-tag-chip.tsx b/packages/web/docs/src/app/blog/components/blog-tag-chip.tsx
@@ -11,7 +11,7 @@ export function BlogTagChip({ tag, colorScheme, inert }: BlogTagChipProps) {
   const className = cn(
     'rounded-full px-3 py-1 text-white text-sm',
     colorScheme === 'featured'
-      ? 'dark:bg-primary/80 dark:text-neutral-900 bg-green-800'
+      ? 'dark:bg-primary/90 dark:text-neutral-900 bg-green-800'
       : 'bg-beige-800 dark:bg-beige-800/40',
     !inert &&
       (colorScheme === 'featured'
diff --git a/packages/web/docs/src/app/blog/components/newsletter-form-card.tsx b/packages/web/docs/src/app/blog/components/newsletter-form-card.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { CallToAction, cn, Heading, Input } from '@theguild/components';
+
+export function NewsletterFormCard(props: React.HTMLAttributes<HTMLElement>) {
+  type Idle = undefined;
+  type Pending = { status: 'pending'; message?: never };
+  type Success = { status: 'success'; message: string };
+  type Error = { status: 'error'; message: string };
+  type State = Idle | Pending | Success | Error;
+  const [state, setState] = useState<State>();
+
+  // we don't want to blink a message on retries when request is pending
+  const lastErrorMessage = useRef<string>();
+  lastErrorMessage.current = state?.message || lastErrorMessage.current;
+
+  return (
+    <article
+      {...props}
+      className={cn(
+        props.className,
+        'bg-primary dark:bg-primary/95 light @container/card text-green-1000 relative rounded-2xl',
+      )}
+    >
+      <div className="p-6 pb-0">
+        <Heading
+          as="h3"
+          size="xs"
+          className="@[354px]/card:text-5xl/[56px] @[354px]/card:tracking-[-0.48px]"
+        >
+          Stay in the loop
+        </Heading>
+        <p className="relative mt-4">
+          Get the latest insights and best practices on GraphQL API management delivered straight to
+          your inbox.
+        </p>
+      </div>
+      <form
+        className="relative z-10 p-6"
+        onSubmit={async event => {
+          event.preventDefault();
+          const email = event.currentTarget.email.value;
+
+          if (!email?.includes('@')) {
+            setState({ status: 'error', message: 'Please enter a valid email address.' });
+            return;
+          }
+
+          setState({ status: 'pending' });
+
+          try {
+            const response = await fetch('https://utils.the-guild.dev/api/newsletter-subscribe', {
+              body: JSON.stringify({ email }),
+              method: 'POST',
+            });
+
+            const json = await response.json();
+            if (json.status === 'success') {
+              lastErrorMessage.current = undefined;
+              setState({ status: 'success', message: json.message });
+            } else {
+              setState({ status: 'error', message: json.message });
+            }
+          } catch (e: unknown) {
+            if (!navigator.onLine) {
+              setState({
+                status: 'error',
+                message: 'Please check your internet connection and try again.',
+              });
+            }
+
+            if (e instanceof Error && e.message !== 'Failed to fetch') {
+              setState({ status: 'error', message: e.message });
+              return;
+            }
+
+            setState({ status: 'error', message: 'Something went wrong. Please let us know.' });
+          }
+        }}
+      >
+        <Input
+          name="email"
+          placeholder="E-mail"
+          severity={lastErrorMessage.current ? 'critical' : undefined}
+          message={lastErrorMessage.current}
+        />
+        {!state || state.status === 'error' ? (
+          <CallToAction type="submit" variant="secondary-inverted" className="mt-2 !w-full">
+            Subscribe
+          </CallToAction>
+        ) : state.status === 'pending' ? (
+          <CallToAction
+            type="submit"
+            variant="secondary-inverted"
+            className="mt-2 !w-full"
+            disabled
+          >
+            Subscribing...
+          </CallToAction>
+        ) : state.status === 'success' ? (
+          <CallToAction
+            type="reset"
+            variant="secondary-inverted"
+            className="group/button mt-2 !w-full before:absolute"
+            onClick={() => {
+              // the default behavior of <button type="reset"> doesn't work here
+              // because it gets unmounted too fast
+              setTimeout(() => {
+                setState(undefined);
+              }, 0);
+            }}
+          >
+            <span className="group-hover/button:hidden group-focus/button:hidden">Subscribed</span>
+            <span aria-hidden className="hidden group-hover/button:block group-focus/button:block">
+              Another email?
+            </span>
+          </CallToAction>
+        ) : null}
+      </form>
+      <DecorationArch color="#A2C1C4" className="absolute bottom-0 right-0" />
+    </article>
+  );
+}
+
+function DecorationArch({ className, color }: { className?: string; color: string }) {
+  return (
+    <svg width="200" height="200" viewBox="0 0 200 200" fill="none" className={className}>
+      <path
+        d="M6.72485 73.754C2.74132 77.7375 0.499999 83.1445 0.499999 88.7742L0.499998 199.5L41.2396 199.5L41.2396 74.3572C41.2396 56.0653 56.0652 41.2396 74.3571 41.2396L199.5 41.2396L199.5 0.500033L88.7741 0.500032C83.1444 0.500032 77.7374 2.74135 73.7539 6.72488L42.0931 38.3857L38.3856 42.0932L6.72485 73.754Z"
+        stroke="url(#paint0_linear_2735_2359)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2735_2359"
+          x1="100"
+          y1="104.605"
+          x2="6.24999"
+          y2="3.28952"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color} stopOpacity="0" />
+          <stop offset="1" stopColor={color} stopOpacity="0.8" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/web/docs/src/app/blog/components/posts-by-tag/index.tsx b/packages/web/docs/src/app/blog/components/posts-by-tag/index.tsx
@@ -17,7 +17,12 @@ const TOP_10_TAGS = [
   'graphql-tools',
 ];
 
-export function PostsByTag(props: { posts: BlogPostFile[]; tag?: string; className?: string }) {
+export function PostsByTag(props: {
+  posts: BlogPostFile[];
+  tag?: string;
+  className?: string;
+  children?: React.ReactNode;
+}) {
   const tag = props.tag ?? null;
 
   const posts = [...props.posts].sort(
@@ -33,7 +38,9 @@ export function PostsByTag(props: { posts: BlogPostFile[]; tag?: string; classNa
     <section className={cn('px-4 sm:px-6', props.className)}>
       <CategorySelect tag={tag} categories={categories} />
       <FeaturedPosts posts={posts} className="sm:mb-12 md:mt-16" tag={tag} />
-      <LatestPosts posts={posts} tag={tag} />
+      <LatestPosts posts={posts} tag={tag}>
+        {props.children}
+      </LatestPosts>
     </section>
   );
 }
diff --git a/packages/web/docs/src/app/blog/components/posts-by-tag/latest-posts.tsx b/packages/web/docs/src/app/blog/components/posts-by-tag/latest-posts.tsx
@@ -1,11 +1,55 @@
+'use client';
+
+// ^ todo: this "use client" is temporary until we test the newsletter card on prod
+import { useEffect, useState } from 'react';
 import { Heading } from '@theguild/components';
 import { BlogPostFile } from '../../blog-types';
 import { BlogCard } from '../blog-card';
 import { prettyPrintTag } from '../pretty-print-tag';
 
-export function LatestPosts({ posts, tag }: { posts: BlogPostFile[]; tag: string | null }) {
-  const firstTwelve = posts.slice(0, 12); // it needs to be 12, because we have 2/3/4 column layouts
-  const rest = posts.slice(12);
+// There's a CORS error from deploy previews and I'd rather test it before giving it to users.
+function useTemporaryFeatureFlag() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const flag = searchParams.get('newsletter-form-card');
+    if (flag === '1') {
+      setVisible(true);
+    }
+  }, []);
+
+  return visible;
+}
+
+export function LatestPosts({
+  posts,
+  tag,
+  children,
+}: {
+  posts: BlogPostFile[];
+  tag: string | null;
+  children?: React.ReactNode;
+}) {
+  // TODO: remove this once we test the newsletter card on prod
+  if (!useTemporaryFeatureFlag()) {
+    children = undefined;
+  }
+
+  // it needs to be 12, because we have 2/3/4 column layouts
+  const itemsInFirstSection = children ? 11 : 12;
+  const firstTwelve = posts.slice(0, itemsInFirstSection);
+  const rest = posts.slice(itemsInFirstSection);
+
+  const firstSection = firstTwelve.map(post => (
+    <li key={post.route} className="*:h-full">
+      <BlogCard post={post} tag={tag} />
+    </li>
+  ));
+
+  if (children) {
+    firstSection.splice(7, 0, <li key="extra">{children}</li>);
+  }
 
   return (
     <section className="pt-6 sm:pt-12">
@@ -21,13 +65,7 @@ export function LatestPosts({ posts, tag }: { posts: BlogPostFile[]; tag: string
         )}
       </Heading>
       <ul className="mt-6 grid grid-cols-1 gap-4 sm:grid sm:grid-cols-2 sm:gap-6 md:mt-16 lg:grid-cols-3 xl:grid-cols-4">
-        {firstTwelve.map(post => {
-          return (
-            <li key={post.route} className="*:h-full">
-              <BlogCard post={post} tag={tag} />
-            </li>
-          );
-        })}
+        {firstSection}
       </ul>
       <details className="mt-8 sm:mt-12">
         <summary className="bg-beige-200 text-green-1000 border-beige-300 hover:bg-beige-300 hive-focus mx-auto w-fit cursor-pointer select-none list-none rounded-lg border px-4 py-2 hover:border-current dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700 [&::marker]:hidden [[open]>&]:mb-8 [[open]>&]:sm:mb-12">
diff --git a/packages/web/docs/src/app/blog/page.tsx b/packages/web/docs/src/app/blog/page.tsx
@@ -1,5 +1,6 @@
 import { getPageMap } from '@theguild/components/server';
 import { isBlogPost } from './blog-types';
+import { NewsletterFormCard } from './components/newsletter-form-card';
 import { PostsByTag } from './components/posts-by-tag';
 // We can't move this page to `(index)` dir together with `tag` page because Nextra crashes for
 // some reason. It will cause an extra rerender on first navigation to a tag page, which isn't
@@ -16,7 +17,9 @@ export default async function BlogPage() {
 
   return (
     <BlogPageLayout>
-      <PostsByTag posts={allPosts} />
+      <PostsByTag posts={allPosts}>
+        <NewsletterFormCard />
+      </PostsByTag>
     </BlogPageLayout>
   );
 }
diff --git a/packages/web/docs/tailwind.config.ts b/packages/web/docs/tailwind.config.ts
@@ -91,6 +91,7 @@ function blockquotesPlugin() {
   });
 }
 
+// TODO: This should probably go to a shared Tailwind config
 function firefoxVariantPlugin() {
   return plugin((api: PluginAPI) => {
     const { addVariant, e, postcss } = api as PluginAPI & { postcss: any };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,7 @@ function blockquotesPlugin() {`
`91`	`91`	`});`
`92`	`92`	`}`
`93`	`93`
	`94`	`+// TODO: This should probably go to a shared Tailwind config`
`94`	`95`	`function firefoxVariantPlugin() {`
`95`	`96`	`return plugin((api: PluginAPI) => {`
`96`	`97`	`const { addVariant, e, postcss } = api as PluginAPI & { postcss: any };`