feat: refactor oss friends, use the API

locales/en/index.json

@@ -1,83 +1,84 @@
-{
-  "compassFor": "Compass for",
-  "compassForItems": {
-    "containers": "containers",
-    "kubernetes": "kubernetes",
-    "engineers": "engineers",
-    "developers": "developers",
-    "managers": "managers",
-    "releases": "releases",
-    "pipelines": "pipelines",
-    "versions": "versions",
-    "applications": "applications",
-    "services": "services",
-    "configs": "configs",
-    "products": "products",
-    "microservices": "microservices",
-    "code": "code",
-    "databases": "databases",
-    "tickets": "tickets",
-    "workflows": "workflows",
-    "collaboration": "collaboration"
-  },
-  "headerText": "Imagine that Heroku meets Portainer and then gets combined with fly.io – that’s dyrectorio. It enables teams to build up their software delivery pipeline like building blocks. ",
-  "headerText2": "dyrector.io is an open-source container management platform that helps software teams to manage releases & deployments efficiently.",
-  "headerImgAlt": "Ship carrying containers. Illustration of dyrector.io",
-  "getStarted": "Get started",
-  "watchDemo": "Watch the demo",
-
-  "designedForCompanies": {
-    "title": "dyrector.io is designed for developers working with the following technologies & frameworks",
-    "companies": {
-      "orchestration": "orchestration",
-      "agility": "agility",
-      "cloud": "cloud",
-      "cont-integration": "continuous integration",
-      "release-mg": "release management"
-    }
-  },
-
-  "features": {
-    "deploy": {
-      "section1Title": "Build delivery channels",
-      "section1Details": "Create your own low-code CD workflow to deploy images out of your existing CI processes. No more messing with YAML files, you can focus on things that deliver value to your users.",
-      "section2Title": "Autopilot your releases",
-      "section2Details": "Automate & power-up your industry standard release processes with integrations. Increase your team's efficiency & transparency with notifications, and enable your product managers and other non-technical stakeholders to self-service deployments.",
-      "imgAlt": "Flowchart of different software versions made up of images for deployments."
-    },
-    "control": {
-      "section1Title": "Multi-instance deployments",
-      "section1Details": "Simplify complex release management processes with the multi-instance deployment capabilities of dyrector.io. Manage and execute deployments of different versions of your applications to multiple nodes. Fire up Docker & Kubernetes test environments on the fly.",
-      "section2Title": "No vendor lock-in",
-      "section2Details": "Interact with your infrastructure in a PaaS-like manner with no strings attached. dyrector.io supports AWS, GCP, and Azure, as well. If you decide to stop using dyrector.io, you won't have to restart provisioning your infrastructure.",
-      "imgAlt": "Flowchart of how sponsors, or vendors are able to distribute different versions of applications to multiple customers."
-    }
-  },
-
-  "community": {
-    "title": "Join Our Community",
-    "subTitle": "Meet other dyrectors on our Discord community",
-    "button": "Join Discord"
-  },
-
-  "integrationsToWorkflow": [
-    [
-      "Add ",
-      {
-        "text": "integrations seamlessly",
-        "gradient": true
-      },
-      " to your"
-    ],
-    ["existing development workflows"]
-  ],
-  "integrationsDetails": "dyrector.io connects to the tools you use every day with new integrations in the works. Check our full list of integrations including GitLab, GitHub, Slack and Discord in our documentation.",
-
-  "oss": {
-    "title": "dyrector.io is fully open-source, will always be...",
-    "details": "Open-source products bring community-driven value to the world. We created dyrector.io for developers who'd rather not work on deployments and configurations instead of developing their solutions. We're looking for suggestions from developers to create the perfect deployment platform for them.",
-    "star": "Stars",
-    "buttonSubText": "“As software eats the world, open source eats software”",
-    "details2": ""
-  }
-}
+{
+  "docs": "Docs",
+  "compassFor": "Compass for",
+  "compassForItems": {
+    "containers": "containers",
+    "kubernetes": "kubernetes",
+    "engineers": "engineers",
+    "developers": "developers",
+    "managers": "managers",
+    "releases": "releases",
+    "pipelines": "pipelines",
+    "versions": "versions",
+    "applications": "applications",
+    "services": "services",
+    "configs": "configs",
+    "products": "products",
+    "microservices": "microservices",
+    "code": "code",
+    "databases": "databases",
+    "tickets": "tickets",
+    "workflows": "workflows",
+    "collaboration": "collaboration"
+  },
+  "headerText": "Imagine that Heroku meets Portainer and then gets combined with fly.io – that’s dyrectorio. It enables teams to build up their software delivery pipeline like building blocks. ",
+  "headerText2": "dyrector.io is an open-source container management platform that helps software teams to manage releases & deployments efficiently.",
+  "headerImgAlt": "Ship carrying containers. Illustration of dyrector.io",
+  "getStarted": "Get started",
+  "watchDemo": "Watch the demo",
+
+  "designedForCompanies": {
+    "title": "dyrector.io is designed for developers working with the following technologies & frameworks",
+    "companies": {
+      "orchestration": "orchestration",
+      "agility": "agility",
+      "cloud": "cloud",
+      "cont-integration": "continuous integration",
+      "release-mg": "release management"
+    }
+  },
+
+  "features": {
+    "deploy": {
+      "section1Title": "Build delivery channels",
+      "section1Details": "Create your own low-code CD workflow to deploy images out of your existing CI processes. No more messing with YAML files, you can focus on things that deliver value to your users.",
+      "section2Title": "Autopilot your releases",
+      "section2Details": "Automate & power-up your industry standard release processes with integrations. Increase your team's efficiency & transparency with notifications, and enable your product managers and other non-technical stakeholders to self-service deployments.",
+      "imgAlt": "Flowchart of different software versions made up of images for deployments."
+    },
+    "control": {
+      "section1Title": "Multi-instance deployments",
+      "section1Details": "Simplify complex release management processes with the multi-instance deployment capabilities of dyrector.io. Manage and execute deployments of different versions of your applications to multiple nodes. Fire up Docker & Kubernetes test environments on the fly.",
+      "section2Title": "No vendor lock-in",
+      "section2Details": "Interact with your infrastructure in a PaaS-like manner with no strings attached. dyrector.io supports AWS, GCP, and Azure, as well. If you decide to stop using dyrector.io, you won't have to restart provisioning your infrastructure.",
+      "imgAlt": "Flowchart of how sponsors, or vendors are able to distribute different versions of applications to multiple customers."
+    }
+  },
+
+  "community": {
+    "title": "Join Our Community",
+    "subTitle": "Meet other dyrectors on our Discord community",
+    "button": "Join Discord"
+  },
+
+  "integrationsToWorkflow": [
+    [
+      "Add ",
+      {
+        "text": "integrations seamlessly",
+        "gradient": true
+      },
+      " to your"
+    ],
+    ["existing development workflows"]
+  ],
+  "integrationsDetails": "dyrector.io connects to the tools you use every day with new integrations in the works. Check our full list of integrations including GitLab, GitHub, Slack and Discord in our documentation.",
+
+  "oss": {
+    "title": "dyrector.io is fully open-source, will always be...",
+    "details": "Open-source products bring community-driven value to the world. We created dyrector.io for developers who'd rather not work on deployments and configurations instead of developing their solutions. We're looking for suggestions from developers to create the perfect deployment platform for them.",
+    "star": "Stars",
+    "buttonSubText": "“As software eats the world, open source eats software”",
+    "details2": ""
+  }
+}

