spaCy/website/_includes/_mixins.jade

397 lines
11 KiB
Plaintext

//- 💫 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-theme]
//- 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.u-nowrap
block
| #[+icon("book", 18).o-icon--inline.u-color-theme]
//- Help icon with tooltip
tooltip - [string] Tooltip text
mixin help(tooltip)
span(data-tooltip=tooltip)&attributes(attributes)
+icon("help", 16).i-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
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
icon - [string] icon to display next to code block, mostly used for old/new
height - [integer] optional height to clip code block to
mixin code(label, language, icon, height)
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
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
block
//- Code blocks to display old/new versions
mixin code-old()
+code(false, false, "reject").o-block-small
block
mixin code-new()
+code(false, false, "accept").o-block-small
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)
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
//- 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")&attributes(attributes)
block
//- "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 Requires model
+help(intro + ext + ".").u-color-theme
//- "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
+tag(data-tooltip="This feature is new and was introduced in spaCy v#{version}.")
| 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(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}
//- Table row for models table
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/" }
+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
//- 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
//- 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