Add carbon ads

package.json

@@ -33,6 +33,7 @@
     "@n8tb1t/use-scroll-position": "^1.0.43",
     "@reach/dialog": "^0.10.5",
     "@reach/router": "^1.3.4",
+    "@react-hook/window-size": "^3.0.7",
     "@svgr/webpack": "^5.4.0",
     "@tailwindcss/custom-forms": "^0.2.1",
     "@u-wave/react-vimeo": "^0.9.0",

src/components/three-column-layout/desktop-nav.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { Link } from "@reach/router"
 import { AnimatedCaret } from "../icons"
 import { animated, useSpring } from "react-spring"
@@ -7,6 +7,9 @@ import { ResizeObserver } from "@juggle/resize-observer"
 import OutsideClickHandler from "react-outside-click-handler"
 import { useRouter } from "../../hooks/use-router"
 import { urlsMatch } from "../../utils"
+import "./styles.css"
+import { CarbonAd } from "./"
+import { useWindowWidth } from "@react-hook/window-size"
 
 // This is used by the header in app.js
 export const sidebarWidth = 280
@@ -37,30 +40,39 @@ export function DesktopNav({ menuItems }) {
     )
   }
 
+  let windowWidth = useWindowWidth()
+
   return (
     <div
       className="relative flex-shrink-0 hidden lg:block"
       style={{ width: sidebarWidth }}
     >
       <div className="absolute inset-y-0 right-0 w-screen border-r border-gray-200 bg-gray-50"></div>
-      <nav className="sticky h-screen pt-8 pr-8 overflow-y-scroll leading-snug top-16 lg:pt-10 xl:pt-12">
-        <ul className="-mt-4">
-          {menuItems.map((menuItem, index) =>
-            menuItem.url ? (
-              <div className="mt-6" key={index}>
-                <DesktopNavLink link={menuItem} />
-              </div>
-            ) : (
-              <li className="mt-6" key={index}>
-                <CollapsibleMenu
-                  section={menuItem}
-                  isOpen={openSections.includes(index)}
-                  toggleSection={() => toggleSection(index)}
-                />
-              </li>
-            )
-          )}
-        </ul>
+      <nav className="sticky top-0 h-screen -mt-16 overflow-y-scroll leading-snug">
+        <div className="h-full pt-16">
+          <div className="flex flex-col h-full pt-6 pr-8 xl:pt-8">
+            <ul className="flex-1">
+              {menuItems.map((menuItem, index) =>
+                menuItem.url ? (
+                  <div className="mt-6" key={index}>
+                    <DesktopNavLink link={menuItem} />
+                  </div>
+                ) : (
+                  <li className="mt-6" key={index}>
+                    <CollapsibleMenu
+                      section={menuItem}
+                      isOpen={openSections.includes(index)}
+                      toggleSection={() => toggleSection(index)}
+                    />
+                  </li>
+                )
+              )}
+            </ul>
+            <div className="pt-8 pb-6">
+              {windowWidth >= 1024 && <CarbonAd variant="stacked" />}
+            </div>
+          </div>
+        </div>
       </nav>
     </div>
   )

src/components/three-column-layout/index.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useRef, useEffect, useContext } from "react"
 import { DesktopNav } from "./desktop-nav"
 import { MobileNav } from "./mobile-nav"
 import { MDXProvider } from "@mdx-js/react"
@@ -20,6 +20,7 @@ import {
   Pre,
   Code,
 } from "../../components/ui"
+import { CarbonAdContext } from "../../routes/app"
 
 export function ThreeColumnLayout({
   menuItems,
@@ -112,3 +113,18 @@ const components = {
     )
   },
 }
+
+export function CarbonAd({ variant }) {
+  let { register, unregister } = useContext(CarbonAdContext)
+  let carbonAdsTargetRef = useRef()
+
+  useEffect(() => {
+    register(carbonAdsTargetRef)
+
+    return () => {
+      unregister(carbonAdsTargetRef)
+    }
+  }, [register, unregister])
+
+  return <div className={variant} ref={carbonAdsTargetRef} />
+}

src/components/three-column-layout/mobile-nav.js

