spaCy/website/_includes/_mixins.jade

//- 💫 INCLUDES > MIXINS

include _functions
include _mixins-base


//- Headlines
    level - [integer] headline level, corresponds to h1, h2, h3 etc.
    id    - [string] unique identifier, creates permalink (optional)

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
    trusted - [boolean] if not set / false, rel="noopener nofollow" is added
              info: https://mathiasbynens.github.io/rel-noopener/

mixin a(url, trusted)
    - external = url.includes("http")
    a(href=url target=external ? "_blank" : null rel=external && !trusted ? "noopener nofollow" : null)&attributes(attributes)
        block


//- Source link (with added icon for "code")
    url - [string] link href, can also be gh() function to generate GitHub link
          see _functions.jade for more info

mixin src(url)
    span.u-inline-block.u-nowrap
        +a(url)
            block

        |   #[+icon("code", 16).o-icon--inline.u-color-theme]


//- API link (with added tag and automatically generated path)
    path - [string] path to API docs page relative to /api/

mixin api(path)
    - path = convertAPIPath(path)
    +a("/api/" + path, true)(target="_self").u-no-border.u-inline-block.u-nowrap
        block

        |  #[+icon("book", 16).o-icon--inline.u-color-theme]


//- Help icon with tooltip
    tooltip   - [string] Tooltip text
    icon_size - [integer] Optional size of help icon in px.

mixin help(tooltip, icon_size)
    span(data-tooltip=tooltip)&attributes(attributes)
        if tooltip
            span.u-hidden(aria-role="tooltip")=tooltip
        +icon("help_o", icon_size || 16).o-icon--inline


//- Aside for text
    label - [string] aside title (optional)

mixin aside(label)
    +aside-wrapper(label)
        .c-aside__text.u-text-small
            block


//- Aside for code
    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, prompt)
    +aside-wrapper(label)
        +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, emoji)
    aside.o-box.o-block.u-text-small
        if 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
               info: https://mathiasbynens.github.io/rel-noopener/
    ...style - all other arguments are added as class names c-button--argument
               see assets/css/_components/_buttons.sass

mixin button(url, trusted, ...style)
    - 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


//- Code block
    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. "$"
    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, 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 = 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(class=wrap ? "u-wrap" : null data-prompt=icon ? null : prompt)
            block


//- Wrapper for code blocks to display old/new versions

mixin code-wrapper()
    span.u-inline-block.u-padding-top.u-width-full
        block

//- Code blocks to display old/new versions
    label - [string] ARIA label for block. Defaults to "correct"/"incorrect".

mixin code-old(label)
    - var label = label || 'incorrect'
    +code(false, false, false, false, "reject").o-block-small(aria-label=label)
        block

mixin code-new(label)
    - var label = label || 'correct'
    +code(false, false, false, false, "accept").o-block-small(aria-label=label)
        block


//- CodePen embed
    slug        - [string] ID of CodePen demo (taken from URL)
    height      - [integer] height of demo embed iframe
    default_tab - [string] code tab(s) visible on load (default: "result")

mixin codepen(slug, height, default_tab)
    figure.o-block(style="min-height: #{height}px")&attributes(attributes)
        .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, height, alt_file, language)
    - 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.u-padding-small #[+icon("github")] #[code.u-break.u-break--all=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)
    caption - [string] image caption
    alt     - [string] alternative image text, defaults to caption

mixin image(url, width, caption, alt)
    figure.o-block&attributes(attributes)
        if url
            img(src=url alt=(alt || caption) width="#{width || 500}")

        if caption
            +image-caption=caption

        block


//- Image caption

mixin image-caption()
    figcaption.u-text-small.u-color-subtle.u-padding-small&attributes(attributes)
        block


//- 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-dark&attributes(attributes)
        block


mixin label-inline()
    strong.u-text-label.u-color-dark&attributes(attributes)
        block


//- Tag
    tooltip   - [string] optional tooltip text.
    hide_icon - [boolean] hide tooltip icon

mixin tag(tooltip, hide_icon)
    div.u-text-tag.u-text-tag--spaced(data-tooltip=tooltip)&attributes(attributes)
        block
        if tooltip
            if !hide_icon
                |  #[+icon("help", 12).o-icon--tag]
            |  #[span.u-hidden(aria-role="tooltip")=tooltip]


//- "Requires model" tag with tooltip and list of capabilities
    ...capabs - [string] Required model capabilities, e.g. "vectors".

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(intro + ext + ".") Needs model


//- "New" tag to label features new in a specific version
    By using a separate mixin with a version ID, it becomes easy to quickly
    enable/disable tags without having to modify the markup in the docs.
    version - [string or integer] version number, without "v" prefix

mixin tag-new(version)
    - var version = (typeof version == 'number') ? version.toFixed(1) : version
    - var tooltip = "This feature is new and was introduced in spaCy v" + version
    +tag(tooltip, true) v#{version}


//- List
    type  - [string] "numbers", "letters", "roman" (bulleted list if none set)
    start - [integer] start number

mixin list(type, start)
    if type
        ol.c-list.o-block.u-text(class="c-list--#{type}" style=(start === 0 || start) ? "counter-reset: li #{(start - 1)}" : null)&attributes(attributes)
            block

    else
        ul.c-list.c-list--bullets.o-block.u-text&attributes(attributes)
            block


//- List item (only used within +list)

mixin item()
    li.c-list__item&attributes(attributes)
        block


//- Table
    head - [array] table headings (should match number of columns)

mixin table(head)
    table.c-table.o-block&attributes(attributes)

        if head
            +row("head")
                each column in head
                    +head-cell=column

        block


//- Table row (only used within +table)

mixin row(...style)
    tr.c-table__row(class=prefixArgs(style, "c-table__row"))&attributes(attributes)
        block



//- Header table cell (only used within +row)

mixin head-cell()
    th.c-table__head-cell.u-text-label&attributes(attributes)
        block


//- Table cell (only used within +row in +table)

mixin cell()
    td.c-table__cell.u-text&attributes(attributes)
        block


//- Grid Container
    ...style - all arguments are added as class names o-grid--argument
               see assets/css/_base/_grid.sass

mixin grid(...style)
    .o-grid.o-block(class=prefixArgs(style, "o-grid"))&attributes(attributes)
        block


//- Grid Column (only used within +grid)
    width - [string] "quarter", "third", "half", "two-thirds", "three-quarters"
    see $grid in assets/css/_variables.sass

mixin grid-col(width)
    .o-grid__col(class="o-grid__col--#{width}")&attributes(attributes)
        block


//- Card (only used within +grid)
    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, 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}


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


//- Bibliography
    id - [string] ID of bibliography component, for anchor links. Can be used if
         there's more than one bibliography on one page.

mixin bibliography(id)
    section(id=id || "bibliography")
        +infobox
            +label.o-block-small Bibliography
            +list("numbers").u-text-small.o-no-block
                block


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

mixin pos-row(tag, pos, morph, desc)
    +row
        +cell #[code=tag]
        +cell #[code=pos]
        +cell
            each m in morph.split(" ")
                if m
                    |  #[code=m]
        +cell.u-text-small=desc


mixin dep-row(label, desc)
    +row
        +cell #[code=label]
        +cell=desc


//- Table rows for linguistic annotations
    annots [array] - array of cell content
    style [array] array of 1 (display as code) or 0 (display as text)

mixin annotation-row(annots, style)
    +row
        for cell, i in annots
            if style && style[i]
                - cell = (typeof(cell) != 'boolean') ? cell : cell ? 'True' : 'False'
                +cell #[code=cell]
            else
                +cell=cell
        block