Skip to content

Commit 5fc649e

Browse files
authored
docs: add Carbon ads (react-bootstrap#6195)
* docs: add Carbon ads * add a cleanup for the ad
1 parent 1fb4015 commit 5fc649e

File tree

8 files changed

+124
-44
lines changed

8 files changed

+124
-44
lines changed

www/src/components/CarbonAds.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { useEffect, useRef } from 'react';
2+
3+
const CarbonAds = () => {
4+
const ref = useRef();
5+
6+
useEffect(() => {
7+
if (typeof document !== 'undefined') {
8+
const script = document.createElement('script');
9+
script.async = true;
10+
script.id = '_carbonads_js';
11+
script.type = 'text/javascript';
12+
script.src =
13+
'//cdn.carbonads.com/carbon.js?serve=CE7IP2QY&placement=react-bootstrapgithubio';
14+
15+
ref.current.appendChild(script);
16+
}
17+
18+
return () => {
19+
while (ref.current?.firstChild) {
20+
ref.current.removeChild(ref.current.firstChild);
21+
}
22+
};
23+
}, []);
24+
25+
return <div ref={ref} />;
26+
};
27+
28+
export default CarbonAds;

www/src/components/NavMain.js

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,28 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';
1313

1414
import logo from '../assets/logo.svg';
1515

16-
const Banner = styled(Navbar).attrs({
17-
as: 'header',
18-
variant: 'dark',
19-
role: 'banner',
20-
})`
21-
@import '../css/theme.scss';
22-
23-
composes: text-light justify-content-center from global;
24-
min-height: 4rem;
25-
background-color: $darker;
26-
filter: none;
27-
-webkit-filter: none;
28-
29-
a {
30-
margin-left: 1em;
31-
color: $brand;
32-
}
33-
34-
@include media-breakpoint-up(md) {
35-
z-index: 1040;
36-
}
37-
`;
16+
// const Banner = styled(Navbar).attrs({
17+
// as: 'header',
18+
// variant: 'dark',
19+
// role: 'banner',
20+
// })`
21+
// @import '../css/theme.scss';
22+
23+
// composes: text-light justify-content-center from global;
24+
// min-height: 4rem;
25+
// background-color: $darker;
26+
// filter: none;
27+
// -webkit-filter: none;
28+
29+
// a {
30+
// margin-left: 1em;
31+
// color: $brand;
32+
// }
33+
34+
// @include media-breakpoint-up(md) {
35+
// z-index: 1040;
36+
// }
37+
// `;
3838

3939
const StyledNavbar = styled(Navbar).attrs({
4040
as: 'header',
@@ -99,16 +99,6 @@ const propTypes = {
9999
function NavMain({ activePage }) {
100100
return (
101101
<>
102-
<Banner>
103-
<span className="text-light">Black Lives Matter.</span>
104-
<a
105-
target="_blank"
106-
rel="noreferrer"
107-
href="https://support.eji.org/give/153413/#!/donation/checkout"
108-
>
109-
Support the Equal Justice Initiative.
110-
</a>
111-
</Banner>
112102
<StyledNavbar expand collapseOnSelect>
113103
<Container fluid>
114104
<SkipToContentLink href="#rb-docs-content" tabIndex="0">

www/src/components/SideNav.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import FormControl from 'react-bootstrap/FormControl';
77
import styled from 'astroturf';
88
import Button from 'react-bootstrap/Button';
99
import Collapse from 'react-bootstrap/Collapse';
10+
import CarbonAds from './CarbonAds';
1011

1112
const MenuButton = styled(Button).attrs({ variant: 'link' })`
1213
composes: p-0 d-md-none ms-3 from global;
@@ -42,8 +43,10 @@ const OverflowWrapper = styled('div')`
4243
@import '../css/theme';
4344
4445
@include media-breakpoint-up(md) {
45-
display: block !important;
46+
display: flex !important;
4647
height: 100% !important;
48+
flex-direction: column;
49+
max-height: calc(100vh - 8.5rem);
4750
}
4851
`;
4952

@@ -282,6 +285,7 @@ class SideNav extends React.Component {
282285
/>
283286
<NavSection heading="About" location={location} path="/about" />
284287
</TableOfContents>
288+
<CarbonAds />
285289
</OverflowWrapper>
286290
</Collapse>
287291
</SidePanel>

www/src/css/carbonads.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
#carbonads * {
2+
margin: initial;
3+
padding: initial;
4+
}
5+
#carbonads {
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
7+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
8+
sans-serif;
9+
}
10+
#carbonads {
11+
display: flex;
12+
max-width: 330px;
13+
background-color: hsl(0, 0%, 98%);
14+
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
15+
z-index: 100;
16+
}
17+
#carbonads a {
18+
color: #1a1a1a;
19+
text-decoration: none;
20+
}
21+
#carbonads a:hover {
22+
color: #1a1a1a;
23+
}
24+
#carbonads span {
25+
position: relative;
26+
display: block;
27+
overflow: hidden;
28+
}
29+
#carbonads .carbon-wrap {
30+
display: flex;
31+
}
32+
#carbonads .carbon-img {
33+
display: block;
34+
margin: 0;
35+
line-height: 1;
36+
}
37+
#carbonads .carbon-img img {
38+
display: block;
39+
}
40+
#carbonads .carbon-text {
41+
font-size: 13px;
42+
padding: 10px;
43+
margin-bottom: 16px;
44+
line-height: 1.5;
45+
text-align: left;
46+
}
47+
#carbonads .carbon-poweredby {
48+
display: block;
49+
padding: 6px 8px;
50+
background: #f1f1f2;
51+
text-align: center;
52+
text-transform: uppercase;
53+
letter-spacing: 0.5px;
54+
font-weight: 600;
55+
font-size: 8px;
56+
line-height: 1;
57+
border-top-left-radius: 3px;
58+
position: absolute;
59+
bottom: 0;
60+
right: 0;
61+
}

www/src/css/global.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import './theme.scss';
22
@import './angolia.scss';
3+
@import './carbonads.scss';
34

45
html {
56
-webkit-font-smoothing: antialiased;

www/src/layouts/ApiLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const propTypes = {
99

1010
function ComponentsLayout({ children, ...props }) {
1111
return (
12-
<Default {...props} grayscale={false}>
12+
<Default {...props}>
1313
<Main location={props.location}>{children}</Main>
1414
</Default>
1515
);

www/src/layouts/index.js

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { MDXProvider } from '@mdx-js/react';
22
import PropTypes from 'prop-types';
33
import * as React from 'react';
44

5-
import { css } from 'astroturf';
65
import NavMain from '../components/NavMain';
76
import Heading from '../components/Heading';
87
import CodeBlock from '../components/CodeBlock';
@@ -11,13 +10,6 @@ import DocsAlert from '../components/DocsAlert';
1110
import SEO from '../seo';
1211
import ThemeProvider from '../../../src/ThemeProvider';
1312

14-
const styles = css`
15-
.gray > :not(:first-child) {
16-
filter: grayscale(100%);
17-
-webkit-filter: grayscale(100%);
18-
}
19-
`;
20-
2113
const getMode = (className = '') => {
2214
const [, mode] = className.match(/language-(\w+)/) || [];
2315
return mode;
@@ -45,11 +37,11 @@ const propTypes = {
4537
location: PropTypes.object.isRequired,
4638
};
4739

48-
function DefaultLayout({ children, location, grayscale = true }) {
40+
function DefaultLayout({ children, location }) {
4941
return (
5042
/* Change dir to "rtl" for RTL dev */
5143
<ThemeProvider dir="ltr">
52-
<div className={grayscale ? styles.gray : undefined}>
44+
<div>
5345
<SEO pathname={location.pathname} />
5446
<NavMain activePage={location.pathname} />
5547
<DocsAlert />

www/src/pages/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import styled from 'astroturf';
77
import pkg from '../../../package.json';
88

99
import withLayout from '../withLayout';
10+
import CarbonAds from '../components/CarbonAds';
1011

1112
const MastHead = styled('div')`
1213
@import '../css/theme';
@@ -126,6 +127,9 @@ export default withLayout(
126127
<div className="text-muted mt-3">
127128
Current version: {pkg.version}
128129
</div>
130+
<div className="py-3">
131+
<CarbonAds />
132+
</div>
129133
</Content>
130134
</MastHead>
131135

0 commit comments

Comments
 (0)