// Configuration const LANGUAGE_CODE = "en-US"; const LANGUAGE = "en"; const dataset = "gpblog"; // Default dataset const customSeasonSlug = null; // Can be set via URL parameter const DEBUG = true; // Set to true to enable debug logs // Stages translations object for all supported languages const stagesLabels = { en: { "Practice": "Practice", "Qualification": "Qualification", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "First Practice", "Second Practice": "Second Practice", "Third Practice": "Third Practice", "Last Practice": "Last Practice", "First Qualification": "First Qualification", "Second Qualification": "Second Qualification", "Third Qualification": "Third Qualification", "Sprint Shootout 1": "Sprint Shootout 1", "Sprint Shootout 2": "Sprint Shootout 2", "Sprint Shootout 3": "Sprint Shootout 3", // UI labels "upcoming_race": "Upcoming race", "overview": "Overview", "timezone_info": "Times are in your local timezone" }, nl: { "Practice": "Training", "Qualification": "Kwalificatie", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "Eerste Training", "Second Practice": "Tweede Training", "Third Practice": "Derde Training", "Last Practice": "Laatste Training", "First Qualification": "Eerste Kwalificatie", "Second Qualification": "Tweede Kwalificatie", "Third Qualification": "Derde Kwalificatie", "Sprint Shootout 1": "Sprint Kwalificatie 1", "Sprint Shootout 2": "Sprint Kwalificatie 2", "Sprint Shootout 3": "Sprint Kwalificatie 3", // UI labels "upcoming_race": "Komende race", "overview": "Overzicht", "timezone_info": "Tijden zijn in je lokale tijdzone" }, fr: { "Practice": "Essais", "Qualification": "Qualification", "Race": "Course", "Sprint Race": "Course Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Essais Libres 1", "Second Practice": "Essais Libres 2", "Third Practice": "Essais Libres 3", "Last Practice": "Derniers Essais Libres", "First Qualification": "Première Qualification", "Second Qualification": "Deuxième Qualification", "Third Qualification": "Troisième Qualification", "Sprint Shootout 1": "Qualifications Sprint 1", "Sprint Shootout 2": "Qualifications Sprint 2", "Sprint Shootout 3": "Qualifications Sprint 3", // UI labels "upcoming_race": "Prochaine course", "overview": "Aperçu", "timezone_info": "Les horaires sont dans votre fuseau horaire local" }, de: { "Practice": "Training", "Qualification": "Qualifikation", "Race": "Rennen", "Sprint Race": "Sprint-Rennen", "Sprint Shootout": "Sprint-Shootout", "First Practice": "Erstes Training", "Second Practice": "Zweites Training", "Third Practice": "Drittes Training", "Last Practice": "Letztes Training", "First Qualification": "Erste Qualifikation", "Second Qualification": "Zweite Qualifikation", "Third Qualification": "Dritte Qualifikation", "Sprint Shootout 1": "Sprint-Qualifikation 1", "Sprint Shootout 2": "Sprint-Qualifikation 2", "Sprint Shootout 3": "Sprint-Qualifikation 3", // UI labels "upcoming_race": "Nächstes Rennen", "overview": "Übersicht", "timezone_info": "Zeiten sind in Ihrer lokalen Zeitzone" }, es: { "Practice": "Práctica", "Qualification": "Clasificación", "Race": "Carrera", "Sprint Race": "Carrera Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primera Práctica", "Second Practice": "Segunda Práctica", "Third Practice": "Tercera Práctica", "Last Practice": "Última Práctica", "First Qualification": "Primera Clasificación", "Second Qualification": "Segunda Clasificación", "Third Qualification": "Tercera Clasificación", "Sprint Shootout 1": "Clasificación Sprint 1", "Sprint Shootout 2": "Clasificación Sprint 2", "Sprint Shootout 3": "Clasificación Sprint 3", // UI labels "upcoming_race": "Próxima carrera", "overview": "Resumen", "timezone_info": "Los horarios están en tu zona horaria local" }, it: { "Practice": "Prove", "Qualification": "Qualifiche", "Race": "Gara", "Sprint Race": "Gara Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Prime Prove", "Second Practice": "Seconde Prove", "Third Practice": "Terze Prove", "Last Practice": "Ultime Prove", "First Qualification": "Prima Qualifica", "Second Qualification": "Seconda Qualifica", "Third Qualification": "Terza Qualifica", "Sprint Shootout 1": "Qualifiche Sprint 1", "Sprint Shootout 2": "Qualifiche Sprint 2", "Sprint Shootout 3": "Qualifiche Sprint 3", // UI labels "upcoming_race": "Prossima gara", "overview": "Panoramica", "timezone_info": "Gli orari sono nel tuo fuso orario locale" }, pt: { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Qualificação Sprint 1", "Sprint Shootout 2": "Qualificação Sprint 2", "Sprint Shootout 3": "Qualificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, "pt-br": { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Classificação Sprint 1", "Sprint Shootout 2": "Classificação Sprint 2", "Sprint Shootout 3": "Classificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, da: { "Practice": "Træning", "Qualification": "Kvalifikation", "Race": "Løb", "Sprint Race": "Sprintløb", "Sprint Shootout": "Sprint Shootout", "First Practice": "Første Træning", "Second Practice": "Anden Træning", "Third Practice": "Tredje Træning", "Last Practice": "Sidste Træning", "First Qualification": "Første Kvalifikation", "Second Qualification": "Anden Kvalifikation", "Third Qualification": "Tredje Kvalifikation", "Sprint Shootout 1": "Sprint Kvalifikation 1", "Sprint Shootout 2": "Sprint Kvalifikation 2", "Sprint Shootout 3": "Sprint Kvalifikation 3", // UI labels "upcoming_race": "Kommende løb", "overview": "Oversigt", "timezone_info": "Tiderne er i din lokale tidszone" }, lt: { "Practice": "Treniruotė", "Qualification": "Kvalifikacija", "Race": "Lenktynės", "Sprint Race": "Sprint Lenktynės", "Sprint Shootout": "Sprint Shootout", "First Practice": "Pirmoji Treniruotė", "Second Practice": "Antroji Treniruotė", "Third Practice": "Trečioji Treniruotė", "Last Practice": "Paskutinė Treniruotė", "First Qualification": "Pirmoji Kvalifikacija", "Second Qualification": "Antroji Kvalifikacija", "Third Qualification": "Trečioji Kvalifikacija", "Sprint Shootout 1": "Sprinto Kvalifikacija 1", "Sprint Shootout 2": "Sprinto Kvalifikacija 2", "Sprint Shootout 3": "Sprinto Kvalifikacija 3", // UI labels "upcoming_race": "Artėjančios lenktynės", "overview": "Apžvalga", "timezone_info": "Laikai yra jūsų vietinėje laiko juostoje" } }; // Helper function for translations function getGpBlogDatasetTranslatedModel(model) { const translations = { track: `${LANGUAGE}/grandsprix`, calendar: `${LANGUAGE}/f1-calendar`, }; return translations[model] || model; } // Fetch the latest season if no custom season is provided async function getLatestSeason() { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Season/items/index?orderBy%5Bname%5D=desc&take=1` ); if (!response.ok) { throw new Error("Failed to fetch latest season"); } const data = await response.json(); return data.data[0]?.slug || null; } catch (error) { console.error("Error fetching latest season:", error); return null; } } // Fetch stages for a season async function fetchStages(seasonSlug) { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Stage/items/index?orderBy%5Bdate_time%5D=asc&where%5Bseason%5D%5Bslug%5D=${seasonSlug}&include%5Btrack%5D%5Binclude%5D%5Bcountry%5D=true` ); if (!response.ok) { throw new Error("Failed to fetch stages"); } const data = await response.json(); return data.data || []; } catch (error) { console.error("Error fetching stages:", error); return []; } } // Process stages data function processStages(stages) { // Get unique track IDs const tracksIds = [...new Set(stages.map(stage => stage.track_id))]; // Group stages by track const tracks = stages.reduce((acc, stage) => { const trackId = stage.track_id; if (!acc[trackId]) { acc[trackId] = { ...stage.track, stages: [], }; } acc[trackId].stages.push(stage); return acc; }, {}); return { tracksIds, tracks }; } // Find the upcoming race track ID function findUpcomingRaceTrackId(stages) { const now = new Date(); // First, find the earliest stage that's in the future const upcomingStage = stages.find(stage => new Date(stage.date_time) >= now); // If we found an upcoming stage, return its track_id if (upcomingStage) { return upcomingStage.track_id; } // If all races are in the past, return the first track as fallback return stages.length > 0 ? stages[0].track_id : null; } // Format date for display function formatDate(dateString, options) { return new Date(dateString).toLocaleString(LANGUAGE_CODE, options); } // Group stages by day function groupStagesByDay(stages) { return stages.reduce((acc, stage) => { const dayName = new Date(stage.date_time).toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); if (!acc[dayName]) { acc[dayName] = []; } acc[dayName].push(stage); return acc; }, {}); } // Render the F1 calendar function renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData) { if (!tracksIds.length || !upcomingTrackId) { document.querySelectorAll(".f1-calendar-container").forEach(target => { target.innerHTML = '

