strapi setup working

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({
       <meta property="og:image:height" content="630" />
       <meta property="og:locale" content="en_US" />
       <meta property="og:type" content="website" />
-      <meta property="og:site_name" content="Open Source Experience Management, Privacy-first" />
-      <meta property="article:publisher" content="Formbricks" />
+      <meta property="og:site_name" content="Formbricks Privacy-first Experience Management Solution" />
+      <meta property="article:publisher" content="Formbricks GmbH" />
       {publishedTime && <meta property="article:published_time" content={publishedTime} />}
+      {updatedTime && <meta property="article:updated_time" content={updatedTime} />}
       {authors && <meta property="article:author" content={authors.join(", ")} />}
       {section && <meta property="article:section" content={section} />}
       {tags && <meta property="article:tag" content={tags.join(", ")} />}

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",

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 <div>Loading...</div>; // Render a loading state if data hasn't been fetched yet
+
+  return (
+    <div>
+      <h1>{article.title}</h1>
+      <p>By {article.author}</p>
+      {/* Render the rest of the article data here */}
+    </div>
+  );
+}

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 <div>Loading...</div>; // Render a loading state if data hasn't been fetched yet
+
+  return (
+    <div>
+      <MetaInformation
+        title={article.attributes.metadata[0].metaTitle}
+        description={article.attributes.metadata[0].metaDescription}
+        publishedTime={article.attributes.publishedAt} // Or however you want to handle this
+        authors={undefined} // You'll need to provide this value
+        section={article.attributes.metadata[0].metaSection}
+        tags={[
+          article.attributes.metadata[0].tag1,
+          article.attributes.metadata[0].tag2,
+          article.attributes.metadata[0].tag3,
+          article.attributes.metadata[0].tag3,
+          article.attributes.metadata[0].tag3,
+        ]}
+      />
+      <pre>{JSON.stringify(article, null, 2)}</pre>
+    </div>
+  );
+}

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 (
+    <Layout
+      title="Onboarding Segmentation"
+      description="Add a survey to your onboarding to loop in Formbricks right from the start.">
+      <div className="grid grid-cols-1 items-center md:grid-cols-2 md:gap-12 md:py-20">
+        <div className="p-6 md:p-0">
+          <UseCaseHeader title="Onboarding Segments" difficulty="Advanced" setupMinutes="90" />
+          <h3 className="text-md mb-1.5 mt-6 font-semibold text-slate-800 dark:text-slate-200">
+            Why is it useful?
+          </h3>
+          <p className="text-slate-600 dark:text-slate-400">
+            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.
+          </p>
+          <h3 className="text-md mb-1.5 mt-6 font-semibold text-slate-800 dark:text-slate-200">
+            How to get started:
+          </h3>
+          <p className="text-slate-600 dark:text-slate-400">
+            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.
+          </p>
+        </div>
+
+        <DemoPreview template="Onboarding Segmentation" />
+      </div>
+      <h2 className="mb-6 ml-4 mt-12 text-2xl font-semibold text-slate-700 dark:text-slate-400 md:mt-0">
+        Other Best Practices
+      </h2>
+      <BestPracticeNavigation />
+    </Layout>
+  );
+}