// 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	156
2	Lewis Hamilton Lewis Hamilton	FerrariFER	115
3	George Russell George Russell	MercedesMER	106
4	Charles Leclerc Charles Leclerc	FerrariFER	75
5	Lando Norris Lando Norris	McLarenMCL	73
6	Oscar Piastri Oscar Piastri	McLarenMCL	68
7	Max Verstappen Max Verstappen	Red Bull RacingRBR	55
8	Pierre Gasly Pierre Gasly	AlpineALP	41
9	Isack Hadjar Isack Hadjar	Red Bull RacingRBR	34
10	Liam Lawson Liam Lawson	Racing BullsRCB	28
11	Oliver Bearman Oliver Bearman	HaasHAA	18
12	Franco Colapinto Franco Colapinto	AlpineALP	16
13	Arvid Lindblad Arvid Lindblad	Racing BullsRCB	13
14	Carlos Sainz Carlos Sainz	WilliamsWIL	6
15	Alexander Albon Alexander Albon	WilliamsWIL	5
16	Esteban Ocon Esteban Ocon	HaasHAA	3
17	Gabriel Bortoleto Gabriel Bortoleto	AudiAUD	2
18	Fernando Alonso Fernando Alonso	Aston MartinAST	1
19	Nico Hulkenberg Nico Hulkenberg	AudiAUD	0
20	Valtteri Bottas Valtteri Bottas	CadillacCAD	0
21	Sergio Perez Sergio Perez	CadillacCAD	0
22	Lance Stroll Lance Stroll	Aston MartinAST	0

Are these the best five liveries to ever appear in Formula 1?

Don’t miss GPblog in Google

Update: 2019 car launch dates so far...

Formula 1 car v Rugby scrum...who wins?

F1 Today | Russell keeps pole despite Verstappen crash leading to yellow flag

Verstappen can still laugh after yet another problem: 'I’ll go to Tibet at the end of the year'

Verstappen crashes in qualifying: will he start from the pit lane?

McLaren label Russell's yellow flag pole lap 'a case on the edge'

Acosta on Marquez-Ducati partnership: 'He is the last of an era'

Hamilton pinpoints Ferrari's only chance of beating Mercedes in Austrian GP

Major disappointment at Red Bull evident after Verstappen's Q3 crash in Austria

Russell takes confidence from beating Antonelli: 'It can't continuously be bad luck'

F1 Today | Russell keeps pole despite Verstappen crash leading to yellow flag

Verstappen can still laugh after yet another problem: 'I’ll go to Tibet at the end of the year'

Verstappen crashes in qualifying: will he start from the pit lane?

McLaren label Russell's yellow flag pole lap 'a case on the edge'

Popular on GPBlog

FIA issue verdict on Russell's alleged yellow flag infringement during pole lap

The key reason behind Verstappen's crash in Austrian GP qualifying

New data give Red Bull and Verstappen hope of a podium fight

Rachel Brookes breaks silence after shock Sky Sports exit

Season

Update: 2019 car launch dates so far...

Formula 1 car v Rugby scrum...who wins?