No F1 calendar data available

'; }); return; } // Get the upcoming race track const track = tracks[upcomingTrackId]; const tag = tagData.find((tag) => tag.model_id === track.id); const slug = tag?.slug || track.slug; const name = tag?.title || track.name; const translatedTrack = getGpBlogDatasetTranslatedModel("track"); // Group stages by day for the upcoming race const stagesByDay = groupStagesByDay(track.stages || []); // Create HTML for desktop schedule let desktopScheduleHTML = ""; Object.entries(stagesByDay).forEach(([dayName, dayStages]) => { if (dayStages.length > 0) { let stagesHTML = ""; // Get the date from the first stage in this day const date = new Date(dayStages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; dayStages.forEach(stage => { const stageTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; stagesHTML += `

${stageName}

${stageTime}

`; }); desktopScheduleHTML += `

${dayName} ${formattedDate}

${stagesHTML}

`; } }); // Create HTML for mobile schedule let mobileScheduleHTML = ""; // Group stages by date for mobile view const stagesByDate = {}; track.stages.forEach(stage => { const currentDate = new Date(stage.date_time); const dateKey = `${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}`; if (!stagesByDate[dateKey]) { stagesByDate[dateKey] = []; } stagesByDate[dateKey].push(stage); }); // Find the next upcoming stage const now = new Date(); let upcomingEvent = null; let upcomingDateKey = null; if (DEBUG) console.log(`F1 Calendar: Finding upcoming event. Current time: ${now.toLocaleString()}`); // Find the next upcoming event and its date key for (const [dateKey, stages] of Object.entries(stagesByDate)) { const sortedStages = [...stages].sort((a, b) => new Date(a.date_time) - new Date(b.date_time)); for (const stage of sortedStages) { const stageTime = new Date(stage.date_time); if (DEBUG) console.log(`F1 Calendar: Checking stage '${stage.name}' at ${stageTime.toLocaleString()}`); if (stageTime >= now) { upcomingEvent = stage; upcomingDateKey = dateKey; if (DEBUG) console.log(`F1 Calendar: Found upcoming event: '${stage.name}' (id: ${stage.id}) at ${stageTime.toLocaleString()}`); break; } } if (upcomingEvent) break; } // If no upcoming event, use the last event if (!upcomingEvent && Object.keys(stagesByDate).length > 0) { const lastDateKey = Object.keys(stagesByDate).sort().pop(); const lastStages = stagesByDate[lastDateKey]; upcomingEvent = lastStages[lastStages.length - 1]; upcomingDateKey = lastDateKey; if (DEBUG) console.log(`F1 Calendar: No upcoming events found, using last event: '${upcomingEvent.name}' (id: ${upcomingEvent.id})`); } let upcomingStageIndex = -1; // Render groups of stages by date for mobile Object.entries(stagesByDate).forEach(([dateKey, stages], dateIndex) => { // Get the date from the first stage in this group const date = new Date(stages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; // Get the day name, same as used in desktop view const dayName = date.toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); const isUpcomingDateGroup = dateKey === upcomingDateKey; if (DEBUG && isUpcomingDateGroup) { console.log(`F1 Calendar: Marking date group as upcoming: ${dayName} ${formattedDate}`); } mobileScheduleHTML += `

