Add support for multiple ads

src/components/Analytics/analytics.ts

@@ -1,4 +1,4 @@
-export {};
+export { };
 
 declare global {
   interface Window {
@@ -29,7 +29,7 @@ window.fireEvent = (props: GAEventType) => {
     return;
   }
 
-  if (window.__DEBUG__) {
+  if (import.meta.env.DEV) {
     console.log('Analytics event fired', props);
   }
 

src/components/PageSponsor.tsx

@@ -0,0 +1,89 @@
+import { useStore } from '@nanostores/preact';
+import { useEffect, useState } from 'preact/hooks';
+import CloseIcon from '../icons/close.svg';
+import { sponsorHidden } from '../stores/page';
+
+export type PageSponsorType = {
+  url: string;
+  title: string;
+  imageUrl: string;
+  description: string;
+  company: string;
+  page: string;
+};
+
+type PageSponsorProps = {
+  sponsors?: PageSponsorType[];
+};
+
+export function PageSponsor(props: PageSponsorProps) {
+  const { sponsors = [] } = props;
+  const $isSponsorHidden = useStore(sponsorHidden);
+  const [sponsor, setSponsor] = useState<PageSponsorType>();
+
+  if (sponsors.length === 0) {
+    return null;
+  }
+
+  function loadSponsor() {
+    console.log('loadSponsor');
+
+    const sponsorIndex = Math.floor(Math.random() * sponsors.length);
+    setSponsor(sponsors[sponsorIndex]);
+  }
+
+  // We load the sponsor after 1second of the page load
+  useEffect(() => {
+    const timer = window.setTimeout(loadSponsor, 500);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  if ($isSponsorHidden || !sponsor) {
+    return null;
+  }
+
+  const { url, title, imageUrl, description, company, page } = sponsor;
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener sponsored nofollow"
+      class="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
+      onClick={() => {
+        window.fireEvent({
+          category: 'SponsorClick',
+          action: `${company} Redirect`,
+          label: `${page} / ${company} Link`,
+        });
+      }}
+    >
+      <span
+        class="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
+        aria-label="Close"
+        aria-role="button"
+        close-sponsor
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+
+          sponsorHidden.set(true);
+        }}
+      >
+        <img alt="Close" class="h-4 w-4" src={CloseIcon} />
+      </span>
+      <img
+        src={imageUrl}
+        class="block h-[150px] w-[104.89px] object-contain lg:h-[169px] lg:w-[118.18px]"
+        alt="Sponsor Banner"
+      />
+      <span class="flex flex-1 flex-col justify-between text-sm">
+        <span class="p-[10px]">
+          <span class="mb-0.5 block font-semibold">{title}</span>
+          <span class="block text-gray-500">{description}</span>
+        </span>
+        <span class="sponsor-footer">Partner Content</span>
+      </span>
+    </a>
+  );
+}

src/data/roadmaps/backend/backend.md

@@ -11,15 +11,13 @@ tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral
 dimensions:
   width: 968
   height: 2840.4
-sponsor:
+sponsors:
-  url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-backend&utm_medium=display&utm_source=roadmap'
+  - url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-backend&utm_medium=display&utm_source=roadmap'
-  title: 'Free GraphQL Courses'
+    title: 'Free GraphQL Courses'
-  imageUrl: 'https://i.imgur.com/pZzroyL.png'
+    imageUrl: 'https://i.imgur.com/pZzroyL.png'
-  description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
+    description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
-  event:
+    page: 'Backend'
-    category: 'SponsorClick'
+    company: 'Apollo'
-    action: 'Apollo Redirect'
-    label: 'Backend / Apollo Link'
 schema:
   headline: 'Backend Developer Roadmap'
   description: 'Learn how to become a Backend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/devops/devops.md

@@ -11,15 +11,13 @@ tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral
 dimensions:
   width: 968
   height: 2527.46
-sponsor:
+sponsors:
-  url: 'https://info.honeycomb.io/observability-engineering-oreilly-book-2022?utm_medium=paid-sponsorship&utm_source=insight-partners&utm_campaign=plg_insightpartners_paidsponsorship'
+  - url: 'https://info.honeycomb.io/observability-engineering-oreilly-book-2022?utm_medium=paid-sponsorship&utm_source=insight-partners&utm_campaign=plg_insightpartners_paidsponsorship'
-  title: 'Free eBook'
+    title: 'Free eBook'
-  imageUrl: 'https://i.imgur.com/zS1FMNo.jpg'
+    imageUrl: 'https://i.imgur.com/zS1FMNo.jpg'
-  description: 'Learn how to debug more quickly & get more time to innovate by starting your observability journey'
+    description: 'Learn how to debug more quickly & get more time to innovate by starting your observability journey'
-  event:
+    page: 'DevOps'
-    category: 'SponsorClick'
+    company: 'Honeycomb'
-    action: 'Honeycomb Redirect'
-    label: 'DevOps / Honeycomb Link'
 schema:
   headline: 'DevOps Roadmap'
   description: 'Learn to become a DevOps, SRE or get any other operations role with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/frontend/frontend.md

@@ -11,15 +11,13 @@ tnsBannerLink: 'https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral
 dimensions:
   width: 968
   height: 2822.1
-sponsor:
+sponsors:
-  url: 'https://info.honeycomb.io/observability-engineering-oreilly-book-2022?utm_medium=paid-sponsorship&utm_source=insight-partners&utm_campaign=plg_insightpartners_paidsponsorship'
+  - url: 'https://info.honeycomb.io/observability-engineering-oreilly-book-2022?utm_medium=paid-sponsorship&utm_source=insight-partners&utm_campaign=plg_insightpartners_paidsponsorship'
-  title: 'Free eBook'
+    title: 'Free eBook'
-  imageUrl: 'https://i.imgur.com/zS1FMNo.jpg'
+    imageUrl: 'https://i.imgur.com/zS1FMNo.jpg'
-  description: 'Learn how to debug more quickly & get more time to innovate by starting your observability journey'
+    description: 'Learn how to debug more quickly & get more time to innovate by starting your observability journey'
-  event:
+    page: 'Frontend'
-    category: 'SponsorClick'
+    company: 'Honeycomb'
-    action: 'Honeycomb Redirect'
-    label: 'Frontend / Honeycomb Link'
 schema:
   headline: 'Frontend Developer Roadmap'
   description: 'Learn how to become a Frontend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/graphql/graphql.md

@@ -11,15 +11,13 @@ hasTopics: true
 dimensions:
   width: 968
   height: 1669.8
-sponsor:
+sponsors:
-  url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-graphql&utm_medium=display&utm_source=roadmap'
+  - url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-graphql&utm_medium=display&utm_source=roadmap'
-  title: 'Free GraphQL Courses'
+    title: 'Free GraphQL Courses'
-  imageUrl: 'https://i.imgur.com/pZzroyL.png'
+    imageUrl: 'https://i.imgur.com/pZzroyL.png'
-  description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
+    description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
-  event:
+    page: 'GraphQL'
-    category: 'SponsorClick'
+    company: 'Apollo'
-    action: 'Apollo Redirect'
-    label: 'GraphQL / Apollo Link'
 schema:
   headline: 'GraphQL Roadmap'
   description: 'Learn how to use GraphQL with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/nodejs/nodejs.md

@@ -11,15 +11,13 @@ hasTopics: true
 dimensions:
   width: 968
   height: 2474.06
-sponsor:
+sponsors:
-  url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-nodejs&utm_medium=display&utm_source=roadmap'
+  - url: 'https://www.apollographql.com/tutorials/lift-off-part1?utm_campaign=2023-05-01_odyssey-lift-off-nodejs&utm_medium=display&utm_source=roadmap'
-  title: 'Free GraphQL Courses'
+    title: 'Free GraphQL Courses'
-  imageUrl: 'https://i.imgur.com/pZzroyL.png'
+    imageUrl: 'https://i.imgur.com/pZzroyL.png'
-  description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
+    description: 'Level up your knowledge with interactive GraphQL trainings and earn a Graph Developer certification.'
-  event:
+    page: 'Node.js'
-    category: 'SponsorClick'
+    company: 'Apollo'
-    action: 'Apollo Redirect'
-    label: 'Node.js / Apollo Link'
 schema:
   headline: 'Node.js Roadmap'
   description: 'Learn Node.js with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/icons/close.svg

@@ -1,4 +1,4 @@
-<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg aria-hidden="true" class="w-5 h-5" fill="#c6c7c7" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"
         d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
         clip-rule="evenodd"></path>

src/layouts/BaseLayout.astro

@@ -2,11 +2,10 @@
 import Analytics from '../components/Analytics/Analytics.astro';
 import Authenticator from '../components/Authenticator/Authenticator.astro';
 import Footer from '../components/Footer.astro';
-import { PageProgress } from '../components/PageProgress';
 import Navigation from '../components/Navigation/Navigation.astro';
 import OpenSourceBanner from '../components/OpenSourceBanner.astro';
-import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
+import { PageProgress } from '../components/PageProgress';
-import Sponsor from '../components/Sponsor/Sponsor.astro';
+import { PageSponsor,PageSponsorType } from '../components/PageSponsor';
 import { siteConfig } from '../lib/config';
 import '../styles/global.css';
 
@@ -18,7 +17,7 @@ export interface Props {
   noIndex?: boolean;
   canonicalUrl?: string;
   permalink?: string;
-  sponsor?: SponsorType;
+  sponsors?: PageSponsorType[];
   jsonLd?: Record<string, unknown>[];
 }
 
@@ -29,7 +28,7 @@ const {
   noIndex = false,
   permalink = '',
   canonicalUrl: givenCanonical = '',
-  sponsor,
+  sponsors,
   jsonLd = [],
   redirectUrl = '',
 } = Astro.props;
@@ -136,12 +135,12 @@ const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${
     <slot name='page-footer'>
       <OpenSourceBanner />
       <Footer />
-      {sponsor && <Sponsor sponsor={sponsor} />}
     </slot>
 
     <Analytics />
     <Authenticator />
-    <PageProgress client:load />
+    <PageProgress client:idle />
+    <PageSponsor sponsors={sponsors || []} client:idle />
 
     <slot name='after-footer' />
   </body>

src/lib/best-pratice.ts

@@ -1,5 +1,5 @@
+import type { PageSponsorType } from '../components/PageSponsor';
 import type { MarkdownFileType } from './file';
-import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 
 export interface BestPracticeFrontmatter {
   jsonUrl: string;
@@ -15,7 +15,7 @@ export interface BestPracticeFrontmatter {
     width: number;
     height: number;
   };
-  sponsor?: SponsorType;
+  sponsors?: PageSponsorType[];
   seo: {
     title: string;
     description: string;

src/lib/roadmap.ts

@@ -1,5 +1,5 @@
+import type { PageSponsorType } from '../components/PageSponsor';
 import type { MarkdownFileType } from './file';
-import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 
 export interface RoadmapFrontmatter {
   jsonUrl: string;
@@ -18,7 +18,7 @@ export interface RoadmapFrontmatter {
     width: number;
     height: number;
   };
-  sponsor?: SponsorType;
+  sponsors?: PageSponsorType[];
   seo: {
     title: string;
     description: string;

src/pages/[roadmapId]/index.astro

@@ -5,14 +5,14 @@ import MarkdownFile from '../../components/MarkdownFile.astro';
 import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
+import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
 import {
-  generateArticleSchema,
+generateArticleSchema,
-  generateFAQSchema,
+generateFAQSchema,
 } from '../../lib/jsonld-schema';
-import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';
+import { RoadmapFrontmatter,getRoadmapIds } from '../../lib/roadmap';
 
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
@@ -63,7 +63,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
   title={roadmapData?.seo?.title}
   description={roadmapData.seo.description}
   keywords={roadmapData.seo.keywords}
-  sponsor={roadmapData.sponsor}
+  sponsors={roadmapData.sponsors}
   noIndex={roadmapData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
@@ -95,7 +95,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
             description={roadmapData.briefDescription}
             pageUrl={`https://roadmap.sh/${roadmapId}`}
           />
-          <TopicDetail client:load />
+          <TopicDetail client:idle />
 
           <FrameRenderer
             resourceType={'roadmap'}

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -1,14 +1,14 @@
 ---
-import { TopicDetail } from '../../../components/TopicDetail/TopicDetail';
 import BestPracticeHeader from '../../../components/BestPracticeHeader.astro';
 import FrameRenderer from '../../../components/FrameRenderer/FrameRenderer.astro';
 import MarkdownFile from '../../../components/MarkdownFile.astro';
 import ShareIcons from '../../../components/ShareIcons/ShareIcons.astro';
+import { TopicDetail } from '../../../components/TopicDetail/TopicDetail';
 import UpcomingForm from '../../../components/UpcomingForm.astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import {
-  BestPracticeFrontmatter,
+BestPracticeFrontmatter,
-  getBestPracticeIds,
+getBestPracticeIds,
 } from '../../../lib/best-pratice';
 import { generateArticleSchema } from '../../../lib/jsonld-schema';
 
@@ -55,7 +55,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
   title={bestPracticeData?.seo?.title}
   description={bestPracticeData.seo.description}
   keywords={bestPracticeData.seo.keywords}
-  sponsor={bestPracticeData.sponsor}
+  sponsors={bestPracticeData.sponsors}
   noIndex={bestPracticeData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
@@ -85,7 +85,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
           />
 
-          <TopicDetail client:load />
+          <TopicDetail client:idle />
 
           <FrameRenderer
             resourceType={'best-practice'}