diff --git a/.gitignore b/.gitignore index 5c75b8b05..0311fe842 100644 --- a/.gitignore +++ b/.gitignore @@ -73,6 +73,11 @@ htmlcov/ nosetests.xml coverage.xml +# Website +website/www/ +website/demos/displacy/ +website/demos/sense2vec/ + # Translations *.mo @@ -88,11 +93,6 @@ coverage.xml *.log *.pot -# Sphinx documentation -docs/_build/ -docs/_themes/ -setup.py - # Windows local helper files *.bat diff --git a/README.rst b/README.rst index 557e8a6aa..61967cfca 100644 --- a/README.rst +++ b/README.rst @@ -43,7 +43,3 @@ Supports * OSX * Linux * Windows (Cygwin, MinGW, Visual Studio) - -Difficult to support: - -* PyPy diff --git a/website/404.jade b/website/404.jade new file mode 100644 index 000000000..9ea96e237 --- /dev/null +++ b/website/404.jade @@ -0,0 +1,10 @@ +include _includes/_mixins + +//- 404 Error +//- ============================================================================ + ++lead.text-center Ooops, this page does not exist. Click #[a(href='javascript:history.go(-1)') here] to go back or check out one of the latest posts below. + ++divider('bottom') + +!=partial('_includes/_latest-posts', { max: 3 } ) diff --git a/website/README.md b/website/README.md index 928c9591e..12becb008 100644 --- a/website/README.md +++ b/website/README.md @@ -1,29 +1,22 @@ -Source for spacy.io -============================== +# Source files for the spacy.io website and docs -This directory contains the source for official spaCy website at http://spacy.io/. +The [spacy.io](https://spacy.io) website is implemented in [Jade (aka Pug)](https://www.jade-lang.org), and is built or served by [Harp](https://harpjs.com). -Fixes, updates and suggestions are welcome. +## Building the site +To build the site and start making changes: -Releases --------- -Changes made to this directory go live on spacy.io. + sudo npm install --global harp + git clone https://github.com/spacy-io/website + cd website + harp server +This will serve the site on [http://localhost:9000](http://localhost:9000). You can then edit the jade source and refresh the page to see your changes. -The Stack --------- -The site is built with the [Jade](http://jade-lang.com/) template language. +## Reading the source -See [fabfile.py](/fabfile.py) under ```web()``` for more +Jade is an extensible templating language with a readable syntax, that compiles to HTML. +The website source makes extensive use of Jade mixins, so that the design system is abstracted away from the content you're +writing. You can read more about our approach in our blog post, ["Rebuilding a Website with Modular Markup Components"](https://spacy.io/blog/modular-markup). - -Developing --------- -To make and test changes -``` - npm install jade --global - fab web - cd website/site; python -m SimpleHTTPServer 8000; cd - -``` -Then visit [localhost:8000](http://localhost:8000) +If you want to write or edit the pages, the site's [styleguide](http://spacy.io/styleguide) serves as a useful reference of the available mixins. diff --git a/website/_data.json b/website/_data.json new file mode 100644 index 000000000..5a7c17ff7 --- /dev/null +++ b/website/_data.json @@ -0,0 +1,51 @@ +{ + "index": { + "landing": true + }, + + "feed": { + "layout": false + }, + + "robots": { + "layout": false + }, + + "404": { + "title": "404 Error", + "asides": false + }, + + "team": { + "title": "Team" + }, + + "legal": { + "title": "Legal & Imprint", + "sidebar": true, + "asides": true + }, + + "styleguide": { + "title" : "Styleguide", + "standalone" : true, + "asides": true, + + "sidebar": { + "About": [ + ["Introduction", "#section-introduction", "introduction"] + ], + "Design": [ + ["Colors", "#section-colors", "colors"], + ["Logo", "#section-logo", "logo"], + ["Typography", "#section-typography", "typography"], + ["Grid", "#section-grid", "grid"], + ["Elements", "#section-elements", "elements"], + ["Components", "#section-components", "components"] + ], + "Code": [ + ["Source", "#section-source", "source"] + ] + } + } +} diff --git a/website/_fabfile.py b/website/_fabfile.py new file mode 100644 index 000000000..d31ea67eb --- /dev/null +++ b/website/_fabfile.py @@ -0,0 +1,94 @@ +from __future__ import print_function + +from fabric.api import local +import os +import hashlib +import mimetypes +import shutil + +import boto.s3.connection + + +mimetypes.init() + +buckets = { + 'staging': 'staging.spacy.io', + 'production': 'spacy.io', +} + + +def compile(): + shutil.rmtree('www') + local('NODE_ENV=s3 harp compile') + + +def publish(env='staging', site_path='www'): + os.environ['S3_USE_SIGV4'] = 'True' + conn = boto.s3.connection.S3Connection(host='s3.eu-central-1.amazonaws.com', + calling_format=boto.s3.connection.OrdinaryCallingFormat()) + bucket = conn.get_bucket(buckets[env], validate=False) + + keys = {k.name: k for k in bucket.list()} + keys_left = set(keys) + + for root, dirnames, filenames in os.walk(site_path): + for dirname in dirnames: + target = os.path.relpath(os.path.join(root, dirname), site_path) + source = os.path.join(target, 'index.html') + + if os.path.exists(os.path.join(root, dirname, 'index.html')): + redirect = '//%s/%s' % (bucket.name, target) + key = bucket.lookup(source) + if not key: + key = bucket.new_key(source) + key.set_redirect(redirect) + print('setting redirect for %s' % target) + elif key.get_redirect() != redirect: + key.set_redirect(redirect) + print('setting redirect for %s' % target) + + if source in keys_left: + keys_left.remove(source) + + for filename in filenames: + source = os.path.join(root, filename) + + if filename == 'index.html': + target = os.path.normpath(os.path.relpath(root, site_path)) + if target == '.': + target = filename + else: + target = os.path.normpath(os.path.join(os.path.relpath(root, site_path), filename)) + if target.endswith('.html'): + target = target[:-len('.html')] + + content_type = mimetypes.guess_type(source)[0] + cache_control = 'no-transform,public,max-age=300,s-maxage=300' + checksum = hashlib.md5(open(source).read()).hexdigest() + + if (target not in keys + or keys[target].etag.replace('"', '') != checksum): + + key = bucket.new_key(target) + if content_type: + key.content_type = content_type + key.set_contents_from_filename(source, + headers={'Cache-Control': cache_control}) + print('uploading %s' % target) + + elif content_type: + key = bucket.lookup(target) + if (key + and (key.content_type != content_type + or key.cache_control != cache_control)): + key.copy(key.bucket, key.name, preserve_acl=True, + metadata={'Content-Type': content_type, + 'Cache-Control': cache_control}) + print('update headers %s' % target) + + if target in keys_left: + keys_left.remove(target) + + for key_name in keys_left: + print('deleting %s' % key_name) + bucket.delete_key(key_name) diff --git a/website/_harp.json b/website/_harp.json new file mode 100644 index 000000000..6510f73cf --- /dev/null +++ b/website/_harp.json @@ -0,0 +1,85 @@ +{ + "globals": { + "title": "spaCy.io", + "sitename": "spaCy", + "slogan": "Industrial-strength Natural Language Processing", + "description": "spaCy is a free open-source library featuring state-of-the-art speed and accuracy and a powerful Python API.", + "url": "https://spacy.io", + "email": "contact@spacy.io", + "company": "spaCy GmbH", + "team_members": [ "henning", "matt", "wolfgang", "elmar", "ines" ], + + "navigation": { "Docs": "docs", "Demos": "demos", "Team": "team", "Blog": "blog" }, + "profiles": { "twitter": "spacy_io", "github": "spacy-io", "reddit": "spacynlp", "medium": "spacy" }, + "google_analytics": "UA-58931649-1", + + "stylesheets": { "default": "style", "blog": "style_blog" }, + "scripts" : [ "main", "prism" ], + "feed": "feed.xml", + "image_sizes" : { "small" : "640", "medium": "1440", "large": "2000" }, + "default_syntax" : "python", + + "spacy_version": "0.100.6", + "spacy_stars": "1500", + "github_settings": { "user": "spacy-io", "repo": "spacy" }, + + "apis": { + "displacy": "https://displacy.spacy.io/", + "sense2vec": "https://sense2vec.spacy.io/api/similarity/reddit/" + }, + + "authors" : { + "matt" : { + "name" : "Matthew Honnibal", + "title": "CTO", + "description" : "is co-founder and CTO of spaCy. He studied linguistics as an undergrad, and never thought he'd be a programmer. By 2009 he had a PhD in computer science, and in 2014 he left academia to write spaCy. He's from Sydney and lives in Berlin.", + "links": { + "twitter": [ "https://twitter.com/honnibal", "Twitter" ], + "website": [ "https://www.semanticscholar.org/search?q=Matthew%20Honnibal", "Semantic Scholar" ] + } + }, + + "henning": { + "name": "Henning Peters", + "title": "CEO", + "description": "is co-founder and CEO of spaCy. He holds a MSc in computer science and has been co-founder and CTO of Skoobe and Absolventa. His passions are uncommon languages and backcountry skiing.", + "links": { + "twitter": [ "https://twitter.com/henningpeters", "Twitter"], + "linkedin": [ "https://de.linkedin.com/in/hepeters", "LinkedIn"], + "github": [ "https://github.com/henningpeters", "GitHub"] + } + }, + + "ines": { + "name": "Ines Montani", + "title": "Front-End", + "description": "As Head of Front-End, Ines is in charge of showing people what spaCy can do. She develops, designs and implements our interactive demos and the spacy.io website. Ines has a degree in media, linguistics and communications, and over ten years experience in web development.", + "links": { + "twitter": [ "https://twitter.com/_inesmontani", "Twitter" ], + "codepen": [ "https://codepen.io/inesmontani", "Codepen"], + "github": [ "https://github.com/inesmontani", "GitHub"], + "website": [ "http://ines.io", "Blog" ] + } + }, + + "wolfgang": { + "name": "Wolfgang Seeker", + "title": "NLP Engineer", + "description": "is a computational linguist from Germany. He is fascinated with the complexity and variety of human language, and spent his PhD looking for ways to make NLP work well with any kind of language in the world. He joined spaCy to build effective and truly multilingual NLP software.", + "links": { + "website": [ "https://www.semanticscholar.org/search?q=Wolfgang%20Seeker", "Semantic Scholar" ] + } + }, + + "elmar": { + "name": "Elmar Haußmann", + "title": "NLP Engineer", + "description": "is an NLP engineer at spaCy, passionate about deep learning. He has a background in both, academic research, with a PhD in computer science, and industry, as a former consultant and software engineer at IBM. Originally from Stuttgart, the avid snowboarder and mountain biker doesn't only ride powder and trails but also covers distances via plane between the spaCy office in Berlin and his new home in Beijing.", + "links": { + "github": [ "https://github.com/elmar-haussmann", "GitHub"], + "twitter": [ "https://twitter.com/elhaussmann", "Twitter" ] + } + } + } + } +} diff --git a/website/_includes/_analytics.jade b/website/_includes/_analytics.jade new file mode 100644 index 000000000..ab322b800 --- /dev/null +++ b/website/_includes/_analytics.jade @@ -0,0 +1,7 @@ +if environment != 'development' + script. + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', '#{google_analytics}', 'auto'); ga('send', 'pageview'); diff --git a/website/_includes/_article.jade b/website/_includes/_article.jade new file mode 100644 index 000000000..e39bd3649 --- /dev/null +++ b/website/_includes/_article.jade @@ -0,0 +1,34 @@ +include ../_includes/_mixins + +//- Article +//- ============================================================================ + +article.article(id=current.source) + + header.article-header + +h2.article-title=title + .article-meta + if author + | by #[a.link(href=(authors[author].url || url) target='_blank')=authors[author].name] on + | #[+date(date)] + + .article-body!=yield + + footer.article-footer + + +grid('padding', 'align-right', 'valign-center') + +tweet(title) + + if links + for link, index in links + div: +button('primary', 'small', index.toLowerCase())(href=link target='_blank') + +icon(index.toLowerCase(), 'medium', 'secondary') + | Discussion on #{index} + + if author + +divider + + !=partial('_profile', { label: 'About the Author', style: 'alt' }) + +!=partial('_newsletter', { divider: 'both' }) +!=partial('_latest-posts', { max: 2, _section: _section } ) diff --git a/website/_includes/_footer.jade b/website/_includes/_footer.jade new file mode 100644 index 000000000..017cdfa86 --- /dev/null +++ b/website/_includes/_footer.jade @@ -0,0 +1,14 @@ +include _mixins + +//- Footer +//- ============================================================================ + +footer.footer + span © #{new Date().getFullYear()} #{company} + a(href='/legal') Legal / Imprint + + a(href='https://twitter.com/' + profiles.twitter target='_blank' aria-label="Twitter") + +icon('twitter', 'secondary') + + a(href='/feed.xml' target='_blank' aria-label="RSS Feed") + +icon('feed', 'secondary') diff --git a/website/_includes/_functions.jade b/website/_includes/_functions.jade new file mode 100644 index 000000000..b58eea883 --- /dev/null +++ b/website/_includes/_functions.jade @@ -0,0 +1,101 @@ +//- Functions +//- ============================================================================ + +//- Full page title + +- function getPageTitle() { +- if(current.path[0] == 'blog' && current.source != 'index') title += ' | Blog'; +- return (current.path[0] == 'index') ? sitename + ' | ' + slogan : title + ' | ' + sitename; +- } + + +//- Get current URL + current - [string] current path + +- function getCurrentUrl() { +- var base = current.path; +- if(current.source == 'index') base.pop(); +- return url + '/' + base.join('/'); +- } + + +//- Assign flexbox order, elements are assigned negative values to always move + them to the start of a flexbox in the correct order (i.e. -3, -2, -1) + counter - [integer] index of current item + max - [integer] amount of items in total + start - [integer] index of start position, i.e. 0 -> oder: -1 (optional) + +- function assignOrder(counter, max, start) { +- if(counter >= 0 && counter < max) return "order: -" + (max - counter + (start || 0)); +- } + + +//- Create Twitter share URL + current - [string] current path + tweet - [string] text to be shared with link + +- function twitterShareUrl(current, tweet) { +- return "https://twitter.com/share?text=" + tweet + "&url=" + getCurrentUrl(current) + ";via=" + profiles.twitter; +- } + + +//- Add prefix to each item in an array (used for modifier CSS classes) + array - [array] array of strings, taken from mixin arguments + prefix - [string] class prefix (i.e. 'button--') + +- function prefixArgs(array, prefix) { +- for(var i = 0; i < array.length; i++) { +- array[i] = prefix + array[i]; +- } +- return array.join(' '); +- } + + +//- Convert date to human readable and timestamp format + input - [string] date in the format YYYY-MM-DD + +- function convertDate(input) { +- var dates = []; +- var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; +- var date = new Date(input); +- dates.full = months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear(); +- dates.timestamp = JSON.parse(JSON.stringify(date)); +- return dates; +- } + + +//- Convert date to valid RSS pubDate + input - [string] date in the format YYYY-MM-DD + +- function convertPubDate(input) { +- var date = new Date(input); +- var pieces = date.toString().split(' '); +- var offsetTime = pieces[5].match(/[-+]\d{4}/); +- var offset = (offsetTime) ? offsetTime : pieces[5]; +- var parts = [ pieces[0] + ',', pieces[2], pieces[1], pieces[3], pieces[4], offset ]; +- return parts.join(' '); +- } + + +//- Compile scrset attribute for hero images + image - [object] article image object from _data.json + path - [string] relative path to image folder + +- function getScrset(image, path) { +- var scrset = path + image.file + ' ' + image_sizes.medium + 'w'; +- if(image.file_small) scrset += ', ' + path + image.file_small + ' ' + image_sizes.small + 'w'; +- if(image.file_large) scrset += ', ' + path + image.file_large + ' ' + image_sizes.large + 'w'; +- return scrset; +- } + + +//- Get meta image + +- function getMetaImage() { +- if(current.path[0] == 'blog' && image && image.file) { +- return url + '/blog/img/' + image.file; +- } +- else { +- return url + '/assets/img/social.png'; +- } +- } diff --git a/website/_includes/_head.jade b/website/_includes/_head.jade new file mode 100644 index 000000000..96c4d0154 --- /dev/null +++ b/website/_includes/_head.jade @@ -0,0 +1,31 @@ +include _mixins + +- var is_blog = (_section == 'blog') + + +//- Head +//- ============================================================================ + +head + title=getPageTitle() + + meta(charset='utf-8') + meta(name="viewport" content="width=device-width, initial-scale=1.0") + meta(name='referrer' content='always') + + meta(property='og:type' content='website') + meta(property='og:site_name' content=sitename) + meta(property='og:url' content=getCurrentUrl()) + meta(property='og:title' content=title) + meta(property='og:description' content=description) + meta(property='og:image' content=getMetaImage()) + + meta(name='twitter:card' content='summary_large_image') + meta(name='twitter:site' content='@' + profiles.twitter) + meta(name='twitter:title' content=title) + meta(name='twitter:description' content=description) + meta(name='twitter:image' content=getMetaImage()) + + link(rel='icon' type='image/x-icon' href='/assets/img/favicon.ico') + link(href='/assets/css/' + ((is_blog) ? stylesheets.blog : stylesheets.default) + '.css' rel='stylesheet') + link(href='/' + feed rel='alternate' type='application/rss+xml' title='RSS') diff --git a/website/_includes/_header.jade b/website/_includes/_header.jade new file mode 100644 index 000000000..345073c71 --- /dev/null +++ b/website/_includes/_header.jade @@ -0,0 +1,21 @@ +include _mixins + +//- Header +//- ============================================================================ + +header.header(class=(image) ? 'hero' : '') + + if image + img(srcset=getScrset(image, 'img/') alt=image.alt sizes='100vw') + + if image.credit + .hero-credit + if image.url + a(href=image.url target='_blank')=image.credit + + else + !=image.credit + + else + if !is_article && headline != false + h1.header-title=title diff --git a/website/_includes/_latest-posts.jade b/website/_includes/_latest-posts.jade new file mode 100644 index 000000000..f4289866b --- /dev/null +++ b/website/_includes/_latest-posts.jade @@ -0,0 +1,17 @@ +include _mixins + +- var post_counter = 0 +- var is_docs = (_section == 'docs') + + +//- Latest Posts +//- ============================================================================ + ++grid('padding') + each post, slug in ( (_section == 'docs' ) ? public.docs.tutorials._data : public.blog._data) + if slug != 'index' && slug != current.source && post_counter < (max || 3) + + +grid-col('space-between', ((max > 2 && max % 3 == 0) ? 'third' : 'half')) + !=partial('_teaser', { teaser: post, slug: slug, _root: (is_docs) ? '/docs/tutorials/' : '/blog/' }) + + - post_counter++ diff --git a/website/_includes/_logo.jade b/website/_includes/_logo.jade new file mode 100644 index 000000000..b5d2698af --- /dev/null +++ b/website/_includes/_logo.jade @@ -0,0 +1,5 @@ +//- Logo +//- ============================================================================ + +svg.logo(class=(logo_size) ? 'logo--' + logo_size : '' viewBox='0 0 675 215' width='500') + path(d='M83.6 83.3C68.3 81.5 67.2 61 47.5 62.8c-9.5 0-18.4 4-18.4 12.7 0 13.2 20.3 14.4 32.5 17.7 20.9 6.3 41 10.7 41 33.3 0 28.8-22.6 38.8-52.4 38.8-24.9 0-50.2-8.9-50.2-31.8 0-6.4 6.1-11.3 12-11.3 7.5 0 10.1 3.2 12.7 8.4 5.8 10.2 12.3 15.6 28.3 15.6 10.2 0 20.6-3.9 20.6-12.7 0-12.6-12.8-15.3-26.1-18.4-23.5-6.6-43.6-10-46-36.1C-1 34.5 91.7 32.9 97 71.9c.1 7.1-6.5 11.4-13.4 11.4zm110.2-39c32.5 0 51 27.2 51 60.8 0 33.7-17.9 60.8-51 60.8-18.4 0-29.8-7.8-38.1-19.8v44.5c0 13.4-4.3 19.8-14.1 19.8-11.9 0-14.1-7.6-14.1-19.8V61.3c0-10.6 4.4-17 14.1-17 9.1 0 14.1 7.2 14.1 17v3.6c9.2-11.6 19.7-20.6 38.1-20.6zm-7.7 98.4c19.1 0 27.6-17.6 27.6-38.1 0-20.1-8.6-38.1-27.6-38.1-19.8 0-29 16.3-29 38.1 0 21.2 9.2 38.1 29 38.1zM266.9 76c0-23.4 26.9-31.7 52.9-31.7 36.6 0 51.7 10.7 51.7 46v34c0 8.1 5 24.1 5 29 0 7.4-6.8 12-14.1 12-8.1 0-14.1-9.5-18.4-16.3-11.9 9.5-24.5 16.3-43.8 16.3-21.3 0-38.1-12.6-38.1-33.3 0-18.4 13.2-28.9 29-32.5 0 .1 51-12 51-12.1 0-15.7-5.5-22.6-22-22.6-14.5 0-21.9 4-27.5 12.7-4.5 6.6-4 10.6-12.7 10.6-6.9-.1-13-4.9-13-12.1zm43.6 70.2c22.3 0 31.8-11.8 31.8-35.3v-5c-6 2-30.3 8-36.8 9.1-7 1.4-14.1 6.6-14.1 14.9.1 9.1 9.4 16.3 19.1 16.3zM474.5 0c31.5 0 65.7 18.8 65.7 48.8 0 7.7-5.8 14.1-13.4 14.1-10.3 0-11.8-5.5-16.3-13.4-7.6-13.9-16.5-23.3-36.1-23.3-30.2-.2-43.7 25.6-43.7 57.8 0 32.4 11.2 55.8 42.4 55.8 20.7 0 32.2-12 38.1-27.6 2.4-7.1 6.7-14.1 15.6-14.1 7 0 14.1 7.2 14.1 14.8 0 31.8-32.4 53.8-65.8 53.8-36.5 0-57.2-15.4-68.5-41-5.5-12.2-9.1-24.9-9.1-42.4-.1-49.2 28.6-83.3 77-83.3zm180.3 44.3c8 0 12.7 5.2 12.7 13.4 0 3.3-2.6 9.9-3.6 13.4L625.1 173c-8.6 22.1-15.1 37.4-44.5 37.4-14 0-26.1-1.2-26.1-13.4 0-7 5.3-10.6 12.7-10.6 1.4 0 3.6.7 5 .7 2.1 0 3.6.7 5 .7 14.7 0 16.8-15.1 22-25.5l-37.4-92.6c-2.1-5-3.6-8.4-3.6-11.3 0-8.2 6.4-14.1 14.8-14.1 9.5 0 13.3 7.5 15.6 15.6l24.7 73.5L638 65.5c3.9-10.5 4.2-21.2 16.8-21.2z') diff --git a/website/_includes/_mixins.jade b/website/_includes/_mixins.jade new file mode 100644 index 000000000..cb1207673 --- /dev/null +++ b/website/_includes/_mixins.jade @@ -0,0 +1,381 @@ +include _functions + +//- Mixins +//- ============================================================================ + +//- Sections for content pages + id - [string] id, can be headline id as it's being prefixed (optional) + block - section content (block and inline elements) + +mixin section(id) + section.section(id=(id) ? 'section-' + id : '')&attributes(attributes) + block + + +//- Flexbox grid to align children elements + ...style - [strings] flexbox CSS classes without prefix (optional) + block - container content (block and inline elements) + +mixin grid(...style) + .grid(class=prefixArgs(style, 'grid--'))&attributes(attributes) + block + +mixin grid-col(...style) + .grid-col(class=prefixArgs(style, 'grid-col--'))&attributes(attributes) + block + + +//- Aside + headline - [string] Headline of aside (optional) + block - aside content (inline elements) + +mixin aside(headline) + span.aside(data-label=headline)&attributes(attributes) + span.aside-body + block + + +//- Paragraphs + block - paragraph content (inline elements) + +mixin lead + p.text-lead&attributes(attributes) + block + + +//- Various text styles + block - text (inline elements) + +mixin example + p.text-example&attributes(attributes) + block + +mixin source + span.text-source&attributes(attributes) + block + +mixin label(...style) + span(class=(style != '') ? prefixArgs(style, 'label-') : 'label')&attributes(attributes) + block + + +//- Headings with optional permalinks + id - [string] unique id (optional, no permalink without id) + source - [string] link for source button (optional) + block - headline text (inline elements) + +mixin headline(level, id, source) + if level == 2 + +h2(id, source) + block + + else if level == 3 + +h3(id, source) + block + + else if level == 4 + +h4(id, source) + block + + else if level == 5 + +h5(id, source) + block + + else + +h6(id, source) + block + +mixin h1(id, source) + h1(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin h2(id, source) + h2(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin h3(id, source) + h3(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin h4(id, source) + h4(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin h5(id, source) + h5(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin h6(id, source) + h6(id=id)&attributes(attributes) + +permalink(id, source) + block + +mixin permalink(id, source) + if id + a.permalink(href='#' + id) + block + + else + block + + if source + +button('secondary', 'small', 'source')(href=source target='_blank') Source + + +//- Button + element - [string] specifies HTML element, 'button' or 'link' + ...style - [strings] button CSS classes without prefix (optional) + block - button text (inline elements) + +mixin button(type, ...style) + - var classname = 'button-' + type + ' ' + ((style) ? prefixArgs(style, 'button--') : '') + + a.button(class=classname)&attributes(attributes) + block + +mixin form-button(type, ...style) + - var classname = 'button-' + type + ' ' + ((style) ? prefixArgs(style, 'button--') : '') + button(class=classname)&attributes(attributes) + block + + +//- Input + placeholder - [string] placeholder for input field (optional) + value - [string] value of input field (optional) + +mixin input(placeholder, value) + input.input(placeholder=placeholder value=value)&attributes(attributes) + + +//- Icon + name - [string] icon name, refers to CSS classes + size - [string] 'medium' or 'large' (optional) + type - [string] 'button' (optional) + block - description, if as a text node to the icon element it prevents line + breaks between icon and text (inline elements) + +mixin icon(type, ...style) + span(class='icon-' + type + ' ' + prefixArgs(style, 'icon--') aria-hidden="true")&attributes(attributes) + block + + +//- Image for illustration purposes + file - [string] file name (in /img) + alt - [string] descriptive alt text (optional) + caption - [string] image caption (optional) + +mixin image(file, alt, caption) + figure.image-container&attributes(attributes) + img(src='img/' + file alt=alt) + + if caption + figcaption.text-caption=caption + + block + + +//- Illustrated code view + title - [string] title of window + +mixin code-demo(title) + .x-terminal&attributes(attributes) + .x-terminal-icons: span + .x-terminal-title=title + +code.x-terminal-code + block + + +//- Data table + head - [array] column headings (optional, without headings no table + head is displayed) + ...style - [strings] table CSS classes without prefix (optional) + block - only +row (tr) + +mixin table(head, ...style) + table.table(class=prefixArgs(style, 'table--'))&attributes(attributes) + + if head + tr.table-row + each column in head + th.table-head-cell=column + + block + + +//- Data table row + block - only +cell (td) + +mixin row(...style) + tr.table-row(class=prefixArgs(style, 'table-cell--'))&attributes(attributes) + block + + +//- Data table cell + block - table cell content (inline elements) + +mixin cell(...style) + td.table-cell(class=prefixArgs(style, 'table-cell--'))&attributes(attributes) + block + + +//- General list (ordered and unordered) + type - [string] 'numbers', 'letters', 'roman' (optional) + start - [integer] starting point of list (1 = list starts at 1 or A) + block - only +item (li) + +mixin list(type, start) + if type + ol.list(class='list--' + type style=(start === 0 || start) ? 'counter-reset: li ' + (start - 1) : '')&attributes(attributes) + block + + else + ul.list.list--bullets&attributes(attributes) + block + + +//- List item + block - item text (inline elements) + +mixin item + li.list-item&attributes(attributes) + block + + +//- Blockquote + source - [string] quote source / author (optional) + link - [string] link to quote source (only with source, optional) + block - quote text (inline elements) + +mixin quote(source, link) + blockquote.quote&attributes(attributes) + p.quote-text + block + + if source && link + | #[a.quote-source(href=link target='_blank')=source] + + else if source && !link + .quote-source !{source} + + +//- Pullquotes with optional 'tweet this' function + tweet - [string] text to be tweeted (optional) + block - pullquote text (inline elements, only shown if no tweet text) + +mixin pullquote(tweet) + blockquote.quote&attributes(attributes) + + p.quote-text-strong + if tweet + | !{tweet} #[a.quote-source(href=twitterShareUrl(current.path, tweet) target='_blank') Tweet this] + + else + block + + +//- Code block + use as +code(args). to preserve whitespace and prevent code interprettion + language - [string] language for syntax highlighting (optional, default: + 'python', see Prism for options: http://prismjs.com) + label - [string] code block headline (optional) + block - code text (inline elements) + + +mixin code(language, label) + pre.code-block(class='lang-' + (language || default_syntax) data-label=label)&attributes(attributes) + code.code-inline + block + + +//- Infobox for notes and alerts + label - [string] infobox headline (optional) + block - infobox text (inline and block elements) + +mixin infobox(label) + .box.box--info(data-label=label)&attributes(attributes) + p.box-body + block + + +//- Alerts for notes and updates + +mixin alert(button) + .alert&attributes(attributes) + block + + if button + +form-button('primary', 'small')(onclick='this.parentNode.parentNode.removeChild(this.parentNode);')=button + + else + button.alert-close(onclick='this.parentNode.parentNode.removeChild(this.parentNode);') + + + +//- Embeds + border - [boolean] add border to embed container + caption - [string] embed caption + block - embed content (inline and block elements) + +mixin embed(border, caption) + figure.embed(class=(border) ? 'embed--border' : '')&attributes(attributes) + block + + if caption + figcaption.embed-caption=caption + + +//- displaCy + filename - [string] name of file in displacy folder (no .html) + caption - [string] caption (optional) + height - [integer] iframe height in px (optional) + +mixin displacy(filename, caption, height) + +embed(true, caption).embed--displacy + iframe(src='/blog/displacy/' + filename height=height) + + +//- Logo, imports SVG + size - [string] 'tiny', 'small', 'regular' or 'large' + +mixin logo(size) + !=partial('/_includes/_logo', { logo_size: size }) + + +//-