${dayName} ${formattedDate}

`; // Add all stages for this date stages.forEach((stage, stageIndex) => { const stageDateTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { weekday: "short", hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; const isUpcomingStage = upcomingEvent && stage.id === upcomingEvent.id; if (isUpcomingStage) { upcomingStageIndex = stageIndex; if (DEBUG) console.log(`F1 Calendar: Marking stage as upcoming: '${stageName}' at index ${stageIndex}`); } mobileScheduleHTML += `

${stageName}

${stageDateTime}

`; }); // Close the date group container mobileScheduleHTML += `

`; }); // Create the main HTML const html = ` ${stagesLabels[LANGUAGE]?.upcoming_race || "Komende race"}

${desktopScheduleHTML}

${mobileScheduleHTML}

${stagesLabels[LANGUAGE]?.timezone_info || "Tijden zijn in je lokale tijdzone"}

`; document.querySelectorAll(".f1-calendar-container").forEach(target => { // Check if already initialized to prevent duplicate initialization if (target.classList.contains('f1-calendar-initialized')) { return; } target.classList.add('f1-calendar-initialized'); target.innerHTML = html; // Completely rewritten horizontal scrolling to upcoming event const initScrollToUpcoming = () => { if (DEBUG) console.log(`F1 Calendar: Initializing scroll to upcoming event`); // Use requestAnimationFrame to ensure DOM is fully rendered const performScroll = () => { if (DEBUG) console.log(`F1 Calendar: Performing scroll operation`); // Find the upcoming event element const upcomingStage = target.querySelector('[data-upcoming-stage="true"]'); if (DEBUG) { console.log(`F1 Calendar: Upcoming stage found: ${!!upcomingStage}`); // Debug all events const allEvents = target.querySelectorAll('.mobile-event'); console.log(`F1 Calendar: Total mobile events: ${allEvents.length}`); allEvents.forEach((event, index) => { const hasUpcoming = event.hasAttribute('data-upcoming-stage'); console.log(`F1 Calendar: Event ${index} has upcoming attribute: ${hasUpcoming}`); }); } if (!upcomingStage) { if (DEBUG) console.log(`F1 Calendar: No upcoming stage found, cannot scroll`); return false; } // Find the scrollable container that contains this event let scrollContainer = upcomingStage.closest('.mobile-stages-container'); if (DEBUG) { console.log(`F1 Calendar: Scroll container found: ${!!scrollContainer}`); // Debug the container hierarchy if (scrollContainer) { console.log(`F1 Calendar: Container class list:`, scrollContainer.classList.toString()); console.log(`F1 Calendar: Container computed style overflow-x:`, getComputedStyle(scrollContainer).overflowX); console.log(`F1 Calendar: Container computed style white-space:`, getComputedStyle(scrollContainer).whiteSpace); // Check all children to see the layout const children = scrollContainer.children; console.log(`F1 Calendar: Container has ${children.length} direct children`); let totalChildrenWidth = 0; for (let i = 0; i < children.length; i++) { const child = children[i]; const childWidth = child.offsetWidth; totalChildrenWidth += childWidth; console.log(`F1 Calendar: Child ${i} width: ${childWidth}px, class: ${child.className}`); } console.log(`F1 Calendar: Total children width: ${totalChildrenWidth}px`); } } if (!scrollContainer) { if (DEBUG) console.log(`F1 Calendar: No scroll container found`); return false; } // Check if this container actually has horizontal scrolling const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth; if (!hasHorizontalScroll) { if (DEBUG) console.log(`F1 Calendar: Current container doesn't have horizontal scroll, searching for alternative...`); // Look for a parent container that has horizontal scrolling let parent = upcomingStage.parentElement; let foundScrollableParent = null; while (parent && !foundScrollableParent) { if (parent.scrollWidth > parent.clientWidth) { foundScrollableParent = parent; if (DEBUG) console.log(`F1 Calendar: Found scrollable parent:`, parent.className); break; } parent = parent.parentElement; } if (foundScrollableParent) { scrollContainer = foundScrollableParent; } else { if (DEBUG) console.log(`F1 Calendar: No scrollable container found in hierarchy`); return false; } } // Get current scroll position and container dimensions const containerWidth = scrollContainer.clientWidth; const containerScrollWidth = scrollContainer.scrollWidth; // Get the position of the upcoming event relative to its container const eventRect = upcomingStage.getBoundingClientRect(); const containerRect = scrollContainer.getBoundingClientRect(); const eventOffsetInContainer = upcomingStage.offsetLeft; const eventWidth = upcomingStage.offsetWidth; if (DEBUG) { console.log(`F1 Calendar: Container width: ${containerWidth}px`); console.log(`F1 Calendar: Container scroll width: ${containerScrollWidth}px`); console.log(`F1 Calendar: Event offset in container: ${eventOffsetInContainer}px`); console.log(`F1 Calendar: Event width: ${eventWidth}px`); console.log(`F1 Calendar: Event rect:`, eventRect); console.log(`F1 Calendar: Container rect:`, containerRect); } // Calculate the scroll position to center the event const targetScrollLeft = eventOffsetInContainer - (containerWidth / 2) + (eventWidth / 2); // Ensure scroll position is within bounds const maxScrollLeft = containerScrollWidth - containerWidth; const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft)); if (DEBUG) { console.log(`F1 Calendar: Target scroll left: ${targetScrollLeft}px`); console.log(`F1 Calendar: Max scroll left: ${maxScrollLeft}px`); console.log(`F1 Calendar: Final scroll left: ${finalScrollLeft}px`); console.log(`F1 Calendar: Current scroll left: ${scrollContainer.scrollLeft}px`); } // Apply the scroll try { // Try smooth scrolling first scrollContainer.scrollTo({ left: finalScrollLeft, behavior: 'smooth' }); // Fallback for immediate scrolling setTimeout(() => { if (Math.abs(scrollContainer.scrollLeft - finalScrollLeft) > 5) { scrollContainer.scrollLeft = finalScrollLeft; if (DEBUG) console.log(`F1 Calendar: Applied fallback scroll: ${scrollContainer.scrollLeft}px`); } }, 1000); if (DEBUG) { setTimeout(() => { console.log(`F1 Calendar: Final scroll position after 300ms: ${scrollContainer.scrollLeft}px`); }, 3000); } return true; } catch (error) { if (DEBUG) console.error(`F1 Calendar: Error during scroll:`, error); return false; } }; // Try scrolling with multiple timing strategies let attempts = 0; const maxAttempts = 5; const tryScroll = () => { attempts++; if (DEBUG) console.log(`F1 Calendar: Scroll attempt ${attempts}/${maxAttempts}`); const success = performScroll(); if (!success && attempts < maxAttempts) { // Retry with exponential backoff const delay = Math.min(100 * Math.pow(2, attempts - 1), 1000); if (DEBUG) console.log(`F1 Calendar: Retrying in ${delay}ms`); setTimeout(tryScroll, delay); } }; // Start with requestAnimationFrame for better timing requestAnimationFrame(() => { requestAnimationFrame(() => { tryScroll(); }); }); }; // Initialize scrolling initScrollToUpcoming(); }); } // Main function to initialize the calendar async function initF1Calendar() { // Check if there are any uninitialized calendar containers const containers = document.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)"); if (!containers.length) { return; } try { // Get season slug let seasonSlug = customSeasonSlug; if (!seasonSlug) { seasonSlug = await getLatestSeason(); } if (!seasonSlug) { throw new Error("No season found"); } // Fetch stages for the season const stages = await fetchStages(seasonSlug); if (!stages.length) { throw new Error("No stages found for this season"); } // Find the upcoming race track ID const upcomingTrackId = findUpcomingRaceTrackId(stages); // Process the stages data const { tracksIds, tracks } = processStages(stages); const tagData = await getCollectionItemsTags( dataset, "grandsprix", [upcomingTrackId] ); // Render the calendar renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData); } catch (error) { console.error("Error initializing F1 calendar:", error); document.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)").forEach(container => { container.classList.add('f1-calendar-initialized'); container.innerHTML = `

