📝 Dynamic oss-friends landing page

apps/landing-page/pages/oss-friends.tsx

@@ -12,101 +12,20 @@ import { BackgroundPolygons } from 'components/Homepage/Hero/BackgroundPolygons'
 import { Footer } from 'components/common/Footer'
 import { Header } from 'components/common/Header/Header'
 import { SocialMetaTags } from 'components/common/SocialMetaTags'
+import { GetStaticPropsResult } from 'next'
 import Link from 'next/link'
 
-const OSSFriends = [
+type OSSFriend = {
-  {
+  href: string
-    name: 'Cal.com',
+  name: string
-    description:
+  description: string
-      'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+}
-    href: 'https://cal.com',
-  },
-  {
-    name: 'Crowd.dev',
-    description:
-      'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
-    href: 'https://www.crowd.dev',
-  },
-  {
-    name: 'Documenso',
-    description:
-      'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
-    href: 'https://documenso.com',
-  },
-  {
-    name: 'Erxes',
-    description:
-      'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences ​​that work for all types of business.',
-    href: 'https://erxes.io',
-  },
-  {
-    name: 'Formbricks',
-    description:
-      'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
-    href: 'https://formbricks.com',
-  },
-  {
-    name: 'Forward Email',
-    description:
-      'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
-    href: 'https://forwardemail.net',
-  },
-  {
-    name: 'GitWonk',
-    description:
-      'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
-    href: 'https://gitwonk.com',
-  },
-  {
-    name: 'HTMX',
-    description:
-      'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
-    href: 'https://htmx.org',
-  },
-  {
-    name: 'Infisical',
-    description:
-      'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
-    href: 'https://infisical.com',
-  },
-  {
-    name: 'Novu',
-    description:
-      'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
-    href: 'https://novu.co',
-  },
-  {
-    name: 'OpenBB',
-    description:
-      "The most innovative investment research platform. Open to anyone's input. Open to everyone's work.",
-    href: 'https://openbb.co',
-  },
-  {
-    name: 'Sniffnet',
-    description:
-      'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
-    href: 'https://www.sniffnet.net',
-  },
-  {
-    name: 'Webiny',
-    description:
-      'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
-    href: 'https://www.webiny.com',
-  },
-  {
-    name: 'BoxyHQ',
-    description:
-      'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
-    href: 'https://boxyhq.com',
-  },
-  {
-    name: 'Webstudio',
-    description: 'Webstudio is an open source alternative to Webflow',
-    href: 'https://webstudio.is',
-  },
-]
 
-export default function OSSFriendsPage() {
+type Props = {
+  ossFriends: OSSFriend[]
+}
+
+export default function OSSFriendsPage({ ossFriends }: Props) {
   return (
     <Stack overflowX="hidden" bgColor="gray.900">
       <Flex
@@ -142,35 +61,37 @@ export default function OSSFriendsPage() {
           </Stack>
 
           <SimpleGrid columns={[1, 2, 3]} spacing="6" maxW="1200px">
-            {OSSFriends.map((friend, index) => (
+            {ossFriends
-              <Stack
+              .filter((friend) => friend.name !== 'Typebot')
-                key={index}
+              .map((friend, index) => (
-                p="6"
+                <Stack
-                rounded="lg"
+                  key={index}
-                bgColor="gray.800"
+                  p="6"
-                color="white"
+                  rounded="lg"
-                shadow="lg"
+                  bgColor="gray.800"
-                spacing="4"
+                  color="white"
-                data-aos="fade"
+                  shadow="lg"
-                justifyContent="space-between"
+                  spacing="4"
-              >
+                  data-aos="fade"
-                <Stack spacing={4}>
+                  justifyContent="space-between"
-                  <Heading fontSize="2xl">{friend.name}</Heading>
+                >
-                  <Text>{friend.description}</Text>
+                  <Stack spacing={4}>
-                </Stack>
+                    <Heading fontSize="2xl">{friend.name}</Heading>
+                    <Text>{friend.description}</Text>
+                  </Stack>
 
-                <Flex>
+                  <Flex>
-                  <Button
+                    <Button
-                    as={Link}
+                      as={Link}
-                    target="_blank"
+                      target="_blank"
-                    href={friend.href}
+                      href={friend.href}
-                    variant="outline"
+                      variant="outline"
-                  >
+                    >
-                    Learn more
+                      Learn more
-                  </Button>
+                    </Button>
-                </Flex>
+                  </Flex>
-              </Stack>
+                </Stack>
-            ))}
+              ))}
           </SimpleGrid>
         </VStack>
       </Flex>
@@ -178,3 +99,14 @@ export default function OSSFriendsPage() {
     </Stack>
   )
 }
+
+export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
+  const res = await fetch('https://formbricks.com/api/oss-friends')
+  const data = await res.json()
+
+  return {
+    props: {
+      ossFriends: data.data,
+    },
+  }
+}