diff --git a/website/.gitignore b/website/.gitignore new file mode 100644 index 000000000..a04df6008 --- /dev/null +++ b/website/.gitignore @@ -0,0 +1,2 @@ +www +*.swp diff --git a/website/404.jade b/website/404.jade index 9ea96e237..e243a9ba6 100644 --- a/website/404.jade +++ b/website/404.jade @@ -1,10 +1,7 @@ +//- ---------------------------------- +//- 💫 404 ERROR +//- ---------------------------------- + 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 } ) +p.u-text-large.u-text-center Ooops, this page does not exist. Click #[a(href="javascript:history.go(-1)") here] to go back. diff --git a/website/README.md b/website/README.md index 12becb008..389721da0 100644 --- a/website/README.md +++ b/website/README.md @@ -1,22 +1,18 @@ + + # Source files for the spacy.io website and docs -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). +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). 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"](https://explosion.ai/blog/modular-markup). + ## Building the site -To build the site and start making changes: +```bash +sudo npm install --global harp +git clone https://github.com/explosion/spacy.io +harp server +``` - 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. - -## Reading the source - -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). - -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. +This will serve the site on [http://localhost:9000](http://localhost:9000). diff --git a/website/_data.json b/website/_data.json index 5a7c17ff7..17b29dd20 100644 --- a/website/_data.json +++ b/website/_data.json @@ -1,10 +1,29 @@ { "index": { - "landing": true - }, - - "feed": { - "layout": false + "landing": true, + "logos": [ + [ + ["chartbeat", "https://chartbeat.com"], + ["socrata", "https://www.socrata.com"], + ["chattermill", "https://chattermill.io"], + ["cytora", "http://www.cytora.com"], + ["signaln", "http://signaln.com"], + ["duedil", "https://www.duedil.com/"], + ["spyjack", "https://spyjack.io"] + ], + [ + ["keyreply", "https://keyreply.com/"], + ["dato", "https://dato.com"], + ["kip", "http://kipthis.com"], + ["wonderflow", "http://www.wonderflow.co"], + ["foxtype", "https://foxtype.com"] + ], + [ + ["synapsify", "http://www.gosynapsify.com"], + ["stitchfix", "https://www.stitchfix.com/"], + ["wayblazer", "http://wayblazer.com"] + ] + ] }, "robots": { @@ -16,19 +35,8 @@ "asides": false }, - "team": { - "title": "Team" - }, - - "legal": { - "title": "Legal & Imprint", - "sidebar": true, - "asides": true - }, - "styleguide": { "title" : "Styleguide", - "standalone" : true, "asides": true, "sidebar": { diff --git a/website/_fabfile.py b/website/_fabfile.py deleted file mode 100644 index d31ea67eb..000000000 --- a/website/_fabfile.py +++ /dev/null @@ -1,94 +0,0 @@ -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 index 6510f73cf..1ceb54023 100644 --- a/website/_harp.json +++ b/website/_harp.json @@ -1,85 +1,29 @@ { "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", + "SITENAME": "spaCy", + "SLOGAN": "Industrial-strength Natural Language Processing", + "SITE_URL": "https://spacy.io", + "EMAIL": "contact@explosion.ai", - "stylesheets": { "default": "style", "blog": "style_blog" }, - "scripts" : [ "main", "prism" ], - "feed": "feed.xml", - "image_sizes" : { "small" : "640", "medium": "1440", "large": "2000" }, - "default_syntax" : "python", + "COMPANY": "Explosion AI", + "COMPANY_URL": "https://explosion.ai", + "DEMOS_URL": "https://demos.explosion.ai", - "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/" + "SOCIAL": { + "twitter": "spacy_io", + "github": "explosion", + "reddit": "spacynlp" }, - "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" ] - } - }, + "SCRIPTS" : [ "main", "prism" ], + "DEFAULT_SYNTAX" : "python", + "ANALYTICS": "UA-58931649-1", - "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" ] - } - } - } + "SPACY_VERSION": "0.101.0", + "SPACY_STARS": "2300", + "GITHUB": { "user": "explosion", "repo": "spacy" } } } diff --git a/website/_includes/_analytics.jade b/website/_includes/_analytics.jade deleted file mode 100644 index ab322b800..000000000 --- a/website/_includes/_analytics.jade +++ /dev/null @@ -1,7 +0,0 @@ -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 deleted file mode 100644 index e39bd3649..000000000 --- a/website/_includes/_article.jade +++ /dev/null @@ -1,34 +0,0 @@ -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 index 017cdfa86..bd7688bfb 100644 --- a/website/_includes/_footer.jade +++ b/website/_includes/_footer.jade @@ -1,14 +1,17 @@ +//- ---------------------------------- +//- 💫 INCLUDES > FOOTER +//- ---------------------------------- + include _mixins -//- Footer -//- ============================================================================ +footer.o-footer.o-inline-list.u-pattern.u-text-center.u-text-label.u-text-strong + span © #{new Date().getFullYear()} #[+a(COMPANY_URL, true)=COMPANY] -footer.footer - span © #{new Date().getFullYear()} #{company} - a(href='/legal') Legal / Imprint + +a(COMPANY_URL + "/legal", true) Legal / Imprint + a(href="mailto:#{EMAIL}") #[+icon("mail", 16)] - a(href='https://twitter.com/' + profiles.twitter target='_blank' aria-label="Twitter") - +icon('twitter', 'secondary') + +a("https://twitter.com/" + SOCIAL.twitter)(aria-label="Twitter") + +icon("twitter", 20) - a(href='/feed.xml' target='_blank' aria-label="RSS Feed") - +icon('feed', 'secondary') + +a("https://github.com/" + SOCIAL.github + "/spaCy")(aria-label="GitHub") + +icon("github", 20) diff --git a/website/_includes/_functions.jade b/website/_includes/_functions.jade index b58eea883..a191b330d 100644 --- a/website/_includes/_functions.jade +++ b/website/_includes/_functions.jade @@ -1,101 +1,11 @@ -//- Functions -//- ============================================================================ +//- ---------------------------------- +//- 💫 INCLUDES > 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--') +//- Add prefixes to items of an array (for modifier CSS classes) - 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'; -- } +- return array.map(function(arg) { +- return prefix + '--' + arg; +- }).join(' '); - } diff --git a/website/_includes/_head.jade b/website/_includes/_head.jade deleted file mode 100644 index 96c4d0154..000000000 --- a/website/_includes/_head.jade +++ /dev/null @@ -1,31 +0,0 @@ -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 deleted file mode 100644 index 345073c71..000000000 --- a/website/_includes/_header.jade +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index f4289866b..000000000 --- a/website/_includes/_latest-posts.jade +++ /dev/null @@ -1,17 +0,0 @@ -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 index b5d2698af..a315e681b 100644 --- a/website/_includes/_logo.jade +++ b/website/_includes/_logo.jade @@ -1,5 +1,6 @@ -//- Logo -//- ============================================================================ +//- ---------------------------------- +//- 💫 INCLUDES > 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') +svg.o-logo(class=(logo_size) ? "o-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 index cb1207673..04faf8993 100644 --- a/website/_includes/_mixins.jade +++ b/website/_includes/_mixins.jade @@ -1,381 +1,9 @@ +//- ---------------------------------- +//- 💫 INCLUDES > MIXINS +//- ---------------------------------- + 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 }) - - -//-