feat: Switch to Ethical Ads

src/_data/sites/en.yml

@@ -40,9 +40,8 @@ google_analytics:
 # Ads
 #------------------------------------------------------------------------------
 
-carbon_ads:
-  serve: CESDV2QM
-  placement: eslintorg
+carbon_ads: false
+ethical_ads: true
 
 #------------------------------------------------------------------------------
 # Shared
@@ -100,16 +99,16 @@ footer:
     change_language: Change Language
     language: Language
   copyright: >
-    Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and ESLint 
-    contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS 
-    Foundation</a> has registered trademarks and uses trademarks.  For a list of 
-    trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please 
-    see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> 
-    and <a href="https://trademark-list.openjsf.org">Trademark List</a>.  
-    Trademarks and logos not indicated on the 
-    <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation 
-    trademarks</a> are trademarks&trade; or registered&reg; trademarks of 
-    their respective holders. Use of them does not imply any affiliation with 
+    Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and ESLint
+    contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS
+    Foundation</a> has registered trademarks and uses trademarks.  For a list of
+    trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please
+    see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a>
+    and <a href="https://trademark-list.openjsf.org">Trademark List</a>.
+    Trademarks and logos not indicated on the
+    <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation
+    trademarks</a> are trademarks&trade; or registered&reg; trademarks of
+    their respective holders. Use of them does not imply any affiliation with
     or endorsement by them.
   links:
     open_jsf: The OpenJS Foundation
@@ -143,7 +142,7 @@ branding_page:
     name:
       title: Name
       description: >
-        ESLint must be written with a capital E, S and L when used, as “ES” stands 
+        ESLint must be written with a capital E, S and L when used, as “ES” stands
         for ECMAScript and “L” being the start of the word “Lint”.
     logo:
       title: Logo
@@ -152,13 +151,13 @@ branding_page:
           The ESLint logo can be placed on various backgrounds, provided it has
           enough vertical and horizontal padding.
         - >
-          Double the size of the inner hexagon created by the gap to get an idea 
-          how much space the logo should have between the logo and wordmark, as 
+          Double the size of the inner hexagon created by the gap to get an idea
+          how much space the logo should have between the logo and wordmark, as
           well as around the logo itself.
         - >
-          Our logo is versatile - you can use it on various brand colours, making 
+          Our logo is versatile - you can use it on various brand colours, making
           use of opacity on non-white backgrounds to emulate the lighter colour.
-          The ESLint logomark can also be used in isolation, without the ESLint 
+          The ESLint logomark can also be used in isolation, without the ESLint
           wordmark though where possible, using both is preferred.
       download_svg: Download SVG
       download_png: Download PNG
@@ -167,13 +166,13 @@ branding_page:
       title: Color Palette
       description:
         - >
-          ESLint’s colour palette can speak to our brand in ways that are every 
-          bit as powerful as copy and logos. They not only affect how our design 
-          looks, but can go as far as to elicit emotion and reflect the 
+          ESLint’s colour palette can speak to our brand in ways that are every
+          bit as powerful as copy and logos. They not only affect how our design
+          looks, but can go as far as to elicit emotion and reflect the
           personality of the ESLint brand.
         - >
-          The primary "brand" color is used across all interactive elements such 
-          as buttons, links, inputs, etc. It is derived from our logo. We use the 
+          The primary "brand" color is used across all interactive elements such
+          as buttons, links, inputs, etc. It is derived from our logo. We use the
           two existing colors to create a unique primary tonal range.
       brand_palette: Brand Palette
       colors:
@@ -192,9 +191,9 @@ homepage:
   title: Find and fix problems in your JavaScript code
   description: >
     ESLint statically analyzes your code to quickly find problems. It is built
-    into most text editors and you can run ESLint as part of your continuous 
+    into most text editors and you can run ESLint as part of your continuous
     integration pipeline.
-  
+
   animation:
     enabled: true
     text: Find and fix problems in your JavaScript code
@@ -224,33 +223,33 @@ homepage:
       alt: "Screenshot of a Visual Studio code window with ESLint in action: underlining ESLint error in the editor."
     title: The pluggable linting utility for JavaScript and JSX
     description: >
