diff --git a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss index f202848..eeee97a 100644 --- a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss +++ b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss @@ -1,12 +1,13 @@ .whyDoThisTooltip { - background-image: url('/keepsimple_/assets/longevity/habits/what-is-this-bg.webp'); - background-size: contain; width: 700px; height: 100%; - background-repeat: no-repeat; z-index: 999; padding-bottom: 20px; + position: relative; + .img { + position: absolute; + } .heading { padding-top: 20px; padding-left: 20px; @@ -34,6 +35,8 @@ .content { padding-left: 20px; padding-top: 12px; + z-index: 55; + position: relative; p { width: 337px; @@ -45,11 +48,13 @@ @media (max-width: 956px) { .whyDoThisTooltip { - background-image: unset; width: unset; height: unset; padding-bottom: unset; + .img { + display: none; + } .heading { padding-top: 0; padding-left: 0; diff --git a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx index 6574d43..541128b 100644 --- a/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx +++ b/src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx @@ -5,15 +5,59 @@ import Heading from '@components/Heading'; import { WhyDoThisTooltipProps } from './WhyDoThisTooltip.types'; import styles from './WhyDoThisTooltip.module.scss'; +import Image from 'next/image'; const WhyDoThisTooltip: FC = ({ whatDamagesText, headline, locale, }) => { + // TODO: This is very temporary workaround for strapi data + const looksLikeHtml = (s: string) => /<\/?[a-z][\s\S]*>/i.test(s); + const escapeHtml = (s: string) => + s + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + + const textToHtml = (input: string) => { + let s = escapeHtml(input); + + s = s.replace(/\*\*(.+?)\*\*/g, '$1'); + + const paragraphs = s + .split(/\n\s*\n/) + .map(p => p.trim()) + .filter(Boolean); + + return paragraphs.map(p => `

${p.replace(/\n/g, '
')}

`).join(''); + }; + function RichText({ value }: { value?: string | null }) { + if (!value) return null; + + const html = looksLikeHtml(value) ? value : textToHtml(value); + + return ( +
+ ); + } + return (
+ Background {headline && ( = ({ className={styles.heading} /> )} -
+
); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0cf92a7..624b0de 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -224,10 +224,10 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) { } }, [accountData?.id, accountData?.createdAt]); - const clean = (url: string) => - url.split('?')[0].split('#')[0].replace(/\/+$/, ''); - const isLongevityUrl = (url: string) => - clean(url).startsWith(longevityBaseUrl); + const isLongevityUrl = (url: string) => { + const normalizedUrl = url.split('?')[0].split('#')[0].replace(/\/+$/, ''); + return normalizedUrl.startsWith(longevityBaseUrl); + }; useEffect(() => { const onStart = (url: string) => { @@ -273,8 +273,8 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) { }, []); const isLongevityNow = isLongevityUrl(router.asPath); - const overlayOn = - isLongevityNow && (routeLoading || !heroReady || !videosReady); + //TODO: Fix heroReady logic + const overlayOn = isLongevityNow && (routeLoading || !videosReady); return (