Error loading F1 calendar: ${error.message}

`; }); } } const getCollectionItemsTags = async (dataset, collection, ids) => { try { const res = await fetch(`https://cloud1-service.newsifier.nl/api/v2/tag/dataset/${dataset}/${collection}?ids=${ids.join(',')}`, { headers: { "Content-Type": "application/json", "x-tenant": `gpblog.com-${LANGUAGE}`, "accept-language": LANGUAGE, }, }); const data = await res.json(); return data.data; } catch (err) { return []; } }; initF1Calendar()

Pos.	Driver	Team	Points
1	Kimi Antonelli Kimi Antonelli	MercedesMER	72
2	George Russell George Russell	MercedesMER	63
3	Charles Leclerc Charles Leclerc	FerrariFER	49
4	Lewis Hamilton Lewis Hamilton	FerrariFER	41
5	Lando Norris Lando Norris	McLarenMCL	25
6	Oscar Piastri Oscar Piastri	McLarenMCL	21
7	Oliver Bearman Oliver Bearman	HaasHAA	17
8	Pierre Gasly Pierre Gasly	AlpineALP	15
9	Max Verstappen Max Verstappen	Red Bull RacingRBR	12
10	Liam Lawson Liam Lawson	Racing BullsRCB	10
11	Arvid Lindblad Arvid Lindblad	Racing BullsRCB	4
12	Isack Hadjar Isack Hadjar	Red Bull RacingRBR	4
13	Gabriel Bortoleto Gabriel Bortoleto	AudiAUD	2
14	Carlos Sainz Carlos Sainz	WilliamsWIL	2
15	Esteban Ocon Esteban Ocon	HaasHAA	1
16	Franco Colapinto Franco Colapinto	AlpineALP	1
17	Nico Hulkenberg Nico Hulkenberg	AudiAUD	0
18	Alexander Albon Alexander Albon	WilliamsWIL	0
19	Valtteri Bottas Valtteri Bottas	CadillacCAD	0
20	Sergio Perez Sergio Perez	CadillacCAD	0
21	Fernando Alonso Fernando Alonso	Aston MartinAST	0
22	Lance Stroll Lance Stroll	Aston MartinAST	0

