From 15cf28dde04e132587d6144fa1a5b0c22b10c25b Mon Sep 17 00:00:00 2001 From: Dan Farrelly Date: Thu, 5 Dec 2024 14:49:59 -0500 Subject: [PATCH] Add optional floating CTA for blog posts (#1018) --- components/Blog/FloatingCTA.tsx | 100 ++++++++++++++++++ components/ContactForm.tsx | 7 +- data/github.json | 4 +- package.json | 4 +- pages/blog/[slug].tsx | 9 +- ...ifying-queues-modern-kafka-alternative.mdx | 2 + .../why-your-queue-is-slowing-you-down.mdx | 1 + pages/contact.tsx | 14 +-- styles/globals.css | 2 +- 9 files changed, 125 insertions(+), 18 deletions(-) create mode 100644 components/Blog/FloatingCTA.tsx diff --git a/components/Blog/FloatingCTA.tsx b/components/Blog/FloatingCTA.tsx new file mode 100644 index 000000000..447bc3ba7 --- /dev/null +++ b/components/Blog/FloatingCTA.tsx @@ -0,0 +1,100 @@ +"use client"; +import { useState } from "react"; +import Link from "next/link"; +import clsx from "clsx"; +import { + RiArrowRightSLine, + RiArrowDownSLine, + RiChat1Line, +} from "@remixicon/react"; + +export default function FloatingCTA({ ctaRef }: { ctaRef: string }) { + const [open, setOpen] = useState(true); + const [mobileOpen, setMobileOpen] = useState(false); + return ( + + ); +} diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx index 60e3d521d..fd419f64d 100644 --- a/components/ContactForm.tsx +++ b/components/ContactForm.tsx @@ -59,7 +59,7 @@ export default function ContactForm({ return (
diff --git a/data/github.json b/data/github.json index a2d0af89e..d0940f448 100644 --- a/data/github.json +++ b/data/github.json @@ -1,4 +1,4 @@ { - "__generated": "File generated at 2024-11-22T19:48:40.956Z", - "stars": 2957 + "__generated": "File generated at 2024-12-05T19:06:57.597Z", + "stars": 3019 } \ No newline at end of file diff --git a/package.json b/package.json index 8c4013508..30dc5de07 100644 --- a/package.json +++ b/package.json @@ -132,9 +132,9 @@ }, "engines": { "node": "18.x", - "pnpm": "8.x" + "pnpm": "9.x" }, - "packageManager": "pnpm@8.7.0", + "packageManager": "pnpm@9.14.4", "private": true, "pnpm": { "patchedDependencies": { diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 852872668..058ca9586 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -23,6 +23,7 @@ import rehypeCodeTitles from "rehype-code-titles"; import YouTube from "react-youtube-embed"; import remarkGfm from "remark-gfm"; import { SectionProvider } from "src/shared/Docs/SectionProvider"; +import FloatingCTA from "src/components/Blog/FloatingCTA"; // import { LaunchWeekBanner } from "../index"; // @ts-ignore @@ -85,6 +86,7 @@ type Scope = { dateUpdated?: string; primaryCTA?: "sales" | "docs"; + floatingCTA?: boolean; reading: { text: string; @@ -192,7 +194,7 @@ export default function BlogLayout(props) { {/* */}
-
+
{scope.image && (
+ {scope.floatingCTA && }
@@ -300,7 +303,7 @@ function CTAs({ const visibleCTAs = primary === "sales" ? [ctas.sales, ctas.docs] : [ctas.docs, ctas.sales]; return ( -
+
+ ); } diff --git a/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx b/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx index ee9cf13da..cc2436be6 100644 --- a/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx +++ b/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx @@ -4,6 +4,8 @@ subtitle: Build reliable event-driven workflows with a streamlined developer exp image: /assets/blog/simplifying-queues-modern-kafka-alternative/featured-image.png date: 2024-11-26 author: Cheryl Manalo +primaryCTA: sales +floatingCTA: true --- Kafka is a common choice for distributed streaming, powering everything from event-driven architectures to real-time data pipelines. It's scalable, reliable, and has a massive community. Because of this, teams looking for resilient, scalable messaging often lean into Kafka for their queuing needs, assuming it can seamlessly handle these workloads too. But the truth is—Kafka wasn't really designed for traditional queuing. diff --git a/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx b/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx index 9e62b54da..d8ccc4d89 100644 --- a/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx +++ b/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx @@ -5,6 +5,7 @@ image: /assets/blog/why-your-queue-is-slowing-you-down/featured-image-v2.png date: 2024-10-28 author: Tony Holdstock-Brown primaryCTA: sales +floatingCTA: true --- If you're building complex products, you're probably using some sort of queueing system. Traditional queues help with scale, job scheduling, and managing background jobs — but as products become complex, traditional queuing systems start to fall short. While they work for basic message delivery and job processing, they often lack the higher-level abstractions required to build complex workflows. Things like workflow orchestration, multi-tenancy, and native throttling are being built into every product. diff --git a/pages/contact.tsx b/pages/contact.tsx index 7df6f876f..7388f1ffb 100644 --- a/pages/contact.tsx +++ b/pages/contact.tsx @@ -3,6 +3,7 @@ import Container from "src/shared/layout/Container"; import Footer from "src/shared/Footer"; import Quote from "src/shared/Home/Quote"; import ContactForm from "src/components/ContactForm"; +import { RiLifebuoyLine } from "@remixicon/react"; export async function getStaticProps() { return { @@ -20,19 +21,20 @@ export default function Contact() {
-
+

Chat with sales engineering

- We'll help you evaluate Inngest and show you how Inngest enables - teams to ship more reliable code, faster. + Explore and evaluate Inngest and learn about custom Enterprise + plans and pricing.

-
-

- 👋   Looking for support?{" "} +

+

+ {" "} + Looking for support?{" "} Chat on Discord {" "} diff --git a/styles/globals.css b/styles/globals.css index e63fb0e3a..96356a4fb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -73,7 +73,7 @@ /* Default to dark theme */ color: #fff; - background-color: #080D19; + background-color: rgb(var(--color-background-canvas-base)); } /* Legacy base styles */