docs: Switch to Ethical Ads (#18117)

(cherry picked from commit f1c7e6f) Co-authored-by: Strek <ssharishkumar@gmail.com>

Author: mdjermanovic

docs/src/_data/sites/en.yml

@@ -27,8 +27,9 @@ google_analytics:
 #------------------------------------------------------------------------------
 
 carbon_ads:
- serve: CESDV2QM
- placement: eslintorg
+ serve: ""
+ placement: ""
+ethical_ads: true
 
 #------------------------------------------------------------------------------
 # Shared

docs/src/_includes/components/hero.macro.html

@@ -22,7 +22,7 @@ <h1 class="section-title">{{ params.title }}</h1>
  {% endif %}
  </div>
  <div class="span-10-12 hero-ad">
- {% include "partials/carbon-ad.html" %}
+ {% include "partials/ad.html" %}
  </div>
  </div>
 </div>

docs/src/_includes/layouts/doc.html

@@ -111,7 +111,7 @@ <h1>{{ title }}</h1>
  <div class="docs-aside">
  <div class="docs-aside__content">
  <aside class="docs-ad">
- {%- include 'partials/carbon-ad.html' -%}
+ {%- include 'partials/ad.html' -%}
  </aside>
  {% include 'components/docs-toc.html' %}
  </div>

docs/src/_includes/partials/carbon-ad.html renamed to docs/src/_includes/partials/ad.html

@@ -11,3 +11,15 @@
  }
 </script>
 {% endif %}
+{% if site.ethical_ads %}
+<script id="eslint-sponsor">
+ if (window.innerWidth > 800) {
+ var s = document.createElement("script");
+ s.type = "text/javascript";
+ s.src = "//media.ethicalads.io/media/client/ethicalads.min.js";
+ document.getElementById("eslint-sponsor").after(s);
+ document.getElementById("eslint-sponsor").remove();
+ }
+</script>
+<div data-ea-publisher="eslint-org" data-ea-type="image"></div>
+{% endif %}

docs/src/assets/scss/carbon-ads.scss renamed to docs/src/assets/scss/ads.scss

@@ -4,6 +4,15 @@
  }
 }
 
+.docs-ad {
+ height: 290px;
+}
+
+/*
+ * Carbon Ads
+ * https://www.carbonads.net/
+ */
+
 #carbonads * {
  margin: initial;
  padding: initial;
@@ -113,3 +122,33 @@
  font-size: 8px;
  }
 }
+
+/*
+ * Ethical Ads
+ */
+
+[data-ea-publisher].loaded .ea-content,
+[data-ea-type].loaded .ea-content {
+ background-color: var(--body-background-color) !important;
+ border: 1px solid var(--border-color) !important;
+}
+
+[data-ea-publisher].loaded .ea-content a:link,
+[data-ea-type].loaded .ea-content a:link {
+ color: var(--body-text-color) !important;
+}
+
+[data-ea-publisher].loaded .ea-callout a:link,
+[data-ea-type].loaded .ea-callout a:link {
+ color: var(--body-text-color) !important;
+}
+
+.jumbotron [data-ea-publisher].loaded .ea-content a,
+.jumbotron [data-ea-type].loaded .ea-content a {
+ color: #eee;
+}
+
+.jumbotron [data-ea-publisher].loaded .ea-content a:hover,
+.jumbotron [data-ea-type].loaded .ea-content a:hover {
+ color: #ccc;
+}

docs/src/assets/scss/styles.scss

@@ -30,6 +30,6 @@
 @import "components/tabs";
 @import "components/resources";
 
-@import "carbon-ads";
+@import "ads";
 
 @import "utilities";