Skip to content

Commit 7ae09d6

Browse files
sanex3339sanex3339
committed
Use carbon ads
1 parent 8f6feac commit 7ae09d6

File tree

8 files changed

+211
-139
lines changed

8 files changed

+211
-139
lines changed

‎App/containers/App.js

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
3-
import {Adsense} from '@ctrl/react-adsense';
43

54
import {connect} from 'react-redux';
65

@@ -11,6 +10,7 @@ import * as actions from '../actions';
1110
import CodeContainer from './CodeContainer';
1211
import OptionsContainer from './OptionsContainer';
1312
import { ConsentHandler } from "./ConsentHandler";
13+
import { CarbonAd } from "./CarbonAd";
1414

1515
class App extends Component {
1616

@@ -69,33 +69,31 @@ class App extends Component {
6969
const hasObfuscatedCode = obfuscatedCode.length !== 0;
7070

7171
return (
72-
<React.Fragment>
73-
<CodeContainer
74-
code={code}
75-
obfuscatedCode={obfuscatedCode}
76-
pending={obfuscating}
77-
hasResults={obfuscated || error}
78-
onCodeChange={(code) => dispatch(actions.updateCode(code))}
79-
onOutputFileNameChange={(fileName) => dispatch(actions.updateOutputFileName(fileName))}
80-
onObfuscateClick={::this.obfuscate}
81-
onDownloadCodeClick={::this.downloadCode}
82-
onDownloadSourceMapClick={::this.downloadSourceMap}
83-
hasSourceMap={hasSourceMap}
84-
hasObfuscatedCode={hasObfuscatedCode}
85-
/>
86-
87-
<div style={{ width: '100%', marginTop: '8px', marginBottom: '8px' }}>
88-
<Adsense
89-
client="ca-pub-5000712498982649"
90-
slot="1666508371"
91-
format="auto"
92-
/>
93-
</div>
94-
95-
<OptionsContainer/>
96-
97-
<ConsentHandler />
98-
</React.Fragment>
72+
<ConsentHandler>
73+
{({consentAccepted}) => (
74+
<>
75+
<CodeContainer
76+
code={code}
77+
obfuscatedCode={obfuscatedCode}
78+
pending={obfuscating}
79+
hasResults={obfuscated || error}
80+
onCodeChange={(code) => dispatch(actions.updateCode(code))}
81+
onOutputFileNameChange={(fileName) => dispatch(actions.updateOutputFileName(fileName))}
82+
onObfuscateClick={::this.obfuscate}
83+
onDownloadCodeClick={::this.downloadCode}
84+
onDownloadSourceMapClick={::this.downloadSourceMap}
85+
hasSourceMap={hasSourceMap}
86+
hasObfuscatedCode={hasObfuscatedCode}
87+
/>
88+
89+
{consentAccepted && (
90+
<CarbonAd />
91+
)}
92+
93+
<OptionsContainer/>
94+
</>
95+
)}
96+
</ConsentHandler>
9997
);
10098
}
10199

‎App/containers/CarbonAd.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useEffect, useRef } from "react";
2+
3+
export const CarbonAd = () => {
4+
const targetRef = useRef(null)
5+
6+
useEffect(() => {
7+
if (!targetRef.current) {
8+
return
9+
}
10+
11+
const script = document.createElement("script");
12+
13+
script.id = '_carbonads_js'
14+
script.src = '//cdn.carbonads.com/carbon.js?serve=CWYDL237&placement=obfuscatorio\" id=\"_carbonads_js';
15+
script.async = true;
16+
17+
targetRef.current.appendChild(script);
18+
}, [targetRef.current]);
19+
20+
return (
21+
<div ref={targetRef} style={{ width: '100%', marginTop: '8px', marginBottom: '8px' }} />
22+
)
23+
}

‎App/containers/ConsentHandler.js

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import React, { useCallback, useEffect, useRef } from "react";
1+
import React, { useCallback, useEffect, useRef, useState } from "react";
22
import { ConsentBanner, ConsentProvider } from "react-hook-consent";
33
import 'react-hook-consent/dist/styles/style.css';
44
const dayjs = require('dayjs')
55
const timezone = require('dayjs/plugin/timezone')
66
import { EUROPE_TIMEZONES } from "../constants/EuropeTimezones";
7+
import { ConsentOverlay } from "./ConsentOverlay";
78

