Fix javascript retrieving speakers from Pretalx (#15221)

- handle type error when avatar is blank.
- Change avatar to avatar_url due to API changes upstream
- Update URL, change method from limit to page per docs.

Author: yvovandoorn

content/events/2025-amsterdam/speakers.md

@@ -9,54 +9,70 @@ Description = "Meet our speakers for DevOpsDays Amsterdam 2025"
 <div class="pretalx-widget">
         <div class="pretalx-widget-info-message">
             JavaScript is disabled in your browser. To access our speaker list without JavaScript,
-            please <a target="_blank" href="https://talks.devopsdays.org/devopsdays-amsterdam-2025/speakers/">click here</a>.
+            please <a target="_blank" href="https://talks.devopsdays.org/devopsdays-amsterdam-2025/speaker/">click here</a>.
         </div>
     </div>
 </noscript>
 
 <script>
     const ul = document.getElementById('speakers');
     const list = document.createDocumentFragment();
-    const url = 'https://talks.devopsdays.org/api/events/devopsdays-amsterdam-2025/speakers/?limit=50';
+    const url = 'https://talks.devopsdays.org/api/events/devopsdays-amsterdam-2025/speakers/?page=1&page_size=50';
 
     fetch(url)
-        .then((response) => {
-            return response.json();
-        })
+        .then((response) => response.json())
         .then((data) => {
             let speakers = data.results;
-
             console.log(speakers);
 
-            speakers.map(function(speaker) {
+            speakers.forEach(function(speaker) {
                 let li = document.createElement('div');
-                li.className = `col-lg-3 col-md-6 p-3`;
+                li.className = 'col-lg-3 col-md-6 p-3';
+
                 let name = document.createElement('h3');
+                name.textContent = speaker.name;
+
                 let pic = document.createElement('img');
+                pic.className = 'speakers-page';
+                pic.src =
+                    (typeof speaker.avatar_url === 'string' && speaker.avatar_url.trim().length > 0)
+                        ? speaker.avatar_url
+                        : '/img/speaker-default.jpg';
+
                 let bio = document.createElement('details');
-                bio.className = `p-1`;
-                let talk = document.createElement('a');
-
-                name.innerHTML = `${speaker.name}`;
-                pic.src = speaker.avatar.length != 0 ? `${speaker.avatar}`: '/img/speaker-default.jpg';
-                pic.className = `speakers-page`;
-                bio.innerHTML = `<summary><b>About ${speaker.name}</b></summary><p>${speaker.biography ? `${speaker.biography}`: `Ipsum`}</p>`;
-                talk.setAttribute('href', speaker.submissions[0] ? `https://talks.devopsdays.org/devopsdays-amsterdam-2025/talk/${speaker.submissions[0]}` : ``);
-                talk.setAttribute('target', '_blank');
-                talk.className = `btn btn-primary`;
-                talk.innerHTML = `Link to talk`;
+                bio.className = 'p-1';
+                bio.innerHTML =
+                    `<summary><b>About ${speaker.name}</b></summary><p>${
+                        speaker.biography
+                            ? speaker.biography
+                            : `No biography found for ${speaker.name}. If you are ${speaker.name}, please email the organizers with a biography to be used here.`
+                    }</p>`;
 
                 li.appendChild(name);
                 li.appendChild(pic);
                 li.appendChild(bio);
-                li.appendChild(talk);
+
+                if (
+                    Array.isArray(speaker.submissions) &&
+                    speaker.submissions.length > 0 &&
+                    speaker.submissions[0]
+                ) {
+                    let talk = document.createElement('a');
+                    talk.href = `https://talks.devopsdays.org/devopsdays-amsterdam-2025/talk/${speaker.submissions[0]}`;
+                    talk.target = '_blank';
+                    talk.className = 'btn btn-primary';
+                    talk.textContent = 'Link to talk';
+                    li.appendChild(talk);
+                }
+
                 list.appendChild(li);
             });
         })
         .catch(function(error) {
-            console.log(error);
+            console.error('Error fetching speaker data:', error);
         })
         .finally(() => {
             ul.appendChild(list);
         });
-</script>
+</script>
+