lp: blog article community developed feature (#1091)

apps/formbricks-com/components/shared/SlideInBanner.tsx

@@ -1,18 +1,23 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
 import { Button } from "@formbricks/ui";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
 interface Props {
-  delay?: number; // in milliseconds, optional
-  scrollPercentage?: number; // optional
-  UTMSource: string; // required
+  delay?: number;
+  scrollPercentage?: number;
+  UTMSource: string;
 }
 
 const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, UTMSource }) => {
   const [showBanner, setShowBanner] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
 
   useEffect(() => {
+    if (isDismissed) return;
+
     const timer = setTimeout(() => {
       setShowBanner(true);
     }, delay);
@@ -31,17 +36,23 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
       clearTimeout(timer);
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [delay, scrollPercentage]);
+  }, [delay, scrollPercentage, isDismissed]);
+
+  if (isDismissed) return null;
 
   return (
     <div
-      className={`sticky bottom-4 grid grid-cols-7 rounded-lg bg-slate-700 bg-opacity-70 p-4 text-white backdrop-blur-sm transition-all duration-500 ease-out ${
-        showBanner ? "visible translate-y-0 opacity-100" : "invisible translate-y-full opacity-0"
+      className={`lg:gird-cols-6 relative sticky bottom-4 grid rounded-lg bg-slate-700 bg-opacity-70 p-4 text-white backdrop-blur-sm transition-all duration-500 ease-out lg:grid-cols-7 ${
+        showBanner && !isExiting
+          ? "visible translate-y-0 opacity-100"
+          : isExiting
+          ? "visible translate-y-full opacity-0"
+          : "invisible translate-y-full opacity-0"
       }`}>
       <div className="relative col-span-1 hidden lg:block">
         <Image src={LFGLuigi} height={150} className="absolute -bottom-16 left-8" alt="LFG Luigi" />
       </div>
-      <div className="col-span-7 flex items-center space-x-3 lg:col-span-6">
+      <div className="col-span-6 flex items-center space-x-3">
         <p>
           Did you know? Formbricks is the only open source Experience Management solution: free &
           privacy-first!
@@ -52,6 +63,14 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
           className="whitespace-nowrap">
           Learn more
         </Button>
+        <button
+          onClick={() => {
+            setIsExiting(true);
+            setTimeout(() => setIsDismissed(true), 500);
+          }}
+          className="rounded-full p-2 hover:bg-slate-600 hover:bg-opacity-30">
+          <XMarkIcon className="h-6 w-6" />
+        </button>
       </div>
     </div>
   );

apps/formbricks-com/pages/blog/first-end-to-endcommunity-feature/index.mdx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import AuthorBox from "@/components/shared/AuthorBox";
+
+import EmailGIF from "./email-embed.gif";
+import FigmaMock from "./figma-mock.webp";
+import PiyushPR from "./pr-merged.webp";
+
+export const meta = {
+  title: "The first end-to-end community developed feature is live 🚢",
+  description:
+    "We are super excited to share the first end-to-end feature build by the community: From request, over design to code implementation!",
+  date: "2023-10-11",
+  publishedTime: "2023-10-11T12:00:00",
+  authors: ["Johannes"],
+  section: "Open Source Design",
+  tags: ["Open Source Surveys", "Open Source Design", "Design", "Community Design"],
+};
+
+<AuthorBox name="Johannes" title="Co-Founder" date="October 11th, 2023" duration="4" />
+
+<p className="text-lg font-semibold">We are super excited to share the first end-to-end feature built by the community: From request, over design to code implementation ✅</p>
+
+Over the past months, several users requested an easy way to embed Formbricks surveys in an email. The embed should mock the first question and, dependent on the question type, wire the first answer through to the survey:
+
+<Image
+  src={EmailGIF}
+  alt="Email embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### Our Design Repository on GitHub
+
+Since this wasn't a priority for Formbricks, we opened an <a href="https://github.com/formbricks/design/issues/19" target="_blank">issue in our GitHub design repo</a>. Shortly after Aryan reached out and took over the user research and design. Here is the <a href="https://www.figma.com/file/6gtywfMneiONru4A5egbwi/Embedding-Experience?type=design&node-id=82%3A829&mode=design&t=mCsVx1VPtm1vPqgf-1">Figma file</a> he has been working in.
+
+Over a few iterations, we provided Aryan with feedback until we got to a solution which was scoped properly to ship as a community contribution.
+
+<Image
+  src={FigmaMock}
+  alt="Mock up embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### Core contributor chiming in
+
+After the design was done, we wrote up the ticket and reached out to Piyush, one of our most cherished community members. Piyush already built the Link Prefilling so he is familiar with the in's and out's of this feature. Additionally, working with Piyush has been a pleasure: Clear and prompt communication, clean code and quick turnaround!
+
+And so he shipped it! 🚢🚢🚢
+
+<Image
+  src={PiyushPR}
+  alt="Mock up embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### It's merged!
+
+After a final review from our end, we merged the PR and with it the first end-to-end community driven feature!
+
+Open source design isn't really a thing yet. We're super happy to pioneer looping product designers into the Open Source WIN WIN Loop: Young, aspiring designers get the chance to build their portfolio not with mock projects, but solving real problems for real users 😍 
+
+
+### Wanna try it out? 
+<a href="https://app.formbricks.com" target="_blank">Go here!</a>
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;