Add job board with example data.

package.json

@@ -47,8 +47,8 @@
     "@types/js-yaml": "^4.0.9",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "tsx": "^4.19.4",
     "puppeteer": "^24.7.2",
+    "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   },
   "prettier": {

src/components/BaseHead.astro

@@ -57,3 +57,9 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
+
+<script
+  defer
+  is:inline
+  data-domain="ep2025.europython.eu"
+  src="https://plausible.io/js/script.outbound-links.js"></script>

src/components/CardContent.astro

@@ -0,0 +1,15 @@
+---
+import { getEntry } from "astro:content";
+import { marked } from 'marked';
+const { collection, entry:entryId } = Astro.props;
+
+const entry = await getEntry(collection, entryId);
+const html = entry && entry.body ? marked.parse(entry.body) :  "";
+
+---
+
+  { html &&
+    <div class="mb-2 prose prose-li:m-0 prose-ul:m-0 prose-ul:mb-2 prose-a:underline prose-h1:text-text prose-headings:font-title prose-headings:text-text prose-a:text-text hover:prose-a:text-primary-hover prose-strong:text-text prose-strong:font-bold prose-li:marker:text-text p-6">
+      <article set:html={html} />
+    </div>
+  }

src/components/JobCard.astro

@@ -0,0 +1,94 @@
+---
+import { getEntry } from "astro:content";
+const { job:jobId, sponsor:sponsorId } = Astro.props;
+
+const job = await getEntry("jobs", jobId);
+if (!job) {
+  throw new Error(`Job with ID "${jobId}" not found`);
+}
+
+const sponsor = await getEntry("sponsors", sponsorId);
+
+if (!sponsor) {
+  throw new Error(`Sponsor with ID "${sponsorId}" not found`);
+}
+
+// TODO: add tags
+const { title, location, type, level, salary, description, responsibilities, requirements, benefits, apply_link, draft } = job.data;
+
+---
+
+<div class="mb-6 last:mb-0 rounded-lg shadow-md bg-white">
+  <div class=`flex-1 p-6 ${draft ? "draft": ""}`>
+    <a href={`/sponsor/${jobId}`}>
+      <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>
+    }
+    <p class="text-gray-700 mb-4">{salary}</p>
+    <p class="mb-3">{description}</p>
+
+    { responsibilities &&
+      <h3 class="text-xl font-semibold mb-2">Responsibilities</h3>
+      <ul class="list-disc list-inside mb-4">
+        {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: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:string) => <li>{item}</li>)}
+    </ul>
+    }
+
+      <a
+        href={apply_link}
+        target="_blank"
+        class="apply-btn"
+>
+        Apply Now
+      </a>
+  </div>
+</div>
+
+<style>
+
+  .apply-btn {
+    display: inline-block;
+    padding: 8px 24px;
+    color: white;
+    font-weight: 700;
+    border-radius: 9999px;
+    border: 1px solid transparent;
+    text-decoration: none;
+    transition: all 0.1s ease;
+    background: linear-gradient(to right, #16a34a, #22c55e);
+  }
+
+  .apply-btn:hover {
+    color:white;
+  }
+
+  a{
+    text-decoration: underline;
+  }
+  a:hover {
+    color: var(--color-primary-hover);
+    text-decoration: underline;
+  }
+
+</style>

src/components/Search.astro

@@ -33,7 +33,6 @@ document.addEventListener("DOMContentLoaded", function () {
   let selectedIndex = -1;
 
   function openSearch() {
-    console.log("open");
     openModal.click();
       if (searchInput) {
         searchInput.value = "Tips";