diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx
index 1f44fa3a2..1d563319a 100644
--- a/src/components/PageSponsor.tsx
+++ b/src/components/PageSponsor.tsx
@@ -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) {
}}
>
{
e.preventDefault();
+ markSponsorHidden(sponsorId || '');
sponsorHidden.set(true);
}}
>
-
+
-
-
+
+
+
+
{title}
{description}
- Partner Content
+ Partner Content
+
+ Partner Content
+
);
diff --git a/src/styles/global.css b/src/styles/global.css
index 7f5977e73..29e4c65dd 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -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,