Merge branch 'spacy.io' into develop [ci skip]

This commit is contained in:
Ines Montani 2019-02-26 16:51:22 +01:00
parent aadf586789
commit cb481aa1fe
11 changed files with 477 additions and 3671 deletions

View File

@ -2,6 +2,7 @@ import { navigate } from 'gatsby'
import './src/styles/layout.sass'
import Juniper from './src/components/juniper'
import 'intersection-observer'
// Workaround to rewrite anchor links
const clientSideRewrites = {

3973
website/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -17,13 +17,13 @@
"autoprefixer": "^9.4.7",
"classnames": "^2.2.6",
"codemirror": "^5.43.0",
"gatsby": "^2.1.4",
"gatsby": "^2.1.18",
"gatsby-image": "^2.0.29",
"gatsby-mdx": "^0.3.6",
"gatsby-plugin-catch-links": "^2.0.11",
"gatsby-plugin-google-analytics": "^2.0.14",
"gatsby-plugin-manifest": "^2.0.17",
"gatsby-plugin-offline": "^2.0.23",
"gatsby-plugin-offline": "^2.0.24",
"gatsby-plugin-react-helmet": "^3.0.6",
"gatsby-plugin-react-svg": "^2.0.0",
"gatsby-plugin-sass": "^2.0.10",
@ -39,6 +39,7 @@
"gatsby-transformer-remark": "^2.2.5",
"gatsby-transformer-sharp": "^2.1.13",
"html-to-react": "^1.3.4",
"intersection-observer": "^0.5.1",
"node-sass": "^4.11.0",
"parse-numeric-range": "0.0.2",
"prismjs": "^1.15.0",
@ -58,7 +59,6 @@
},
"devDependencies": {
"browser-monads": "^1.0.0",
"gatsby-plugin-remove-trailing-slashes": "^2.0.7",
"md-attr-parser": "^1.2.1",
"prettier": "^1.16.4",
"raw-loader": "^1.0.0",

View File

@ -0,0 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { navigate } from 'gatsby'
import classes from '../styles/dropdown.module.sass'
const Dropdown = ({ defaultValue, className, onChange, children }) => {
const defaultOnChange = ({ target }) => navigate(target.value)
return (
<select
defaultValue={defaultValue}
className={classNames(classes.root, className)}
onChange={onChange || defaultOnChange}
>
{children}
</select>
)
}
Dropdown.propTypes = {
defaultValue: PropTypes.string,
className: PropTypes.string,
onChange: PropTypes.func,
children: PropTypes.node.isRequired,
}
export default Dropdown

View File

@ -1,23 +1,19 @@
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { navigate } from 'gatsby'
import Link from './link'
import Icon from './icon'
import Dropdown from './dropdown'
import { github } from './util'
import { ReactComponent as Logo } from '../images/logo.svg'
import classes from '../styles/navigation.module.sass'
const Dropdown = ({ items, section }) => {
const NavigationDropdown = ({ items, section }) => {
const active = items.find(({ text }) => text.toLowerCase() === section)
const defaultValue = active ? active.url : 'title'
return (
<select
defaultValue={defaultValue}
className={classes.dropdown}
onChange={({ target }) => navigate(target.value)}
>
<Dropdown defaultValue={defaultValue} className={classes.dropdown}>
<option value="title" disabled>
Menu
</option>
@ -26,7 +22,7 @@ const Dropdown = ({ items, section }) => {
{text}
</option>
))}
</select>
</Dropdown>
)
}
@ -39,7 +35,7 @@ const Navigation = ({ title, items, section, search, children }) => {
</Link>
<div className={classes.menu}>
<Dropdown items={items} section={section} />
<NavigationDropdown items={items} section={section} />
<ul className={classes.list}>
{items.map(({ text, url }, i) => {

View File

@ -22,7 +22,7 @@ const Search = ({ id, placeholder, settings }) => {
return (
<form className={classes.root}>
<label htmlFor={id} className={classes.icon}>
<Icon name="search" width={24} />
<Icon name="search" width={20} />
</label>
<input
id={id}

View File

@ -4,8 +4,26 @@ import classNames from 'classnames'
import { window } from 'browser-monads'
import Link from './link'
import Dropdown from './dropdown'
import classes from '../styles/sidebar.module.sass'
const DropdownNavigation = ({ items, defaultValue }) => {
return (
<div className={classes.dropdown}>
<Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}>
<option disabled>Select page...</option>
{items.map((section, i) =>
section.items.map(({ text, url }, j) => (
<option value={url} key={j}>
{section.label} &rsaquo; {text}
</option>
))
)}
</Dropdown>
</div>
)
}
const Sidebar = ({ items, pageMenu, slug }) => {
const [initialized, setInitialized] = useState(false)
const [activeSection, setActiveSection] = useState(null)
@ -27,6 +45,7 @@ const Sidebar = ({ items, pageMenu, slug }) => {
return (
<menu className={classNames('sidebar', classes.root)}>
<DropdownNavigation items={items} defaultValue={slug} />
{items.map((section, i) => (
<ul className={classes.section} key={i}>
<li className={classNames('h0', classes.label)}>{section.label}</li>

View File

@ -0,0 +1,16 @@
.root
--dropdown-text-color: var(--color-front)
font: inherit
background: transparent
border: none
appearance: none
background-color: var(--color-back)
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23929e9b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')
background-repeat: no-repeat
background-position: right 0.7em top 50%
background-size: 0.5em auto
padding: 0 1.4em 0 0.5em
&:-moz-focusring
text-shadow: 0 0 0 var(--dropdown-text-color)
color: transparent

View File

@ -58,16 +58,6 @@
flex-flow: row nowrap
margin-left: 0.5rem
.dropdown
font-family: var(--font-secondary)
font-size: 1.6rem
font-weight: bold
color: var(--color-theme)
text-transform: uppercase
background: transparent
border: 0
margin-right: 0.5rem
.is-active
color: var(--color-dark)
pointer-events: none
@ -78,6 +68,21 @@
height: 100%
padding-right: 2rem
.dropdown
--dropdown-text-color: var(--color-theme)
font-family: var(--font-secondary)
font-size: 1.6rem
font-weight: bold
color: var(--color-theme)
text-transform: uppercase
margin-right: 0.5rem
border: 2px solid var(--color-back)
border-radius: 2em
&:focus
border: 2px dotted var(--color-theme)
outline: none
@include breakpoint(max, xs)
.list
display: none

View File

@ -24,6 +24,7 @@
padding-left: 0.5rem
position: relative
top: 0.25rem
left: 0.15rem
cursor: pointer
/* Algolia DocSearch */

View File

@ -7,27 +7,14 @@ $crumb-bar: 2px
overflow-y: auto
font: var(--font-size-md)/var(--line-height-md) var(--font-primary)
@include breakpoint(min, md)
.root
@include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
position: fixed
top: 0
left: 0
width: var(--width-sidebar)
height: calc(100vh - 3px)
flex: 0 0 var(--width-sidebar)
padding-top: calc(var(--height-nav) + 1.5rem)
z-index: 10
padding-bottom: 5rem
.dropdown
padding: 1rem 0
border-bottom: 1px solid var(--color-subtle)
width: 100%
@include breakpoint(max, sm)
.root
flex: 100%
width: 100%
margin-top: var(--height-nav)
display: flex
flex-flow: row wrap
width: 100%
.dropdown-select
width: 100%
padding-left: 1rem
.section
margin-bottom: var(--spacing-sm)
@ -35,16 +22,6 @@ $crumb-bar: 2px
& > *
padding: 0 2rem 0.35rem
@include breakpoint(max, sm)
.section
flex: 1 1 0
padding: 1.25rem 0
border-bottom: 1px solid var(--color-subtle)
margin: 0
&:not(:last-child)
border-right: 1px solid var(--color-subtle)
.label
color: var(--color-dark)
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
@ -113,6 +90,28 @@ $crumb-bar: 2px
&:after
background: var(--color-dark)
@include breakpoint(max, sm)
.crumbs
@include breakpoint(min, md)
.root
@include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
position: fixed
top: 0
left: 0
width: var(--width-sidebar)
height: calc(100vh - 3px)
flex: 0 0 var(--width-sidebar)
padding-top: calc(var(--height-nav) + 1.5rem)
z-index: 10
padding-bottom: 5rem
.dropdown
display: none
@include breakpoint(max, sm)
.root
flex: 100%
width: 100%
margin-top: var(--height-nav)
display: block
.section
display: none