Newsletter form card (don't merge)

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.3.4",
+    "@theguild/components": "9.6.0",
     "date-fns": "4.1.0",
     "next": "15.2.3",
     "react": "19.0.0",

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'

packages/web/docs/src/app/blog/components/newsletter-form-card.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { CallToAction, cn, Heading } 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 lastMessage = useRef<string>();
+  lastMessage.current = state?.message || lastMessage.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>
+        <div className="relative mt-4">
+          <p style={{ opacity: lastMessage.current ? 0 : 1 }}>
+            Get the latest insights and best practices on GraphQL API management delivered straight
+            to your inbox.
+          </p>
+          {lastMessage.current && <p className="absolute inset-0">{lastMessage.current}</p>}
+        </div>
+      </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',
+            });
+
+            setState((await response.json()) as { status: 'success' | 'error'; message: string });
+          } 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 });
+            }
+
+            setState({ status: 'error', message: 'Something went wrong. Please let us know.' });
+          }
+        }}
+      >
+        <Input name="email" placeholder="E-mail" error={state?.status === 'error'} />
+        {!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>
+  );
+}
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+function Input({ error, ...props }: InputProps) {
+  /* todo: add this to theguild/components */
+  return (
+    <input
+      {...props}
+      className={cn(
+        'hover:placeholder:text-green-1000/60 w-full rounded-lg border border-blue-400 bg-white py-3 indent-4 font-medium placeholder:text-green-800 autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,255)] autofill:first-line:font-sans focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800/40 focus-visible:ring-0',
+        props.className,
+        error && 'border-critical-dark/20 !outline-critical-dark',
+      )}
+    />
+  );
+}

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>
   );
 }

packages/web/docs/src/app/blog/components/posts-by-tag/latest-posts.tsx

@@ -3,9 +3,29 @@ 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);
+export function LatestPosts({
+  posts,
+  tag,
+  children,
+}: {
+  posts: BlogPostFile[];
+  tag: string | null;
+  children?: React.ReactNode;
+}) {
+  // 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 +41,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">

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>
   );
 }

packages/web/docs/src/app/layout.tsx

@@ -98,7 +98,7 @@ export default async function HiveDocsLayout({ children }: { children: ReactNode
               children: 'Case Studies',
             },
             {
-              href: 'https://the-guild.dev/graphql/hive/blog',
+              href: '/blog',
               icon: <PencilIcon />,
               children: 'Blog',
             },

packages/web/docs/tailwind.config.ts

@@ -42,6 +42,7 @@ const config: Config = {
     },
   },
   plugins: [
+    ...baseConfig.plugins,
     tailwindcssRadix({ variantPrefix: 'rdx' }),
     tailwindcssAnimate,
     blockquotesPlugin(),