spaCy/website/_includes/_mixins-base.jade

//- 💫 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

mixin aside-wrapper(label)
    aside.c-aside
        .c-aside__content(role="complementary")&attributes(attributes)
            if label
                h4.u-text-label.u-text-label--dark=label

            block


//- 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(name, width, height)
    svg(aria-hidden="true" viewBox="0 0 #{width} #{height || width}" width=width height=(height || width))&attributes(attributes)
        use(xlink:href="#svg_#{name}")


//- Icon
    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, 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
    icon - [string] "pro", "con" or "neutral" (default: "neutral")
    size - [integer] icon size (optional)

mixin procon(icon, size)
    - 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
    level - [integer] 1, 2, 3, 4, or 5

mixin headline(level)
    if level == 1
        h1.u-heading-1&attributes(attributes)
            block

    else if level == 2
        h2.u-heading-2&attributes(attributes)
            block

    else if level == 3
        h3.u-heading-3&attributes(attributes)
            block

    else if level == 4
        h4.u-heading-4&attributes(attributes)
            block

    else if level == 5
        h5.u-heading-5&attributes(attributes)
            block


//- Permalink rendering
    id - [string] permalink ID used for link anchor

mixin permalink(id)
    if id
        a.u-permalink(href="##{id}")
            block

    else
        block


//- 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, description, hide_results)
    .c-quickstart.o-block-small#qs
        .c-quickstart__content
            if headline
                +h(2)=headline
            if description
                p=description
            for group in groups
                .c-quickstart__group.u-text-small(data-qs-group=group.id)
                    if group.title
                        .c-quickstart__legend=group.title
                            if group.help
                                |  #[+help(group.help)]
                    .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.u-text-tiny(for="qs-#{option.id}")!=option.title
                                if option.meta
                                    |  #[span.c-quickstart__label__meta (#{option.meta})]
                                if option.help
                                    |  #[+help(option.help)]

        if hide_results
            block
        else
            pre.c-code-block
                code.c-code-block__content.c-quickstart__code(data-qs-results="")
                    block


//- Quickstart code item
    data  - [object] Rendering conditions (keyed by option group ID, value: option)
    style - [string] modifier ID for line style

mixin qs(data, style)
    - args = {}
    for value, setting in data
        - args['data-qs-' + setting] = value
    span.c-quickstart__line(class="c-quickstart__line--#{style || 'bash'}")&attributes(args)
        block


//- Terminal-style code window
    label - [string] title displayed in top bar of terminal window

mixin terminal(label)
    .x-terminal
        .x-terminal__icons: span
        .u-padding-small.u-text-label.u-text-center=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
    label  - [string] title of chat window (default: same as button)

mixin gitter(button, label)
    aside.js-gitter.c-chat.is-collapsed(data-title=(label || button))

    button.js-gitter-button.c-chat__button.u-text-tag
        +icon("chat", 16).o-icon--inline
        !=button


//- Badge
    image - [string] path to badge image
    url   - [string] badge link

mixin badge(image, url)
    +a(url).u-padding-small.u-hide-link&attributes(attributes)
        img.o-badge(src=image alt=url height="20")


//- spaCy logo

mixin logo()
    +svg("spacy", 675, 215).o-logo&attributes(attributes)


//- Landing

mixin landing-header()
    header.c-landing
        .c-landing__wrapper
            .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

            +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", "🚧")
        |  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].