From 3a4e277ffb148719b2cad57d00b0a71e479ac047 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Ma=C5=82ecki?= <92953623+p-malecki@users.noreply.github.com> Date: Wed, 3 Jun 2026 17:22:50 +0100 Subject: [PATCH] docs: remove banner rotator --- .../src/components/HandIcon/index.tsx | 23 --- .../src/components/TopPromoRotator/index.tsx | 133 ------------------ .../TopPromoRotator/styles.module.css | 91 ------------ packages/audiodocs/src/theme/Navbar/index.jsx | 81 +++-------- 4 files changed, 18 insertions(+), 310 deletions(-) delete mode 100644 packages/audiodocs/src/components/HandIcon/index.tsx delete mode 100644 packages/audiodocs/src/components/TopPromoRotator/index.tsx delete mode 100644 packages/audiodocs/src/components/TopPromoRotator/styles.module.css diff --git a/packages/audiodocs/src/components/HandIcon/index.tsx b/packages/audiodocs/src/components/HandIcon/index.tsx deleted file mode 100644 index df23b0c72..000000000 --- a/packages/audiodocs/src/components/HandIcon/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type React from 'react'; - -interface Props extends React.SVGProps { - children?: React.ReactNode; -} - -function HandIcon({ children, ...props }: Props) { - return ( - - - {children} - - ); -} - -export default HandIcon; diff --git a/packages/audiodocs/src/components/TopPromoRotator/index.tsx b/packages/audiodocs/src/components/TopPromoRotator/index.tsx deleted file mode 100644 index e06500260..000000000 --- a/packages/audiodocs/src/components/TopPromoRotator/index.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import clsx from 'clsx'; -import { type ReactNode, useEffect, useMemo, useState } from 'react'; - -import HandIcon from '../HandIcon'; -import styles from './styles.module.css'; - -declare global { - interface Window { - dataLayer?: unknown[]; - } -} - -type Promo = { - key: string; - href: string; - bg: string; - buttonLabel: string; - label: ReactNode; -}; - -const PROMOS: readonly Promo[] = [ - { - key: 'appjs', - href: 'https://appjs.co?origin=swmansion_bar', - bg: '#C7CEF5', - buttonLabel: 'Get your tickets', - label: ( - <> - App.js Conf 2026 - - {' '} - is just around the corner! - - - ), - }, -]; - -// bump when adding promos so users who dismissed banner see the new one -export const PROMO_VERSION = 1; - -type Props = { - onClose?: () => void; -}; - -export default function TopPromoRotator({ onClose }: Props) { - const promos = useMemo(() => PROMOS, []); - - const [index, setIndex] = useState(0); - - useEffect(() => { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return; - } - - const existingScript = document.querySelector( - 'script[src*="www.googletagmanager.com/gtm.js?id=GTM-WV2G3SQL"]' - ); - - if (existingScript) { - return; - } - - (function (w: Window, d: Document, s: string, l: string, i: string) { - w.dataLayer = w.dataLayer || []; - // prettier-ignore - w.dataLayer.push({ - 'gtm.start': new Date().getTime(), - 'event': 'gtm.js', - }); - const f = d.getElementsByTagName(s)[0] as HTMLScriptElement; - const j = d.createElement(s) as HTMLScriptElement; - const dl = l !== 'dataLayer' ? `&l=${l}` : ''; - j.async = true; - j.src = `https://www.googletagmanager.com/gtm.js?id=${i}${dl}`; - f.parentNode?.insertBefore(j, f); - })(window, document, 'script', 'dataLayer', 'GTM-WV2G3SQL'); - }, []); - - useEffect(() => { - const id = window.setInterval(() => { - setIndex((i) => (i + 1) % promos.length); - }, 5_000); - - return () => window.clearInterval(id); - }, [promos.length]); - - const active = promos[index]; - - const barHeight = 50; - const translateY = `translateY(-${index * barHeight}px)`; - - return ( -
-
- {promos.map((p) => ( - - {p.label} - - ))} -
- {onClose && ( - - )} - - {typeof active.label === 'string' ? active.label : ''} - -
- ); -} diff --git a/packages/audiodocs/src/components/TopPromoRotator/styles.module.css b/packages/audiodocs/src/components/TopPromoRotator/styles.module.css deleted file mode 100644 index 279b450b8..000000000 --- a/packages/audiodocs/src/components/TopPromoRotator/styles.module.css +++ /dev/null @@ -1,91 +0,0 @@ -.wrapper { - position: relative; - height: 50px; - min-height: 50px; - max-height: 50px; - width: 100%; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - font-size: 1rem; - font-weight: 500; -} - -.slider { - position: absolute; - inset: 0; - will-change: transform; -} - -.banner { - display: flex; - height: 50px; - min-height: 50px; - width: 100%; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0 0.75rem; - font-size: 1rem; - font-weight: 500; - line-height: 1; - color: #001a72; - text-align: center; - text-decoration: none; - transition: background-color 300ms ease-out; - white-space: nowrap; - box-sizing: border-box; -} - -.banner:hover { - color: #001a72 !important; - text-decoration: none !important; - background-color: rgba(0, 0, 0, 0.05); -} - -.banner:hover * { - text-decoration: none !important; -} - -.banner:hover .underline { - text-decoration: underline !important; - text-underline-offset: 2px; -} - -.hiddenOnMobile { - display: inline; -} - -@media (max-width: 768px) { - .hiddenOnMobile { - display: none; - } -} - -.icon { - flex-shrink: 0; - width: 28px; - height: 28px; - transform: rotate(-90deg); - display: block; -} - -.underline { - text-decoration: underline; - text-underline-offset: 2px; -} - -.closeButton { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - border: none; - background: transparent; - color: #001a72; - cursor: pointer; - padding: 4px; - line-height: 1; - font-size: 16px; -} diff --git a/packages/audiodocs/src/theme/Navbar/index.jsx b/packages/audiodocs/src/theme/Navbar/index.jsx index 61b1b6303..d49371778 100644 --- a/packages/audiodocs/src/theme/Navbar/index.jsx +++ b/packages/audiodocs/src/theme/Navbar/index.jsx @@ -1,48 +1,10 @@ -import { useLocation } from '@docusaurus/router'; import React from 'react'; // eslint-disable-next-line import/no-unresolved import useBaseUrl from '@docusaurus/useBaseUrl'; -import TopPromoRotator, { PROMO_VERSION } from '@site/src/components/TopPromoRotator'; import { Navbar } from '@swmansion/t-rex-ui'; import './styles.css'; export default function NavbarWrapper(props) { - const location = useLocation(); - const baseUrl = useBaseUrl('/'); - const isLanding = location.pathname === baseUrl; - - const [showPromo, setShowPromo] = React.useState(true); - - React.useEffect(() => { - if (isLanding || typeof globalThis === 'undefined') { - return; - } - - try { - const raw = globalThis.localStorage?.getItem('topPromoState'); - const state = raw ? JSON.parse(raw) : null; - if (state?.v === PROMO_VERSION && state?.hidden) { - setShowPromo(false); - } - } catch (_) { - // ignore - } - }, [isLanding]); - - const handleClosePromo = React.useCallback(() => { - setShowPromo(false); - if (typeof globalThis !== 'undefined') { - try { - globalThis.localStorage?.setItem( - 'topPromoState', - JSON.stringify({ v: PROMO_VERSION, hidden: true }) - ); - } catch { - // ignore - } - } - }, []); - const titleImages = { light: useBaseUrl('/img/title.svg?v=12'), dark: useBaseUrl('/img/title-dark.svg?v=12'), @@ -53,30 +15,23 @@ export default function NavbarWrapper(props) { }; return ( -
- {isLanding ? ( - - ) : ( - showPromo && - )} - - - -
+ + + ); }