Merge pull request #1084 from ReactTooltip/docs/carbon-ads

chore: use carbon ads instead of google ads

Author: danielbarion

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: [

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<any>()
 
-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 <div id={id} className={styles.adsContainer} />
+  return <div className="carbon-ads" ref={containerRef} />
 }
 
 export default AdsContainerElement

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%);
+  }
+}

docs/src/components/AdsContainerElement/styles.module.css

@@ -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 (
     <>

docs/src/theme/Footer/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 (
     <>
       <TOC {...props} />
-      {/* <AdsContainerElement id="right-sidebar-ads" /> */}
-      <ins
+      <AdsContainerElement />
+      {/* <ins
         className="adsbygoogle"
         style={{ display: 'block', position: 'fixed', width: '300px', height: '600px' }}
         data-ad-client="ca-pub-7420210265158247"
         data-ad-slot="8711379942"
         data-ad-format="auto"
         data-full-width-responsive="true"
-      />
+      /> */}
     </>
   )
 }