From 6daf8d0b03ea9a0e94a7a6a6cf6a163a1aefa164 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Thu, 7 Dec 2017 19:01:47 +0800
Subject: [PATCH] Initial implementation of berry.sh

---
 _data/berry.yml                          |  4 ++
 _includes/2017/berry-sponsor.html        | 13 ++++++
 _includes/2017/code-sponsor.html         | 10 -----
 _layouts/2017/home.html                  |  4 +-
 _layouts/2017/sheet.html                 |  6 +--
 _sass/2017/base/fade.scss                | 17 +-------
 _sass/2017/components/berry-sponsor.scss | 37 +++++++++++++++++
 _sass/2017/components/code-sponsor.scss  | 53 ------------------------
 _sass/2017/components/main-heading.scss  | 11 -----
 _sass/2017/style.scss                    |  2 +-
 10 files changed, 61 insertions(+), 96 deletions(-)
 create mode 100644 _data/berry.yml
 create mode 100644 _includes/2017/berry-sponsor.html
 delete mode 100644 _includes/2017/code-sponsor.html
 create mode 100644 _sass/2017/components/berry-sponsor.scss
 delete mode 100644 _sass/2017/components/code-sponsor.scss

diff --git a/_data/berry.yml b/_data/berry.yml
new file mode 100644
index 000000000..f696cebca
--- /dev/null
+++ b/_data/berry.yml
@@ -0,0 +1,4 @@
+enabled: true
+token: "ff1cfaca-b614-423d-bda9-5daa28662c5b"
+title: "Rollbar"
+description: "Real-time error monitoring, alerting, and analytics for developers 🚀"
diff --git a/_includes/2017/berry-sponsor.html b/_includes/2017/berry-sponsor.html
new file mode 100644
index 000000000..b3f72b238
--- /dev/null
+++ b/_includes/2017/berry-sponsor.html
@@ -0,0 +1,13 @@
+{% assign pixel_href = 'https://cs.berry.sh/l/TOKEN/pixel.png' | replace: 'TOKEN', site.data.berry.token %}
+{% assign link_href = 'https://cs.berry.sh/c/TOKEN' | replace: 'TOKEN', site.data.berry.token %}
+
+<aside class='berry-sponsor' data-js-no-preview>
+  <div class='cs__wrapper'>
+    <div class='cs__header'>Proudly sponsored by</div>
+    <a href='{{ link_href }}' class='cs__blurb' target='_blank' rel='noopener'>
+      <strong>{{ site.data.berry.title }}</strong>
+      <span>{{ site.data.berry.description }}</span>
+    </a>
+    <img class='cs__pixel' src='{{ pixel_href }}' />
+  </div>
+</aside>
diff --git a/_includes/2017/code-sponsor.html b/_includes/2017/code-sponsor.html
deleted file mode 100644
index 9c740c438..000000000
--- a/_includes/2017/code-sponsor.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<aside class='code-sponsor' data-js-no-preview>
-  <div id='code-sponsor-widget'></div>
-  <script id='code-sponsor-embed'>;(function(d,id){
-    if (window.localStorage && window.localStorage._NOADS) return
-    var s=d.createElement('script'),r=d.getElementById(id)
-    s.async=true
-    s.src='https://app.codesponsor.io/scripts/{{ site.data.codesponsor.id }}?theme=light&image=hide&height=130&width=319'
-    setTimeout(function(){r.parentNode.insertBefore(s,r)})
-  })(document, 'code-sponsor-embed')</script>
-</aside>
diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html
index ed2316064..dfceafe50 100644
--- a/_layouts/2017/home.html
+++ b/_layouts/2017/home.html
@@ -31,9 +31,9 @@
 
     {% include 2017/search-form.html live=true %}
 
-    {% if site.data.codesponsor.enabled %}
+    {% if site.data.berry.enabled %}
     <div class='adbox' role='complementary'>
-      {% include 2017/code-sponsor.html noprelude=true %}
+      {% include 2017/berry-sponsor.html %}
     </div>
     {% endif %}
   </div>
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
index b070035f2..378964285 100644
--- a/_layouts/2017/sheet.html
+++ b/_layouts/2017/sheet.html
@@ -13,9 +13,9 @@
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
     <div class='adbox' data-js-no-preview>
