Hide sponsor card on mobile, fix ts warnings.

Author: nikoshell

src/components/JobCard.astro

@@ -1,14 +1,24 @@
 ---
 import CardContent from "@components/CardContent.astro";
-const { job } = Astro.props;
-const { title, sponsor, location, type, level, salary, tags, description, responsibilities, requirements, benefits, apply_link } = job.data;
+const { job, sponsor } = Astro.props;
+
+// TODO: add tags
+const { title, location, type, level, salary, description, responsibilities, requirements, benefits, apply_link } = job.data;
+
+
+
 ---
 
 <div class="mb-6 last:mb-0">
   <div class="flex-1 p-6 rounded-lg shadow-md bg-white">
     <a href={`/sponsor/${job.id}`}>
       <h2 class="text-3xl font-bold mb-2">{title}</h2>
     </a>
+
+    <a class="lg:hidden text-[#1a56db] hover:text-[#4f46e5] text-xl pb-2 inline-block font-bold" href={`/sponsor/${sponsor.id}`}>
+      {sponsor.data.name}
+    </a>
+
     { level && type && location &&
       <p class="text-gray-600 mb-2">{level} • {type} • {location}</p>
     }
@@ -18,21 +28,21 @@ const { title, sponsor, location, type, level, salary, tags, description, respon
     { responsibilities &&
       <h3 class="text-xl font-semibold mb-2">Responsibilities</h3>
       <ul class="list-disc list-inside mb-4">
-        {responsibilities.map(item => <li>{item}</li>)}
+        {responsibilities.map((item:string ) => <li>{item}</li>)}
       </ul>
     }
 
     { requirements &&
     <h3 class="text-xl font-semibold mb-2">Requirements</h3>
     <ul class="list-disc list-inside mb-4">
-      {requirements.map(item => <li>{item}</li>)}
+      {requirements.map((item:string) => <li>{item}</li>)}
     </ul>
     }
 
     { benefits &&
     <h3 class="text-xl font-semibold mb-2">Benefits</h3>
     <ul class="list-disc list-inside mb-6">
-      {benefits.map(item => <li>{item}</li>)}
+      {benefits.map((item:string) => <li>{item}</li>)}
     </ul>
     }
 

src/components/SponsorCard.astro

@@ -122,7 +122,7 @@ const socialLinks = [
             .filter((link) => socials?.[link.key])
             .map((link) => {
               const url = socials[link.key];
-              let iconColor;
+              let iconColor:string;
 
               // Assign colors based on social media platform
               switch(link.key) {

src/components/TwoCols.astro

@@ -1,5 +1,4 @@
 ---
-const {content, sidebar } = Astro.props;
 ---
   <section class="space-y-12 pb-6 md:p-6">
     <div class="flex flex-col lg:flex-row-reverse gap-6">

src/content/config.ts

@@ -1,24 +1,10 @@
 import { defineCollection, reference, z } from "astro:content";
 import { loadData } from "@utils/dataLoader";
-import { glob, file } from "astro/loaders";
+import { glob } from "astro/loaders";
 
 const mode = import.meta.env.MODE;
 console.log(`\x1b[35m[EP]\x1b[0m Current MODE: \x1b[1m\x1b[34m${mode}\x1b[0m`);
 
-const tiers = [
-  "Keystone",
-  "Diamond",
-  "Platinum",
-  "Platinum X",
-  "Gold",
-  "Silver",
-  "Bronze",
-  "Patron",
-  "Financial Aid",
-  "Supporters",
-  "Partners",
-] as const;
-
 const pages = defineCollection({
   type: "content",
   schema: z.object({

src/pages/jobs.astro

@@ -41,14 +41,14 @@ for (const path in jobFiles) {
         if (!sponsorJobs) return;
         return (
           <TwoCols>
-            <Fragment slot="content">
+            <div slot="content" class="hidden lg:block">
               <SponsorCard {sponsor} />
-            </Fragment>
+            </div>
             <Fragment slot="sidebar">
               {sponsorJobs && sponsorJobs.length > 0 && (
                 <>
                   {sponsorJobs.map((job) => (
-                    <JobCard {job} />
+                  <JobCard {job} {sponsor} />
                   ))}
                 </>
               )}

src/pages/sponsor/[sponsor]/[job].astro

@@ -36,7 +36,7 @@ export async function getStaticPaths() {
         <SponsorCard {sponsor} showJobs />
       </Fragment>
       <Fragment slot="sidebar">
-        {(<JobCard {job} />)}
+        {(<JobCard {job} {sponsor} />)}
       </Fragment>
     </TwoCols>
 </Layout>

src/pages/sponsors.astro

@@ -25,10 +25,11 @@ const tiers = [
 // Group sponsors by their tier
 const grouped = sponsors.reduce((acc, sponsor) => {
   const tier = sponsor.data.tier;
-  if (!acc[tier]) {
-    acc[tier] = [];
+  const key = tier ?? 'unknown';
+  if (!acc[key]) {
+    acc[key] = [];
   }
-  acc[tier].push(sponsor);
+  acc[key].push(sponsor);
   return acc;
 }, {} as Record<string, CollectionEntry<"sponsors">[]>);
 ---
@@ -44,7 +45,7 @@ const grouped = sponsors.reduce((acc, sponsor) => {
   {tiers.map((tier) => {
     const tiersponsors = grouped[tier];
     return tiersponsors?.length ? (
-      <section key={tier} class="mb-12">
+      <section class="mb-12">
         <Headline id=`tier-${slugify(tier)}` title={tier} />
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4 md:p-6">
           {tiersponsors.map((sponsor) => (