feat: fix organization card formatting and add linting workflow

.github/workflows/push-and-pr.yml

@@ -0,0 +1,33 @@
+name: Push and PR Workflow
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  contents: read
+
+# This allows a subsequently queued workflow run to interrupt previous runs
+concurrency:
+  group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  fomat-and-lint-check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Verify formatting
+        run: npm run format:check

package.json

@@ -8,7 +8,8 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
+    "format": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint \"src/**/*.{js,ts,jsx,tsx,astro}\""
   },
   "dependencies": {
     "@astrojs/react": "^3.0.3",

src/components/home/OrganizationCard.astro

@@ -1,61 +1,86 @@
 ---
 interface Props {
-  title: string;
+  name: string;
   logoUrl: string;
   id: string;
+  skills: string[];
 }
 
-const { id, title, logoUrl } = Astro.props;
+const { id, name, logoUrl, skills } = Astro.props;
 
-const skills=['Go','Docker','Volcano','HTML','CSS','Kubernetes','javaScript'];
-const description="CNCF is the open source, vendor-neutral hub of cloud native computing, hosting projects...."
+// 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
-  class="lg:w-[380px] lg:h-[450px] sm:w-[380px] sm:h-[450px] rounded-md overflow-hidden bg-dark-blue mx-auto border-[3px] border-highlight-blue  card hover:border-[5px]"
+  class="lg:w-[380px] lg:h-[450px] sm:w-[380px] sm:h-[450px] rounded-md bg-dark-blue mx-auto py-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-col"
 >
-
   <div class="flex flex-col justify-center items-center p-4 gap-5 mx-auto">
+    <!-- Logo -->
     <div class="h-[85px]">
       <img
-      class="w-24 h-24 mb-3 rounded-full shadow-lg"
-      src={logoUrl}
-      alt={`Logo for the organization ${title}`}
-    />
+        class="w-24 h-24 mb-3 rounded-full"
+        src={logoUrl}
+        alt={`Logo for the organization ${name}`}
+      />
     </div>
+
+    <!-- Name of the organization -->
     <div class="h-[30px]">
-      <h5 class="mb-1 text-xl font-semibold leading-6 text-center  text-gray-900 dark:text-white">
-        {title}
+      <h5 class="m-1 text-xl font-semibold leading-6 text-center text-white">
+        {name}
       </h5>
     </div>
+
+    <!-- Description -->
     <div>
       <p class="text-fade-grey text-sm text-center pt-[10px]">
         {
-          description.length >100 ? 
-          (description.substring(0,100)) + "..." :
-          (description)
-      }
+          description.length > 150
+            ? description.substring(0, 150) + "..."
+            : description
+        }
       </p>
+
+      <!-- Skills -->
     </div>
-    <div class="flex flex-col mx-auto pl-5">
-      <h2 class="text-white">Required Skills</h2>
-      <div class="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">{skills.map((skill)=><button class="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue   rounded-3xl 
-        ">{skill}</button>)}</div>
-    </div>
-    <div class="flex mt-4 space-x-3 md:mt-6">
+    {
+      filtertedSkills.length != 0 ? (
+        <>
+          <h2 class="text-white">Project Tags</h2>
+          <div class="flex flex-col mx-auto pl-2">
+            <div class="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">
+              {filtertedSkills.map((skill) => (
+                <button
+                  class="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue   rounded-3xl 
+            "
+                >
+                  {skill}
+                </button>
+              ))}
+            </div>
+          </div>
+        </>
+      ) : null
+    }
+
+    <!-- View Organization Button -->
+    <div class="flex space-x-3">
       <a
         href=`/org/${id}`
-        class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue "
-        >Apply Now</a
+        class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue"
+        >View in Detail</a
       >
     </div>
   </div>
 </div>
 
 <style>
-  .card:hover{
+  .card:hover {
     transform: scale(1.01);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-
   }
-</style>
+</style>

src/pages/index.astro

@@ -1,29 +1,34 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import OrganizationCard from "../components/home/OrganizationCard.astro";
+import type { Code } from "astro:components";
 
 const API_BASE_URL = import.meta.env.API_BASE_URL;
 const response = await fetch(`${API_BASE_URL}/orgs`);
 const allOrganizations = await response.json();
 ---
 
-<Layout title="LFX Mentorship" >
-  <div class="bg-dark-blue ">
-    <div class=" relative">
-      <h1 class=" text-white text-center  text-5xl font-semibold pt-[180px] pb-[180px]  ">Organisations</h1>
+<Layout title="LFX Mentorship">
+  <div class="bg-dark-blue">
+    <div class="relative">
+      <h1 class="text-white text-center text-4xl font-semibold p-8">
+        Participating Organizations
+      </h1>
       <div class="codeBlock absolute"></div>
     </div>
-    <ul role="list" class="flex flex-wrap justify-center gap-[20px]  ml-[120px] mr-[120px]">
+    <ul
+      role="list"
+      class="flex flex-wrap justify-center gap-[15px] ml-80px] mr-[80px] md-4"
+    >
       {
         allOrganizations.map((org: Organization) => (
-          <OrganizationCard title={org.name} logoUrl={org.logoUrl} id={org.id} />
+          <OrganizationCard {...org} />
         ))
       }
     </ul>
   </div>
 </Layout>
 
-
 <style>
   .codeBlock {
     position: absolute;
@@ -36,11 +41,10 @@ const allOrganizations = await response.json();
       118.19deg,
       #02101a -3.62%,
       hsl(210, 94%, 21%) 55.44%,
-      #0077CC 110.51%
+      #0077cc 110.51%
     );
     opacity: 0.2;
     filter: blur(34px);
     transform: matrix(1, 0, -0.03, 1, 0, 0);
   }
 </style>
-

src/pages/org/[orgID].astro

@@ -2,8 +2,6 @@
 import Layout from "../../layouts/Layout.astro";
 import { ProjectNavbar } from "../../components/organization/ProjectNavbar";
 
-
-
 // Get all the organization IDs and render the page for them
 export async function getStaticPaths() {
   const API_BASE_URL = import.meta.env.API_BASE_URL;

src/types.d.ts

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