From a54e2add534d64b6db67f7ca197da19da703f217 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 1 Jul 2025 13:32:49 +0100
Subject: [PATCH] Add a/b test (#8868)

---
 src/layouts/BaseLayout.astro |  20 ++++-
 src/pages/courses/sql.astro  | 159 ++++++++++++++++++-----------------
 2 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e4012d868..aefd62d23 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -21,10 +21,13 @@ import { siteConfig } from '../lib/config';
 import type { ResourceType } from '../lib/resource-progress';
 import Bluconic from '../components/Analytics/Bluconic.astro';
 import OneTrust from '../components/Analytics/OneTrust.astro';
+import { cn } from '../lib/classname';
 
 export interface Props {
   title: string;
   ogImageUrl?: string;
+  htmlClassName?: string;
+  bodyClassName?: string;
   // This isn't used anywhere except for the sponsor event labels
   briefTitle?: string;
   redirectUrl?: string;
@@ -42,6 +45,8 @@ export interface Props {
 
 const {
   title = siteConfig.title,
+  htmlClassName,
+  bodyClassName,
   briefTitle,
   description = siteConfig.description,
   ogImageUrl = 'https://roadmap.sh/images/og-img.png',
@@ -72,7 +77,7 @@ const gaPageIdentifier = Astro.url.pathname
 ---
 
 <!doctype html>
-<html lang='en'>
+<html lang='en' class={htmlClassName}>
   <head>
     <meta charset='UTF-8' />
     <meta name='generator' content={Astro.generator} />
@@ -156,10 +161,17 @@ const gaPageIdentifier = Astro.url.pathname
     <link rel='preconnect' href='https://api.roadmap.sh/' />
 
     {
-      hasVarify && !import.meta.env.DEV && (
+      hasVarify && (
         <Fragment>
+          <style is:inline>.varify-antiflicker{opacity:0 !important}</style>
           <script is:inline>
-            window.varify = window.varify || {}; window.varify.iid = 4013;
+            window.setTimeout(() => {
+              document.querySelectorAll('.varify-antiflicker').forEach((el) => {
+                el.classList.remove('varify-antiflicker');
+              });
+            }, 4000);
+            window.varify = window.varify || {};
+            window.varify.iid = 4013;
           </script>
           <script is:inline src='https://app.varify.io/varify.js' />
         </Fragment>
@@ -202,7 +214,7 @@ const gaPageIdentifier = Astro.url.pathname
       )
     }
   </head>
-  <body class='flex min-h-screen flex-col'>
+  <body class={cn('flex min-h-screen flex-col', bodyClassName)}>
     <!-- Google Tag Manager (noscript) -->
     <noscript>
       <iframe
diff --git a/src/pages/courses/sql.astro b/src/pages/courses/sql.astro
index 5da9af0a0..20464dfc5 100644
--- a/src/pages/courses/sql.astro
+++ b/src/pages/courses/sql.astro
@@ -1,14 +1,15 @@
 ---
 import { SQLCoursePage } from '../../components/SQLCourse/SQLCoursePage.tsx';
+import { SQLCourseVariantPage } from '../../components/SQLCourseVariant/SQLCourseVariantPage';
 import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
 ---
 
 <SkeletonLayout
+  htmlClassName='varify-antiflicker'
   title='Master SQL'
   briefTitle='Learn SQL from the ground up'
   ogImageUrl='https://assets.roadmap.sh/guest/sql-course-bjc53.png'
   description='Learn SQL from the ground up. This SQL programming class is designed to help you go from beginner to expert through hands-on practice with real-world scenarios, mastering everything from basic to complex queries.'
-  hasVarify={true}
   keywords={[
     'sql',
     'database',
@@ -16,95 +17,103 @@ import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
     'database administration',
   ]}
   canonicalUrl='/courses/sql'
+  hasVarify={true}
   jsonLd={[
     {
-      "@context": "https://schema.org",
-      "@type": "Course",
-      "@id": "https://roadmap.sh/courses/sql",
-      "name": "Master SQL",
-      "description": "A comprehensive SQL course designed to take you from beginner to advanced levels, featuring 55+ lessons, 100+ challenges, an integrated IDE, and an AI tutor. Ideal for developers, data analysts, and anyone working with data.",
-      "provider": {
-        "@type": "Organization",
-        "name": "roadmap.sh",
-        "url": "https://roadmap.sh"
+      '@context': 'https://schema.org',
+      '@type': 'Course',
+      '@id': 'https://roadmap.sh/courses/sql',
+      name: 'Master SQL',
+      description:
+        'A comprehensive SQL course designed to take you from beginner to advanced levels, featuring 55+ lessons, 100+ challenges, an integrated IDE, and an AI tutor. Ideal for developers, data analysts, and anyone working with data.',
+      provider: {
+        '@type': 'Organization',
+        name: 'roadmap.sh',
+        url: 'https://roadmap.sh',
       },
-      "publisher": {
-        "@type": "Organization",
-        "name": "roadmap.sh",
-        "url": "https://roadmap.sh"
+      publisher: {
+        '@type': 'Organization',
+        name: 'roadmap.sh',
+        url: 'https://roadmap.sh',
       },
-      "timeRequired": "PT60H",
-      "isAccessibleForFree": false,
-      "offers": {
-        "@type": "Offer",
-        "url": "https://roadmap.sh/courses/sql",
-        "price": "59.99",
-        "priceCurrency": "USD",
-        "availability": "https://schema.org/InStock",
-        "category": "paid"
+      timeRequired: 'PT60H',
+      isAccessibleForFree: false,
+      offers: {
+        '@type': 'Offer',
+        url: 'https://roadmap.sh/courses/sql',
+        price: '59.99',
+        priceCurrency: 'USD',
+        availability: 'https://schema.org/InStock',
+        category: 'paid',
       },
-      "image": [
-        "https://assets.roadmap.sh/guest/sql-course-bjc53.png"
+      image: ['https://assets.roadmap.sh/guest/sql-course-bjc53.png'],
+      coursePrerequisites: [],
+      teaches: [
+        'SQL syntax and queries',
+        'Data filtering and sorting',
+        'Joins and subqueries',
+        'Aggregate functions',
+        'Stored procedures',
+        'Views and indexes',
+        'Transactions and ACID properties',
+        'Query optimization techniques',
       ],
-      "coursePrerequisites": [],
-      "teaches": [
-        "SQL syntax and queries",
-        "Data filtering and sorting",
-        "Joins and subqueries",
-        "Aggregate functions",
-        "Stored procedures",
-        "Views and indexes",
-        "Transactions and ACID properties",
-        "Query optimization techniques"
-      ],
-      "educationalLevel": "Beginner to Advanced",
-      "aggregateRating": {
-        "@type": "AggregateRating",
-        "ratingValue": "4.8",
-        "ratingCount": 500
+      educationalLevel: 'Beginner to Advanced',
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: '4.8',
+        ratingCount: 500,
       },
-      "inLanguage": "en",
-      "review": [
+      inLanguage: 'en',
+      review: [
         {
-          "@type": "Review",
-          "reviewBody": "This course was absolutely brilliant! The integrated database environment to practice what I learned was the best part.",
-          "author": {
-            "@type": "Person",
-            "name": "Gourav Khunger"
-          }
+          '@type': 'Review',
+          reviewBody:
+            'This course was absolutely brilliant! The integrated database environment to practice what I learned was the best part.',
+          author: {
+            '@type': 'Person',
+            name: 'Gourav Khunger',
+          },
         },
         {
-          "@type": "Review",
-          "reviewBody": "Kamran has clearly put a lot of thought into this course. The content, structure and exercises were all great.",
-          "author": {
-            "@type": "Person",
-            "name": "Meabed"
-          }
+          '@type': 'Review',
+          reviewBody:
+            'Kamran has clearly put a lot of thought into this course. The content, structure and exercises were all great.',
+          author: {
+            '@type': 'Person',
+            name: 'Meabed',
+          },
         },
         {
-          "@type": "Review",
-          "reviewBody": "I already knew SQL but this course taught me a bunch of new things. Practical examples and challenges were great. Highly recommended!",
-          "author": {
-            "@type": "Person",
-            "name": "Mohsin Aheer"
-          }
-        }
+          '@type': 'Review',
+          reviewBody:
+            'I already knew SQL but this course taught me a bunch of new things. Practical examples and challenges were great. Highly recommended!',
+          author: {
+            '@type': 'Person',
+            name: 'Mohsin Aheer',
+          },
+        },
       ],
-      "educationalCredentialAwarded": {
-        "@type": "EducationalOccupationalCredential",
-        "name": "Certificate of Completion",
-        "credentialCategory": "Certificate",
-        "url": "https://roadmap.sh/courses/sql"
+      educationalCredentialAwarded: {
+        '@type': 'EducationalOccupationalCredential',
+        name: 'Certificate of Completion',
+        credentialCategory: 'Certificate',
+        url: 'https://roadmap.sh/courses/sql',
       },
-      "hasCourseInstance": [
+      hasCourseInstance: [
         {
-          "@type": "CourseInstance",
-          "courseMode": "Online",
-          "courseWorkload": "PT60H",
-        }
-      ]
-    }
+          '@type': 'CourseInstance',
+          courseMode: 'Online',
+          courseWorkload: 'PT60H',
+        },
+      ],
+    },
   ]}
 >
-  <SQLCoursePage client:load />
+  <div class='course-variant-1'>
+    <SQLCoursePage client:load />
+  </div>
+  <div class='course-variant-2 !hidden'>
+    <SQLCourseVariantPage client:load />
+  </div>
 </SkeletonLayout>