docs: Experiment new partner (A/B testing)

_config.yml

@@ -44,6 +44,7 @@ blog:             https://blog.getbootstrap.com
 expo:             https://expo.getbootstrap.com
 mkp:              https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385
 mdp:              https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385
+mdbootstrap:      https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff
 
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes

_includes/docs-navbar.html

@@ -14,12 +14,16 @@
       <li class="nav-item">
         <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
       </li>
-      <li class="nav-item">
+      <li class="nav-item partner creativetim">
         <a class="nav-link" href="{{ site.mdp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
       </li>
-      <li class="nav-item">
+      <li class="nav-item partner creativetim">
         <a class="nav-link" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
       </li>
+      <li class="nav-item partner mdbootstrap">
+        <a class="nav-link" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
+          target="_blank" rel="noopener">Material Design for Bootstrap PRO</a>
+      </li>
     </ul>
   </div>
 

_includes/scripts.html

@@ -2,6 +2,7 @@
 <script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
 
 <script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/vendor/ab.min.js"></script>
 
 {% if site.github %}
   <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.min.js"></script>

assets/css/docs.css

@@ -142,6 +142,9 @@
   display: block;
   color: #777 !important; }
 
+.partner {
+  display: none; }
+
 .bd-content {
   order: 1; }
   .bd-content > h2[id],

assets/js/src/application.js

