diff --git a/docs/img/mask.png b/docs/img/mask.png new file mode 100644 index 00000000..abf66b81 Binary files /dev/null and b/docs/img/mask.png differ diff --git a/docs/index.haml b/docs/index.haml index 118353e6..309cae8a 100644 --- a/docs/index.haml +++ b/docs/index.haml @@ -49,28 +49,43 @@ layout: default .col-sm-4.showcase %a{:href => "https://bootstrap.algolia.com", :target => "_blank"} %img.img-responsive.logo{:src => "./img/showcase/logo-bootstrap.png"} - %img.img-responsive.example{:src => "./img/showcase/example-bootstrap.gif"} - Bootstrap + .screen-wrapper + %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-bootstrap.gif"} + %img.img-responsive.screen-mask{:src => "./img/mask.png"} + .spacer10 + Bootstrap .col-sm-4.showcase %a{:href => "http://eslint.org/", :target => "_blank"} %img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"} - %img.img-responsive.example{:src => "./img/showcase/example-eslint.gif"} - ESLint + .screen-wrapper + %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-eslint.gif"} + %img.img-responsive.screen-mask{:src => "./img/mask.png"} + .spacer10 + ESLint .col-sm-4.showcase %a{:href => "http://docs.scala-lang.org/", :target => "_blank"} %img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"} - %img.img-responsive.example{:src => "./img/showcase/example-scala.gif"} - Scala + .screen-wrapper + %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-scala.gif"} + %img.img-responsive.screen-mask{:src => "./img/mask.png"} + .spacer10 + Scala .col-sm-4.showcase %a{:href => "https://babeljs.algolia.com/", :target => "_blank"} %img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"} - %img.img-responsive.example{:src => "./img/showcase/example-babel.gif"} - Babel.js + .screen-wrapper + %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-babel.gif"} + %img.img-responsive.screen-mask{:src => "./img/mask.png"} + .spacer10 + Babel.js .col-sm-4.showcase %a{:href => "https://reactjs.algolia.com/", :target => "_blank"} %img.img-responsive.logo{:src => "./img/showcase/logo-react.png"} - %img.img-responsive.example{:src => "./img/showcase/example-react.gif"} - React + .screen-wrapper + %img.img-responsive.example.freezeframe{:src => "./img/showcase/example-react.gif"} + %img.img-responsive.screen-mask{:src => "./img/mask.png"} + .spacer10 + React #section_how.page-section .container .row @@ -78,26 +93,28 @@ layout: default .row .col-sm-12 %img.img-responsive{:src => "./img/illus-howitworks.jpg"} - .spacer30 + .spacer60 .row - .col-sm-4.how-it-works - %h3 - %span.how-it-works-number> 1 - We crawl your documentation pages - %p We built a website crawler designed to index every section of your documentation. - %p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date. - .col-sm-4.how-it-works - %h3 - %span.how-it-works-number> 2 - We configure your search experience - %p You don’t need to configure any settings or even have an Algolia account. - %p We take of all of this automatically to ensure the best documentation search experience. - .col-sm-4.how-it-works - %h3 - %span.how-it-works-number> 3 - You add the autocomplete to your UI - %p We’ll send you a few lines to code to integrate Algolia autocomplete and power your search. - %p You will receive the same speed, relevance and best-in-class UX as our paying customers. + .col-sm-10.col-sm-offset-1 + .row + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 1 + We crawl your documentation pages + %p We built a website crawler designed to index every section of your documentation. + %p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date. + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 2 + We configure your search experience + %p You don’t need to configure any settings or even have an Algolia account. + %p We take of all of this automatically to ensure the best documentation search experience. + .col-sm-4.how-it-works + %h3 + %span.how-it-works-number> 3 + You add the search autocomplete to your UI + %p We’ll send you a few lines to code to integrate Algolia autocomplete and power your search. + %p You will receive the same speed, relevance and best-in-class UX as our paying customers. #section_get-started.page-section.page-section-dark .m900.m-l-r-auto %h2.page-section-title Get started @@ -121,8 +138,13 @@ layout: default %button.btn.btn-primary.btn-lg{type: 'submit'} JOIN THE BETA! - - {% contentfor site-footer %} + + + {% endcontentfor %} diff --git a/docs/js/freezeframe.min.js b/docs/js/freezeframe.min.js new file mode 100755 index 00000000..7079834d --- /dev/null +++ b/docs/js/freezeframe.min.js @@ -0,0 +1 @@ +function isMouseEventSupported(e){var t=document.createElement("div");e="on"+e;var n=e in t;if(!n){t.setAttribute(e,"return;");n=typeof t[e]=="function"}t=null;return n}FreezeFrame=function(e){function g(e){t=this;e.class_name==null?this.class_name="freezeframe":this.class_name=e.class_name;e.trigger_event==null?this.trigger_event="hover":this.trigger_event=e.trigger_event.toLowerCase();e.support_touch_devices==null?this.support_touch_devices=true:this.support_touch_devuces=e.support_touch_devices.toLowerCase();e.animation_play_duration==null?this.animation_play_duration=1e4:this.animation_play_duration=parseInt(e.animation_play_duration);e.loading_background_color==null?this.loading_background_color="#666":this.loading_background_color=e.loading_background_color.toLowerCase();e.loading_background_image==null?this.loading_background_image="data:image/gif;base64,R0lGODlhEAAQAPIAAGZmZv///4mJidbW1v///8PDw7CwsKampiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==":this.loading_background_image=e.loading_background_image;e.loading_background_position==null?this.loading_background_position="center center":this.loading_background_position=e.loading_background_position.toLowerCase();e.animation_icon_image==null?this.animation_icon_image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAl9JREFUeNrs2s2K2lAUAGATb3TE2Cr+oaJQNFOh1MVsxK0OuJbSdX2V9gG67GqW3RbaB7B9gy7qgKJF8G/EarHVWGMyJj230EXLLITm6q05F44/IVw5X3JPjiGCZVkuJw/R5fCBAAiAAAiAAAiAAAiAAAiAAAiAAAiAAAiAAAjwjyMej79MpVKP/hcAwe6boul0+p3P5/vmdruv4evbVqvVdRRALpd7HQqFpn6/XxUEwdI07UZV1ffNZvMzjwDE7gk9Hs8mGAwuYCl8hTNB32630nw+f1IqlRY8QtgOQAjRZVleJxKJ77AcVLptOBwup9PpPR4hbAcQRdGUJOk2HA5riqKokUjEgKK4GY/HKo8QhMGcv4oKIJg0+Xw+r8H7bSaT0XiEICwnhyLoCgQCptfrNSgCjxDkED8ChdGiwSMEOaQ2jxDkGOtuH4jJZHJ/Nps9LRaLi+Vy2WDVUB0FYB+IXq+36ff7P0ajURj2eQbF9EO73W6cFMBdENA8mXQbNFDier0mhULhQaVSeZzNZj+d3Bnwe+i6LkDCAqx9QmMwGJwlk8nzarV6Cf3EDHZ5DvHx5ADuSjwWiz0sl8uX8H9izjLxowLskfgL1okfBYCnxA8KwGPiBwGg9xpWq5XIY+IsAQT6stvt6BGX4Nrt4jFxZgCmaYqGYRDo4nzdbncny3KGx8SZAcCRl6CH9yuKcl6r1S6i0egXHhP/Y53aGfV6/U2n02nA5yuIC7vntzsEBo/KXkG84vaI/12w8Flhhw8EQAAEQAAEQAAEQAAEQAAEQAAEQAAEQAAEcNr4KcAABsB8S2vxAV8AAAAASUVORK5CYII=":this.animation_icon_image=e.animation_icon_image;e.animation_icon_position==null?this.animation_icon_position="top left":this.animation_icon_position=e.animation_icon_position.toLowerCase();e.loading_fade_in_speed==null?this.loading_fade_in_speed=500:this.loading_fade_in_speed=parseInt(e.loading_fade_in_speed);e.animation_fade_out_speed==null?this.animation_fade_out_speed=250:this.animation_fade_out_speed=parseInt(e.animation_fade_out_speed);this.is_touch_device=isMouseEventSupported("ontouchstart");this.freezeframe_count=0}var t;var n;var r;var i;var s;var o;var u;var a;var f;var l;var c;var h;var p;var d;var v;var m;g.prototype.setup=function(){e("",{id:"freezeframe-canvas"}).css("display","none").prependTo(e("body"));this.canvas=e("canvas#freezeframe-canvas");this.context=this.canvas[0].getContext("2d")};g.prototype.run=function(){var n=[];var r;var i=t.loading_background_color;if(t.loading_background_image!==false){i+=" url('"+t.loading_background_image+"') "+t.loading_background_position+" no-repeat"}n=e('img[class*="'+t.class_name+'"]').not('[class*="'+t.class_name+'_done"]');e(n).each(function(s){e(this).removeClass(t.class_name).addClass(t.class_name+"_done");e(this).crossOrigin="anonymous";r=e(this)[0].src.split(".");r=r[r.length-1].toLowerCase();if(r!=="gif"){n.splice(s,1)}else{var o=e("
").attr("class","freezeframe-container "+t.freezeframe_count).css({display:"inline-block",overflow:"hidden",background:i});e(this).css({opacity:0,display:"block"}).wrap(o);o=e(this).parent();if(t.animation_icon_image!==false){var u=e("
").attr("class","freezeframe-animation-icon").css({display:"block",position:"absolute",background:"transparent "+"url('"+t.animation_icon_image+"') "+t.animation_icon_position+" no-repeat","pointer-events":"none","z-index":100,opacity:0});e(o).prepend(u);u=e(this).siblings(e(".freezeframe-animation-icon"))}t.freezeframe_count++;var a=this;e(this).imagesLoaded(function(){e(this).off("imagesLoaded");t.canvas[0].width=e(this)[0].clientWidth;t.canvas[0].height=e(this)[0].clientHeight;e(this).attr("animated",e(this).attr("src")).attr("src",e(this).attr("src"));t.context.drawImage(a,0,0,e(this)[0].clientWidth,e(this)[0].clientHeight);e(this).attr("src",t.canvas[0].toDataURL());if(t.animation_icon_image!==false){e(u).css({width:parseInt(e(this)[0].width),height:parseInt(e(this)[0].height)}).animate({opacity:1},t.loading_fade_in_speed)}e(this).animate({opacity:1},t.loading_fade_in_speed,function(){e(o).css("background","url('"+e(this).attr("src")+"')");e(this).css("opacity",0).attr("src",e(this).attr("animated"));if(t.support_touch_devices&&t.is_touch_device||t.trigger_event.toLowerCase()=="click"){var n;var r=false;e(this).click(function(){if(!r){e(this).attr("src",e(this).attr("src")).css("opacity",1);if(t.animation_icon_image!==false){e(u).css("opacity",0)}n=setInterval(function(){clearInterval(n);this.animate({opacity:0},t.animation_fade_out_speed);if(t.animation_icon_image!==false){e(u).animate({opacity:1},t.animation_fade_out_speed)}r=false},t.animation_play_duration);r=true}else{clearInterval(n);e(this).animate({opacity:0},t.animation_fade_out_speed);if(t.animation_icon_image!==false){e(u).animate({opacity:1},t.animation_fade_out_speed)}r=false}})}else{e(this).mouseenter(function(){e(this).attr("src",e(this).attr("src")).css("opacity",1);if(t.animation_icon_image!==false){e(u).css("opacity",0)}});e(this).mouseleave(function(){e(this).animate({opacity:0},t.animation_fade_out_speed);if(t.animation_icon_image!==false){e(u).animate({opacity:1},t.animation_fade_out_speed)}})}})})}})};return g}(jQuery);jQuery(document).ready(function(e){typeof freezeframe_options=="undefined"?freezeframe_options={}:null;freezeframe=new FreezeFrame(freezeframe_options);freezeframe.setup();freezeframe.run()});(function(e,t){"use strict";var n="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";e.fn.imagesLoaded=function(r){function c(){var t=e(f),n=e(l);if(s){if(l.length){s.reject(u,t,n)}else{s.resolve(u)}}if(e.isFunction(r)){r.call(i,u,t,n)}}function h(e){p(e.target,e.type==="error")}function p(t,r){if(t.src===n||e.inArray(t,a)!==-1){return}a.push(t);if(r){l.push(t)}else{f.push(t)}e.data(t,"imagesLoaded",{isBroken:r,src:t.src});if(o){s.notifyWith(e(t),[r,u,e(f),e(l)])}if(u.length===a.length){setTimeout(c);u.unbind(".imagesLoaded",h)}}var i=this,s=e.isFunction(e.Deferred)?e.Deferred():0,o=e.isFunction(s.notify),u=i.find("img").add(i.filter("img")),a=[],f=[],l=[];if(e.isPlainObject(r)){e.each(r,function(e,t){if(e==="callback"){r=t}else if(s){s[e](t)}})}if(!u.length){c()}else{u.bind("load.imagesLoaded error.imagesLoaded",h).each(function(r,i){var s=i.src;var o=e.data(i,"imagesLoaded");if(o&&o.src===s){p(i,o.isBroken);return}if(i.complete&&i.naturalWidth!==t){p(i,i.naturalWidth===0||i.naturalHeight===0);return}if(i.readyState||i.complete){i.src=n;i.src=s}})}return s?s.promise(i):i}})(jQuery) \ No newline at end of file