Add quickstart.js widget

website/_harp.json

@@ -55,7 +55,32 @@
             }
         },
 
-        "V_CSS": "1.6",
+        "QUICKSTART": [
+            { "id": "os", "title": "Operating system", "options": [
+                { "id": "mac", "title": "macOS / OSX", "checked": true },
+                { "id": "windows", "title": "Windows" },
+                { "id": "linux", "title": "Linux" }]
+            },
+            { "id": "package", "title": "Package manager", "options": [
+                { "id": "pip", "title": "pip", "checked": true },
+                { "id": "conda", "title": "conda" },
+                { "id": "source", "title": "from source" }]
+            },
+            { "id": "python", "title": "Python version", "options": [
+                { "id": 2, "title": "2.x" },
+                { "id": 3, "title": "3.x", "checked": true }]
+            },
+            { "id": "config", "title": "Configuration", "multiple": true, "options": [
+                {"id": "venv", "title": "virtualenv", "help": "Use a virtual environment and install spaCy into a user directory" }]
+            },
+            { "id": "model", "title": "Models", "multiple": true, "options": [
+                { "id": "en", "title": "English", "meta": "50MB" },
+                { "id": "de", "title": "German", "meta": "645MB" },
+                { "id": "fr", "title": "French", "meta": "1.33GB" }]
+            }
+        ],
+
+        "V_CSS": "1.7",
         "V_JS": "1.2",
         "DEFAULT_SYNTAX": "python",
         "ANALYTICS": "UA-58931649-1",

website/_includes/_mixins-base.jade

@@ -121,6 +121,47 @@ mixin badge(name)
             img(src=site.badge alt="{name} version" height="20")
 
 
+//- Quickstart widget
+    quickstart.js with manual markup, inspired by PyTorch's "Getting started"
+    groups - [object] option groups, uses global variable QUICKSTART
+    headline - [string] optional text to be rendered as widget headline
+
+mixin quickstart(groups, headline)
+    .c-quickstart.o-block-small#qs
+        .c-quickstart__content
+            if headline
+                +h(2)=headline
+            for group in groups
+                .c-quickstart__group.u-text-small(data-qs-group=group.id)
+                    .c-quickstart__legend=group.title
+                    .c-quickstart__fields
+                        for option in group.options
+                            input.c-quickstart__input(class="c-quickstart__input--" + (group.multiple ? "check" : "radio") type=group.multiple ? "checkbox" : "radio" name=group.id id=option.id value=option.id checked=option.checked)
+                            label.c-quickstart__label(for=option.id)=option.title
+                                if option.meta
+                                    |  #[span.c-quickstart__label__meta (#{option.meta})]
+                                if option.help
+                                    |  #[+help(option.help).c-quickstart__label__meta]
+
+        pre.c-code-block
+            code.c-code-block__content.c-quickstart__code(data-qs-results="")
+                block
+
+    .c-quickstart__info.u-text-tiny.o-block.u-text-right
+        |  Like this widget? Check out #[+a("https://github.com/ines/quickstart").u-link quickstart.js]!
+
+
+//- Quickstart code item
+    data [object] - Rendering conditions (keyed by option group ID, value: option)
+
+mixin qs(data)
+    - args = {}
+    for value, setting in data
+        - args['data-qs-' + setting] = value
+    span.c-quickstart__line&attributes(args)
+        block
+
+
 //- Logo
 
 mixin logo()

website/_includes/_scripts.jade

@@ -1,9 +1,13 @@
 //- 💫 INCLUDES > SCRIPTS
 
-script(src="/assets/js/main.js?v#{V_JS}", type="text/javascript")
-script(src="/assets/js/prism.js", type="text/javascript")
+script(src="/assets/js/main.js?v#{V_JS}")
+script(src="/assets/js/prism.js")
 
 if SECTION == "docs"
