Skip to content

Commit

Permalink
docs: ad carbonads
Browse files Browse the repository at this point in the history
  • Loading branch information
tannerlinsley committed Mar 29, 2021
1 parent 8ec25ca commit 27078cf
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 85 deletions.
45 changes: 45 additions & 0 deletions docs/src/components/CarbonAds.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react'

function buildScript(src, attrs = {}) {
if (typeof document !== 'undefined') {
const script = document.createElement('script')
script.async = true
script.defer = true
Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
script.src = src

return script
}
}

export default function CarbonAds() {
const ref = React.useRef()

React.useEffect(() => {
const script = buildScript(
'//cdn.carbonads.com/carbon.js?serve=CESDV2QJ&placement=react-tabletanstackcom',
{
type: 'text/javascript',
id: '_carbonads_js',
}
)

ref.current.appendChild(script)
}, [])

React.useEffect(() => {
const interval = setInterval(() => {
;[...ref.current.children].forEach(child => {
if (child.id.startsWith('carbonads_')) {
ref.current.removeChild(child)
}
})
}, 100)

return () => {
clearInterval(interval)
}
})

return <div ref={ref} />
}
169 changes: 85 additions & 84 deletions docs/src/components/Footer.js
Original file line number Diff line number Diff line change
@@ -1,93 +1,94 @@
import * as React from 'react'
import Link from 'next/link'
import CarbonAds from './CarbonAds'

export const Footer = props => {
return (
<div className="bg-gray-50 border-t border-gray-200">
<div className="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Resources
</h4>
<ul className="mt-4">
<li>
<Link href="/docs/overview">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Docs
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/docs/examples/basic">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Examples
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/docs/api/overview">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
API Reference
</a>
</Link>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Community
</h4>
<ul className="mt-4">
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-table/discussions"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Forum & Support
</a>
</li>
<li className="mt-4">
<a
href="https://discord.gg/WrRKjPJ"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
#TanStack Discord
</a>
</li>
<li className="mt-4">
<a
href="http://stackoverflow.com/questions/tagged/react-table"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Stack Overflow
</a>
</li>
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-table/releases"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Releases
</a>
</li>
<li className="mt-4">
<a
className="github-button"
href="https://github.com/tannerlinsley/react-table"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star tannerlinsley/react-table on GitHub"
>
Star
</a>
</li>
</ul>
</div>
</div>
<div className="grid-cols-2 md:grid xl:grid-cols-4 md:gap-8">
<div>
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Resources
</h4>
<ul className="mt-4">
<li>
<Link href="/docs/overview">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Docs
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/docs/examples/basic">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
Examples
</a>
</Link>
</li>
<li className="mt-4">
<Link href="/docs/api/overview">
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
API Reference
</a>
</Link>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Community
</h4>
<ul className="mt-4">
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-table/discussions"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Forum & Support
</a>
</li>
<li className="mt-4">
<a
href="https://discord.gg/WrRKjPJ"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
#TanStack Discord
</a>
</li>
<li className="mt-4">
<a
href="http://stackoverflow.com/questions/tagged/react-table"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Stack Overflow
</a>
</li>
<li className="mt-4">
<a
href="https://github.com/tannerlinsley/react-table/releases"
className="text-base leading-6 text-gray-500 hover:text-gray-900"
>
Releases
</a>
</li>
<li className="mt-4">
<a
className="github-button"
href="https://github.com/tannerlinsley/react-table"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star tannerlinsley/react-table on GitHub"
>
Star
</a>
</li>
</ul>
</div>
<div className="mt-8 xl:mt-0">
<CarbonAds />
</div>
<div className="mt-8 xl:mt-0">
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Expand Down
7 changes: 6 additions & 1 deletion docs/src/components/Sidebar.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { useState } from 'react'
import cn from 'classnames'
import { Search } from './Search'
import CarbonAds from './CarbonAds'

export const Sidebar = ({ active, children, fixed }) => {
const [searching, setSearching] = useState(false)
return (
<aside
className={cn('sidebar bg-white top-24 flex-shrink-0 pr-2', {
active,
['pb-0 flex flex-col z-1 sticky']: fixed,
'pb-0 flex flex-col z-1 sticky': fixed,
fixed,
searching,
})}
Expand All @@ -16,9 +18,12 @@ export const Sidebar = ({ active, children, fixed }) => {
<Search />
</div>
<div className="sidebar-content overflow-y-auto pb-4">{children}</div>
<CarbonAds />
<style jsx>{`
.sidebar {
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.sidebar.fixed {
width: 300px;
Expand Down
62 changes: 62 additions & 0 deletions docs/src/styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -183,3 +183,65 @@ details > summary {

@tailwind utilities;
/* purgecss end ignore */

#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;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#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;
}

1 comment on commit 27078cf

@vercel
Copy link

@vercel vercel bot commented on 27078cf Mar 29, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.