SEO listicle, all blog links in new tab

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

@@ -6,7 +6,7 @@ import { Fragment, useState } from "react";
 import { Button } from "@formbricks/ui";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
-import { PlayCircleIcon } from "@heroicons/react/24/solid";
+import { PlayCircleIcon, StarIcon } from "@heroicons/react/24/solid";
 import VideoWalkThrough from "../home/VideoWalkThrough";
 
 export default function Header() {
@@ -52,10 +52,18 @@ export default function Header() {
         </Popover.Group>
         <div className="hidden flex-1 items-center justify-end md:flex">
           <ThemeSelector className="relative z-10 mr-5" />
-          <Button variant="secondary" className="px-2" onClick={() => setVideoModal(true)}>
+          <Button
+            variant="secondary"
+            className="group px-2"
+            href="https://formbricks.com/github"
+            target="_blank">
+            <StarIcon className="h-6 w-6 text-amber-500 group-hover:text-amber-400" />
+          </Button>
+          <Button variant="secondary" className="ml-2 px-2" onClick={() => setVideoModal(true)}>
             <VideoWalkThrough open={videoModal} setOpen={() => setVideoModal(false)} />
             <PlayCircleIcon className="h-6 w-6" />
           </Button>
+
           {/*           <Button
             variant="secondary"
             EndIcon={GitHubIcon}
@@ -85,7 +93,7 @@ export default function Header() {
           focus
           className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
           <div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
-            <div className="px-5 pt-5 pb-6">
+            <div className="px-5 pb-6 pt-5">
               <div className="flex items-center justify-between">
                 <div>
                   <FooterLogo className="h-8 w-auto" />

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

@@ -2,6 +2,25 @@ import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";
 import { Prose } from "./Prose";
+import { useEffect } from "react";
+
+const useExternalLinks = (selector: string) => {
+  useEffect(() => {
+    const links = document.querySelectorAll(selector);
+
+    links.forEach((link) => {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    });
+
+    return () => {
+      links.forEach((link) => {
+        link.removeAttribute("target");
+        link.removeAttribute("rel");
+      });
+    };
+  }, [selector]);
+};
 
 interface Props {
   meta: {
@@ -12,11 +31,12 @@ interface Props {
 }
 
 export default function LayoutMdx({ meta, children }: Props) {
+  useExternalLinks(".prose a");
   return (
     <div className="flex h-screen flex-col justify-between">
       <MetaInformation title={meta.title} description={meta.description} />
       <Header />
-      <main className="min-w-0 max-w-2xl flex-auto px-4 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
+      <main className="min-w-0 max-w-2xl flex-auto px-4 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
         <article className="mx-auto my-16 max-w-3xl px-2">
           {meta.title && (
             <header className="mb-9 space-y-1">

apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx

@@ -0,0 +1,118 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Formbricks from "./open-source-survey-software-free-2023-formbricks-typeform-alternative.png";
+import Typebot from "./typebot-open-source-free-conversational-form-builder-survey-software-opensource.jpg";
+import LimeSurvey from "./free-survey-tool-limesurvey-open-source-software-opensource.png";
+import OpnForm from "./opnform-free-open-source-form-survey-tools-builder-2023-self-hostign.jpg";
+import HeaderImage from "./2023-title-best-open-source-survey-software-tools-and-alternatives.png";
+import SurveyJS from "./surveyjs-free-opensource-form-survey-tool-software-to-make-surveys-2023.png";
+
+export const meta = {
+  title: "Best Open-source Form & Survey Tools (still maintained in 2023)",
+  description:
+    "Most open-source projects get abandoned after a while. But these 5 open-source form and survey tools are still alive and kicking in 2023.",
+  date: "2023-04-12",
+};
+
+_Most open-source projects get abandoned after a while. But these 5 open-source form and survey tools are still alive and kicking in 2023._
+
+<Image
+  src={HeaderImage}
+  alt="Free and self-hostable: Find the 5 best (and maintained) open-source survey tools 2023."
+  className="rounded-lg"
+/>
+
+Looking for the perfect open-source form and survey tool to help you gather valuable insights and improve your business? Look no further!
+
+We've compiled a list of the top 5 open-source form and survey tools that are still maintained in 2023. In-product surveys, conversational bots, AI-generated surveys: These tools offer various features that cater to different needs.
+
+## 1. Formbricks - In-product micro-surveys
+
+<Image
+  src={Formbricks}
+  alt="Formbricks is a free and open-source survey software for in-product micro-surveys. Ask any segment at any point in time."
+  className="rounded-lg"
+/>
+
+Formbricks is a powerful open-source form and survey solution designed to help you get better experience data for your business. This tool allows you to survey specific customer segments at any point in the user journey, providing you with invaluable insights into what your customers think and feel.
+
+- 👍 **Pre-segment users:** Don't ask everyone, all the time. Granularly segment your user base to get deep insights
+- 👍 **Event-based surveys:** Trigger surveys based on user behavior, such as page views, clicks, and more
+- 👍 **Extensive template library:** Choose from a wide range of templates to create surveys that answer your question
+- 👍 **Easy self-hosting:** Docker makes it possible to self-host Formbricks in minutes.
+- ⚠️ **It's early for Formbricks.** Product developes rapidly but might encounter a bug here and there.
+
+[Try it out](https://app.formbricks.com), [read more](https://formbricks.com) or dive into the [code base.](https://formbricks.com/github)
+
+## 2. SurveyJS - Build-it-yourself libraries
+
+<Image src={SurveyJS} alt="SurveyJS is a comprehensive" className="rounded-lg" />
+
+SurveyJS is a collection of JavaScript Librarys to build forms. Building your own form management system has never been easier than with SurveyJS. It packs:
+
+- 👍 **Library:** A JavaScript library to render surveys and forms
+- 👍 **Analytics:** A dashboard to analyze survey and form results
+- 👍 **Editor:** A visual editor to create surveys and forms
+- 👍 **PDF:** A library to render survey and form rersults as PDF
+- ⚠️ **Pricing:** Starts at $499 / year
+
+[Dive into the code on GitHub](https://github.com/surveyjs)
+
+## 3. Typebot - Truly conversational Forms
+
+<Image src={Typebot} alt="SurveyJS is a comprehensive" className="rounded-lg" />
+
+Coming in at number three on our list is Typebot, that makes it really easy to create conversational forms and surveys. Typebot helps you engage with your audience in a more interactive way, leading to higher response rates and better data. It comes with:
+
+- 👍 **A slick visual** editor to create conversational forms and surveys
+- 👍 A library to render conversational forms and surveys **on your website**
+- 👍 A dashboard to **analyze survey and form results**
+- 👍 **Lots of integrations** to pipe your data to
+- ⚠️ **Limited to conversational forms.** If you need more classical forms, this might not be the right tool for you.
+
+[Dive into the code on GitHub](https://github.com/baptisteArno/typebot.io)
+
+## 4. OpnForm - Straight-forward survey builder
+
+<Image src={OpnForm} alt="SurveyJS is a comprehensive" className="rounded-lg" />
+
+OpnForms is a flexible and powerful open-source form and survey tool designed to make data collection easy and efficient. OpnForm packs lots of features, especially for a Beta:
+
+- 👍 **Multiple Question Types:** Choose from a wide variety of question types to create highly customizable forms and surveys.
+- 👍 **Conditional Logic:** Show or hide questions based on previous responses to create personalized surveys.
+- 👍 **Export Data:** Easily export collected data in various formats for further analysis.
+- ⚠️ The UI is a bit **stuffed and not very intuitive.**
+
+[Dive into the code on GitHub](https://github.com/JhumanJ/OpnForm)
+
+## 5. LimeSurvey - Old (but gold?)
+
+<Image src={LimeSurvey} alt="SurveyJS is a comprehensive" className="rounded-lg" />
+
+LimeSurvey has been around for at least a decade. It's a powerful survey tool made for more classical, scientific surveying. It packs:
+
+- 👍 **Multilingual Surveys:** Create surveys in multiple languages to reach a global audience.
+- 👍 **Extensive Question Types:** Choose from a wide range of question types to create highly engaging surveys.
+- 👍 **Advanced Logic:** Utilize advanced survey logic features to personalize your surveys and capture more accurate data.
+- 👍 **Survey Templates:** Start with pre-built survey templates to save time and effort.
+- ⚠️ **Very old-fashioned UI:** The product is quite the opposite of slick and user-friendly.
+
+[Dive into the code on GitHub](https://github.com/LimeSurvey/LimeSurvey)
+
+## Summary ☟
+
+In this article, we've rounded up the top 5 open-source form and survey tools that are still rocking it in 2023. Perfect for devs who are always on the lookout for the latest and greatest!
+
+1. Formbricks: A game-changer for in-product micro-surveys, letting you target specific customer segments at any point in their journey. It's still early days, but this bad boy is worth keeping an eye on.
+
+2. SurveyJS: A must-have for DIY enthusiasts, this collection of JavaScript libraries makes building your own form management system a breeze. Just remember, the starting price is $499/year.
+
+3. Typebot: Make your forms and surveys truly conversational with Typebot's slick visual editor and user-friendly interface. Just note that it's limited to conversational forms.
+
+4. OpnForm: A flexible and powerful tool that's all about making data collection simple and efficient. It's still in Beta, so the UI might not be super polished, but it's packed with features.
+
+5. LimeSurvey: An oldie but a goldie. This veteran survey tool is perfect for more traditional, scientific surveying. Just be prepared to deal with its old-fashioned UI.
+
+Take a peek at these tools, and we're sure you'll find one that suits your needs. Happy surveying!
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;