Initial implementation of berry.sh

_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 🚀"

_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>

_includes/2017/code-sponsor.html

@@ -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>

_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>

_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 %}
+      {% if site.data.berry.enabled %}
-      <div class='ad -codesponsor' role='complementary'>
+      <div class='ad -berry' role='complementary'>
-        {% include 2017/code-sponsor.html %}
+        {% include 2017/berry-sponsor.html %}
       </div>
       {% endif %}
 

_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;
-//   }
-// }

_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;
+  }
+}

_sass/2017/components/code-sponsor.scss

@@ -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;
-  }
-}

_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%);
-  // }
 }
 
 /**

_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';