From d2fd4f6d84b48f61fa953950096b5fffffa5d4cd Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 18 Mar 2022 07:47:04 +0800
Subject: [PATCH] website: try to fix Carbon again

---
 website/src/components/CarbonAd/index.js | 83 +++++++++---------------
 1 file changed, 31 insertions(+), 52 deletions(-)

diff --git a/website/src/components/CarbonAd/index.js b/website/src/components/CarbonAd/index.js
index 647f145d..fa07596e 100644
--- a/website/src/components/CarbonAd/index.js
+++ b/website/src/components/CarbonAd/index.js
@@ -1,55 +1,34 @@
-import React from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import React, {useEffect, useRef} from 'react';
+
+// Credits: https://github.com/tannerlinsley/react-query/blob/master/docs/src/components/CarbonAds.js
+function buildScript(src, attrs = {}) {
+  if (typeof document !== 'undefined') {
+    const script = document.createElement('script');
+    script.async = true;
+    script.defer = true;
+    script.src = src;
+    Object.keys(attrs).forEach((attr) =>
+      script.setAttribute(attr, attrs[attr]),
+    );
+
+    return script;
+  }
+}
 
 export default React.memo(() => {
-  return (
-    <BrowserOnly>
-      {() => (
-        <div>
-          <script
-            type="text/javascript"
-            src="//cdn.carbonads.com/carbon.js?serve=CEAI4537&placement=wwwtechinterviewhandbookorg"
-            id="_carbonads_js"
-          />
-          {process.env.NODE_ENV === 'development' && (
-            <div id="carbonads">
-              <span>
-                <span className="carbon-wrap">
-                  <a
-                    href="https://srv.carbonads.net/ads/click/x/GTND42JWCABD6K7LCVYLYKQNCESIEKJLCKBIKZ3JCYBD527JC67DV2JKC6YDLK7WFTBDPKQJCK7IK23IFTADT23MHEYIK23UCEYDK53ECTNCYBZ52K?segment=placement:wwwtechinterviewhandbookorg;"
-                    className="carbon-img"
-                    target="_blank"
-                    rel="noopener sponsored">
-                    <img
-                      src="https://cdn4.buysellads.net/uu/1/100164/1630683824-shortcut260x200.png"
-                      alt="ads via Carbon"
-                      border="0"
-                      height="100"
-                      width="130"
-                      style={{maxWidth: 130}}
-                    />
-                  </a>
-                  <a
-                    href="https://srv.carbonads.net/ads/click/x/GTND42JWCABD6K7LCVYLYKQNCESIEKJLCKBIKZ3JCYBD527JC67DV2JKC6YDLK7WFTBDPKQJCK7IK23IFTADT23MHEYIK23UCEYDK53ECTNCYBZ52K?segment=placement:wwwtechinterviewhandbookorg;"
-                    className="carbon-text"
-                    target="_blank"
-                    rel="noopener sponsored">
-                    What if Your Project Management Tool Was Fast and Intuitive?
-                    Try Shortcut (formerly Clubhouse).
-                  </a>
-                </span>
-                <a
-                  href="http://carbonads.net/?utm_source=wwwtechinterviewhandbookorg&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon"
-                  className="carbon-poweredby"
-                  target="_blank"
-                  rel="noopener sponsored">
-                  ads via Carbon
-                </a>
-              </span>
-            </div>
-          )}
-        </div>
-      )}
-    </BrowserOnly>
-  );
+  const ref = useRef();
+
+  useEffect(() => {
+    const script = buildScript(
+      '//cdn.carbonads.com/carbon.js?serve=CEAI4537&placement=wwwtechinterviewhandbookorg',
+      {
+        type: 'text/javascript',
+        id: '_carbonads_js',
+      },
+    );
+
+    ref.current.appendChild(script);
+  }, []);
+
+  return <div ref={ref} />;
 });