Set dark/light theme for EthicalAds

Author: shalithasuranga

src/extra/EthicalAds.js

@@ -0,0 +1,31 @@
+import React, {useState, useEffect} from 'react';
+import clsx from 'clsx';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function EthicalAds({id, type}) {
+  const {colorMode} = useColorMode();
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isEthABlocked, setIsEthABlocked] = useState(false)
+  useEffect(() => {
+    if (isInitialized) {
+      return;
+    }
+    setIsInitialized(true);
+    try {
+      setIsEthABlocked(typeof ethicalads === 'undefined')
+      ethicalads.load_placements()
+    } catch (error) {
+      setIsEthABlocked(false)
+    }
+  });
+  return (
+    <div>
+      <div
+        data-ea-publisher="neutralino"
+        data-ea-type={type}
+        id={"neutralino-" + id}
+        className={clsx(colorMode, isInitialized && "loaded")}>
+      </div>
+    </div>
+  );
+}

src/pages/index.js

@@ -8,6 +8,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 import {Adsense} from '@ctrl/react-adsense';
 import logo from '../../static/logo.gif';
+import EthicalAds from '../extra/EthicalAds';
 
 const youtubeLink = "https://www.youtube.com/c/CodeZri";
 const features = [
@@ -95,21 +96,7 @@ function Feature({imageUrl, title, description}) {
 export default function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isEthABlocked, setIsEthABlocked] = useState(false);
-  useEffect(() => {
-    if(isInitialized) {
-      return;
-    }
-    setIsInitialized(true);
-    try {
-      setIsEthABlocked(typeof ethicalads === 'undefined');
-      ethicalads.load_placements();
-    }
-    catch (error) {
-      setIsEthABlocked(false);
-    }
-  });
+
   return (
     <Layout
       title={`${siteConfig.tagline}`}
@@ -119,14 +106,7 @@ export default function Home() {
           <img src={logo + '?v=' + Math.floor(Math.random() * 10000) } alt="Neutralinojs logo animation" />
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div>
-              <div
-                data-ea-publisher="neutralino"
-                data-ea-type="image"
-                id="neutralino-front"
-                >
-              </div>
-          </div>
+          <EthicalAds id="front" type="image"/>
           <div className={styles.buttons}>
             <Link
               className={clsx(

src/theme/DocItem/TOC/Desktop/index.js

@@ -1,8 +1,9 @@
-import React, {useState, useEffect} from 'react';
+import React from 'react';
 import {useDoc} from '@docusaurus/theme-common/internal';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useTOCHighlight } from "@docusaurus/theme-common/internal"
+import { useTOCHighlight } from "@docusaurus/theme-common/internal";
+import EthicalAds from '../../../../extra/EthicalAds';
 
 const LINK_CLASS_NAME = 'table-of-contents__link';
 const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
@@ -45,30 +46,9 @@ function Headings({
 
 function CustomTOC({ toc, frontMatter }) {
   useTOCHighlight({linkClassName: LINK_CLASS_NAME, linkActiveClassName: ACTIVE_LINK_CLASS_NAME, maxHeadingLevel: TOP_OFFSET, minHeadingLevel: 0});
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isEthABlocked, setIsEthABlocked] = useState(false)
-  useEffect(() => {
-    if (isInitialized) {
-      return;
-    }
-    setIsInitialized(true);
-    try {
-      setIsEthABlocked(typeof ethicalads === 'undefined')
-      ethicalads.load_placements()
-    } catch (error) {
-      setIsEthABlocked(false)
-    }
-  });
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
-      <div>
-        <div
-          data-ea-publisher="neutralino"
-          data-ea-type="image"
-          id="neutralino-docs"
-        >
-        </div>
-      </div>
+      <EthicalAds id="docs" type="image"/>
       <Headings toc={toc} frontMatter={frontMatter}/>
     </div>
   );

src/theme/EditMetaRow/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import EditThisPage from '@theme/EditThisPage';
+import type {Props} from '@theme/EditMetaRow';
+import {Adsense} from '@ctrl/react-adsense';
+
+import LastUpdated from '@theme/LastUpdated';
+import styles from './styles.module.css';
+
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: Props): ReactNode {
+  return (
+    <>
+      <div className={clsx('row', className)}>
+        <div className="col padding--sm">
+          <Adsense
+            client='ca-pub-4805219819571962'
+            slot='1174653824'
+            style={{ display: 'block' }}
+            layout='in-article'
+            format='auto'
+          />
+        </div>
+      </div>
+      <div className={clsx('row', className)}>
+        <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+        <div className={clsx('col', styles.lastUpdated)}>
+          {(lastUpdatedAt || lastUpdatedBy) && (
+            <LastUpdated
+              lastUpdatedAt={lastUpdatedAt}
+              lastUpdatedBy={lastUpdatedBy}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/theme/EditMetaRow/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.lastUpdated {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}