feat: make speakers dynamic and add test scripts

Author: kyleaquino

app/home/templates/home/sections/speakers-section.html

@@ -1,170 +1,82 @@
 {% load static %}
-
-<section id="speakers" class="bg-white px-[4%]">
-  <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto">
-    <div class="px-6 flex flex-col gap-8 py-20">
-      <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speakers</h2>
-      <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our keynote speakers
-        for PyCon Philippines 2025</p>
-    </div>
-    <div class="keynote-speakers-wrapper flex justify-center items-center gap-[30px] flex-wrap">
-      <div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
-        style="padding: 30px;">
-        <div class="overflow-hidden flex-shrink-0 w-[230px]">
-          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl">JC PERALTA</h3>
-          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
-          <p class="font-nunito text-brown-2 text-[13px]">JC Peralta is a data scientist, Geospatial Machine Learning
-            Consultant, and Climate Scientist. He earned his Master's in Atmospheric Science from Ateneo de Manila
-            University in 2019 and has worked on projects in climate science, disaster management, renewable energy, and
-            climate action.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] bg-cream-2 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
-        style="padding: 30px;">
-        <div class="overflow-hidden flex-shrink-0 w-[230px]">
-          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="Michael Kennedy - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Michael Kennedy</h3>
-          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Michael Kennedy is a Python Software Foundation Fellow,
-            entrepreneur, and host of the Talk Python To Me and Python Bytes podcasts. He founded Talk Python Training,
-            offering 250+ hours of online courses for developers and data scientists. He is based in Portland, OR.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] bg-cream-3 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
-        style="padding: 30px;">
-        <div class="overflow-hidden flex-shrink-0 w-[230px]">
-          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="Matt Harrison - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl">Matt Harrison</h3>
-          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Matt Harrison is a Stanford-educated CS expert and bestselling
-            author of Effective XGBoost and Effective Pandas. With 20+ years of Python experience, he has taught
-            professionals at companies like Netflix and NASA and impacted thousands through live and online courses.</p>
-        </div>
+{% if featured_speakers or speakers %}
+  <section id="speakers" class="bg-white px-[4%]">
+    <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto">
+      <div class="px-6 flex flex-col gap-8 py-20">
+        <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speakers</h2>
+        <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">
+          Discover our keynote speakers
+          for PyCon Philippines 2025
+        </p>
       </div>
-      <div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
-        style="padding: 30px;">
-        <div class="overflow-hidden flex-shrink-0 w-[230px]">
-          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="Reina Reyes - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl">Reina Reyes</h3>
-          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Reinabelle "Reina" Reyes, Ph.D., is an Associate Professor at
-            UP Diliman's National Institute of Physics, where she leads the Data and Computation Research Group. She
-            consults for Z-Lift Solutions and WeSolve Foundation and received the 2023 NAST Outstanding Young Scientist
-            Award.</p>
-        </div>
+      <div class="keynote-speakers-wrapper flex justify-center items-center gap-[30px] flex-wrap">
+        {% for speaker in featured_speakers %}
+          <div class="rounded-[24px] {% cycle 'bg-cream-1' 'bg-cream-2' 'bg-cream-3' %} flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
+               style="padding: 30px">
+            <div class="overflow-hidden flex-shrink-0 w-[230px]">
+              {% if speaker.photo_url %}
+                <img src="{{ speaker.photo_url }}"
+                     class="w-full object-cover rounded-[85px]"
+                     alt="{{ speaker.full_name }} - Image">
+              {% else %}
+                <img src="{% static 'img/speakers/speakers-img-1.jpg' %}"
+                     class="w-full object-cover rounded-[85px]"
+                     alt="{{ speaker.full_name }} - Image">
+              {% endif %}
+            </div>
+            <div>
+              <h3 class="font-bantayog text-brown-1 text-2xl uppercase">{{ speaker.full_name }}</h3>
+              {% if speaker.title %}
+                <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">{{ speaker.title }}</p>
+              {% endif %}
+              {% if speaker.introduction %}
+                <p class="font-nunito text-brown-2 text-[13px]">{{ speaker.introduction }}</p>
+              {% elif speaker.bio %}
+                <p class="font-nunito text-brown-2 text-[13px]">{{ speaker.bio }}</p>
+              {% endif %}
+            </div>
+          </div>
+        {% empty %}
+          <p class="text-center text-brown-2">No keynote speakers available yet.</p>
+        {% endfor %}
       </div>
     </div>
