Skip to content

Commit 36ea3a3

Browse files
tannerlinsleytannerlinsley
committed
docs: carbonads
1 parent 6ee9f5b commit 36ea3a3

File tree

4 files changed

+195
-87
lines changed

4 files changed

+195
-87
lines changed

‎docs/src/components/CarbonAds.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react'
2+
3+
function buildScript(src, attrs = {}) {
4+
if (typeof document !== 'undefined') {
5+
const script = document.createElement('script')
6+
script.async = true
7+
script.defer = true
8+
Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
9+
script.src = src
10+
11+
return script
12+
}
13+
}
14+
15+
export default function CarbonAds() {
16+
const ref = React.useRef()
17+
18+
React.useEffect(() => {
19+
const script = buildScript(
20+
'//cdn.carbonads.com/carbon.js?serve=CESITK7L&placement=react-chartstanstackcom',
21+
{
22+
type: 'text/javascript',
23+
id: '_carbonads_js',
24+
}
25+
)
26+
27+
ref.current.appendChild(script)
28+
}, [])
29+
30+
React.useEffect(() => {
31+
const interval = setInterval(() => {
32+
;[...ref.current.children].forEach(child => {
33+
if (child.id.startsWith('carbonads_')) {
34+
ref.current.removeChild(child)
35+
}
36+
})
37+
}, 100)
38+
39+
return () => {
40+
clearInterval(interval)
41+
}
42+
})
43+
44+
return <div ref={ref} />
45+
}

‎docs/src/components/Footer.js