@@ -18,6 +18,13 @@
   $(function() {
     $('body').bootstrapMaterialDesign();
 
+    ab('partner', 0.5).slices('creativetim', 'mdbootstrap').run(function() {
+      if (this.slice.name !== 'creativetim' && this.slice.name !== 'control') {
+        $('.partner.creativetim').hide();
+      }
+      $('.partner.' + this.slice.name).show();
+    });
+
     // Indeterminate checkbox example
     $('.bd-example-indeterminate [type="checkbox"]').prop(
       'indeterminate',

assets/js/vendor/ab.min.js

@@ -0,0 +1,2 @@
+/*! ab - v0.0.3 - 2014-03-24 */
+!function(){function a(){this._events={}}function b(a){this.name=a}function c(a,b){this.name=a,this.traffic=b,this.slice=null,this.storage=i,this._slices={}}var d={},e=function(a,b,e){return d.hasOwnProperty(a)?d[a]:("undefined"==typeof b&&(b=1),d[a]=new c(a,b),e&&e.length&&d[a].slices(e),d[a])};e.clear=function(){for(var a in d)d.hasOwnProperty(a)&&d[a].clear();d={}};var f=window.ab;e.noConflict=function(){return window.ab=f,e},e.events=new a,e.version="__VERSION__",e.config={STORAGE_PREFIX:"ab:"};var g=function(a){var b="test";try{return window[a+"Storage"].setItem(b,b),window[a+"Storage"].removeItem(b),!0}catch(c){return!1}},h=function(a){function b(a,b,c){var d,e;c?(d=new Date,d.setTime(d.getTime()+24*c*60*60*1e3),e="; expires="+d.toGMTString()):e="",document.cookie=a+"="+b+e+"; path=/"}function c(a){var b,c,d=a+"=",e=document.cookie.split(";");for(b=0;b<e.length;b++){for(c=e[b];" "===c.charAt(0);)c=c.substring(1,c.length);if(0===c.indexOf(d))return c.substring(d.length,c.length)}return null}function d(c){c=JSON.stringify(c),"session"===a?window.name=c:b("localStorage",c,365)}function e(){"session"===a?window.name="":b("localStorage","",365)}function f(){var b="session"===a?window.name:c("localStorage");try{return b?JSON.parse(b):{}}catch(d){return{}}}var g=f();return{length:0,clear:function(){g={},this.length=0,e()},getItem:function(a){return void 0===g[a]?null:g[a]},key:function(a){var b=0;for(var c in g){if(b==a)return c;b+=1}return null},removeItem:function(a){delete g[a],this.length-=1,d(g)},setItem:function(a,b){g[a]=b+"",this.length+=1,d(g)}}},i=g("local")?window.localStorage:new h("local");a.prototype.trigger=function(a){var b=Array.prototype.slice.call(arguments,1);if(this._events.hasOwnProperty(a))for(var c=0,d=this._events[a].length;d>c;c++)this._events[a][c].apply(window,b)},a.prototype.on=function(a,b){this._events.hasOwnProperty(a)||(this._events[a]=[]),this._events[a].push(b)},b.prototype.toString=function(){return this.name},b.prototype.toJSON=function(){return{name:this.name}},c.prototype.slices=function(a){if(null!==this.slice)throw new Error("Attempted to add slices to already running test.");"[object Array]"!==Object.prototype.toString.call(a)&&(a=Array.prototype.slice.call(arguments,0));for(var c=0,d=a.length;d>c;c++)this.add(new b(a[c]));return this},c.prototype.add=function(a){return this._slices[a.name]=a,this},c.prototype.run=function(a){var c=this.urlSlice()||this.storedSlice();return c&&this.hasSlice(c)?this.slice=this.getSlice(c):Math.random()>this.traffic?(this.slice=new b("control"),e.events.trigger("start",this)):(this.slice=this.chooseSlice(),e.events.trigger("start",this)),this.storage.setItem(this.key(),this.slice.name),"function"==typeof a&&a.call(this),e.events.trigger("run",this),this},c.prototype.chooseSlice=function(){var a=[];for(var c in this._slices)this._slices.hasOwnProperty(c)&&a.push(c);if(0===a.length)return new b("control");var d=Math.floor(Math.random()/(1/a.length));return this.getSlice(a[d])},c.prototype.hasSlice=function(a){return"control"===a&&this.traffic<1||this._slices.hasOwnProperty(a)},c.prototype.getSlice=function(a){return"control"===a?new b("control"):this._slices[a]},c.prototype.urlSlice=function(){var a,b=window.location.hash,c=window.location.search,d=new RegExp("("+this.key()+")=([\\w0-9]+)");return(a=b.match(d))?a[2]:(a=c.match(d))?a[2]:!1},c.prototype.storedSlice=function(){return this.storage.getItem(this.key())},c.prototype.key=function(){return e.config.STORAGE_PREFIX+this.name},c.prototype.toString=function(){return this.key()},c.prototype.clear=function(){this.storage.removeItem(this.key())},c.prototype.style=function(a){var b=document.createElement("link");return b.rel="stylesheet",b.href=a,document.head.appendChild(b),this},c.prototype.script=function(a,b){var c=document.createElement("script");c.type="text/javascript",c.async="undefined"==typeof b?!0:!!b,c.src=a;var d=document.getElementsByTagName("script")[0];return d.parentNode.insertBefore(c,d),this},e.Test=c,e.Slice=b,e.Storage=h,e.Events=a,"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require?module.exports=e:"function"==typeof define&&define.amd?define("ab",function(){return e}):window.ab=e}();

assets/scss/_ads.scss

@@ -36,3 +36,7 @@
   display: block;
   color: #777 !important;
 }
+
+.partner.mdbootstrap {
+  display: none;
+}

index.html

@@ -82,15 +82,25 @@ bower install bootstrap-material-design#v{{ site.current_version }}
   <div class="col-12 col-md-12 p-3 p-md-5 bg-white border border-white text-center">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Official Pro Kits</h3>
-    <p>
-      Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
+    <h3 class="partner mdbootstrap">Material Design for Bootstrap PRO</h3>
+    <p class="partner mdbootstrap">
+       2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more
     </p>
-    <a href="{{ site.mkp }}">
+    <a class="partner mdbootstrap" href="{{ site.mdbootstrap }}">
+      <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mdbootstrap.jpg" alt="Bootstrap Themes" width="1024" height="388">
+    </a>
+    <br /><br />
+    <a href="{{ site.mdbootstrap }}" class="btn btn-outline-primary partner mdbootstrap">Get Material Design for Bootstrap PRO</a>
+
+    <h3 class="partner creativetim">Official Pro Kits</h3>
+    <p class="partner creativetim">
+      2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more
+    </p>
+    <a class="partner creativetim" href="{{ site.mkp }}">
       <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
     </a>
     <br /><br />
-    <a href="{{ site.mkp }}" class="btn btn-outline-primary">Material Kit Pro</a>
-    <a href="{{ site.mdp }}" class="btn btn-outline-primary">Material Dashboard Pro</a>
+    <a href="{{ site.mkp }}" class="btn btn-outline-primary partner creativetim">Material Kit Pro</a>
+    <a href="{{ site.mdp }}" class="btn btn-outline-primary partner creativetim">Material Dashboard Pro</a>
   </div>
 </div>