-      {% if site.data.codesponsor.enabled %}
-      <div class='ad -codesponsor' role='complementary'>
-        {% include 2017/code-sponsor.html %}
+      {% if site.data.berry.enabled %}
+      <div class='ad -berry' role='complementary'>
+        {% include 2017/berry-sponsor.html %}
       </div>
       {% endif %}
 
diff --git a/_sass/2017/base/fade.scss b/_sass/2017/base/fade.scss
index 9b04e4bd4..7ef1fc6dc 100644
--- a/_sass/2017/base/fade.scss
+++ b/_sass/2017/base/fade.scss
@@ -15,7 +15,7 @@ $bounce: cubic-bezier(.75,-0.5,0,1.75);
  * Pop it in as the page loads
  */
 
-.code-sponsor {
+.berry-sponsor {
   html.WithJs & {
     transform: scale(0.7);
     opacity: 0;
@@ -45,18 +45,3 @@ $bounce: cubic-bezier(.75,-0.5,0,1.75);
     transition: opacity 100ms linear 100ms;
   }
 }
-
-/*
- * Subtle animation to drive attention to the ad on laod
- */
-
-// .code-sponsor {
-//   html.WithJs & {
-//     transform: translate3d(0, 16px, 0);
-//   }
-
-//   html.WithJs.LoadDone & {
-//     transform: translate3d(0, 0, 0);
-//     transition: transform 200ms ease-out;
-//   }
-// }
diff --git a/_sass/2017/components/berry-sponsor.scss b/_sass/2017/components/berry-sponsor.scss
new file mode 100644
index 000000000..dc8bc3b13
--- /dev/null
+++ b/_sass/2017/components/berry-sponsor.scss
@@ -0,0 +1,37 @@
+.berry-sponsor {
+  text-align: center;
+  position: relative;
+  height: 130px;
+  overflow: hidden;
+}
+
+/*
+ * Berry styles
+ */
+
+.cs__header {
+  color: $base-mute;
+  @include font-size(-1);
+}
+
+.cs__blurb {
+  &,
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  & {
+    color: $base-text;
+  }
+
+  & > strong {
+    color: $base-head;
+    font-weight: bold;
+    display: block;
+  }
+
+  & > span {
+    display: block;
+  }
+}
diff --git a/_sass/2017/components/code-sponsor.scss b/_sass/2017/components/code-sponsor.scss
deleted file mode 100644
index de1a84d1a..000000000
--- a/_sass/2017/components/code-sponsor.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.code-sponsor {
-  & {
-    text-align: center;
-    position: relative;
-    height: 130px;
-    overflow: hidden;
-  }
-
-  /* Prelude */
-  & > .prelude {
-    position: relative;
-    z-index: 5;
-    display: block;
-    @include font-size(-1);
-    color: lighten($gray-text, 20%);
-    text-align: center;
-    font-weight: normal;
-    user-select: none;
-  }
-
-  & > .prelude > a,
-  & > .prelude > a:visited {
-    text-decoration: none;
-    color: lighten($gray-text, 20%);
-  }
-
-  & > .prelude > a:hover,
-  & > .prelude > a:focus {
-    color: $gray-text;
-  }
-
-  /* Compensate padding to put it next to prelude */
-  & > div {
-    position: relative;
-    z-index: 1;
-    margin-top: -16px;
-  }
-
-  /* Extra line between prelude and ad? */
-  & > .prelude + div {
-    margin-top: -8px;
-  }
-
-  & > div > iframe {
-    display: inline-block;
-    opacity: 0.9;
-    transition: opacity 150ms linear;
-  }
-
-  & > div:hover > iframe {
-    opacity: 1;
-  }
-}
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index 642c76eed..222f88417 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_sass/2017/components/main-heading.scss
@@ -41,17 +41,6 @@
   & > .adbox > .ad.-carbon {
     margin-top: 16px;
   }
-
-  // Horizontal line
-  // (no need for now)
-  // & > .adbox > .ad.-codesponsor::before {
-  //   content: '';
-  //   display: block;
-  //   margin: 8px auto 24px auto;
-  //   width: 64px;
-  //   height: 1px;
-  //   background: lighten($gray-text, 40%);
-  // }
 }
 
 /**
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 6618cdd52..febfbb6be 100644
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -21,8 +21,8 @@
 @import './components/announcements-item';
 @import './components/announcements-list';
 @import './components/back-button';
+@import './components/berry-sponsor';
 @import './components/body-area';
-@import './components/code-sponsor';
 @import './components/comments-area';
 @import './components/comments-details';
 @import './components/comments-section';