mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-27 02:54:27 +02:00
Add sponsor logic for hiding
This commit is contained in:
@@ -5,6 +5,7 @@ import { useStore } from '@nanostores/react';
|
||||
import { X } from 'lucide-react';
|
||||
import { setViewSponsorCookie } from '../lib/jwt';
|
||||
import { isMobile } from '../lib/is-mobile';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export type PageSponsorType = {
|
||||
company: string;
|
||||
@@ -26,6 +27,22 @@ type PageSponsorProps = {
|
||||
gaPageIdentifier?: string;
|
||||
};
|
||||
|
||||
const CLOSE_SPONSOR_KEY = 'sponsorClosed';
|
||||
|
||||
function markSponsorHidden(sponsorId: string) {
|
||||
Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', {
|
||||
path: '/',
|
||||
expires: 1,
|
||||
sameSite: 'lax',
|
||||
secure: true,
|
||||
domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
|
||||
});
|
||||
}
|
||||
|
||||
function isSponsorMarkedHidden(sponsorId: string) {
|
||||
return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1';
|
||||
}
|
||||
|
||||
export function PageSponsor(props: PageSponsorProps) {
|
||||
const { gaPageIdentifier } = props;
|
||||
const $isSponsorHidden = useStore(sponsorHidden);
|
||||
@@ -60,12 +77,16 @@ export function PageSponsor(props: PageSponsorProps) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response?.sponsor) {
|
||||
if (
|
||||
!response?.sponsor ||
|
||||
!response.id ||
|
||||
isSponsorMarkedHidden(response.id)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSponsor(response.sponsor);
|
||||
setSponsorId(response?.id || null);
|
||||
setSponsorId(response.id);
|
||||
|
||||
window.fireEvent({
|
||||
category: 'SponsorImpression',
|
||||
@@ -84,7 +105,7 @@ export function PageSponsor(props: PageSponsorProps) {
|
||||
const { response, error } = await httpPatch<{ status: 'ok' }>(
|
||||
clickUrl.toString(),
|
||||
{
|
||||
mobile: isMobile() ? true : false,
|
||||
mobile: isMobile(),
|
||||
},
|
||||
);
|
||||
|
||||
@@ -111,7 +132,7 @@ export function PageSponsor(props: PageSponsorProps) {
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener sponsored nofollow"
|
||||
className="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]"
|
||||
onClick={async () => {
|
||||
window.fireEvent({
|
||||
category: 'SponsorClick',
|
||||
@@ -122,26 +143,32 @@ export function PageSponsor(props: PageSponsorProps) {
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
|
||||
className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300"
|
||||
aria-label="Close"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
markSponsorHidden(sponsorId || '');
|
||||
sponsorHidden.set(true);
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className="h-5 w-5 sm:h-4 sm:w-4" />
|
||||
</span>
|
||||
<img
|
||||
src={imageUrl}
|
||||
className="block h-[150px] object-cover lg:h-[169px] lg:w-[118.18px]"
|
||||
alt="Sponsor Banner"
|
||||
/>
|
||||
<span className="flex flex-1 flex-col justify-between text-sm">
|
||||
<span>
|
||||
<img
|
||||
src={imageUrl}
|
||||
className="block h-[106px] object-cover sm:h-[169px] sm:w-[118.18px]"
|
||||
alt="Sponsor Banner"
|
||||
/>
|
||||
</span>
|
||||
<span className="flex flex-1 flex-col justify-between text-xs sm:text-sm">
|
||||
<span className="p-[10px]">
|
||||
<span className="mb-0.5 block font-semibold">{title}</span>
|
||||
<span className="block text-gray-500">{description}</span>
|
||||
</span>
|
||||
<span className="sponsor-footer">Partner Content</span>
|
||||
<span className="sponsor-footer hidden sm:block">Partner Content</span>
|
||||
<span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden">
|
||||
Partner Content
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
|
@@ -61,7 +61,6 @@ a > code:before {
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
display: block;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
|
Reference in New Issue
Block a user