Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add carbon ads #980

Merged
merged 10 commits into from Sep 19, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -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",
Expand Down
50 changes: 31 additions & 19 deletions 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"
Expand All @@ -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
Expand Down Expand Up @@ -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>
)
Expand Down
18 changes: 17 additions & 1 deletion 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"
Expand All @@ -20,6 +20,7 @@ import {
Pre,
Code,
} from "../../components/ui"
import { CarbonAdContext } from "../../routes/app"

export function ThreeColumnLayout({
menuItems,
Expand Down Expand Up @@ -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} />
}
10 changes: 9 additions & 1 deletion 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"
Expand All @@ -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">
Expand Down Expand Up @@ -63,6 +67,10 @@ export function MobileNav({ menuItems }) {
</div>
)}
</div>

<div className="mt-4">
{windowWidth < 1024 && <CarbonAd variant="side-by-side" />}
</div>
</div>
</div>
)
Expand Down
63 changes: 63 additions & 0 deletions 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;
}
93 changes: 84 additions & 9 deletions 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"
Expand Down Expand Up @@ -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()
Expand All @@ -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>
Expand All @@ -98,6 +169,10 @@ function AppInner(props) {

<Footer />
</div>

<div ref={carbonAdPlaceholder} className="hidden" id="carbonads-root">
<div id="carbonads-container"></div>
</div>
</div>
)
}
Expand Down Expand Up @@ -363,7 +438,7 @@ function Header({ showHeaderNav }) {
}`}
>
<MobileNavLink
to='/repl'
to="/repl"
onClick={() => setIsShowingMobileNav(false)}
>
REPL
Expand Down
4 changes: 2 additions & 2 deletions src/routes/index.js
Expand Up @@ -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"
Expand All @@ -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>
Expand Down