Watch: Drivers tip-toe at the start of the Canadian Grand Prix

bySophia Crothall

The Race Start at the 2024 Canadian Grand Prix

Jeremy Clarkson comes out with warning message to new F1 fans

Ricciardo mistakes at start and gets five-second penalty

Alpine hits out at online abuse in strong statement backing Colapinto

Two extra races added to calendar to offset Saudi Arabia round cancellation

Stroll set to race alongside Verstappen in different racing series

How Ducati will run new upgrades at Jerez in hopes of catching Aprilia

F1 engineer offers radical solution to end super clipping issues for good

Verstappen bluntly told to 'shut up' or walk away from F1 amid brutal verdict

F1 LIVE | Mercedes annoys Ferrari as as Verstappen hit with stark ultimatum

Verstappen exit threat triggers warning: 'We cannot afford to lose Max'

Alpine hits out at online abuse in strong statement backing Colapinto

Two extra races added to calendar to offset Saudi Arabia round cancellation

Stroll set to race alongside Verstappen in different racing series

How Ducati will run new upgrades at Jerez in hopes of catching Aprilia

Popular on GPBlog

F1 LIVE | Mercedes annoys Ferrari as as Verstappen hit with stark ultimatum

'Mercedes annoys Ferrari again with new engine trick'

McLaren addresses major flaw flagged by Verstappen and Norris under regulation

F1 Today: Verstappen exit threat dubbed boring, ousted driver lands new seat

Season

Jeremy Clarkson comes out with warning message to new F1 fans

Ricciardo mistakes at start and gets five-second penalty