Skip to content

Commit d8ad5cf

Browse files
prevwongprevwong
committed
feat: add carbonads snippet
1 parent e511077 commit d8ad5cf

File tree

5 files changed

+687
-0
lines changed

5 files changed

+687
-0
lines changed

‎examples/landing/components/editor/Viewport/Sidebar/index.tsx

+88
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,86 @@ export const SidebarDiv = styled.div<{ enabled: boolean }>`
1616
margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
1717
`;
1818

19+
const CarbonAdsContainer = styled.div`
20+
width: 100%;
21+
margin-top: auto;
22+
23+
#carbonads * {
24+
margin: initial;
25+
padding: initial;
26+
}
27+
28+
#carbonads {
29+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
30+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
31+
sans-serif;
32+
33+
padding: 10px 0.5rem;
34+
border-top: 1px solid rgb(229 231 235);
35+
}
36+
37+
#carbonads {
38+
display: flex;
39+
width: 100%;
40+
background-color: transparent;
41+
z-index: 100;
42+
}
43+
44+
#carbonads a {
45+
color: inherit;
46+
text-decoration: none;
47+
}
48+
49+
#carbonads a:hover {
50+
color: inherit;
51+
}
52+
53+
#carbonads span {
54+
position: relative;
55+
display: block;
56+
overflow: hidden;
57+
}
58+
59+
#carbonads .carbon-wrap {
60+
display: flex;
61+
}
62+
63+
#carbonads .carbon-img {
64+
display: block;
65+
margin: 0;
66+
line-height: 1;
67+
}
68+
69+
#carbonads .carbon-img img {
70+
display: block;
71+
}
72+
73+
#carbonads .carbon-text {
74+
font-size: 11px;
75+
padding: 10px;
76+
margin-bottom: 16px;
77+
line-height: 1.5;
78+
text-align: left;
79+
color: #333333;
80+
font-weight: 400;
81+
}
82+
83+
#carbonads .carbon-poweredby {
84+
display: block;
85+
padding: 6px 8px;
86+
text-align: center;
87+
text-transform: uppercase;
88+
letter-spacing: 0.5px;
89+
font-weight: 600;
90+
font-size: 8px;
91+
line-height: 1;
92+
position: absolute;
93+
bottom: 0;
94+
right: 0;
95+
color: #8f8f8f;
96+
}
97+
`;
98+
1999
export const Sidebar = () => {
20100
const [layersVisible, setLayerVisible] = useState(true);
21101
const [toolbarVisible, setToolbarVisible] = useState(true);
@@ -46,6 +126,14 @@ export const Sidebar = () => {
46126
<Layers expandRootOnLoad={true} />
47127
</div>
48128
</SidebarItem>
129+
<CarbonAdsContainer>
130+
<script
131+
async
132+
type="text/javascript"
133+
src="//cdn.carbonads.com/carbon.js?serve=CEAI453N&placement=craftjsorg"
134+
id="_carbonads_js"
135+
></script>
136+
</CarbonAdsContainer>
49137
</div>
50138
</SidebarDiv>
51139
);

‎examples/landing/styles/app.css

+14
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,17 @@ body {
2525
.transition {
2626
transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
2727
}
28+
29+
#carbonads * {
30+
margin: initial;
31+
padding: initial;
32+
}
33+
34+
#carbonads {
35+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
36+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
37+
sans-serif;
38+
39+
padding: 10px 0.5rem;
40+
border-top: 1px solid rgb(0 0 0 / 6%);
41+
}

‎site/src/css/custom.css

+99
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,10 @@ html[data-theme='dark'] .api-description {
323323
outline: none;
324324
}
325325

326+
.footer {
327+
z-index: 98;
328+
}
329+
326330
.footer .footer__links {
327331
margin-bottom: 1.5rem;
328332
padding-bottom: 1.5rem;
@@ -450,3 +454,98 @@ html[data-theme='dark'] .api-description {
450454
top: 0;
451455
margin-top: 0;
452456
}
457+
458+
#carbonads-container {
459+
padding: var(--ifm-menu-link-padding-vertical)
460+
calc(var(--ifm-menu-link-padding-horizontal))
461+
var(--ifm-menu-link-padding-vertical)
462+
var(--ifm-menu-link-padding-horizontal);
463+
border-top: 1px solid var(--ifm-toc-border-color);
464+
border-right: 1px solid var(--ifm-toc-border-color);
465+
}
466+
467+
@media screen and (max-width: 996px) {
468+
#carbonads-container {
469+
position: fixed;
470+
margin-top: 20px;
471+
width: 300px;
472+
bottom: 5px;
473+
z-index: 9;
474+
left: 19px;
475+
border-radius: 3px;
476+
background: #fff;
477+
box-shadow: 0px 3px 28px 0px rgb(1 1 1 / 11%);
478+
border: none;
479+
}
480+
}
481+
482+
#carbonads * {
483+
margin: initial;
484+
padding: initial;
485+
}
486+
#carbonads {
487+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
488+
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
489+
sans-serif;
490+
}
491+
492+
#carbonads {
493+
display: flex;
494+
max-width: 330px;
495+
background-color: transparent;
496+
z-index: 100;
497+
}
498+
499+
#carbonads a {
500+
color: inherit;
501+
text-decoration: none;
502+
}
503+
504+
#carbonads a:hover {
505+
color: inherit;
506+
}
507+
508+
#carbonads span {
509+
position: relative;
510+
display: block;
511+
overflow: hidden;
512+
}
513+
514+
#carbonads .carbon-wrap {
515+
display: flex;
516+
}
517+
518+
#carbonads .carbon-img {
519+
display: block;
520+
margin: 0;
521+
line-height: 1;
522+
}
523+
524+
#carbonads .carbon-img img {
525+
display: block;
526+
}
527+
528+
#carbonads .carbon-text {
529+
font-size: 11px;
530+
padding: 10px;
531+
margin-bottom: 16px;
532+
line-height: 1.5;
533+
text-align: left;
534+
color: #333333;
535+
font-weight: 400;
536+
}
537+
538+
#carbonads .carbon-poweredby {
539+
display: block;
540+
padding: 6px 8px;
541+
text-align: center;
542+
text-transform: uppercase;
543+
letter-spacing: 0.5px;
544+
font-weight: 600;
545+
font-size: 8px;
546+
line-height: 1;
547+
position: absolute;
548+
bottom: 0;
549+
right: 0;
550+
color: #8f8f8f;
551+
}

0 commit comments

Comments
 (0)