-      ESLint is an open source project that helps you find and fix problems 
-      with your JavaScript code. It doesn't matter if you're writing JavaScript in 
-      the browser or on the server, with or without a framework, ESLint can help 
+      ESLint is an open source project that helps you find and fix problems
+      with your JavaScript code. It doesn't matter if you're writing JavaScript in
+      the browser or on the server, with or without a framework, ESLint can help
       your code live its best life.
     features:
     - title: Find issues
       description: >
-        ESLint statically analyzes your code to quickly find problems. ESLint is 
-        built into most text editors and you can run ESLint as part of your 
+        ESLint statically analyzes your code to quickly find problems. ESLint is
+        built into most text editors and you can run ESLint as part of your
         continuous integration pipeline.
       learn_more:
-        link: getStarted 
+        link: getStarted
         text: >
           Learn more <span class="visually-hidden">about finding issues with ESLint</span>
     - title: Fix problems automatically
       description: >
-        Many problems ESLint finds can be automatically fixed. ESLint fixes are 
-        syntax-aware so you won't experience errors introduced by traditional 
+        Many problems ESLint finds can be automatically fixed. ESLint fixes are
+        syntax-aware so you won't experience errors introduced by traditional
         find-and-replace algorithms.
       learn_more:
-        link: fixProblems 
+        link: fixProblems
         text: >
           Learn more <span class="visually-hidden">about fixing problems automatically with ESLint</span>
     - title: Configure everything
       description: >
-        Preprocess code, use custom parsers, and write your own rules that work 
-        alongside ESLint's built-in rules. Customize ESLint to work exactly the 
+        Preprocess code, use custom parsers, and write your own rules that work
+        alongside ESLint's built-in rules. Customize ESLint to work exactly the
         way you need it for your project.
       learn_more:
         link: configuring
@@ -262,13 +261,13 @@ homepage:
   stats:
     title: Welcome to the community
     description: >
-      ESLint is the #1 JavaScript linter by downloads on npm (over DOWNLOAD_COUNT 
-      downloads / week) and is used at companies like Microsoft, Airbnb, Netflix, 
+      ESLint is the #1 JavaScript linter by downloads on npm (over DOWNLOAD_COUNT
+      downloads / week) and is used at companies like Microsoft, Airbnb, Netflix,
       and Facebook.
     dependents: Dependents
     weekly_downloads: Weekly Downloads
     stars: Stars
-  
+
   sponsors:
     title: Sponsored by fantastic people
     description: >
@@ -314,7 +313,7 @@ team_page:
     title: Technical Steering Committee
     description: >
       The people who manage releases, review feature requests, and meet
-      regularly to ensure ESLint is properly maintained.   
+      regularly to ensure ESLint is properly maintained.
   reviewers:
     title: Reviewers
     description: >
@@ -355,50 +354,50 @@ sponsors_page:
       title: Platinum Sponsors
       description: >
         Become a platinum sponsor with a monthly donation of $2000 USD (providing
-        40 hours of maintenance and development) and get 2 hours of dedicated 
-        support (remote support available through chat or screen-sharing) per 
-        month as well as your Open Collective or GitHub avatar image on our 
-        README on GitHub and on the home page of eslint.org. We will also 
-        tweet a thank you from our Twitter account (over 20,000 followers). 
-        Please contact the ESLint team to schedule support sessions. 
+        40 hours of maintenance and development) and get 2 hours of dedicated
+        support (remote support available through chat or screen-sharing) per
+        month as well as your Open Collective or GitHub avatar image on our
+        README on GitHub and on the home page of eslint.org. We will also
+        tweet a thank you from our Twitter account (over 20,000 followers).
+        Please contact the ESLint team to schedule support sessions.
     gold:
       title: Gold Sponsors
       description: >
