Update sprints

Author: nikoshell

public/draft2.png

@@ -16,12 +16,12 @@ const { data, body } = sprint;
 //  <a href={`/sprints/${slug}`} id={slug} class="text-blue-600 hover:text-blue-800 hover:underline"></a>
 ---
 
-<article class="sprint-card bg-white border border-gray-200 rounded-lg p-6 mb-8 shadow-sm hover:shadow-md transition-shadow duration-200" data-python-level={data.pythonLevel} data-room={data.room}>
+<article class=`${data.draft?"draft2":""} sprint-card bg-white border border-gray-200 rounded-lg p-6 mb-8 shadow-sm hover:shadow-md transition-shadow duration-200` data-python-level={data.pythonLevel} data-room={data.room}>
   <header class="mb-4">
     <h3 class="text-2xl font-semibold mb-2">
         {data.title}
     </h3>
-    <div class="flex flex-wrap gap-4 text-sm text-gray-600">
+    <div class="flex flex-wrap gap-4 text-lg text-gray-600">
       <span class="flex items-center gap-1">
         <span>👥</span>
         <span>{data.numberOfPeople}</span>
@@ -34,28 +34,33 @@ const { data, body } = sprint;
   </header>
 
   <div class="space-y-4">
-    <div class="text-sm">
-      <span class="font-medium text-gray-900">Contact:</span>
+    <div class="text-lg">
+      <span class="text-gray-900">Contact:</span>
       <span class="text-gray-700">{data.contactPerson.name}</span>
       {data.contactPerson.email && (
         <span class="text-gray-600">
-          {' '}(<a href={`mailto:${data.contactPerson.email}`} class="text-blue-600 hover:text-blue-800 hover:underline">{data.contactPerson.email}</a>)
+          {' '}(<a href={`mailto:${data.contactPerson.email}`} class="text-primary hover:text-primary-hover underline">{data.contactPerson.email}</a>)
         </span>
       )}
       {data.contactPerson.github && (
         <span class="text-gray-600">
-          {' '}(<a href={`https://github.com/${data.contactPerson.github}`} target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800 hover:underline">@{data.contactPerson.github}</a>)
+          {' '}(<a href={`https://github.com/${data.contactPerson.github}`} target="_blank" rel="noopener" class="text-primary hover:text-primary-hover underline">@{data.contactPerson.github}</a>)
+        </span>
+      )}
+      {data.contactPerson.twitter && (
+        <span class="text-gray-600">
+          {' '}(<a href={`https://x.com/${data.contactPerson.twitter}`} target="_blank" rel="noopener" class="text-primary hover:text-primary-hover underline">@{data.contactPerson.twitter}</a>)
         </span>
       )}
     </div>
 
     {(data.links) && (
-      <div class="text-sm">
+      <div class="text-lg">
         <span class="font-medium text-gray-900">Links:</span>
         <ul class="mt-2 ml-6 space-y-1 list-disc">
           {data.links?.map((link) => (
-            <li key={link.url}>
-              <a href={link.url} target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800 hover:underline">{link.title}</a>
+            <li>
+              <a href={link.url} target="_blank" rel="noopener" class="text-primary hover:text-primary-hover underline ">{link.title}</a>
             </li>
           ))}
         </ul>

src/components/SprintCard.astro

@@ -265,9 +265,9 @@ const sprints = defineCollection({
     pythonLevel: z.enum(["Any", "Beginner", "Intermediate", "Advanced"]),
     contactPerson: z.object({
       name: z.string(),
-      email: z.string().email().optional(),
-      github: z.string().optional(),
-      twitter: z.string().optional(),
+      email: z.string().email().optional().nullable(),
+      github: z.string().optional().nullable(),
+      twitter: z.string().optional().nullable(),
     }),
     links: z
       .array(

src/content/config.ts

@@ -4,11 +4,13 @@ numberOfPeople: "" # How many people you expect to be able to accommodate.
 pythonLevel: "Any" # Any, Beginner, Intermediate, or Advanced.
 contactPerson: # The main person to reach out to regarding the sprint.
   name: ""
-  email: "[email protected]"
-draft: true # Delete this when you PR your sprint.
+  email:
+  github:
+  twitter:
 links: # Add as many links as relevant.
   - title: "Project xyz GitHub repo"
     url: "https://github.com/xyz"
+draft: true # Keep this true when you send PR.
 ---
 
 Your sprint/project description goes here.

src/content/pages/sprints.md renamed to src/content/pages/_sprints.md

@@ -4,7 +4,7 @@ numberOfPeople: "TBA"
 pythonLevel: "Beginner"
 contactPerson:
   name: "Russell Keith-Magee"
-  email: "[email protected]"
+  email:
 links:
   - title: "BeeWare GitHub"
     url: "https://github.com/beeware"

src/content/sprints/_sprints_template.md

@@ -4,12 +4,12 @@ numberOfPeople: "TBA"
 pythonLevel: "Intermediate"
 contactPerson:
   name: "Petr Viktorin"
-  email: "[email protected]"
+  email:
 links:
-  - title: "Code of Conduct"
-    url: "https://www.python.org/psf/conduct/"
   - title: "CPython's Developer Guide"
     url: "https://devguide.python.org/"
+  - title: "Code of Conduct"
+    url: "https://www.python.org/psf/conduct/"
   - title: "Easy Issues"
     url: "https://github.com/python/cpython/issues?q=is%3Aissue+is%3Aopen+label%3Aeasy"
 ---

src/content/sprints/beeware.md

@@ -0,0 +1,16 @@
+---
+title: "Secret project"
+numberOfPeople: "5"
+pythonLevel: "Any"
+contactPerson:
+  name: "Nikoś Hell"
+  email:
+  github: "nikoshell"
+  twitter: "nikoshell20"
+links:
+  - title: "Secret GitHub repo"
+    url: "https://github.com/nikoshell/secret"
+draft: true
+---
+
+Your sprint/project description goes here.

src/content/sprints/cpython.md

@@ -2,7 +2,7 @@
 import { getCollection } from 'astro:content';
 import Layout from '@layouts/SectionLayout.astro';
 import SprintCard from '@components/SprintCard.astro';
-// import Headline from "@ui/Headline.astro"
+import Headline from "@ui/Headline.astro"
 
 const sprints = await getCollection("sprints", ({ data }) => {
   return import.meta.env.MODE === "production" ? data.draft !== true : true;
@@ -11,10 +11,8 @@ const sprints = await getCollection("sprints", ({ data }) => {
 ---
 
 <Layout title="Sprints & Workshops" description="All in one">
-  <main class="min-h-screen py-8">
-    <div class="max-w-6xl mx-auto px-4">
       <header class="text-center mb-12">
-        <h1 class="text-5xl font-bold text-gray-900 mb-4">Sprints & Workshops</h1>
+        <Headline title="Sprints & Workshops" />
         <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
           Join collaborative coding sessions and hands-on workshops.
           Connect with maintainers, contribute to open source projects,
@@ -24,8 +22,8 @@ const sprints = await getCollection("sprints", ({ data }) => {
 
       <div class="flex flex-wrap gap-8 justify-center mb-8">
         <div class="flex flex-col gap-2">
-          <label for="level-filter" class="font-semibold text-gray-700 text-sm">Python Level:</label>
-          <select id="level-filter" class="px-4 py-2 border border-gray-300 rounded-lg bg-white text-sm min-w-[150px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+          <label for="level-filter" class="font-semibold text-gray-700 text-lg">Python Level:</label>
+          <select id="level-filter" class="px-4 py-2 border border-gray-300 rounded-lg bg-white text-lg min-w-[150px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
             <option value="">All Levels</option>
             <option value="Any">Any</option>
             <option value="Beginner">Beginner</option>
@@ -50,8 +48,7 @@ const sprints = await getCollection("sprints", ({ data }) => {
           <p class="text-gray-500 text-lg">No sprints are currently available. Check back soon!</p>
         </div>
       )}
-    </div>
-  </main>
+</Layout>
 
   <script>
     document.addEventListener('DOMContentLoaded', () => {
@@ -87,4 +84,3 @@ const sprints = await getCollection("sprints", ({ data }) => {
       levelFilter?.addEventListener('change', filterSprints);
     });
   </script>
-</Layout>

src/content/sprints/sprints_template.md

@@ -252,6 +252,12 @@ main a[href^="#"]::before {
   background-color: white;
 }
 
+.draft2 {
+  background: url("/draft2.png");
+  background-size: 25%;
+  background-color: white;
+}
+
 .social-icon {
   display: inline-flex;
   align-items: center;