8000 docs: add carbon ads · thedigitaloctopus/coreui-react@1fbb549 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1fbb549

Browse files
mrholekmrholek
committed
docs: add carbon ads
1 parent 4feda53 commit 1fbb549

File tree

5 files changed

+87
-7
lines changed

5 files changed

+87
-7
lines changed

‎packages/docs/src/components/Ads.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC, useEffect, useRef } from 'react'
2+
3+
const Ads: FC = ({ code, placement }: { code: string; placement: string }) => {
4+
const ref = useRef<HTMLDivElement>(null)
5+
6+
useEffect(() => {
7+
if (ref.current) {
8+
ref.current.innerHTML = ''
9+
const s = document.createElement('script')
10+
s.id = '_carbonads_js'
11+
s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
12+
ref.current.appendChild(s)
13+
}
14+
}, [])
15+
16+
return <div id="carbonads" className="my-3" ref={ref} />
17+
}
18+
19+
Ads.displayName = 'Ads'
20+
21+
export default Ads

‎packages/docs/src/components/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Ads from './Ads'
12
import CodeBlock from './CodeBlock'
23
import Example from './Example'
34
import Footer from './Footer'
@@ -7,4 +8,4 @@ import Sidebar from './Sidebar'
78
import { SidebarNav } from './SidebarNav'
89
import Toc from './Toc'
910

10-
export { CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }
11+
export { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }

‎packages/docs/src/styles/_ads.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
#carbonads * {
3+
margin: initial;
4+
padding: initial;
5+
}
6+
#carbonads {
7+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
8+
'Helvetica Neue', Helvetica, Arial, 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: inherit;
19+
text-decoration: none;
20+
}
21+
#carbonads a:hover {
22+
color: inherit;
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+
}

‎packages/docs/src/styles/styles.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "@coreui/chartjs/scss/coreui-chartjs";
55
@import "prismjs/themes/prism-solarizedlight.css";
66

7+
@import "ads";
78
@import "anchor";
89
@import "example";
910
@import "footer";

‎packages/docs/src/templates/Docs.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { FC, useState } from 'react'
22
import PropTypes from 'prop-types'
3-
import Helmet from 'react-helmet'
43
import { graphql } from 'gatsby'
54
import { MDXProvider } from '@mdx-js/react'
65
import { MDXRenderer } from 'gatsby-plugin-mdx'
7-
import { CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../components/'
6+
import { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../components/'
87
import { CCol, CContainer, CRow, CTable } from '@coreui/react/src/'
98
import './../styles/styles.scss'
109

@@ -28,9 +27,6 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
2827
return (
2928
<>
3029
<Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
31-
<Helmet>
32-
<script src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
33-
</Helmet>
3430
<myContext.Provider
3531
value={{
3632
sidebarVisible,
@@ -46,7 +42,7 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
4642
<CCol lg={9}>
4743
<h1>{mdx.frontmatter.title}</h1>
4844
<p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
49-
<div data-ea-publisher="coreui-io" data-ea-type="image"></div>
45+
<Ads code="CEAICKJY" placement="coreuiio" />
5046
<MDXProvider components={components}>
5147
<MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
5248
</MDXProvider>

0 commit comments

Comments
 (0)
0