@@ -1,13 +1,16 @@
 import React, { useState } from "react"
 import { CaretDownWide } from "../icons"
 import { Link } from "@reach/router"
+import { CarbonAd } from "./"
+import { useWindowWidth } from "@react-hook/window-size"
 
 export function MobileNav({ menuItems }) {
   let [mobileSecondaryNavIsOpen, setMobileSecondaryNavIsOpen] = useState(false)
+  let windowWidth = useWindowWidth()
 
   return (
     <div className="lg:hidden">
-      <div className=" sm:max-w-md sm:mx-auto sm:pt-8 md:max-w-2xl md:pt-12">
+      <div className="sm:max-w-md sm:mx-auto sm:pt-8 md:max-w-2xl md:pt-12">
         <div className="text-sm font-normal text-gray-500 bg-gray-100 sm:border">
           <button
             className="flex items-center justify-between w-full px-5 py-3 focus:outline-none"
@@ -24,6 +27,7 @@ export function MobileNav({ menuItems }) {
               <CaretDownWide className="w-4 h-4" />
             </span>
           </button>
+
           {mobileSecondaryNavIsOpen && (
             <div className="px-5 border-b border-gray-200 sm:border-none">
               <nav className="pt-2 pb-8 text-base text-gray-700 border-t border-gray-200">
@@ -63,6 +67,10 @@ export function MobileNav({ menuItems }) {
             </div>
           )}
         </div>
+
+        <div className="mt-4">
+          {windowWidth < 1024 && <CarbonAd variant="side-by-side" />}
+        </div>
       </div>
     </div>
   )

src/components/three-column-layout/styles.css

@@ -0,0 +1,63 @@
+/* Original */
+.side-by-side {
+  @apply h-32;
+}
+.side-by-side #carbonads {
+  @apply flex shadow-xs;
+}
+
+.side-by-side #carbonads a {
+}
+
+.side-by-side #carbonads a:hover {
+}
+
+.side-by-side #carbonads span {
+  @apply relative block w-full overflow-hidden;
+}
+
+.side-by-side #carbonads .carbon-wrap {
+  @apply flex;
+}
+
+.side-by-side .carbon-img {
+  @apply block m-0 leading-none;
+}
+
+.side-by-side .carbon-img img {
+  @apply block;
+}
+
+.side-by-side .carbon-text {
+  @apply p-2 text-xs;
+}
+
+.side-by-side .carbon-poweredby {
+  @apply block px-1 py-1 font-medium text-center text-gray-500 uppercase bg-gray-100 text-xxs;
+}
+
+/* Stacked image + text */
+.stacked #carbonads {
+  @apply block p-4 overflow-hidden text-xs leading-normal text-center bg-white border border-gray-200 rounded;
+}
+
+.stacked #carbonads a {
+}
+
+.stacked #carbonads a:hover {
+}
+
+.stacked #carbonads span {
+}
+
+.stacked #carbonads img {
+  @apply block mx-auto mb-2 leading-none;
+}
+
+.stacked .carbon-text {
+  @apply block mb-3 leading-snug;
+}
+
+.stacked .carbon-poweredby {
+  @apply block text-gray-500 uppercase text-xxs;
+}

src/routes/app.js

@@ -1,4 +1,11 @@
-import React, { useState, useEffect, Fragment, useRef } from "react"
+import React, {
+  useState,
+  useEffect,
+  Fragment,
+  useRef,
+  createContext,
+  useCallback,
+} from "react"
 import { Router, Link, Match, navigate } from "@reach/router"
 import { Helmet } from "react-helmet"
 import { ReactComponent as LogoAndName } from "../assets/images/logo-and-name.svg"
@@ -52,18 +59,77 @@ const client = createClient({
   url: "https://miragejs-site-backend.herokuapp.com/v1/graphql",
 })
 
