mirror of https://github.com/explosion/spaCy.git
Merge branch 'spacy.io' into develop [ci skip]
This commit is contained in:
parent
aadf586789
commit
cb481aa1fe
|
@ -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 = {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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
|
|
@ -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) => {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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} › {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>
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
padding-left: 0.5rem
|
||||
position: relative
|
||||
top: 0.25rem
|
||||
left: 0.15rem
|
||||
cursor: pointer
|
||||
|
||||
/* Algolia DocSearch */
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue