diff --git a/website/_harp.json b/website/_harp.json index 672640405..ef2e48239 100644 --- a/website/_harp.json +++ b/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", diff --git a/website/_includes/_mixins-base.jade b/website/_includes/_mixins-base.jade index 94b1bfd84..359839d67 100644 --- a/website/_includes/_mixins-base.jade +++ b/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() diff --git a/website/_includes/_scripts.jade b/website/_includes/_scripts.jade index 544cf0977..b31c7119e 100644 --- a/website/_includes/_scripts.jade +++ b/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, diff --git a/website/assets/css/_components/_quickstart.sass b/website/assets/css/_components/_quickstart.sass new file mode 100644 index 000000000..a3e0bff9c --- /dev/null +++ b/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 diff --git a/website/assets/css/style.sass b/website/assets/css/style.sass index 259d563c3..809598663 100644 --- a/website/assets/css/style.sass +++ b/website/assets/css/style.sass @@ -33,3 +33,4 @@ $theme: blue !default @import _components/sidebar @import _components/tables @import _components/tooltips +@import _components/quickstart diff --git a/website/assets/js/quickstart.js b/website/assets/js/quickstart.js new file mode 100644 index 000000000..d062aa91f --- /dev/null +++ b/website/assets/js/quickstart.js @@ -0,0 +1,8 @@ +/** + * quickstart.js + * A micro-form for user-specific installation instructions + * + * @author Ines Montani + * @version 0.0.1 + * @license MIT + */'use strict';var _createClass=function(){function a(b,c){for(var e,d=0;d['+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+=''+b.title+'',c.innerHTML+=b.options.map(function(e){var f=b.multiple?'checkbox':'radio';return''}).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}(); diff --git a/website/docs/usage/_data.json b/website/docs/usage/_data.json index 78e8b3e27..703a185d6 100644 --- a/website/docs/usage/_data.json +++ b/website/docs/usage/_data.json @@ -33,6 +33,7 @@ "index": { "title": "Install spaCy", + "quickstart": true, "next": "models" }, diff --git a/website/docs/usage/index.jade b/website/docs/usage/index.jade index 48fe6b783..da13f4d81 100644 --- a/website/docs/usage/index.jade +++ b/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