+export const CarbonAdContext = createContext()
+
+function CarbonAdProvider({ children }) {
+  let [queue, setQueue] = useState([])
+
+  const register = useCallback((ref) => {
+    setQueue((targets) => [...targets, ref])
+  }, [])
+
+  const unregister = useCallback((ref) => {
+    // Remove this ref from the queue
+    setQueue((targets) => targets.filter((target) => target !== ref))
+
+    // If this ref currently contains the ad, put it back
+    let root = document.getElementById("carbonads-root")
+    let container = document.getElementById("carbonads-container")
+    if (ref.current.contains(container)) {
+      root.appendChild(container)
+
+      // If carbonads has finished loading by the time we put it back, we can refresh the ad
+      let carbonads = document.getElementById("carbonads")
+      if (carbonads) {
+        container.innerHTML = ""
+        loadCarbonAd()
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    let root = document.getElementById("carbonads-root")
+    let container = document.getElementById("carbonads-container")
+    let containerIsInRoot = root.contains(container)
+
+    let bestTarget = queue.find((target) => target.current !== null)
+
+    if (containerIsInRoot && bestTarget) {
+      console.log("moving ad")
+      bestTarget.current.appendChild(container)
+    }
+  }, [queue])
+
+  return (
+    <CarbonAdContext.Provider value={{ register, unregister }}>
+      {children}
+    </CarbonAdContext.Provider>
+  )
+}
+
 export default function (props) {
   return (
-    <RouterProvider {...props}>
-      <ThemeProvider {...props}>
-        <UrqlProvider value={client}>
-          <AppInner {...props} />
-        </UrqlProvider>
-      </ThemeProvider>
-    </RouterProvider>
+    <CarbonAdProvider>
+      <RouterProvider {...props}>
+        <ThemeProvider {...props}>
+          <UrqlProvider value={client}>
+            <AppInner {...props} />
+          </UrqlProvider>
+        </ThemeProvider>
+      </RouterProvider>
+    </CarbonAdProvider>
   )
 }
 
+function loadCarbonAd() {
+  const script = document.createElement("script")
+  script.src =
+    "//cdn.carbonads.com/carbon.js?serve=CE7D42QY&placement=miragejscom"
+  script.id = "_carbonads_js"
+
+  document.getElementById("carbonads-container").appendChild(script)
+}
+
 function AppInner(props) {
   let { theme } = useTheme()
   let router = useRouter()
@@ -79,6 +145,11 @@ function AppInner(props) {
     title = router.activePage.label
   }
 
+  let carbonAdPlaceholder = useRef()
+  useEffect(() => {
+    loadCarbonAd(carbonAdPlaceholder.current)
+  }, [])
+
   return (
     <div className="relative z-0">
       <Helmet>
@@ -98,6 +169,10 @@ function AppInner(props) {
 
         <Footer />
       </div>
+
+      <div ref={carbonAdPlaceholder} className="hidden" id="carbonads-root">
+        <div id="carbonads-container"></div>
+      </div>
     </div>
   )
 }
@@ -363,7 +438,7 @@ function Header({ showHeaderNav }) {
                   }`}
                 >
                   <MobileNavLink
-                    to='/repl'
+                    to="/repl"
                     onClick={() => setIsShowingMobileNav(false)}
                   >
                     REPL

src/routes/index.js

@@ -124,7 +124,7 @@ export default function IndexPage() {
                     </Text>
                   </div>
 
-                  <div className="flex flex-col mt-8 md:mt-10 sm:flex-row sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                  <div className="flex flex-col mt-8 space-y-4 md:mt-10 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
                     <Link
                       to={router.routerFor("/tutorial").pages[0].url}
                       className="flex items-center justify-center px-4 py-3 text-lg font-medium text-center text-white bg-green-500 rounded hover:bg-green-700 md:py-2 sm:w-1/2 md:w-auto"
@@ -133,7 +133,7 @@ export default function IndexPage() {
                     </Link>
                     <Link
                       to={router.routerFor("/docs").pages[0].url}
-                      className="flex items-center justify-center px-4 py-3 text-lg font-medium text-center text-green-500 hover:text-green-700 rounded md:py-2 sm:w-1/2 md:w-auto"
+                      className="flex items-center justify-center px-4 py-3 text-lg font-medium text-center text-green-500 rounded hover:text-green-700 md:py-2 sm:w-1/2 md:w-auto"
                     >
                       Read the Docs <Caret className="inline w-2 ml-2" />
                     </Link>