+    if quickstart
+        script(src="/assets/js/quickstart.js")
+        script var qs = new Quickstart("#qs");
+
     script.
         ((window.gitter = {}).chat = {}).options = {
             useStyles: false,

website/assets/css/_components/_quickstart.sass

@@ -0,0 +1,90 @@
+//- 💫 CSS > COMPONENTS > QUICKSTART
+
+.c-quickstart
+    border: 1px solid $color-subtle
+    border-radius: 2px
+    display: none
+    background: $color-subtle-light
+
+    &:not([style]) + .c-quickstart__info
+        display: none
+
+.c-quickstart__content
+    padding: 2rem 3rem
+
+.c-quickstart__input
+    @include size(0)
+    opacity: 0
+    position: absolute
+    left: -9999px
+
+.c-quickstart__label
+    cursor: pointer
+    background: $color-back
+    border: 1px solid $color-subtle
+    border-radius: 2px
+    display: inline-block
+    padding: 0.75rem 1.25rem
+    margin: 0 0.5rem 0.5rem 0
+    font-weight: bold
+
+    &:hover
+        background: lighten($color-theme-light, 5)
+
+    .c-quickstart__input:focus + &
+        border: 1px solid $color-theme
+
+    .c-quickstart__input--radio:checked + &
+        color: $color-back
+        border-color: $color-theme
+        background: $color-theme
+
+    .c-quickstart__input--check + &:before
+        content: ""
+        background: $color-back
+        display: inline-block
+        width: 20px
+        height: 20px
+        border: 1px solid $color-subtle
+        vertical-align: middle
+        margin-right: 1rem
+        cursor: pointer
+        border-radius: 50%
+
+    .c-quickstart__input--check:checked + &:before
+        background: $color-theme url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
+        background-size: contain
+        border-color: $color-theme
+
+.c-quickstart__label__meta
+    font-weight: normal
+    color: $color-subtle-dark
+
+.c-quickstart__group
+    @include breakpoint(min, md)
+        display: flex
+        flex-flow: row nowrap
+
+    &:not(:last-child)
+        margin-bottom: 1rem
+
+.c-quickstart__fields
+    flex: 100%
+
+.c-quickstart__legend
+    color: $color-subtle-dark
+    margin-right: 2rem
+    padding-top: 0.75rem
+    flex: 1 1 35%
+    font-weight: bold
+
+.c-quickstart__line
+    display: block
+
+    &:before
+        color: $color-theme
+        margin-right: 1em
+        content: "$"
+
+.c-quickstart__code
+    font-size: 1.6rem

website/assets/css/style.sass

@@ -33,3 +33,4 @@ $theme: blue !default
 @import _components/sidebar
 @import _components/tables
 @import _components/tooltips
+@import _components/quickstart

website/assets/js/quickstart.js

@@ -0,0 +1,8 @@
+/**
+ * quickstart.js
+ * A micro-form for user-specific installation instructions
+ *
+ * @author Ines Montani <ines@ines.io>
+ * @version 0.0.1
+ * @license MIT
+ */'use strict';var _createClass=function(){function a(b,c){for(var e,d=0;d<c.length;d++)e=c[d],e.enumerable=e.enumerable||!1,e.configurable=!0,'value'in e&&(e.writable=!0),Object.defineProperty(b,e.key,e)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var Quickstart=function(){function a(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:'#quickstart',d=arguments[1],c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,a),this.container='string'==typeof b?this._$(b):b,this.groups=d,this.pfx=c.prefix||'qs',this.dpfx='data-'+this.pfx,this.init=this.init.bind(this),c.noInit||document.addEventListener('DOMContentLoaded',this.init)}return _createClass(a,[{key:'init',value:function init(){this.updateContainer(),this.container.style.display='block',this.container.classList.add(''+this.pfx);var b=this.groups;b instanceof Array?b.reverse().forEach(this.createGroup.bind(this)):this._$$('['+this.dpfx+'-group]').forEach(this.updateGroup.bind(this))}},{key:'initGroup',value:function initGroup(b,c){b.addEventListener('change',this.update.bind(this)),b.dispatchEvent(new CustomEvent('change',{detail:c}))}},{key:'updateGroup',value:function updateGroup(b){var c=b.getAttribute(this.dpfx+'-group'),d=this.createStyles(c);b.insertBefore(d,b.firstChild),this.initGroup(b,c)}},{key:'update',value:function update(b){var f=this,c=b.detail||b.target.name,d=this._$$('[name='+c+']:checked').map(function(h){return h.value}),e=d.map(function(h){return':not(['+f.dpfx+'-'+c+'="'+h+'"])'}).join(''),g='['+this.dpfx+'-results]>['+this.dpfx+'-'+c+']'+e+' {display: none}';this._$('['+this.dpfx+'-style="'+c+'"]').textContent=g}},{key:'updateContainer',value:function updateContainer(){if(!this._$('['+this.dpfx+'-results]')){var b=this.childNodes(this.container,'pre'),c=b?b[0]:this._c('pre',this.pfx+'-code'),d=this.childNodes(c,'code')||this.childNodes(this.container,'code'),e=d?d[0]:this._c('code',this.pfx+'-results');e.setAttribute(this.dpfx+'-results','');var f=this.childNodes(e,'span')||this.childNodes(c,'span')||this.childNodes(this.container,'span');f&&f.forEach(function(g){return e.appendChild(g)}),c.appendChild(e),this.container.appendChild(c)}}},{key:'createGroup',value:function createGroup(b){var d=this,c=this._c('fieldset',this.pfx+'-group');c.setAttribute(this.dpfx+'-group',b.id),c.innerHTML=this.createStyles(b.id).outerHTML,c.innerHTML+='<legend class="'+this.pfx+'-legend">'+b.title+'</legend>',c.innerHTML+=b.options.map(function(e){var f=b.multiple?'checkbox':'radio';return'<input class="'+d.pfx+'-input '+d.pfx+'-input--'+f+'" type="'+f+'" name="'+b.id+'" id="'+e.id+'" value="'+e.id+'" '+(e.checked?'checked':'')+' /><label class="'+d.pfx+'-label" for="'+e.id+'">'+e.title+'</label>'}).join(''),this.container.insertBefore(c,this.container.firstChild),this.initGroup(c,b.id)}},{key:'createStyles',value:function createStyles(b){var c=this._c('style');return c.setAttribute(this.dpfx+'-style',b),c.textContent='['+this.dpfx+'-results]>['+this.dpfx+'-'+b+'] {display: none}',c}},{key:'childNodes',value:function childNodes(b,c){var d=c.toUpperCase();if(!b.hasChildNodes)return!1;var e=[].concat(_toConsumableArray(b.childNodes)).filter(function(f){return f.nodeName===d});return!!e.length&&e}},{key:'_$',value:function _$(b){return document.querySelector(b)}},{key:'_$$',value:function _$$(b){return[].concat(_toConsumableArray(document.querySelectorAll(b)))}},{key:'_c',value:function _c(b,c){var d=document.createElement(b);return c&&(d.className=c),d}}]),a}();

website/docs/usage/_data.json

@@ -33,6 +33,7 @@
 
     "index": {
         "title": "Install spaCy",
+        "quickstart": true,
         "next": "models"
     },
 

website/docs/usage/index.jade

@@ -12,6 +12,39 @@ p
     |  #[a(href="#source-ubuntu") Ubuntu], #[a(href="#source-osx") macOS/OS X]
     |  and #[a(href="#source-windows") Windows] for details.
 
++quickstart(QUICKSTART, "Quickstart")
+    +qs({config: 'venv', python: 2}) python -m pip install -U virtualenv
+    +qs({config: 'venv', python: 3}) python -m pip install -U venv
+    +qs({config: 'venv', python: 2}) virtualenv .env
+    +qs({config: 'venv', python: 3}) venv .env
+    +qs({config: 'venv', os: 'mac'}) source .env/bin/activate
+    +qs({config: 'venv', os: 'linux'}) source .env/bin/activate
+    +qs({config: 'venv', os: 'windows'}) .env\Scripts\activate
+
+    +qs({package: 'pip'}) pip install -U spacy
+
+    +qs({package: 'conda'}) conda config --add channels conda-forge
+    +qs({package: 'conda'}) conda install spacy
+
+    +qs({package: 'source'}) git clone https://github.com/explosion/spaCy
+    +qs({package: 'source'}) cd spaCy
+    +qs({package: 'source'}) pip install -r requirements.txt
+    +qs({package: 'source'}) pip install -e .
+
+    +qs({model: 'en'}) python -m spacy download en
+    +qs({model: 'de'}) python -m spacy download de
+    +qs({model: 'fr'}) python -m spacy download fr
+
++h(2, "installation") Installation instructions
+
++h(3, "pip") pip
+    +badge("pipy")
+
+p Using pip, spaCy releases are currently only available as source packages.
+
++code(false, "bash").
+    pip install -U spacy
+
 +aside("Download models")
     |  After installation you need to download a language model. For more info
     |  and available models, see the #[+a("/docs/usage/models") docs on models].
@@ -22,14 +55,6 @@ p
         >>> import spacy
         >>> nlp = spacy.load('en')
 
-+h(2, "pip") pip
-    +badge("pipy")
-
-p Using pip, spaCy releases are currently only available as source packages.
-
-+code(false, "bash").
-    pip install -U spacy
-
 p
     |  When using pip it is generally recommended to install packages in a
     |  #[code virtualenv] to avoid modifying system state:
@@ -39,7 +64,7 @@ p
     source .env/bin/activate
     pip install spacy
 
-+h(2, "conda") conda
++h(3, "conda") conda
     +badge("conda")
 
 p