Add description for organization

src/components/home/OrganizationCard.astro

@@ -3,17 +3,16 @@ interface Props {
   name: string;
   logoUrl: string;
   id: string;
+  description: string;
   skills: string[];
 }
 
-const { id, name, logoUrl, skills } = Astro.props;
+const { id, name, logoUrl, skills, description } = Astro.props;
 
-//We will only display the non-empty and (at max) the most frequent 6 skills
+const MAX_DESCRIPTION_LENGTH = 180;
 
+// We will only display the non-empty and (at max) the most frequent 6 skills
 const filtertedSkills = skills.filter((skill) => skill != "").slice(0, 6);
-
-const description =
-  "CNCF is the open source, vendor-neutral hub of cloud native computing, hosting projects....";
 ---
 
 <div
@@ -38,8 +37,8 @@ const description =
     <div>
       <p class="text-fade-grey text-sm text-center pt-[10px]">
         {
-          description.length > 150
-            ? description.substring(0, 150) + "..."
+          description.length > MAX_DESCRIPTION_LENGTH
+            ? description.substring(0, MAX_DESCRIPTION_LENGTH) + "..."
             : description
         }
       </p>

src/pages/org/[orgID].astro

@@ -40,10 +40,9 @@ const projectData = (await projectResponse.json()).projects;
       </div>
 
       <div class="orgInfo">
-        <div class="orgAbout">
-          <p>
-            Need to integrate organization descriptions into the backend and
-            then display it here.
+        <div>
+          <p class="text-white text-md max-w-xl">
+            {orgData.desc}
           </p>
         </div>
         <div class="graph">Display the Graph</div>
@@ -90,18 +89,6 @@ const projectData = (await projectResponse.json()).projects;
     margin: 0vh 0vw 10vh 0vw;
   }
 
-  .orgAbout {
-    display: flex;
-    gap: 20px;
-    flex-direction: column;
-    font-family: Lato;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0em;
-    text-align: justified;
-  }
-
   .graph {
     display: flex;
     width: 40%;

src/types.d.ts

@@ -1,6 +1,7 @@
 type Organization = {
   id: string;
   name: string;
+  description: string;
   logoUrl: string;
   skills: string[];
 };