Skip to content

Commit 3346498

Browse files
yjoseyjose
committed
add carbon ads
1 parent bc1007f commit 3346498

File tree

5 files changed

+245
-0
lines changed

5 files changed

+245
-0
lines changed

Diff for: ‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ node_modules
44
.cache
55
dist
66
coverage
7+
8+
# Local Netlify folder
9+
.netlify

Diff for: ‎docs/src/components/Ads.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
let firstRender = true;
3+
const loadAds = () => {
4+
if (firstRender) firstRender = false;
5+
else {
6+
const carbon_container = document.getElementById('carbon_container');
7+
if (carbon_container) {
8+
carbon_container.innerHTML = '';
9+
const script = document.createElement('script');
10+
script.setAttribute('async', '');
11+
script.setAttribute('type', 'text/javascript');
12+
script.setAttribute(
13+
'src',
14+
'//cdn.carbonads.com/carbon.js?serve=CK7D52QE&placement=react-popupelazizicom'
15+
);
16+
script.setAttribute('id', '_carbonads_js');
17+
carbon_container.appendChild(script);
18+
}
19+
}
20+
};
21+
export default () => {
22+
React.useEffect(() => {
23+
loadAds();
24+
}, []);
25+
return <div id="carbon_container"></div>;
26+
};

Diff for: ‎docs/src/css/custom.css

+116
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,119 @@
2323
margin: 0 calc(-1 * var(--ifm-pre-padding));
2424
padding: 0 var(--ifm-pre-padding);
2525
}
26+
27+
#carbonads {
28+
--width: 180px;
29+
--font-size: 14px;
30+
}
31+
32+
html[data-theme='dark'] #carbonads {
33+
background-color: hsl(0, 0%, 0%);
34+
}
35+
36+
#carbonads {
37+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
38+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
39+
sans-serif;
40+
display: block;
41+
overflow: hidden;
42+
margin-bottom: 20px;
43+
max-width: var(--width);
44+
border-radius: 4px;
45+
text-align: center;
46+
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1);
47+
background-color: hsl(0, 0%, 98%);
48+
font-size: var(--font-size);
49+
line-height: 1.5;
50+
}
51+
52+
#carbonads a {
53+
color: inherit;
54+
text-decoration: none;
55+
}
56+
57+
#carbonads a:hover {
58+
color: inherit;
59+
}
60+
61+
#carbonads span {
62+
position: relative;
63+
display: block;
64+
overflow: hidden;
65+
}
66+
67+
.carbon-img {
68+
display: block;
69+
margin-bottom: 8px;
70+
max-width: var(--width);
71+
line-height: 1;
72+
}
73+
74+
.carbon-img img {
75+
display: block;
76+
margin: 0 auto;
77+
max-width: var(--width) !important;
78+
width: var(--width);
79+
height: auto;
80+
}
81+
82+
.carbon-text {
83+
display: block;
84+
padding: 0 1em 8px;
85+
}
86+
87+
.carbon-poweredby {
88+
display: block;
89+
padding: 10px var(--font-size);
90+
background: repeating-linear-gradient(
91+
-45deg,
92+
transparent,
93+
transparent 5px,
94+
hsla(0, 0%, 0%, 0.025) 5px,
95+
hsla(0, 0%, 0%, 0.025) 10px
96+
)
97+
hsla(203, 11%, 95%, 0.4);
98+
text-transform: uppercase;
99+
letter-spacing: 0.5px;
100+
font-weight: 600;
101+
font-size: 9px;
102+
line-height: 0;
103+
}
104+
105+
@media only screen and (min-width: 320px) and (max-width: 759px) {
106+
#carbonads {
107+
float: none;
108+
margin: 0 auto;
109+
max-width: 330px;
110+
}
111+
#carbon_container {
112+
width: 330px;
113+
}
114+
#carbonads span {
115+
position: relative;
116+
}
117+
#carbonads > span {
118+
max-width: none;
119+
}
120+
.carbon-img {
121+
float: left;
122+
margin: 0;
123+
}
124+
125+
.carbon-img img {
126+
max-width: 130px !important;
127+
}
128+
.carbon-text {
129+
float: left;
130+
margin-bottom: 0;
131+
padding: 8px 20px;
132+
text-align: left;
133+
max-width: calc(100% - 130px - 3em);
134+
}
135+
.carbon-poweredby {
136+
left: 130px;
137+
bottom: 0;
138+
display: block;
139+
width: 100%;
140+
}
141+
}

Diff for: ‎docs/src/theme/TOC/index.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
import React from 'react';
8+
import useTOCHighlight from '@theme/hooks/useTOCHighlight';
9+
import styles from './styles.module.css';
10+
import Ads from '../../components/Ads';
11+
12+
const LINK_CLASS_NAME = 'table-of-contents__link';
13+
const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
14+
const TOP_OFFSET = 100;
15+
/* eslint-disable jsx-a11y/control-has-associated-label */
16+
17+
function Headings({ headings, isChild }) {
18+
if (!headings.length) {
19+
return null;
20+
}
21+
22+
return (
23+
<>
24+
<Ads />
25+
<ul
26+
className={
27+
isChild ? '' : 'table-of-contents table-of-contents__left-border'
28+
}
29+
>
30+
{headings.map(heading => (
31+
<li key={heading.id}>
32+
<a
33+
href={`#${heading.id}`}
34+
className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
35+
// eslint-disable-next-line react/no-danger
36+
dangerouslySetInnerHTML={{
37+
__html: heading.value,
38+
}}
39+
/>
40+
<Headings isChild headings={heading.children} />
41+
</li>
42+
))}
43+
</ul>
44+
</>
45+
);
46+
}
47+
48+
function TOC({ headings }) {
49+
useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
50+
return (
51+
<div className={styles.tableOfContents}>
52+
<Headings headings={headings} />
53+
</div>
54+
);
55+
}
56+
57+
export default TOC;

Diff for: ‎docs/src/theme/TOC/styles.module.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.tableOfContents {
9+
display: inherit;
10+
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
11+
overflow-y: auto;
12+
position: sticky;
13+
top: calc(var(--ifm-navbar-height) + 2rem);
14+
}
15+
16+
.tableOfContents::-webkit-scrollbar {
17+
width: 7px;
18+
}
19+
20+
.tableOfContents::-webkit-scrollbar-track {
21+
background: #f1f1f1;
22+
border-radius: 10px;
23+
}
24+
25+
.tableOfContents::-webkit-scrollbar-thumb {
26+
background: #888;
27+
border-radius: 10px;
28+
}
29+
30+
.tableOfContents::-webkit-scrollbar-thumb:hover {
31+
background: #555;
32+
}
33+
34+
@media only screen and (max-width: 996px) {
35+
.tableOfContents {
36+
display: none;
37+
}
38+
39+
.docItemContainer {
40+
padding: 0 0.3rem;
41+
}
42+
}
43+

0 commit comments

Comments
 (0)