-        Become a gold sponsor with a monthly donation of $1000 USD (providing 20 
-        hours of maintenance and development) and get your Open Collective 
-        or GitHub avatar image on our README on GitHub and the front page of 
-        eslint.org. We will also tweet a thank you from our Twitter account 
-        (over 20,000 followers). 
+        Become a gold sponsor with a monthly donation of $1000 USD (providing 20
+        hours of maintenance and development) and get your Open Collective
+        or GitHub avatar image on our README on GitHub and the front page of
+        eslint.org. We will also tweet a thank you from our Twitter account
+        (over 20,000 followers).
     silver:
       title: Silver Sponsors
       description: >
-        Become a silver sponsor with a monthly donation of $500 USD (providing 10 
-        hours of maintenance and development) and get your Open Collective 
-        or GitHub avatar image on our README on GitHub and the front page 
+        Become a silver sponsor with a monthly donation of $500 USD (providing 10
+        hours of maintenance and development) and get your Open Collective
+        or GitHub avatar image on our README on GitHub and the front page
         of eslint.org.
     bronze:
       title: Bronze Sponsors
       description: >
-        Become a bronze sponsor with a monthly donation of $200 USD (providing four 
+        Become a bronze sponsor with a monthly donation of $200 USD (providing four
         hours of maintenance and development) and get your Open Collective
         or GitHub avatar image on our README on GitHub and the front page of
         eslint.org.
     technology:
       title: Technology Sponsors
       description: >
-        Technology sponsors allow us to use their products and services for 
+        Technology sponsors allow us to use their products and services for
         free as part of a contribution to the open source ecosystem and our work.
     backers:
       title: All backers
       description: >
-        Backers provide monthly contributions to help maintain ESLint. 
-  
+        Backers provide monthly contributions to help maintain ESLint.
+
   recent_donations:
     title: Recent one-time donations
     description: >
       We also receive a lot of one-time contributions from fantastic people.
-      Here are some recent ones from OpenCollective and GitHub. 
-    
+      Here are some recent ones from OpenCollective and GitHub.
+
   sponsor_title: SPONSOR_NAME is donating AMOUNT each month
   tech_sponsor_title: TECH provided by SPONSOR_NAME
 
@@ -469,7 +468,7 @@ donate_page:
           to ensure important projects remain well-maintained.
       - name: Support Systems
         text: >
-          We use a small amount each month to pay for software the team uses to help manage 
+          We use a small amount each month to pay for software the team uses to help manage
           the project, which includes things like Google Workspace and cloud storage.
     footer:
       text: >
@@ -484,7 +483,7 @@ donate_page:
     cta:
       open_collective_text: >
         Donate <span class="visually-hidden">on Open Collective</span>
-      github_sponsors_text: > 
+      github_sponsors_text: >
         Donate <span class="visually-hidden">on GitHub</span>
     items:
       - name: Platinum Sponsor

src/_includes/components/hero.macro.html

@@ -35,7 +35,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>

src/_includes/partials/carbon-ad.html → 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 %}

src/assets/scss/components/carbon-ads.scss → src/assets/scss/components/ads.scss

@@ -4,6 +4,11 @@
     }
 }
 
+/*
+ * Carbon Ads
+ * https://www.carbonads.net/
+ */
+
 #carbonads * {
     margin: initial;
     padding: initial;
@@ -120,3 +125,39 @@
         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:hover,
+// [data-ea-type].loaded .ea-content a:hover {
+//     text-decoration: none;
+//     color: var(--link-color);
+// }
+
+[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;
+}

src/assets/scss/styles.scss

@@ -20,7 +20,7 @@
 
 @import "components/alert";
 @import "components/buttons";
-@import "components/carbon-ads";
+@import "components/ads";
 @import "components/card";
 @import "components/navigation";
 @import "components/pagination";

src/content/pages/index.html

@@ -64,7 +64,7 @@ <h1 class="section-title">{{ site.homepage.title }}</h1>
         </div>
         <div class="span-10-12 eslint-versions-col">
             <div class="carbon-wrapper">
-                {% include "partials/carbon-ad.html" %}
+                {% include "partials/ad.html" %}
             </div>
             <dl class="eslint-versions" aria-labelledby="eslint-versions-title">
                 <span id="eslint-versions-title" hidden>{{ site.homepage.versions.title }}</span>