diff --git a/website/404.jade b/website/404.jade index 33b936a08..af4e7d0f2 100644 --- a/website/404.jade +++ b/website/404.jade @@ -8,4 +8,5 @@ include _includes/_mixins | does not exist! h2.c-landing__title.u-heading-3.u-padding-small - a(href="javascript:history.go(-1)") Click here to go back. + +button(false, true, "secondary-light")(href="javascript:history.go(-1)") + | Click here to go back diff --git a/website/_includes/_footer.jade b/website/_includes/_footer.jade index e933f37a8..4d0d34cb5 100644 --- a/website/_includes/_footer.jade +++ b/website/_includes/_footer.jade @@ -1,8 +1,6 @@ //- 💫 INCLUDES > FOOTER -include _mixins - -footer.o-footer.u-text.u-border-dotted +footer.o-footer.u-text +grid.o-content each group, label in FOOTER +grid-col("quarter") @@ -13,18 +11,18 @@ footer.o-footer.u-text.u-border-dotted li +a(url)=item - if SECTION != "docs" + if SECTION == "index" +grid-col("quarter") include _newsletter - if SECTION == "docs" + if SECTION != "index" .o-content.o-block.u-border-dotted include _newsletter .o-inline-list.u-text-center.u-text-tiny.u-color-subtle span © 2016-#{new Date().getFullYear()} #[+a(COMPANY_URL, true)=COMPANY] - +a(COMPANY_URL, true) - +svg("graphics", "explosion", 45).o-icon.u-color-theme.u-grayscale + +a(COMPANY_URL, true)(aria-label="Explosion AI") + +icon("explosion", 45).o-icon.u-color-theme.u-grayscale +a(COMPANY_URL + "/legal", true) Legal / Imprint diff --git a/website/_includes/_functions.jade b/website/_includes/_functions.jade index e88e678cb..5209dbbec 100644 --- a/website/_includes/_functions.jade +++ b/website/_includes/_functions.jade @@ -1,35 +1,71 @@ //- 💫 INCLUDES > FUNCTIONS -//- More descriptive variables for current.path and current.source +//- Descriptive variables, available in the global scope - CURRENT = current.source - SECTION = current.path[0] -- SUBSECTION = current.path[1] +- LANGUAGES = public.models._data.LANGUAGES +- MODELS = public.models._data.MODELS +- CURRENT_MODELS = MODELS[current.source] || [] + +- MODEL_COUNT = Object.keys(MODELS).map(m => Object.keys(MODELS[m]).length).reduce((a, b) => a + b) +- MODEL_LANG_COUNT = Object.keys(MODELS).length +- LANG_COUNT = Object.keys(LANGUAGES).length + +- MODEL_META = public.models._data.MODEL_META +- MODEL_LICENSES = public.models._data.MODEL_LICENSES +- MODEL_ACCURACY = public.models._data.MODEL_ACCURACY +- EXAMPLE_SENTENCES = public.models._data.EXAMPLE_SENTENCES + +- IS_PAGE = (SECTION != "index") && !landing +- IS_MODELS = (SECTION == "models" && LANGUAGES[current.source]) +- HAS_MODELS = IS_MODELS && CURRENT_MODELS.length //- Add prefixes to items of an array (for modifier CSS classes) + array - [array] list of class names or options, e.g. ["foot"] + prefix - [string] prefix to add to each class, e.g. "c-table__row" + RETURNS - [array] list of modified class names - function prefixArgs(array, prefix) { -- return array.map(function(arg) { -- return prefix + '--' + arg; -- }).join(' '); +- return array.map(arg => prefix + '--' + arg).join(' '); +- } + + +//- Convert API paths (semi-temporary fix for renamed sections) + path - [string] link path supplied to +api mixin + RETURNS - [string] new link path to correct location + +- function convertAPIPath(path) { +- if (path.startsWith('spacy#') || path.startsWith('displacy#') || path.startsWith('util#')) { +- var comps = path.split('#'); +- return "top-level#" + comps[0] + '.' + comps[1]; +- } +- else if (path.startsWith('cli#')) { +- return "top-level#" + path.split('#')[1]; +- } +- return path; +- } + + +//- Get model components from ID. Components can then be looked up in LANGUAGES + and MODEL_META respectively, to get their human-readable form. + id - [string] model ID, e.g. "en_core_web_sm" + RETURNS - [object] object keyed by components lang, type, genre and size + +- function getModelComponents(id) { +- var comps = id.split('_'); +- return {'lang': comps[0], 'type': comps[1], 'genre': comps[2], 'size': comps[3]} - } //- Generate GitHub links + repo - [string] name of repo owned by explosion + filepath - [string] logical path to file relative to repository root + branch - [string] optional branch, defaults to "master" + RETURNS - [string] the correct link to the file on GitHub - function gh(repo, filepath, branch) { - var branch = ALPHA ? 'develop' : branch -- return 'https://github.com/' + SOCIAL.github + '/' + repo + (filepath ? '/blob/' + (branch || 'master') + '/' + filepath : '' ); -- } - - -//- Get social images - -- function getSocialImg() { -- var base = SITE_URL + '/assets/img/social/preview_' -- var image = ALPHA ? 'alpha' : 'default' -- if (preview) image = preview -- else if (SECTION == 'docs' && !ALPHA) image = 'docs' -- return base + image + '.jpg' +- return 'https://github.com/' + SOCIAL.github + '/' + (repo || '') + (filepath ? '/blob/' + (branch || 'master') + '/' + filepath : '' ); - } diff --git a/website/_includes/_mixins-base.jade b/website/_includes/_mixins-base.jade index 7534a6f4e..752423d79 100644 --- a/website/_includes/_mixins-base.jade +++ b/website/_includes/_mixins-base.jade @@ -1,5 +1,13 @@ //- 💫 MIXINS > BASE +//- Section + id - [string] anchor assigned to section (used for breadcrumb navigation) + +mixin section(id) + section.o-section(id="section-" + id data-section=id) + block + + //- Aside wrapper label - [string] aside label @@ -11,34 +19,26 @@ mixin aside-wrapper(label) block -//- Date - input - [string] date in the format YYYY-MM-DD -mixin date(input) - - var date = new Date(input) - - var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ] - - time(datetime=JSON.parse(JSON.stringify(date)))&attributes(attributes)=months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear() - - -//- SVG from map - file - [string] SVG file name in /assets/img/ +//- SVG from map (uses embedded SVG sprite) name - [string] SVG symbol id width - [integer] width in px height - [integer] height in px (default: same as width) -mixin svg(file, name, width, height) +mixin svg(name, width, height) svg(aria-hidden="true" viewBox="0 0 #{width} #{height || width}" width=width height=(height || width))&attributes(attributes) - use(xlink:href="/assets/img/#{file}.svg##{name}") + use(xlink:href="#svg_#{name}") //- Icon - name - [string] icon name, should be SVG symbol ID - size - [integer] icon width and height (default: 20) + name - [string] icon name (will be used as symbol id: #svg_{name}) + width - [integer] icon width (default: 20) + height - [integer] icon height (defaults to width) -mixin icon(name, size) - - var size = size || 20 - +svg("icons", name, size).o-icon(style="min-width: #{size}px")&attributes(attributes) +mixin icon(name, width, height) + - var width = width || 20 + - var height = height || width + +svg(name, width, height).o-icon(style="min-width: #{width}px")&attributes(attributes) //- Pro/Con/Neutral icon @@ -46,8 +46,8 @@ mixin icon(name, size) size - [integer] icon size (optional) mixin procon(icon, size) - - colors = { pro: "green", con: "red", neutral: "yellow" } - +icon(icon, size)(class="u-color-#{colors[icon] || 'subtle'}" aria-label=icon)&attributes(attributes) + - colors = { pro: "green", con: "red", neutral: "subtle" } + +icon("circle", size || 16)(class="u-color-#{colors[icon] || 'subtle'}" aria-label=icon)&attributes(attributes) //- Headlines Helper Mixin @@ -80,8 +80,7 @@ mixin headline(level) mixin permalink(id) if id - a.u-permalink(id=id href="##{id}") - +icon("anchor").u-permalink__icon + a.u-permalink(href="##{id}") block else @@ -109,7 +108,7 @@ mixin quickstart(groups, headline, description, hide_results) .c-quickstart__fields for option in group.options input.c-quickstart__input(class="c-quickstart__input--" + (group.input_style ? group.input_style : group.multiple ? "check" : "radio") type=group.multiple ? "checkbox" : "radio" name=group.id id="qs-#{option.id}" value=option.id checked=option.checked) - label.c-quickstart__label(for="qs-#{option.id}")!=option.title + label.c-quickstart__label.u-text-tiny(for="qs-#{option.id}")!=option.title if option.meta | #[span.c-quickstart__label__meta (#{option.meta})] if option.help @@ -122,12 +121,10 @@ mixin quickstart(groups, headline, description, hide_results) 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) + data - [object] Rendering conditions (keyed by option group ID, value: option) + style - [string] modifier ID for line style mixin qs(data, style) - args = {} @@ -148,6 +145,13 @@ mixin terminal(label) +code.x-terminal__code block +//- Chart.js + id - [string] chart ID, will be assigned as #chart_{id} + +mixin chart(id) + figure.o-block&attributes(attributes) + canvas(id="chart_#{id}" width="800" height="400" style="max-width: 100%") + //- Gitter chat button and widget button - [string] text shown on button @@ -156,26 +160,24 @@ mixin terminal(label) mixin gitter(button, label) aside.js-gitter.c-chat.is-collapsed(data-title=(label || button)) - button.js-gitter-button.c-chat__button.u-text-small - +icon("chat").o-icon--inline + button.js-gitter-button.c-chat__button.u-text-tag + +icon("chat", 16).o-icon--inline !=button //- Badge - name - [string] "pipy" or "conda" + image - [string] path to badge image + url - [string] badge link -mixin badge(name) - - site = BADGES[name] - - if site - +a(site.link).u-padding-small - img(src=site.badge alt="{name} version" height="20") +mixin badge(image, url) + +a(url).u-padding-small.u-hide-link&attributes(attributes) + img.o-badge(src=image alt=url height="20") -//- Logo +//- spaCy logo mixin logo() - +svg("graphics", "spacy", 675, 215).o-logo&attributes(attributes) + +svg("spacy", 675, 215).o-logo&attributes(attributes) //- Landing @@ -186,18 +188,56 @@ mixin landing-header() .c-landing__content block +mixin landing-banner(headline, label) + .c-landing__banner.u-padding.o-block.u-color-light + +grid.c-landing__banner__content.o-no-block + +grid-col("third") + h3.u-heading.u-heading-1 + if label + div + span.u-text-label.u-text-label--light=label + !=headline -mixin landing-badge(url, graphic, alt, size) - +a(url)(aria-label=alt title=alt).c-landing__badge - +svg("graphics", graphic, size || 225) + +grid-col("two-thirds").c-landing__banner__text + block + + +mixin landing-logos(title, logos) + .o-content.u-text-center&attributes(attributes) + h3.u-heading.u-text-label.u-color-dark=title + + each row, i in logos + - var is_last = i == logos.length - 1 + +grid("center").o-inline-list.o-no-block(class=is_last ? "o-no-block" : null) + each details, name in row + +a(details[0]).u-padding-medium + +icon(name, details[1], details[2]) + + if is_last + block //- Under construction (temporary) Marks sections that still need to be completed for the v2.0 release. mixin under-construction() - +infobox("🚧 Under construction") + +infobox("Under construction", "🚧") | This section is still being written and will be updated for the v2.0 | release. Is there anything that you think should definitely mentioned or | explained here? Any examples you'd like to see? #[strong Let us know] | on the #[+a(gh("spacy") + "/issues/1105") v2.0 alpha thread] on GitHub! + + +//- Alpha infobox (temporary) + Added in the templates to notify user that they're visiting the alpha site. + +mixin alpha-info() + +infobox("You are viewing the spaCy v2.0.0 alpha docs", "⚠️") + strong This page is part of the alpha documentation for spaCy v2.0. + | It does not reflect the state of the latest stable release. + | Because v2.0 is still under development, the implementation + | may differ from the intended state described here. See the + | #[+a(gh("spaCy") + "/releases/tag/v2.0.0-alpha") release notes] + | for details on how to install and test the new version. To + | read the official docs for spaCy v1.x, + | #[+a("https://spacy.io/docs") go here]. diff --git a/website/_includes/_mixins.jade b/website/_includes/_mixins.jade index b140151b2..4876c6b6b 100644 --- a/website/_includes/_mixins.jade +++ b/website/_includes/_mixins.jade @@ -8,11 +8,15 @@ include _mixins-base level - [integer] headline level, corresponds to h1, h2, h3 etc. id - [string] unique identifier, creates permalink (optional) -mixin h(level, id) - +headline(level).u-heading&attributes(attributes) +mixin h(level, id, source) + +headline(level).u-heading(id=id)&attributes(attributes) +permalink(id) block + if source + +button(gh("spacy", source), false, "secondary", "small").u-nowrap.u-float-right + span Source #[+icon("code", 14).o-icon--inline] + //- External links url - [string] link href @@ -38,21 +42,23 @@ mixin src(url) //- API link (with added tag and automatically generated path) - path - [string] path to API docs page relative to /docs/api/ + path - [string] path to API docs page relative to /api/ mixin api(path) - +a("/docs/api/" + path, true)(target="_self").u-no-border.u-inline-block.u-nowrap + - path = convertAPIPath(path) + +a("/api/" + path, true)(target="_self").u-no-border.u-inline-block.u-nowrap block - | #[+icon("book", 18).o-icon--inline.u-color-theme] + | #[+icon("book", 16).o-icon--inline.u-color-theme] //- Help icon with tooltip - tooltip - [string] Tooltip text + tooltip - [string] Tooltip text + icon_size - [integer] Optional size of help icon in px. -mixin help(tooltip) +mixin help(tooltip, icon_size) span(data-tooltip=tooltip)&attributes(attributes) - +icon("help", 16).i-icon--inline + +icon("help", icon_size || 16).o-icon--inline //- Aside for text @@ -68,24 +74,43 @@ mixin aside(label) label - [string] aside title (optional or false for no label) language - [string] language for syntax highlighting (default: "python") supports basic relevant languages available for PrismJS + prompt - [string] prompt displayed before first line, e.g. "$" -mixin aside-code(label, language) +mixin aside-code(label, language, prompt) +aside-wrapper(label) - +code(false, language).o-no-block + +code(false, language, prompt).o-no-block block //- Infobox label - [string] infobox title (optional or false for no title) + emoji - [string] optional emoji displayed before the title, necessary as + argument to be able to wrap it for spacing -mixin infobox(label) +mixin infobox(label, emoji) aside.o-box.o-block.u-text-small if label - h3.u-text-label.u-color-theme=label + h3.u-heading.u-text-label.u-color-theme + if emoji + span.o-emoji=emoji + | #{label} block +//- Logos displayed in the top corner of some infoboxes + logos - [array] List of icon ID, width, height and link. + +mixin infobox-logos(...logos) + .o-box__logos.u-text-right.u-float-right + for logo in logos + if logo[3] + | #[+a(logo[3]).u-inline-block.u-hide-link.u-padding-small #[+icon(logo[0], logo[1], logo[2]).u-color-dark]] + else + | #[+icon(logo[0], logo[1], logo[2]).u-color-dark] + + + //- Link button url - [string] link href trusted - [boolean] if not set / false, rel="noopener nofollow" is added @@ -94,7 +119,7 @@ mixin infobox(label) see assets/css/_components/_buttons.sass mixin button(url, trusted, ...style) - - external = url.includes("http") + - external = url && url.includes("http") a.c-button.u-text-label(href=url class=prefixArgs(style, "c-button") role="button" target=external ? "_blank" : null rel=external && !trusted ? "noopener nofollow" : null)&attributes(attributes) block @@ -103,31 +128,33 @@ mixin button(url, trusted, ...style) label - [string] aside title (optional or false for no label) language - [string] language for syntax highlighting (default: "python") supports basic relevant languages available for PrismJS - prompt - [string] prompt or icon to display next to code block, (mostly used for old/new) + prompt - [string] prompt displayed before first line, e.g. "$" height - [integer] optional height to clip code block to + icon - [string] icon displayed next to code block (e.g. "accept" for new code) + wrap - [boolean] wrap text and disable horizontal scrolling -mixin code(label, language, prompt, height) +mixin code(label, language, prompt, height, icon, wrap) pre.c-code-block.o-block(class="lang-#{(language || DEFAULT_SYNTAX)}" class=icon ? "c-code-block--has-icon" : null style=height ? "height: #{height}px" : null)&attributes(attributes) if label h4.u-text-label.u-text-label--dark=label - - var icon = (prompt == 'accept' || prompt == 'reject') + - var icon = icon || (prompt == 'accept' || prompt == 'reject') if icon - var classes = {'accept': 'u-color-green', 'reject': 'u-color-red'} .c-code-block__icon(class=classes[icon] || null class=classes[icon] ? "c-code-block__icon--border" : null) +icon(icon, 18) - code.c-code-block__content(data-prompt=icon ? null : prompt) + code.c-code-block__content(class=wrap ? "u-wrap" : null data-prompt=icon ? null : prompt) block //- Code blocks to display old/new versions mixin code-old() - +code(false, false, "reject").o-block-small + +code(false, false, false, false, "reject").o-block-small block mixin code-new() - +code(false, false, "accept").o-block-small + +code(false, false, false, false, "accept").o-block-small block @@ -138,12 +165,33 @@ mixin code-new() mixin codepen(slug, height, default_tab) figure.o-block(style="min-height: #{height}px")&attributes(attributes) - .codepen(data-height=height data-theme-id="26467" data-slug-hash=slug data-default-tab=(default_tab || "result") data-embed-version="2" data-user=SOCIAL.codepen) + .codepen(data-height=height data-theme-id="31335" data-slug-hash=slug data-default-tab=(default_tab || "result") data-embed-version="2" data-user=SOCIAL.codepen) +a("https://codepen.io/" + SOCIAL.codepen + "/" + slug) View on CodePen script(async src="https://assets.codepen.io/assets/embed/ei.js") +//- GitHub embed + repo - [string] repository owned by explosion organization + file - [string] logical path to file, relative to repository root + alt_file - [string] alternative file path used in footer and link button + height - [integer] height of code preview in px + +mixin github(repo, file, alt_file, height) + - var branch = ALPHA ? "develop" : "master" + - var height = height || 250 + + figure.o-block + pre.c-code-block.o-block-small(class="lang-#{(language || DEFAULT_SYNTAX)}" style="height: #{height}px; min-height: #{height}px") + code.c-code-block__content(data-gh-embed="#{repo}/#{branch}/#{file}") + + footer.o-grid.u-text + .o-block-small.u-flex-full #[+icon("github")] #[code=repo + '/' + (alt_file || file)] + div + +button(gh(repo, alt_file || file), false, "primary", "small") View on GitHub + + + //- Images / figures url - [string] url or path to image width - [integer] image width in px, for better rendering (default: 500) @@ -168,10 +216,26 @@ mixin image-caption() block -//- Label +//- Graphic or illustration with button + original - [string] Path to original image + +mixin graphic(original) + +image + block + if original + .u-text-right + +button(original, false, "secondary", "small") View large graphic + + +//- Labels mixin label() - .u-text-label.u-color-subtle&attributes(attributes) + .u-text-label.u-color-dark&attributes(attributes) + block + + +mixin label-inline() + strong.u-text-label.u-color-dark&attributes(attributes) block @@ -188,8 +252,10 @@ mixin tag() mixin tag-model(...capabs) - var intro = "To use this functionality, spaCy needs a model to be installed" - var ext = capabs.length ? " that supports the following capabilities: " + capabs.join(', ') : "" - +tag Requires model - +help(intro + ext + ".").u-color-theme + + span.u-nowrap + +tag Needs model + +help(intro + ext + ".").u-color-theme //- "New" tag to label features new in a specific version @@ -219,15 +285,9 @@ mixin list(type, start) //- List item (only used within +list) -mixin item(procon) - if procon - li&attributes(attributes) - +procon(procon).c-list__icon - block - - else - li.c-list__item&attributes(attributes) - block +mixin item() + li.c-list__item&attributes(attributes) + block //- Table @@ -237,9 +297,9 @@ mixin table(head) table.c-table.o-block&attributes(attributes) if head - +row + +row("head") each column in head - th.c-table__head-cell.u-text-label=column + +head-cell=column block @@ -251,10 +311,11 @@ mixin row(...style) block -//- Footer table row (only ued within +table) -mixin footrow() - tr.c-table__row.c-table__row--foot&attributes(attributes) +//- Header table cell (only used within +row) + +mixin head-cell() + th.c-table__head-cell.u-text-label&attributes(attributes) block @@ -284,71 +345,58 @@ mixin grid-col(width) //- Card (only used within +grid) - title - [string] card title - details - [object] url, image, author, description, tags etc. - (see /docs/usage/_data.json) + title - [string] card title + url - [string] link for card + author - [string] optional author, displayed as byline at the bottom + icon - [string] optional ID of icon displayed with card + width - [string] optional width of grid column, defaults to "half" -mixin card(title, details) - +grid-col("half").o-card.u-text&attributes(attributes) - if details.image - +a(details.url).o-block-small - img(src=details.image alt=title width="300" role="presentation") - - if title - +a(details.url) - +h(3)=title - - if details.author - .u-text-small.u-color-subtle by #{details.author} - - if details.description || details.tags - ul - if details.description - li=details.description - - if details.tags - li - each tag in details.tags - span.u-text-tag #{tag} - |   - - block +mixin card(title, url, author, icon, width) + +grid-col(width || "half").o-box.o-grid.o-grid--space.u-text&attributes(attributes) + +a(url) + h4.u-heading.u-text-label + if icon + +icon(icon, 25).u-float-right + if title + span.u-color-dark=title + .o-block-small.u-text-small + block + if author + .u-color-subtle.u-text-tiny by #{author} -//- Simpler card list item (only used within +list) - title - [string] card title - details - [object] url, image, author, description, tags etc. - (see /docs/usage/_data.json) +//- Table of contents, to be used with +item mixins for links + col - [string] width of column (see +grid-col) -mixin card-item(title, details) - +item&attributes(attributes) - +a(details.url)=title - - if details.description - br - span=details.description - - if details.author - br - span.u-text-small.u-color-subtle by #{details.author} +mixin table-of-contents(col) + +grid-col(col || "half") + +infobox + +label.o-block-small Table of contents + +list("numbers").u-text-small.o-no-block + block -//- Table row for models table +//- Bibliography + id - [string] ID of bibliography component, for anchor links. Can be used if + there's more than one bibliography on one page. -mixin model-row(name, lang, procon, size, license, default_model, divider) - - var licenses = { "CC BY-SA": "https://creativecommons.org/licenses/by-sa/3.0/", "CC BY-NC": "https://creativecommons.org/licenses/by-nc/3.0/" } +mixin bibliography(id) + section(id=id || "bibliography") + +infobox + +label.o-block-small Bibliography + +list("numbers").u-text-small.o-no-block + block - +row(divider ? "divider": null) - +cell #[code=name] - if default_model - | #[span.u-color-theme(title="default model") #[+icon("star", 16)]] - +cell=lang - each icon in procon - +cell.u-text-center #[+procon(icon ? "pro" : "con")] - +cell.u-text-right=size - +cell - if license in licenses - +a(licenses[license])=license + +//- Footnote + id - [string / integer] ID of footnote. + bib_id - [string] ID of bibliography component, defaults to "bibliography". + tooltip - [string] optional text displayed as tooltip + +mixin fn(id, bib_id, tooltip) + sup.u-padding-small(id="bib" + id data-tooltip=tooltip) + span.u-text-tag + +a("#" + (bib_id || "bibliography")).u-hide-link #{id} //- Table rows for annotation specs @@ -383,14 +431,3 @@ mixin annotation-row(annots, style) else +cell=cell block - - -//- Table of contents, to be used with +item mixins for links - col - [string] width of column (see +grid-col) - -mixin table-of-contents(col) - +grid-col(col || "half") - +infobox - +label.o-block-small Table of contents - +list("numbers").u-text-small.o-no-block - block diff --git a/website/_includes/_navigation.jade b/website/_includes/_navigation.jade index f113ca3f4..c7f2c956f 100644 --- a/website/_includes/_navigation.jade +++ b/website/_includes/_navigation.jade @@ -1,19 +1,15 @@ //- 💫 INCLUDES > TOP NAVIGATION -include _mixins - nav.c-nav.u-text.js-nav(class=landing ? "c-nav--theme" : null) - a(href='/') #[+logo] - - if SUBSECTION != "index" - .u-text-label.u-padding-small.u-hidden-xs=SUBSECTION + a(href="/" aria-label=SITENAME) #[+logo] ul.c-nav__menu - - var NAV = ALPHA ? { "Usage": "/docs/usage", "Reference": "/docs/api" } : NAVIGATION - - each url, item in NAV - li.c-nav__menu__item(class=(url == "/") ? "u-hidden-xs" : null) + - var current_url = '/' + current.path[0] + each url, item in NAVIGATION + li.c-nav__menu__item(class=(current_url == url) ? "is-active" : null) +a(url)=item - li.c-nav__menu__item - +a(gh("spaCy"))(aria-label="GitHub").u-hidden-xs #[+icon("github", 20)] + li.c-nav__menu__item.u-hidden-xs + +a(gh("spaCy"))(aria-label="GitHub") #[+icon("github", 20)] + + progress.c-progress.js-progress(value="0" max="1") diff --git a/website/_includes/_newsletter.jade b/website/_includes/_newsletter.jade index 9bfe88d39..ca8333f86 100644 --- a/website/_includes/_newsletter.jade +++ b/website/_includes/_newsletter.jade @@ -1,6 +1,6 @@ //- 💫 INCLUDES > NEWSLETTER -ul.o-block +ul.o-block-small li.u-text-label.u-color-subtle Stay in the loop! li Receive updates about new releases, tutorials and more. @@ -10,7 +10,6 @@ form.o-grid#mc-embedded-subscribe-form(action="//#{MAILCHIMP.user}.list-manage.c div(style="position: absolute; left: -5000px;" aria-hidden="true") input(type="text" name="b_#{MAILCHIMP.id}_#{MAILCHIMP.list}" tabindex="-1" value="") - .o-grid-col.u-border.u-padding-small - input#mce-EMAIL.u-text(type="email" name="EMAIL" placeholder="Your email") - - button#mc-embedded-subscribe.u-text-label.u-color-theme(type="submit" name="subscribe") Sign up + .o-grid-col.o-grid.o-grid--nowrap.o-field.u-padding-small + input#mce-EMAIL.o-field__input.u-text(type="email" name="EMAIL" placeholder="Your email" aria-label="Your email") + button#mc-embedded-subscribe.o-field__button.u-text-label.u-color-theme.u-nowrap(type="submit" name="subscribe") Sign up diff --git a/website/_includes/_page-docs.jade b/website/_includes/_page-docs.jade index 7afbc6bdc..703102487 100644 --- a/website/_includes/_page-docs.jade +++ b/website/_includes/_page-docs.jade @@ -1,47 +1,56 @@ //- 💫 INCLUDES > DOCS PAGE TEMPLATE -- sidebar_content = (SUBSECTION != "index") ? public.docs[SUBSECTION]._data.sidebar : public.docs._data.sidebar || FOOTER +- sidebar_content = (public[SECTION] ? public[SECTION]._data.sidebar : public._data[SECTION] ? public._data[SECTION].sidebar : false) || FOOTER include _sidebar main.o-main.o-main--sidebar.o-main--aside article.o-content +grid.o-no-block - +grid-col(source ? "two-thirds" : "full") - +h(1)=title - if tag - +tag=tag + +h(1).u-heading--title=title.replace("'", "’") + if tag + +tag=tag + if tag_new + +tag-new(tag_new) + + if teaser + .u-heading__teaser.u-text-small.u-color-dark=teaser + else if IS_MODELS + .u-heading__teaser.u-text-small.u-color-dark + | Available statistical models for + | #[code=current.source] (#{LANGUAGES[current.source]}). if source - +grid-col("third").u-text-right - .o-inline-list - +button(gh("spacy", source), false, "secondary").u-text-tag Source #[+icon("code", 14)] + .o-block.u-text-right + +button(gh("spacy", source), false, "secondary", "small").u-nowrap + | Source #[+icon("code", 14)] + //-if ALPHA + //- +alpha-info - if ALPHA - +infobox("⚠️ You are viewing the spaCy v2.0.0 alpha docs") - strong This page is part of the alpha documentation for spaCy v2.0. - | It does not reflect the state of the latest stable release. - | Because v2.0 is still under development, the implementation - | may differ from the intended state described here. See the - | #[+a(gh("spaCy") + "/releases/tag/v2.0.0-alpha") release notes] - | for details on how to install and test the new version. To - | read the official docs for spaCy v1.x, - | #[+a("https://spacy.io/docs") go here]. - - !=yield + if IS_MODELS + include _page_models + else + !=yield +grid.o-content.u-text +grid-col("half") - if next && public.docs[SUBSECTION]._data[next] - - data = public.docs[SUBSECTION]._data[next] - + if !IS_MODELS .o-inline-list - span #[strong.u-text-label Read next:] #[+a(next).u-link=data.title] + +button(gh("spacy", "website/" + current.path.join('/') + ".jade"), false, "secondary", "small") + | #[span.o-icon Suggest edits] #[+icon("code", 14)] +grid-col("half").u-text-right - .o-inline-list - +button(gh("spacy", "website/" + current.path.join('/') + ".jade"), false, "secondary").u-text-tag Suggest edits #[+icon("code", 14)] + if next && public[SECTION]._data[next] + - data = public[SECTION]._data[next] + + +grid("vcenter") + +a(next).u-text-small.u-flex-full + h4.u-text-label.u-color-dark Read next + | #{data.title} + + +a(next).c-icon-button.c-icon-button--right(aria-hidden="true") + +icon("arrow-right", 24) +gitter("spaCy chat") diff --git a/website/_includes/_page_models.jade b/website/_includes/_page_models.jade new file mode 100644 index 000000000..6370f1b94 --- /dev/null +++ b/website/_includes/_page_models.jade @@ -0,0 +1,77 @@ +//- 💫 INCLUDES > MODELS PAGE TEMPLATE + +for id in CURRENT_MODELS + +section(id) + +grid("vcenter").o-no-block(id=id) + +grid-col("two-thirds") + +h(2) + +a("#" + id).u-permalink=id + + +grid-col("third").u-text-right + .u-color-subtle.u-text-tiny + +button(gh("spacy-models") + "/releases", true, "secondary", "small")(data-tpl=id data-tpl-key="download") + | Release details + .u-padding-small Latest: #[code(data-tpl=id data-tpl-key="version") n/a] + + +aside-code("Installation", "bash", "$"). + spacy download #{id} + + - var comps = getModelComponents(id) + + p(data-tpl=id data-tpl-key="description") + + div(data-tpl=id data-tpl-key="error" style="display: none") + +infobox + | Unable to load model details from GitHub. To find out more + | about this model, see the overview of the + | #[+a(gh("spacy-models") + "/releases") latest model releases]. + + +table(data-tpl=id data-tpl-key="table") + +row + +cell #[+label Language] + +cell #[+tag=comps.lang] #{LANGUAGES[comps.lang]} + for comp, label in {"Type": comps.type, "Genre": comps.genre} + +row + +cell #[+label=label] + +cell #[+tag=comp] #{MODEL_META[comp]} + +row + +cell #[+label Size] + +cell #[+tag=comps.size] #[span(data-tpl=id data-tpl-key="size") #[em n/a]] + + each label in ["Pipeline", "Sources", "Author", "License"] + - var field = label.toLowerCase() + +row + +cell.u-nowrap + +label=label + if MODEL_META[field] + | #[+help(MODEL_META[field]).u-color-subtle] + +cell + span(data-tpl=id data-tpl-key=field) #[em n/a] + + +row(data-tpl=id data-tpl-key="compat-wrapper" style="display: none") + +cell + +label Compat #[+help("Latest compatible model version for your spaCy installation").u-color-subtle] + +cell + .o-field.u-float-left + select.o-field__select.u-text-small(data-tpl=id data-tpl-key="compat") + .o-empty(data-tpl=id data-tpl-key="compat-versions")   + + section(data-tpl=id data-tpl-key="accuracy-wrapper" style="display: none") + +grid.o-no-block + +grid-col("third") + +h(4) Accuracy + +table.o-no-block + for label, field in MODEL_ACCURACY + +row(style="display: none") + +cell.u-nowrap + +label=label + if MODEL_META[field] + | #[+help(MODEL_META[field]).u-color-subtle] + +cell.u-text-right(data-tpl=id data-tpl-key=field) + | n/a + + +grid-col("two-thirds") + +h(4) Comparison + +chart(id).u-padding-small + + p.u-text-small.u-color-dark(data-tpl=id data-tpl-key="notes") diff --git a/website/_includes/_sidebar.jade b/website/_includes/_sidebar.jade index 241a77132..1bca2cb80 100644 --- a/website/_includes/_sidebar.jade +++ b/website/_includes/_sidebar.jade @@ -1,13 +1,23 @@ //- 💫 INCLUDES > SIDEBAR -include _mixins - menu.c-sidebar.js-sidebar.u-text if sidebar_content - each items, menu in sidebar_content - ul.c-sidebar__section.o-block - li.u-text-label.u-color-subtle=menu + each items, sectiontitle in sidebar_content + ul.c-sidebar__section.o-block-small + li.u-text-label.u-color-dark=sectiontitle each url, item in items - li(class=(CURRENT == url || (CURRENT == "index" && url == "./")) ? "is-active" : null) - +a(url)=item + - var is_current = CURRENT == url || (CURRENT == "index" && url == "./") + li.c-sidebar__item + +a(url)(class=is_current ? "is-active" : null)=item + + if is_current + if IS_MODELS && CURRENT_MODELS.length + - menu = Object.assign({}, ...CURRENT_MODELS.map(id => ({ [id]: id }))) + if menu + ul.c-sidebar__crumb.u-hidden-sm + - var counter = 0 + for id, title in menu + - counter++ + li.c-sidebar__crumb__item(data-nav=id class=(counter == 1) ? "is-active" : null) + +a("#section-" + id)=title diff --git a/website/_layout.jade b/website/_layout.jade index b198c8333..31c6ce6c3 100644 --- a/website/_layout.jade +++ b/website/_layout.jade @@ -2,11 +2,15 @@ include _includes/_mixins +- title = IS_MODELS ? LANGUAGES[current.source] || title : title +- social_img = SITE_URL + "/assets/img/social/preview_" + (preview || ALPHA ? "alpha" : "default") + ".jpg" + doctype html html(lang="en") title - if SECTION == "docs" && SUBSECTION && SUBSECTION != "index" - | #{title} | #{SITENAME} #{SUBSECTION == "api" ? "API" : "Usage"} Documentation + if SECTION == "api" || SECTION == "usage" || SECTION == "models" + - var title_section = (SECTION == "api") ? "API" : SECTION.charAt(0).toUpperCase() + SECTION.slice(1) + | #{title} | #{SITENAME} #{title_section} Documentation else if SECTION != "index" | #{title} | #{SITENAME} @@ -24,23 +28,20 @@ html(lang="en") meta(property="og:url" content="#{SITE_URL}/#{current.path.join('/')}") meta(property="og:title" content="#{title} - spaCy") meta(property="og:description" content=description) - meta(property="og:image" content=getSocialImg()) + meta(property="og:image" content=social_img) meta(name="twitter:card" content="summary_large_image") meta(name="twitter:site" content="@" + SOCIAL.twitter) meta(name="twitter:title" content="#{title} - spaCy") meta(name="twitter:description" content=description) - meta(name="twitter:image" content=getSocialImg()) + meta(name="twitter:image" content=social_img) link(rel="shortcut icon" href="/assets/img/favicon.ico") link(rel="icon" type="image/x-icon" href="/assets/img/favicon.ico") - if ALPHA && SECTION == "docs" + if SECTION == "api" link(href="/assets/css/style_green.css?v#{V_CSS}" rel="stylesheet") - else if SUBSECTION == "usage" - link(href="/assets/css/style_red.css?v#{V_CSS}" rel="stylesheet") - else link(href="/assets/css/style.css?v#{V_CSS}" rel="stylesheet") @@ -48,7 +49,7 @@ html(lang="en") include _includes/_svg include _includes/_navigation - if SECTION == "docs" + if !landing include _includes/_page-docs else