spaCy/website/_includes/_mixins-base.jade

183 lines
5.3 KiB
Plaintext

//- 💫 MIXINS > BASE
//- 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
//- 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/
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)
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}")
//- Icon
name - [string] icon name, should be SVG symbol ID
size - [integer] icon width and height (default: 20)
mixin icon(name, size)
+svg("icons", name, size || 20).o-icon&attributes(attributes)
//- Pro/Con/Neutral icon
icon - [string] "pro", "con" or "neutral" (default: "neutral")
mixin procon(icon)
- colors = { pro: "green", con: "red", neutral: "yellow" }
+icon(icon)(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(id=id href="##{id}")
+icon("anchor").u-permalink__icon
block
else
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
//- 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-small
+icon("chat").o-icon--inline
!=button
//- Badge
name - [string] "pipy" or "conda"
mixin badge(name)
- site = BADGES[name]
if site
+a(site.link).u-padding-small
img(src=site.badge alt="{name} version" height="20")
//- 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)
.c-quickstart.o-block-small#qs
.c-quickstart__content
if headline
+h(2)=headline
for group in groups
.c-quickstart__group.u-text-small(data-qs-group=group.id)
.c-quickstart__legend=group.title
.c-quickstart__fields
for option in group.options
input.c-quickstart__input(class="c-quickstart__input--" + (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
if option.meta
| #[span.c-quickstart__label__meta (#{option.meta})]
if option.help
| #[+help(option.help).c-quickstart__label__meta]
pre.c-code-block
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)
mixin qs(data)
- args = {}
for value, setting in data
- args['data-qs-' + setting] = value
span.c-quickstart__line&attributes(args)
block
//- Logo
mixin logo()
+svg("graphics", "spacy", 675, 215).o-logo&attributes(attributes)
//- Landing
mixin landing-header()
header.c-landing
.c-landing__wrapper
.c-landing__content
block
mixin landing-badge(url, graphic, alt, size)
+a(url)(aria-label=alt title=alt).c-landing__badge
+svg("graphics", graphic, size || 225)