fix: remove lot of ads

docusaurus.config.js

@@ -21,11 +21,16 @@ module.exports = {
   //   "data-cfasync": "false",
   //   src: "/30-seconds-of-typescript/ad_7123489.js",
   // },
+  // {
+  //   "data-cfasync": "false",
+  //   src: "/30-seconds-of-typescript/ad_7123489.js",
+  // },
+  // {
+  //   "data-cfasync": "false",
+  //   src: "//thubanoa.com/1?z=7123718",
+  //   async: true,
+  // },
   scripts: [
-    {
-      "data-cfasync": "false",
-      src: "/30-seconds-of-typescript/ad_7123489.js",
-    },
     {
       "data-cfasync": "false",
       src: "//thubanoa.com/1?z=7123718",
@@ -128,5 +133,8 @@ module.exports = {
       },
     ],
   ],
-  plugins: [require.resolve("docusaurus-lunr-search"), require.resolve("./custom.plugin.js")],
+  plugins: [
+    require.resolve("docusaurus-lunr-search"),
+    require.resolve("./custom.plugin.js"),
+  ],
 };

src/components/hooks.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { debounce } from "../../static/util";
+
+export function useWindow() {
+  const [state, setState] = useState({ isMobile: false });
+
+  useEffect(() => {
+    const onResize = debounce(function onResize() {
+      const { innerHeight, innerWidth, outerHeight, outerWidth } = window;
+      const maxWidth = Math.min(innerWidth, outerWidth);
+      setState({
+        innerHeight,
+        innerWidth,
+        outerHeight,
+        outerWidth,
+        maxWidth,
+        isMobile: maxWidth < 768,
+      });
+    });
+    onResize();
+    document.addEventListener("resize", onResize);
+    return () => document.removeEventListener("resize", onResize);
+  }, []);
+  return state;
+}

src/theme/Ad.js

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState } from "react";
 import styles from "./styles.module.css";
+import { useWindow } from "../components/hooks";
 
 export function GifAd() {
   const [urls, setUrls] = useState();
@@ -46,6 +47,7 @@ export function GifAd() {
 function Banner({ options }) {
   const banner = useRef();
   const id = `atContainer-${options.key}`;
+  const { maxWidth, isMobile } = useWindow();
   useEffect(() => {
     if (
       options.format == "iframe" &&
@@ -62,11 +64,15 @@ function Banner({ options }) {
     }
   }, [banner]);
 
+
   return (
     <div
       id={id}
-      style={{ width: options.width, height: options.height }}
-      className={`${styles.ads} `}
+      style={{
+        width: isMobile ? (maxWidth-40): options.width,
+        height: options.height,
+      }}
+      className={`${styles.ads} ${options.className ?? ""}`}
       ref={banner}
     ></div>
   );

src/theme/DocItem/Layout/index.js

@@ -12,7 +12,10 @@ import DocItemContent from "@theme/DocItem/Content";
 import DocBreadcrumbs from "@theme/DocBreadcrumbs";
 import Unlisted from "@theme/Unlisted";
 import styles from "./styles.module.css";
+import adStyles from "./../../styles.module.css";
 import Ad, { GifAd } from "./../../Ad";
+import { useWindow } from "../../../components/hooks";
+
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
@@ -37,6 +40,9 @@ export default function DocItemLayout({ children }) {
   const {
     metadata: { unlisted },
   } = useDoc();
+  const { isMobile } = useWindow();
+
+  console.log(adStyles.sideAds);
   return (
     <div className="row">
       <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
@@ -47,39 +53,39 @@ export default function DocItemLayout({ children }) {
             <DocBreadcrumbs />
             <DocVersionBadge />
             {docTOC.mobile}
-            <div>
+            <Ad
+              options={{
+                key: "59ef6ced01ec04fa3c9bd9047ebdb09d",
+                format: "iframe",
+                height: 100,
+                width: 728,
+                params: {},
+              }}
+            ></Ad>
+            <DocItemContent>{children}</DocItemContent>
+            {isMobile && (
               <Ad
-                options={
-                  docTOC.mobile
-                    ? {
-                        key: "f491f84457706cfe79a69a94e47300b3",
-                        format: "iframe",
-                        height: 60,
-                        width: 468,
-                        params: {},
-                      }
-                    : {
-                        key: "59ef6ced01ec04fa3c9bd9047ebdb09d",
-                        format: "iframe",
-                        height: 100,
-                        width: 728,
-                        params: {},
-                      }
-                }
+                options={{
+                  key: "f491f84457706cfe79a69a94e47300b3",
+                  format: "iframe",
+                  height: 60,
+                  width: 468,
+                  params: {},
+                }}
               ></Ad>
-              <div style={{ display: "flex" }}>
-                <DocItemContent>{children}</DocItemContent>
-                <Ad
-                  options={{
-                    key: "286ff15c1b873aacf8de3968d93bdd8b",
-                    height: 600,
-                    width: 300,
-                    params: {},
-                  }}
-                ></Ad>
-              </div>
-              <GifAd />
-            </div>
+            )}
+            {!isMobile && (
+              <Ad
+                options={{
+                  key: "286ff15c1b873aacf8de3968d93bdd8b",
+                  height: 600,
+                  width: 160,
+                  params: {},
+                  className: adStyles.sideAds,
+                }}
+              ></Ad>
+            )}
+            <GifAd />
             <DocItemFooter />
           </article>
           <div>

src/theme/styles.module.css

@@ -1,13 +1,26 @@
 .ads {
   border: 1px #333;
   margin: 10px;
+  max-width: 100vh;
 }
+
 .gifads {
   border: 1px #333;
   width: 200px;
 }
+
 .adscard {
   padding: 4px;
   display: flex;
   gap: 8px;
+}
+
+.ads iframe {
+  width: 100%;
+}
+
+.sideAds {
+  position: fixed;
+  top: 80px;
+  right: 10px;
 }