New: Add Ethical Ads (#766)

* New: Add Ethical Ads * Fix ad on homepage and demo * Fix about pages
eslint · Aug 17, 2020 · 957eea4 · 957eea4
1 parent 3a4f35d
commit 957eea4
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 2 deletions.
diff --git a/_data/site.js b/_data/site.js
@@ -18,7 +18,7 @@ module.exports = {
     title: "ESLint - Pluggable JavaScript linter",
     description: "A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.",
     banner: {
-        text: "<a href='https://code2040-2020.funraise.org/' style='color: #a486df'>Donate to Code2040</a>",
+        text: null,
         foregroundColor: "#ffffff",
         backgroundColor: "#150b29"
     },

diff --git a/_includes/ad.liquid b/_includes/ad.liquid
@@ -0,0 +1,9 @@
+<!-- Ethical Ads -->
+<div class="bordered" data-ea-publisher="eslint-org" data-ea-type="image">
+    <div class="eslint-ad eslint-image-ad">
+        <div class="eslint-ad-content">
+            <a href="https://opencollective.com/eslint" rel="nofollow" target="_blank"><img src="/assets/img/logo.svg"></a>
+            <div class="eslint-ad-text"><a href="http://opencollective.com/eslint" rel="nofollow" target="_blank"><strong>Sponsor ESLint.</strong> ESLint depends on donations for ongoing maintenance and development.</a></div>
+        </div>
+    </div>
+</div>
diff --git a/_includes/head.liquid b/_includes/head.liquid
@@ -33,4 +33,5 @@
   <link rel="icon" href="/assets/img/favicon.512x512.png">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="/feed.xml">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+  <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
 </head>
diff --git a/_includes/jumbotron.liquid b/_includes/jumbotron.liquid
@@ -1,5 +1,11 @@
 <div class="jumbotron section-intro">
     <div class="container i2">
+        <div class="eslint-ad-float hidden-xs hidden-sm">
+            <div class="bordered dark" data-ea-publisher="eslint-org" data-ea-type="image">
+                <!-- no fallback for jumbotron -->
+            </div>
+        </div>
+
         <h1 itemprop="name">ESLint</h1>
         <h2 itemprop="description">Find and fix problems in your JavaScript code</h2>
         <a class="btn btn-default btn-lg" href="/docs/user-guide/getting-started">Get Started »</a>

diff --git a/_includes/text-ad.liquid b/_includes/text-ad.liquid
@@ -0,0 +1,8 @@
+<!-- Ethical Ads -->
+<div class="bordered" data-ea-publisher="eslint-org" data-ea-type="text">
+    <div class="eslint-ad">
+        <div class="eslint-ad-content">
+            <a href="https://opencollective.com/eslint" rel="nofollow" target="_blank"><strong>Sponsor ESLint.</strong> ESLint depends on donations for ongoing maintenance and development.</a>
+        </div>
+    </div>
+</div>
diff --git a/_layouts/doc.liquid b/_layouts/doc.liquid
@@ -9,6 +9,13 @@
   {% include menu %}
   <main class="doc">
     <article class="container">
+      {% if ad == "text" %}
+        {% include text-ad %}
+      {% else %}
+        <div class="eslint-ad-float hidden-xs hidden-sm">
+          {% include ad %}
+        </div>
+      {% endif %}
       {{ content
         | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of <strong>incorrect</strong> code'
         | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect icon">Example of <strong>incorrect</strong> code'

diff --git a/_layouts/post.liquid b/_layouts/post.liquid
@@ -20,6 +20,7 @@
         </main>
       </div>
       <div class="col-md-4 hidden-xs hidden-sm">
+        {%include ad %}
         <h2>Recent Posts</h2>
         <ul class="posts">
           {% for post in collections.posts limit: 25 %}

diff --git a/_layouts/rule.liquid b/_layouts/rule.liquid
@@ -9,6 +9,10 @@
   {% include menu %}
   <main class="rule doc">
     <article class="container">
+        <div class="eslint-ad-float hidden-xs hidden-sm">
+          {%include ad %}
+        </div>
+
       {{ content
         | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of <strong>incorrect</strong> code'
         | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect icon">Example of <strong>incorrect</strong> code'

diff --git a/_layouts/rules.liquid b/_layouts/rules.liquid
@@ -9,6 +9,10 @@
   {% include menu %}
   <main class="rules doc">
     <article class="container">
+      <div class="eslint-ad-float hidden-xs hidden-sm">
+        {%include ad %}
+      </div>
+
       {{ content
         | replace: '(recommended)', '<span title="recommended" aria-label="recommended" class="glyphicon glyphicon-ok"></span>'
         | replace: '(fixable)', '<span title="fixable" aria-label="fixable" class="glyphicon glyphicon-wrench"></span>'

diff --git a/_pages/demo.liquid b/_pages/demo.liquid
@@ -2,7 +2,7 @@
 title: ESLint Demo
 layout: demo
 ---
-
+{% include text-ad %}
 <div id="app">
     <div class="loading-demo-message">
         Loading...

diff --git a/_pages/team.liquid b/_pages/team.liquid
@@ -1,6 +1,7 @@
 ---
 title: Team
 layout: doc
+ad: text
 ---
 
 <h1>Team</h1>

diff --git a/_pages/users.liquid b/_pages/users.liquid
@@ -1,6 +1,7 @@
 ---
 title: "Who's Using ESLint?"
 layout: doc
+ad: text
 ---
 
 <h1>Who's Using ESLint?</h1>

diff --git a/src/styles/lib/ad.less b/src/styles/lib/ad.less
@@ -0,0 +1,55 @@
+.eslint-ad {
+
+    color: #333;
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    font-weight: normal;
+    font-style: normal;
+    letter-spacing: 0px;
+    vertical-align: baseline;
+    line-height: 1.3em;
+
+    border: 1px solid rgba(0,0,0,0.04);
+    border-radius: 3px;
+    box-shadow: none;
+
+    overflow: auto;
+
+    margin: 1em 1em 0.5em 1em;
+    padding: 1em;
+    background: rgba(0,0,0,0.03);
+    color: #505050;
+
+    .eslint-ad-content {
+        text-align: center;
+    }
+
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        width: 120px;
+        height: 90px;
+    }
+
+    .eslint-ad-text {
+        font-size: 1em;
+        margin-top: 1em;
+        text-align: center;
+
+        a {
+            color: #505050;
+            text-decoration: none;
+        }
+    }
+
+
+
+}
+
+.eslint-image-ad {
+    max-width: 180px;
+}
+
+.eslint-ad-float {
+    float: right;
+}
diff --git a/src/styles/main.less b/src/styles/main.less
@@ -7,3 +7,4 @@
 @import "lib/rules_index.less";
 @import "lib/404.less";
 @import "lib/banner.less";
+@import "lib/ad.less";