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)
    +headline(level).u-heading&attributes(attributes)
        +permalink(id)
            block


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


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

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

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


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

mixin aside-code(label, language)
    +aside-wrapper(label)
        +code(false, language).o-no-block
            block


//- Infobox
    label - [string] infobox title (optional or false for no title)

mixin infobox(label)
    aside.o-box.o-block.u-text-small
        if label
            h3.u-text-label.u-color-theme=label

        block


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

mixin code(label, language)
    pre.c-code-block.o-block(class="lang-#{(language || DEFAULT_SYNTAX)}")&attributes(attributes)
        if label
            h4.u-text-label.u-text-label--dark=label

        code.c-code-block__content
            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="26467" 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")


//- 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)
        img(src=url alt=(alt || caption) width="#{width || 500}")

        if caption
            +image-caption=caption

        else
            block

//- Image caption

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


//- Label

mixin label()
    .u-text-label.u-color-subtle&attributes(attributes)
        block


//- Tag

mixin tag()
    span.u-text-tag.u-text-tag--spaced(aria-hidden="true")
        block


//- 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(procon)
    if procon
        li&attributes(attributes)
            +procon(procon).c-list__icon
            block

    else
        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
                each column in head
                    th.c-table__head-cell.u-text-label=column

        block


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

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


//- Footer table row (only ued within +table)

mixin footrow()
    tr.c-table__row.c-table__row--foot&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
    details   - [object] url, image, author, description, tags etc.
                (see /docs/usage/_data.json)

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


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

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}