docs: Switch to Ethical Ads (#18117)

(cherry picked from commit f1c7e6f)

Co-authored-by: Strek <[email protected]>

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 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 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";