From 9b73d60c5db812e75d37b11517e49c9d7c464a03 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 3 May 2023 03:14:04 +0100 Subject: [PATCH] Add support for multiple ads --- src/components/PageSponsor.tsx | 55 ++++++++++++------ src/components/Sponsor/Sponsor.astro | 57 ------------------- src/components/Sponsor/sponsor.js | 22 ------- src/layouts/BaseLayout.astro | 11 +++- src/pages/[roadmapId]/index.astro | 1 + .../[bestPracticeId]/index.astro | 1 + 6 files changed, 50 insertions(+), 97 deletions(-) delete mode 100644 src/components/Sponsor/Sponsor.astro delete mode 100644 src/components/Sponsor/sponsor.js diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx index 0efb79d2c..3f12949a2 100644 --- a/src/components/PageSponsor.tsx +++ b/src/components/PageSponsor.tsx @@ -1,36 +1,57 @@ import { useStore } from '@nanostores/preact'; import { useEffect, useState } from 'preact/hooks'; import CloseIcon from '../icons/close.svg'; +import { httpGet } from '../lib/http'; import { sponsorHidden } from '../stores/page'; export type PageSponsorType = { - url: string; - title: string; - imageUrl: string; - description: string; company: string; - page: string; + description: string; + imageUrl: string; + pageUrl: string; + title: string; + url: string; +}; + +type V1GetSponsorResponse = { + href?: string; + sponsor?: PageSponsorType; }; type PageSponsorProps = { - sponsors?: PageSponsorType[]; + gaPageIdentifier?: string; }; export function PageSponsor(props: PageSponsorProps) { - const { sponsors = [] } = props; + const { gaPageIdentifier } = props; const $isSponsorHidden = useStore(sponsorHidden); const [sponsor, setSponsor] = useState(); - if (sponsors.length === 0) { - return null; - } + const loadSponsor = async () => { + const { response, error } = await httpGet( + `${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`, + { + href: window.location.pathname, + } + ); - function loadSponsor() { - console.log('loadSponsor'); + if (error) { + console.error(error); + return; + } - const sponsorIndex = Math.floor(Math.random() * sponsors.length); - setSponsor(sponsors[sponsorIndex]); - } + if (!response?.sponsor) { + return; + } + + setSponsor(response.sponsor); + + window.fireEvent({ + category: 'SponsorImpression', + action: `${response.sponsor?.company} Impression`, + label: `${gaPageIdentifier} / ${response.sponsor?.company} Link`, + }); + }; // We load the sponsor after 1second of the page load useEffect(() => { @@ -42,7 +63,7 @@ export function PageSponsor(props: PageSponsorProps) { return null; } - const { url, title, imageUrl, description, company, page } = sponsor; + const { url, title, imageUrl, description, company, pageUrl } = sponsor; return ( diff --git a/src/components/Sponsor/Sponsor.astro b/src/components/Sponsor/Sponsor.astro deleted file mode 100644 index 303a7250d..000000000 --- a/src/components/Sponsor/Sponsor.astro +++ /dev/null @@ -1,57 +0,0 @@ ---- -import type { GAEventType } from '../Analytics/analytics'; -import Icon from '../AstroIcon.astro'; - -export type SponsorType = { - url: string; - title: string; - imageUrl: string; - description: string; - event: GAEventType; -}; - -export interface Props { - sponsor: SponsorType; -} - -const { - sponsor: { title, url, description, imageUrl, event }, -} = Astro.props; ---- - - - - - - diff --git a/src/components/Sponsor/sponsor.js b/src/components/Sponsor/sponsor.js deleted file mode 100644 index 3d3975610..000000000 --- a/src/components/Sponsor/sponsor.js +++ /dev/null @@ -1,22 +0,0 @@ -import { sponsorHidden } from '../../stores/page'; - -function showHideSponsor(shouldHide) { - const ad = document.querySelector('#sponsor-ad'); - if (!ad) { - return; - } - - if (shouldHide) { - ad.classList.add('hidden'); - ad.classList.remove('flex'); - } else { - ad.classList.remove('hidden'); - ad.classList.add('flex'); - } -} - -sponsorHidden.listen(showHideSponsor); - -window.setTimeout(() => { - showHideSponsor(false); -}, 500); diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index d97da9608..5224b250e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -11,6 +11,8 @@ import '../styles/global.css'; export interface Props { title: string; + // This isn't used anywhere except for the sponsor event labels + briefTitle?: string; redirectUrl?: string; description?: string; keywords?: string[]; @@ -23,6 +25,7 @@ export interface Props { const { title = siteConfig.title, + briefTitle, description = siteConfig.description, keywords = siteConfig.keywords, noIndex = false, @@ -41,6 +44,12 @@ const canonicalUrl = givenCanonical || currentPageAbsoluteUrl; const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${ import.meta.env.GITHUB_SHA }`; + +// e.g. frontend:react or best-practices:frontend-performance +const gaPageIdentifier = Astro.url.pathname + .replace(/^\//, '') + .replace(/\/$/, '') + .replace(/\//g, ':'); --- @@ -140,7 +149,7 @@ const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${ - + diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro index 575db8d71..01cc97bcb 100644 --- a/src/pages/[roadmapId]/index.astro +++ b/src/pages/[roadmapId]/index.astro @@ -61,6 +61,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road