Lines changed: 86 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -4,90 +4,89 @@ export const Footer = props => {
44
return (
55
<div className="bg-gray-50 border-t border-gray-200">
66
<div className="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
7-
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
8-
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
9-
<div className="md:grid md:grid-cols-2 md:gap-8">
10-
<div>
11-
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
12-
Resources
13-
</h4>
14-
<ul className="mt-4">
15-
<li>
16-
<Link href="/docs/overview">
17-
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
18-
Docs
19-
</a>
20-
</Link>
21-
</li>
22-
<li className="mt-4">
23-
<Link href="/examples/simple">
24-
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
25-
Examples
26-
</a>
27-
</Link>
28-
</li>
29-
<li className="mt-4">
30-
<Link href="/docs/api">
31-
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
32-
API Reference
33-
</a>
34-
</Link>
35-
</li>
36-
</ul>
37-
</div>
38-
<div className="mt-12 md:mt-0">
39-
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
40-
Community
41-
</h4>
42-
<ul className="mt-4">
43-
<li className="mt-4">
44-
<a
45-
href="https://github.com/tannerlinsley/react-charts/discussions"
46-
className="text-base leading-6 text-gray-500 hover:text-gray-900"
47-
>
48-
Forum & Support
49-
</a>
50-
</li>
51-
<li className="mt-4">
52-
<a
53-
href="https://discord.gg/WrRKjPJ"
54-
className="text-base leading-6 text-gray-500 hover:text-gray-900"
55-
>
56-
#TanStack Discord
57-
</a>
58-
</li>
59-
<li className="mt-4">
60-
<a
61-
href="http://stackoverflow.com/questions/tagged/react-charts"
62-
className="text-base leading-6 text-gray-500 hover:text-gray-900"
63-
>
64-
Stack Overflow
65-
</a>
66-
</li>
67-
<li className="mt-4">
68-
<a
69-
href="https://github.com/tannerlinsley/react-charts/releases"
70-
className="text-base leading-6 text-gray-500 hover:text-gray-900"
71-
>
72-
Releases
73-
</a>
74-
</li>
75-
<li className="mt-4">
76-
<a
77-
className="github-button"
78-
href="https://github.com/tannerlinsley/react-charts"
79-
data-color-scheme="no-preference: light; light: light; dark: dark;"
80-
data-icon="octicon-star"
81-
data-size="large"
82-
data-show-count="true"
83-
aria-label="Star tannerlinsley/react-charts on GitHub"
84-
>
85-
Star
86-
</a>
87-
</li>
88-
</ul>
89-
</div>
90-
</div>
7+
<div className="grid-cols-2 md:grid xl:grid-cols-4 md:gap-8">
8+
<div>
9+
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
10+
Resources
11+
</h4>
12+
<ul className="mt-4">
13+
<li>
14+
<Link href="/overview">
15+
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
16+
Docs
17+
</a>
18+
</Link>
19+
</li>
20+
<li className="mt-4">
21+
<Link href="/examples/simple">
22+
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
23+
Examples
24+
</a>
25+
</Link>
26+
</li>
27+
<li className="mt-4">
28+
<Link href="/reference/useQuery">
29+
<a className="text-base leading-6 text-gray-500 hover:text-gray-900">
30+
API Reference
31+
</a>
32+
</Link>
33+
</li>
34+
</ul>
35+
</div>
36+
<div className="mt-12 md:mt-0">
37+
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
38+
Community
39+
</h4>
40+
<ul className="mt-4">
41+
<li className="mt-4">
42+
<a
43+
href="https://github.com/tannerlinsley/react-charts/discussions"
44+
className="text-base leading-6 text-gray-500 hover:text-gray-900"
45+
>
46+
Forum & Support
47+
</a>
48+
</li>
49+
<li className="mt-4">
50+
<a
51+
href="https://discord.gg/WrRKjPJ"
52+
className="text-base leading-6 text-gray-500 hover:text-gray-900"
53+
>
54+
#TanStack Discord
55+
</a>
56+
</li>
57+
<li className="mt-4">
58+
<a
59+
href="http://stackoverflow.com/questions/tagged/react-charts"
60+
className="text-base leading-6 text-gray-500 hover:text-gray-900"
61+
>
62+
Stack Overflow
63+
</a>
64+
</li>
65+
<li className="mt-4">
66+
<a
67+
href="https://github.com/tannerlinsley/react-charts/releases"
68+
className="text-base leading-6 text-gray-500 hover:text-gray-900"
69+
>
70+
Releases
71+
</a>
72+
</li>
73+
<li className="mt-4">
74+
<a
75+
className="github-button"
76+
href="https://github.com/tannerlinsley/react-charts"
77+
data-color-scheme="no-preference: light; light: light; dark: dark;"
78+
data-icon="octicon-star"
79+
data-size="large"
80+
data-show-count="true"
81+
aria-label="Star tannerlinsley/react-charts on GitHub"
82+
>
83+
Star
84+
</a>
85+
</li>
86+
</ul>
87+
</div>
88+
<div className="mt-12 md:mt-0">
89+
<CarbonAds />
9190
</div>
9291
<div className="mt-8 xl:mt-0">
9392
<h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
@@ -98,11 +97,11 @@ export const Footer = props => {
9897
inbox.
9998
</p>
10099
<form
101-
action="https://app.convertkit.com/forms/1554108/subscriptions"
100+
action="https://app.convertkit.com/forms/1513638/subscriptions"
102101
className=""
103102
method="post"
104-
data-sv-form="1554108"
105-
data-uid="daed0ba340"
103+
data-sv-form="1513638"
104+
data-uid="4fc050bc50"
106105
data-format="inline"
107106
data-version="5"
108107
data-options='{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Please, check your email to confirm your subscription.","redirect_url":""},"modal":{"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null},"recaptcha":{"enabled":false},"slide_in":{"display_in":null,"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null}}}'

‎docs/src/components/Sidebar.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from 'react'
22
import cn from 'classnames'
33
import { Search } from './Search'
4+
import CarbonAds from './CarbonAds'
45
export const Sidebar = ({ active, children, fixed }) => {
56
const [searching, setSearching] = useState(false)
67
return (
@@ -16,6 +17,7 @@ export const Sidebar = ({ active, children, fixed }) => {
1617
<Search />
1718
</div>
1819
<div className="sidebar-content overflow-y-auto pb-4">{children}</div>
20+
<CarbonAds />
1921
<style jsx>{`
2022
.sidebar {
2123
-webkit-overflow-scrolling: touch;

‎docs/src/styles/index.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,68 @@ html {
1919
@apply shadow-outline border-blue-400;
2020
}
2121

22+
#carbonads * {
23+
margin: initial;
24+
padding: initial;
25+
}
26+
#carbonads {
27+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
28+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
29+
sans-serif;
30+
}
31+
#carbonads {
32+
display: flex;
33+
max-width: 330px;
34+
background-color: hsl(0, 0%, 98%);
35+
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
36+
z-index: 100;
37+
}
38+
#carbonads a {
39+
color: inherit;
40+
text-decoration: none;
41+
}
42+
#carbonads a:hover {
43+
color: inherit;
44+
}
45+
#carbonads span {
46+
position: relative;
47+
display: block;
48+
overflow: hidden;
49+
}
50+
#carbonads .carbon-wrap {
51+
display: flex;
52+
}
53+
#carbonads .carbon-img {
54+
display: block;
55+
margin: 0;
56+
line-height: 1;
57+
}
58+
#carbonads .carbon-img img {
59+
display: block;
60+
}
61+
#carbonads .carbon-text {
62+
font-size: 13px;
63+
padding: 10px;
64+
margin-bottom: 16px;
65+
line-height: 1.5;
66+
text-align: left;
67+
}
68+
#carbonads .carbon-poweredby {
69+
display: block;
70+
padding: 6px 8px;
71+
background: #f1f1f2;
72+
text-align: center;
73+
text-transform: uppercase;
74+
letter-spacing: 0.5px;
75+
font-weight: 600;
76+
font-size: 8px;
77+
line-height: 1;
78+
border-top-left-radius: 3px;
79+
position: absolute;
80+
bottom: 0;
81+
right: 0;
82+
}
83+
2284
/* purgecss start ignore */
2385

2486
.embed-responsive {

0 commit comments

Comments
 (0)