-  </div>
-
-  <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto mt-[120px] pb-[90px]">
-    <div class="px-6 flex flex-col gap-8">
-      <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Speakers</h2>
-      <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our speakers for
-        PyCon Philippines 2024</p>
-    </div>
-    <div class="speakers-wrapper flex items-center gap-[30px] flex-row flex-wrap justify-between">
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Swastik Anupam</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Neil Riego</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Ian Panganiban</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Fidel Ivan Racines</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
-      </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Albert Yumol</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
+    <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto mt-[120px] pb-[90px]">
+      <div class="px-6 flex flex-col gap-8">
+        <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Speakers</h2>
+        <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">
+          Discover our speakers for
+          PyCon Philippines 2024
+        </p>
       </div>
-      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
-        <div class="overflow-hidden flex-shrink-0 w-[250px]">
-          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
-            alt="JC Peralta - Image">
-        </div>
-        <div>
-          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Yoshi Yamaguchi</h3>
-          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
-          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
-        </div>
+      <div class="speakers-wrapper flex items-center gap-[30px] flex-row flex-wrap justify-between">
+        {% for speaker in speakers %}
+          <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+            <div class="overflow-hidden flex-shrink-0 w-[250px]">
+              {% if speaker.photo_url %}
+                <img src="{{ speaker.photo_url }}"
+                     class="w-full object-cover rounded-[85px]"
+                     alt="{{ speaker.full_name }} - Image">
+              {% else %}
+                <img src="{% static 'img/speakers/speakers-img-1.jpg' %}"
+                     class="w-full object-cover rounded-[85px]"
+                     alt="{{ speaker.full_name }} - Image">
+              {% endif %}
+            </div>
+            <div>
+              <h3 class="font-bantayog text-brown-1 text-2xl uppercase">{{ speaker.full_name }}</h3>
+              {% if speaker.title %}<p class="font-nunito text-brown-2 text-[13px] mb-2">{{ speaker.title }}</p>{% endif %}
+              {% if speaker.introduction %}
+                <p class="font-nunito text-brown-2 text-[13px]">{{ speaker.introduction|truncatewords:30 }}</p>
+              {% elif speaker.bio %}
+                <p class="font-nunito text-brown-2 text-[13px]">{{ speaker.bio|truncatewords:30 }}</p>
+              {% endif %}
+            </div>
+          </div>
+        {% empty %}
+          <p class="text-center text-brown-2">No speakers available yet.</p>
+        {% endfor %}
       </div>
     </div>
-  </div>
-
-</section>
+  </section>
+{% endif %}

app/home/views.py

@@ -4,6 +4,7 @@
 from bakery.views import BuildableTemplateView
 
 from app.sponsors.models import Sponsor
+from app.speakers.models import Speaker
 from config.constants import SPONSOR_TYPE_ORDER
 
 
@@ -25,4 +26,6 @@ def get_sponsors(self):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["sponsors_by_type"] = self.get_sponsors()
+        context["featured_speakers"] = Speaker.objects.filter(is_featured=True).order_by("first_name", "last_name")
+        context["speakers"] = Speaker.objects.filter(is_featured=False).order_by("first_name", "last_name")
         return context

app/speakers/management/__init__.py

@@ -0,0 +1,7 @@
+import os
+
+import django
+
+# Setup Django environment
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
+django.setup()