From 23e4b794683bd04e7dd138f3a9947d955179ef8f Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Mon, 21 Aug 2023 16:37:25 -0300 Subject: [PATCH] chore: use carbon ads instead of google ads --- docs/docusaurus.config.js | 8 +- .../components/AdsContainerElement/index.tsx | 20 +++-- .../components/AdsContainerElement/styles.css | 85 +++++++++++++++++++ .../AdsContainerElement/styles.module.css | 6 -- docs/src/theme/Footer/index.js | 34 ++++---- docs/src/theme/TOC/index.js | 8 +- 6 files changed, 125 insertions(+), 36 deletions(-) create mode 100644 docs/src/components/AdsContainerElement/styles.css delete mode 100644 docs/src/components/AdsContainerElement/styles.module.css diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index c9e595f1..b5ddd550 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -38,10 +38,10 @@ const config = { // src: '/js/gpt.js', // async: true, // }, - { - src: '/js/ads.js', - async: true, - }, + // { + // src: '/js/ads.js', + // async: true, + // }, ], presets: [ diff --git a/docs/src/components/AdsContainerElement/index.tsx b/docs/src/components/AdsContainerElement/index.tsx index 89bfb6af..d60a6d99 100644 --- a/docs/src/components/AdsContainerElement/index.tsx +++ b/docs/src/components/AdsContainerElement/index.tsx @@ -1,14 +1,24 @@ -import React, { useEffect } from 'react' -import styles from './styles.module.css' +import React, { useEffect, useRef } from 'react' +import './styles.css' + +const AdsContainerElement = () => { + const containerRef = useRef() -const AdsContainerElement = ({ id }) => { useEffect(() => { if (typeof window !== 'undefined') { - window.dispatchEvent(new CustomEvent('AdsContainerMounted', { detail: { id } })) + const scriptElement = document.createElement('script') + scriptElement.src = '//cdn.carbonads.com/carbon.js?serve=CWYD553L&placement=react-tooltipcom' + scriptElement.id = '_carbonads_js' + scriptElement.async = true + + if (containerRef?.current) { + containerRef.current.innerHTML = '' + containerRef.current.appendChild(scriptElement) + } } }, []) - return
+ return
} export default AdsContainerElement diff --git a/docs/src/components/AdsContainerElement/styles.css b/docs/src/components/AdsContainerElement/styles.css new file mode 100644 index 00000000..db3d0a8e --- /dev/null +++ b/docs/src/components/AdsContainerElement/styles.css @@ -0,0 +1,85 @@ +.carbon-ads { + position: fixed; +} + +#carbonads * { + margin: initial; + padding: initial; + line-height: initial; +} + +#carbonads { + --carbon-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, + Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; + --carbon-font-size: 14px; + --carbon-padding: 1.5ch; + --carbon-max-char: 20ch; + --carbon-bg-primary: hsl(0, 0%, 98%); + --carbon-bg-secondary: hsl(0, 0%, 92%); + --carbon-text-color: hsl(0, 0%, 20%); + z-index: 10; + font-size: var(--carbon-font-size); + font-family: var(--carbon-font-family); +} + +#carbonads > span { + display: flex; + flex-direction: column; + min-inline-size: 130px; + max-inline-size: calc(130px + var(--carbon-max-char) + 8ch); + padding: var(--carbon-padding); + gap: var(--carbon-padding); + background-color: var(--carbon-bg-primary); + box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085), + 0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085); +} + +#carbonads a { + color: var(--carbon-text-color); + text-decoration: none; +} + +#carbonads a:hover { + color: var(--carbon-text-color); +} + +#carbonads .carbon-wrap { + display: flex; + flex-wrap: wrap; + gap: 1.5ex; +} + +#carbonads .carbon-img { + flex: 0 0 130px; +} + +#carbonads .carbon-img img { + display: block; +} + +#carbonads .carbon-text { + flex-grow: 1; + flex-basis: var(--carbon-max-char); + line-height: 1.4; + text-align: left; +} + +#carbonads .carbon-poweredby { + padding: 6px 8px; + background: var(--carbon-bg-secondary); + color: var(--carbon-text-color); + font-weight: 600; + font-size: 0.6em; + line-height: 1.4; + letter-spacing: 0.2ch; + text-align: center; + text-transform: uppercase; +} + +@media (prefers-color-scheme: dark) { + #carbonads { + --carbon-bg-primary: hsl(0, 0%, 12%); + --carbon-bg-secondary: hsl(0, 0%, 15%); + --carbon-text-color: hsl(0, 0%, 90%); + } +} diff --git a/docs/src/components/AdsContainerElement/styles.module.css b/docs/src/components/AdsContainerElement/styles.module.css deleted file mode 100644 index 7c1224ab..00000000 --- a/docs/src/components/AdsContainerElement/styles.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.adsContainer { - position: sticky; - top: calc(3.75rem + 12rem); - /* width: 300px; */ - /* height: 250px; */ -} diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js index 7d357c27..1d3ac886 100644 --- a/docs/src/theme/Footer/index.js +++ b/docs/src/theme/Footer/index.js @@ -1,25 +1,25 @@ /* eslint-disable import/no-unresolved */ -import React, { useEffect } from 'react' +import React from 'react' import Footer from '@theme-original/Footer' // import AdsContainerElement from '@site/src/components/AdsContainerElement' export default function FooterWrapper(props) { - useEffect(() => { - if (typeof window !== 'undefined') { - const scriptElement = document.createElement('script') - scriptElement.src = - 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7420210265158247' - scriptElement.async = true - scriptElement.onload = () => { - if (typeof window !== 'undefined') { - window.onload = () => { - ;(window.adsbygoogle = window.adsbygoogle || []).push({}) - } - } - } - document.body.appendChild(scriptElement) - } - }, []) + // useEffect(() => { + // if (typeof window !== 'undefined') { + // const scriptElement = document.createElement('script') + // scriptElement.src = + // 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7420210265158247' + // scriptElement.async = true + // scriptElement.onload = () => { + // if (typeof window !== 'undefined') { + // window.onload = () => { + // ;(window.adsbygoogle = window.adsbygoogle || []).push({}) + // } + // } + // } + // document.body.appendChild(scriptElement) + // } + // }, []) return ( <> diff --git a/docs/src/theme/TOC/index.js b/docs/src/theme/TOC/index.js index c72d224f..2116ef42 100644 --- a/docs/src/theme/TOC/index.js +++ b/docs/src/theme/TOC/index.js @@ -1,21 +1,21 @@ /* eslint-disable import/no-unresolved */ import React from 'react' import TOC from '@theme-original/TOC' -// import AdsContainerElement from '@site/src/components/AdsContainerElement' +import AdsContainerElement from '@site/src/components/AdsContainerElement' export default function TOCWrapper(props) { return ( <> - {/* */} - + {/* + /> */} ) }