src/components/index/section-designedfc.tsx

@@ -12,8 +12,6 @@ const SectionDesignedfc = (props: SectionDesignedfcProps) => {
 
   const items = ['orchestration', 'agility', 'cloud', 'cont-integration', 'release-mg']
 
-  const breakText = (text: string) => text.split(' ').map(it => <div>{it}</div>)
-
   return (
     <div className={clsx('text-center mx-auto mt-16 mb-40', className)}>
       <div className="pt-9 text-slate-300 bold text-xl font-bold max-w-lg mx-auto">
@@ -28,7 +26,7 @@ const SectionDesignedfc = (props: SectionDesignedfcProps) => {
           <div className="flex flex-col w-48 pt-8" key={it}>
             <Image src={`/icon-${it}.svg`} layout="intrinsic" width={50} height={50} />
             <label key={index} className="text-slate-300 text-sm uppercase pt-4">
-              {breakText(t(`designedForCompanies.companies.${it}`))}
+              {t(`designedForCompanies.companies.${it}`)}
             </label>
           </div>
         ))}

src/components/index/section-header.tsx

@@ -147,7 +147,7 @@ const SectionHeader = (props: SectionHeaderProps) => {
             )}
             onClick={() => window.location.assign('https://docs.dyrectorio.com')}
           >
-            {t('Docs')}
+            {t('docs')}
           </button>
           <button
             type="button"

src/pages/oss-friends.tsx

@@ -3,9 +3,19 @@ import useTranslation from 'next-translate/useTranslation'
 import DyoFooter from '../components/main/dyo-footer'
 import DyoNavbar from '../components/main/dyo-navbar'
 
-import OSS_FRIENDS_DATA from './oss-friends-content.json'
+const OSS_FRIENDS_URL = 'https://formbricks.com/api/oss-friends'
 
-const Index: NextPage = () => {
+type OSSFriend = {
+  href: string
+  name: string
+  description: string
+}
+
+type Props = {
+  OSSFriends: OSSFriend[]
+}
+
+const Index: NextPage<Props> = ({ OSSFriends }) => {
   const { t } = useTranslation('oss-friends')
 
   return (
@@ -19,14 +29,14 @@ const Index: NextPage = () => {
       </p>
 
       <div className="sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 grid gap-4">
-        {OSS_FRIENDS_DATA.map((item, index) => (
+        {OSSFriends.map((item, index) => (
           <div key={index} className="bg-gray-900 p-4 rounded-md shadow-lg">
-            <a href={item.Link} target="_blank" rel="">
-              <span className="text-center text-gradient font-sans-pro font-bold">{item.Name}</span>
+            <a href={item.href} target="_blank" rel="">
+              <span className="text-center text-gradient font-sans-pro font-bold">{item.name}</span>
               <br />
               <br />
             </a>
-            <span className="pt-8">{item.Description}</span>
+            <span className="pt-8">{item.description}</span>
           </div>
         ))}
       </div>
@@ -37,3 +47,14 @@ const Index: NextPage = () => {
 }
 
 export default Index
+
+export async function getStaticProps() {
+  const res = await fetch(OSS_FRIENDS_URL)
+  const data = await res.json()
+
+  return {
+    props: {
+      OSSFriends: data.data,
+    },
+  }
+}