feat: Add carbon

package.json

@@ -34,7 +34,7 @@
     "cli"
   ],
   "scripts": {
-    "docs": "cd website && npm run start -- --port 3001",
+    "docs": "cd website && npm run start",
     "build:docs": "cd website && npm run build",
     "dev": "vite",
     "types": "tsc src/index.ts --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir dist",

website/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start --no-open",
+    "start": "docusaurus start --no-open --port 3001",
     "build": "node scripts/contributing.js && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -15,16 +15,16 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.20",
-    "@docusaurus/preset-classic": "2.0.0-beta.20",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
     "@tsconfig/docusaurus": "^1.0.5",
     "typescript": "^4.6.3"
   },

website/src/components/Carbon/index.css

@@ -0,0 +1,64 @@
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+  z-index: 100;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  min-height: 100px;
+}
+#carbonads a {
+  color: #000000;
+  text-decoration: none;
+}
+#carbonads a:hover {
+  color: #000000;
+}
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

website/src/components/Carbon/index.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import './index.css';
+
+function insertAfter(referenceNode, newNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+export default function Carbon({
+  code = 'CEAIV23U',
+  placement = 'wwwjest-previewcom',
+  querySelector = 'h1',
+  customStyle = 'min-height: 100px; margin: 20px 0;',
+}) {
+  useEffect(() => {
+    try {
+      var targetElement = document.querySelector(querySelector);
+      const s = document.createElement('script');
+      s.id = '_carbonads_js';
+      s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`;
+      // Add a container bellow h1 to avoid layout shift
+      const mountContainer = document.createElement('div');
+      mountContainer.setAttribute('style', customStyle);
+      insertAfter(targetElement, mountContainer);
+      // Mount carbon as a child of mountContainer
+      mountContainer.appendChild(s);
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+  return null;
+}

website/src/pages/index.tsx

@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Sponsors from '@site/src/components/Sponsors';
+import Carbon from '../components/Carbon';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -39,6 +40,10 @@ export default function Home(): JSX.Element {
         <HomepageFeatures />
         <Sponsors />
       </main>
+      <Carbon
+        querySelector=".footer__links div:last-child"
+        customStyle="min-height: 100px; margin: -20px 0;"
+      />
     </Layout>
   );
 }

website/src/theme/BlogListPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import BlogListPage from '@theme-original/BlogListPage';
+import Carbon from '@site/src/components/Carbon';
+
+export default function BlogListPageWrapper(props) {
+  return (
+    <>
+      <Carbon querySelector="ul.clean-list" />
+      <BlogListPage {...props} />
+    </>
+  );
+}

website/src/theme/BlogPostPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import BlogPostPage from '@theme-original/BlogPostPage';
+import Carbon from '@site/src/components/Carbon';
+
+export default function BlogPostPageWrapper(props) {
+  return (
+    <>
+      <Carbon querySelector="header" />
+      <BlogPostPage {...props} />
+    </>
+  );
+}

website/src/theme/DocItem/index.js

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react';
+import DocItem from '@theme-original/DocItem';
+import Carbon from '@site/src/components/Carbon';
+
+export default function DocItemWrapper(props) {
+  return (
+    <>
+      <Carbon />
+      <DocItem {...props} />
+    </>
+  );
+}