diff --git a/apps/formbricks-com/components/shared/MetaInformation.tsx b/apps/formbricks-com/components/shared/MetaInformation.tsx index 57ab4a8e16..39961f3c52 100644 --- a/apps/formbricks-com/components/shared/MetaInformation.tsx +++ b/apps/formbricks-com/components/shared/MetaInformation.tsx @@ -4,6 +4,7 @@ interface Props { title: string; description: string; publishedTime?: string; + updatedTime?: string; authors?: string[]; section?: string; tags?: string[]; @@ -13,6 +14,7 @@ export default function MetaInformation({ title, description, publishedTime, + updatedTime, authors, section, tags, @@ -31,9 +33,10 @@ export default function MetaInformation({ - - + + {publishedTime && } + {updatedTime && } {authors && } {section && } {tags && } diff --git a/apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx b/apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx index 79233124ae..fcb738a7c5 100644 --- a/apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx +++ b/apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx @@ -1,12 +1,12 @@ import Image from "next/image"; import LayoutMdx from "@/components/shared/LayoutMdx"; +import AuthorBox from "@/components/shared/AuthorBox"; 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"; -import AuthorBox from "@/components/shared/AuthorBox"; export const meta = { title: "5 Open Source Survey and Form Tools maintained in 2023", diff --git a/apps/formbricks-com/pages/learn/[slug].tsx b/apps/formbricks-com/pages/learn/[slug].tsx new file mode 100644 index 0000000000..055a15f7b3 --- /dev/null +++ b/apps/formbricks-com/pages/learn/[slug].tsx @@ -0,0 +1,42 @@ +export async function getStaticPaths() { + const response = await fetch("http://localhost:1337/api/learn-articles?populate="); + const articles = await response.json(); + + console.log("articles.data", articles.data); + + const firstArticle = await fetch("http://localhost:1337/api/learn-articles/1?populate=*"); + const firstArticleJSON = await firstArticle.json(); + + console.log("firstArticleJSON", firstArticleJSON); + + if (!Array.isArray(articles.data)) { + console.error("Expected articles.data to be an array but got:", articles.data); + return { paths: [], fallback: true }; + } + + const paths = articles.data.map((article) => ({ + params: { slug: article.attributes.slug }, // Adjust this to match the actual path to the slug in your data + })); + + return { paths, fallback: true }; +} + +export async function getStaticProps({ params }) { + const article = await fetch(`http://localhost:1337/api/learn-articles?slug=${params.slug}`) + .then((response) => response.json()) + .then((data) => data[0]); + + return { props: { article } }; +} + +export default function ArticlePage({ article }) { + if (!article) return
Loading...
; // Render a loading state if data hasn't been fetched yet + + return ( +
+

{article.title}

+

By {article.author}

+ {/* Render the rest of the article data here */} +
+ ); +} diff --git a/apps/formbricks-com/pages/newblog/[slug].tsx b/apps/formbricks-com/pages/newblog/[slug].tsx new file mode 100644 index 0000000000..0c48004d00 --- /dev/null +++ b/apps/formbricks-com/pages/newblog/[slug].tsx @@ -0,0 +1,66 @@ +import Image from "next/image"; +import LayoutMdx from "@/components/shared/LayoutMdx"; +import AuthorBox from "@/components/shared/AuthorBox"; +import MetaInformation from "../../components/shared/MetaInformation"; + +export async function getStaticPaths() { + const response = await fetch("http://localhost:1337/api/blog-articles?populate=*"); + const articles = await response.json(); + + console.log("articles.data", JSON.stringify(articles.data, null, 2)); + console.log("articles", articles); + + const paths = articles.data.map((article) => ({ + params: { slug: article.attributes.article[0].slug }, + })); + + return { paths, fallback: true }; +} + +export async function getStaticProps({ params }) { + const res = await fetch(`http://localhost:1337/api/blog-articles?populate=*`); + if (!res.ok) { + throw new Error("Something went wrong"); + } + const resData = await res.json(); + const articles = resData.data; + // find article by slug attribute + console.log("articles", articles); + const article = articles.find((a) => a.attributes.article[0].slug === params.slug); + return { props: { article } }; +} + +export const meta = { + title: "5 Open Source Survey and Form Tools maintained in 2023", + description: + "Most open source projects get abandoned after a while. But these 5 open source survey tools are still alive and kicking in 2023.", + date: "2023-04-12", + publishedTime: "2023-04-12T12:00:00", + authors: ["Johannes"], + section: "Open Source Surveys", + tags: ["Open Source Surveys", "Formbricks", "Typeform", "SurveyJS", "Typebot", "OpnForm", "LimeSurvey"], +}; + +export default function ArticlePage({ article }) { + if (!article) return
Loading...
; // Render a loading state if data hasn't been fetched yet + + return ( +
+ +
{JSON.stringify(article, null, 2)}
+
+ ); +} diff --git a/apps/formbricks-com/pages/templates/product-market-fit-survey/index.tsx b/apps/formbricks-com/pages/templates/product-market-fit-survey/index.tsx new file mode 100644 index 0000000000..38e5ea52be --- /dev/null +++ b/apps/formbricks-com/pages/templates/product-market-fit-survey/index.tsx @@ -0,0 +1,49 @@ +import DemoPreview from "@/components/dummyUI/DemoPreview"; +import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation"; +import Layout from "@/components/shared/Layout"; +import UseCaseHeader from "@/components/shared/UseCaseHeader"; +import { useEffect } from "react"; + +export default function OnboardingSegmentationPage() { + useEffect(() => { + fetch("http://localhost:1337/api/templates") + .then((response) => response.json()) + .then((data) => console.log(data)) + .catch((error) => console.error("An error occurred:", error)); + }, []); + + return ( + +
+
+ +

+ Why is it useful? +

+

+ In your Onboarding you likely want to ask two or three questions to be able to segment your users + best. These attributes can be used to create cohorts and survey users down the line. You can + identify who uses your product most and use Formbricks to gather relevant qualitative data on + scale. +

+

+ How to get started: +

+

+ Onboardings are unique to every product. Formbricks does not help you build the right onboarding. + Currently, you can use the Formbricks API to send survey data to Formbricks for later usage. Down + the line, we might offer a simple way to add survey questions to your Onboarding. +

+
+ + +
+

+ Other Best Practices +

+ +
+ ); +}