8-
export const ConsentHandler = () => {
9+
const consentId = 'analytics_and_ads'
10+
11+
export const ConsentHandler = ({children}) => {
912
const isConsentRequired = useCallback(
1013
() => {
1114
dayjs.extend(timezone);
@@ -16,51 +19,64 @@ export const ConsentHandler = () => {
1619
)
1720

1821
const consentRequiredRef = useRef(isConsentRequired());
22+
const [consentAccepted, setConsentAccepted] = useState(false)
23+
const [isInitialized, setIsInitialized] = useState(false)
1924

20-
const enableCookies = useCallback(
25+
const acceptConsent = useCallback(
2126
() => {
22-
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
27+
setConsentAccepted(true)
2328
},
24-
[]
29+
[setConsentAccepted]
2530
)
2631

27-
useEffect(() => {
28-
window.enableCookies = enableCookies
32+
if (!window.acceptConsent) {
33+
window.acceptConsent = acceptConsent
34+
}
2935

36+
useEffect(() => {
3037
if (!consentRequiredRef.current) {
31-
// enableCookies()
38+
acceptConsent()
3239
}
33-
}, [enableCookies]);
40+
}, [acceptConsent]);
3441

35-
// if (!consentRequiredRef.current) {
36-
if (true) {
37-
return null;
38-
}
42+
useEffect(() => {
43+
setIsInitialized(true)
44+
}, [setIsInitialized]);
3945

4046
return (
41-
<ConsentProvider
42-
options={{
43-
services: [
44-
{
45-
id: 'analytics_and_ads',
46-
name: 'Analytics & Ads',
47-
scripts: [
48-
{ id: 'enable-cookies', code: 'window.enableCookies()' },
49-
],
50-
cookies: [],
51-
mandatory: false,
52-
},
53-
],
54-
theme: 'light',
55-
}}
56-
>
57-
<ConsentBanner
58-
settings={{ hidden: false, label: 'More', modal: { title: 'Cookie settings' } }}
59-
decline={{ hidden: true }}
60-
approve={{ label: 'Accept' }}
47+
<>
48+
{children({consentAccepted})}
49+
50+
{!!consentRequiredRef.current && (
51+
<ConsentProvider
52+
options={{
53+
services: [
54+
{
55+
id: consentId,
56+
name: 'Analytics & Ads',
57+
scripts: [
58+
{ id: 'enable-consent', code: 'window.acceptConsent()' },
59+
],
60+
cookies: [],
61+
mandatory: false,
62+
},
63+
],
64+
theme: 'light',
65+
}}
6166
>
62-
obfuscator.io uses cookies according to the <a href="/docs/cookie-policy.docx">cookie policy</a>
63-
</ConsentBanner>
64-
</ConsentProvider>
65-
);
67+
{isInitialized && !consentAccepted && (
68+
<ConsentOverlay />
69+
)}
70+
71+
<ConsentBanner
72+
settings={{ hidden: true, label: 'More', modal: { title: 'Cookie settings' } }}
73+
decline={{ hidden: true }}
74+
approve={{ label: 'Accept' }}
75+
>
76+
obfuscator.io uses cookies according to the <a href="/docs/cookie-policy.docx">cookie policy</a>
77+
</ConsentBanner>
78+
</ConsentProvider>
79+
)}
80+
</>
81+
);
6682
}

‎App/containers/ConsentOverlay.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react";
2+
3+
export const ConsentOverlay = () => (
4+
<div className='consent-overlay' />
5+
)

‎App/containers/OptionsContainer.js

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -92,26 +92,6 @@ const IDENTIFIER_NAMES_GENERATOR_OPTIONS = [
9292

9393
export const DOMAIN_LOCK_REDIRECT_URL_ABOUT_BLANK = 'about:blank';
9494

95-
const shouldShowAd = (level, headingIndex) => {
96-
if (level !== 3) {
97-
return false
98-
}
99-
100-
if (headingIndex === null) {
101-
return false;
102-
}
103-
104-
if (headingIndex === 0) {
105-
return false;
106-
}
107-
108-
if (headingIndex === 5) {
109-
return true;
110-
}
111-
112-
return headingIndex % 14 === 0;
113-
}
114-
11595
const Options = ({dispatch, options}) => {
11696
const headingCounter = useRef(0)
11797
const readmeAdCounter = useRef(0)

‎App/styles/carbonads.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
#carbonads * {
2+
margin: initial;
3+
padding: initial;
4+
line-height: initial;
5+
}
6+
7+
#carbonads {
8+
--carbon-font-family: -apple-system, BlinkMacSystemFont,
9+
'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
10+
'Helvetica Neue', Helvetica, Arial, sans-serif;
11+
--carbon-font-size: 22px;
12+
--carbon-padding: 1.5ch;
13+
--carbon-max-char: 50ch;
14+
--carbon-bg-primary: hsl(0, 0%, 98%);
15+
--carbon-bg-secondary: hsl(0, 0%, 92%);
16+
--carbon-text-color: hsl(0, 0%, 20%);
17+
z-index: 10;
18+
font-size: var(--carbon-font-size);
19+
font-family: var(--carbon-font-family);
20+
}
21+
22+
#carbonads > span {
23+
display: flex;
24+
flex-direction: column;
25+
min-inline-size: 130px;
26+
max-inline-size: calc(130px + var(--carbon-max-char) + 8ch);
27+
padding: var(--carbon-padding);
28+
gap: var(--carbon-padding);
29+
background-color: var(--carbon-bg-primary);
30+
box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085),
31+
0 0 2px hsl(0deg 0% 0% / 0.085),
32+
0 0 4px hsl(0deg 0% 0% / 0.085),
33+
0 0 8px hsl(0deg 0% 0% / 0.085);
34+
}
35+
36+
#carbonads a {
37+
color: var(--carbon-text-color);
38+
text-decoration: none;
39+
}
40+
41+
#carbonads a:hover {
42+
color: var(--carbon-text-color);
43+
}
44+
45+
#carbonads .carbon-wrap {
46+
display: flex;
47+
flex-wrap: wrap;
48+
gap: 1.5ex;
49+
}
50+
51+
#carbonads .carbon-img {
52+
flex: 0 0 130px;
53+
}
54+
55+
#carbonads .carbon-img img {
56+
display: block;
57+
}
58+
59+
#carbonads .carbon-text {
60+
display: flex;
61+
align-items: center;
62+
flex-grow: 1;
63+
flex-basis: var(--carbon-max-char);
64+
line-height: 1.4;
65+
text-align: left;
66+
}
67+
68+
#carbonads > span {
69+
position: relative;
70+
padding: 0;
71+
margin: 0 auto;
72+
}
73+
74+
#carbonads .carbon-poweredby {
75+
display: block;
76+
position: absolute;
77+
bottom: 0;
78+
right: 0;
79+
padding: 6px 10px;
80+
background: repeating-linear-gradient( -45deg, transparent, transparent 5px, hsla(0, 0%, 0%, 0.025) 5px, hsla(0, 0%, 0%, 0.025) 10px ) hsla(203, 11%, 95%, 0.8);
81+
text-align: center;
82+
text-transform: uppercase;
83+
letter-spacing: 0.5px;
84+
font-weight: 600;
85+
font-size: 8px;
86+
border-top-left-radius: 4px;
87+
line-height: 1;
88+
}
89+
90+
#carbonads img {
91+
height: 100px
92+
}

‎App/styles/main.less

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "semantic.less";
22
@import (inline) "~codemirror/lib/codemirror.css";
33
@import url('~semantic-ui-less/themes/default/globals/site.variables');
4+
@import "carbonads.css";
45

56
.title {
67
display: flex;
@@ -169,3 +170,14 @@ code {
169170
ins:has(> div:empty) {
170171
height: 0!important;
171172
}
173+
174+
.consent-overlay {
175+
position: fixed;
176+
top: 0;
177+
left: 0;
178+
right: 0;
179+
bottom: 0;
180+
z-index: 5000;
181+
background: #000;
182+
opacity: 0.5;
183+
}

0 commit comments

Comments
 (0)