explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2025-05-28 17:53:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up docs components [ci skip]

Browse Source
This commit is contained in:
Ines Montani 2020-08-06 01:22:49 +02:00
parent 30f316c688
commit 4d34efa697
31 changed files with 249 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/components/accordion.js
View File

@ -5,7 +5,7 @@ import classNames from 'classnames'
import Link from './link' import Link from './link'
import classes from '../styles/accordion.module.sass' import classes from '../styles/accordion.module.sass'
const Accordion = ({ title, id, expanded, spaced, children }) => { export default function Accordion({ title, id, expanded = false, spaced = false, children }) {
const [isExpanded, setIsExpanded] = useState(true) const [isExpanded, setIsExpanded] = useState(true)
const rootClassNames = classNames(classes.root, { const rootClassNames = classNames(classes.root, {
[classes.spaced]: !!spaced, [classes.spaced]: !!spaced,
@ -59,14 +59,8 @@ const Accordion = ({ title, id, expanded, spaced, children }) => {
) )
} }
Accordion.defaultProps = {
expanded: false,
}
Accordion.propTypes = { Accordion.propTypes = {
title: PropTypes.string, title: PropTypes.string,
id: PropTypes.string, id: PropTypes.string,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
} }
export default Accordion

8
website/src/components/alert.js
View File

@ -5,7 +5,7 @@ import classNames from 'classnames'
import Icon from './icon' import Icon from './icon'
import classes from '../styles/alert.module.sass' import classes from '../styles/alert.module.sass'
const Alert = ({ title, icon, variant, closeOnClick, children }) => { export default function Alert({ title, icon, variant, closeOnClick = true, children }) {
const [visible, setVisible] = useState(true) const [visible, setVisible] = useState(true)
const alertClassNames = classNames(classes.root, { const alertClassNames = classNames(classes.root, {
[classes.warning]: variant === 'warning', [classes.warning]: variant === 'warning',
@ -20,10 +20,6 @@ const Alert = ({ title, icon, variant, closeOnClick, children }) => {
) )
} }
Alert.defaultProps = {
closeOnClick: true,
}
Alert.propTypes = { Alert.propTypes = {
title: PropTypes.string, title: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
@ -31,5 +27,3 @@ Alert.propTypes = {
closeOnClick: PropTypes.bool, closeOnClick: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
} }
export default Alert

22
website/src/components/aside.js
View File

@ -3,20 +3,20 @@ import PropTypes from 'prop-types'
import classes from '../styles/aside.module.sass' import classes from '../styles/aside.module.sass'
const Aside = ({ title, children }) => ( export default function Aside({ title, children }) {
<aside className={classes.root}> return (
<div className={classes.content} role="complementary"> <aside className={classes.root}>
<div className={classes.text}> <div className={classes.content} role="complementary">
{title && <h4 className={classes.title}>{title}</h4>} <div className={classes.text}>
{children} {title && <h4 className={classes.title}>{title}</h4>}
{children}
</div>
</div> </div>
</div> </aside>
</aside> )
) }
Aside.propTypes = { Aside.propTypes = {
title: PropTypes.string, title: PropTypes.string,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
} }
export default Aside

17
website/src/components/button.js
View File

@ -6,7 +6,15 @@ import Link from './link'
import Icon from './icon' import Icon from './icon'
import classes from '../styles/button.module.sass' import classes from '../styles/button.module.sass'
const Button = ({ to, variant, large, icon, className, children, ...props }) => { export default function Button({
to,
variant = 'secondary',
large = false,
icon,
className,
children,
...props
}) {
const buttonClassNames = classNames(classes.root, className, { const buttonClassNames = classNames(classes.root, className, {
[classes.large]: large, [classes.large]: large,
[classes.primary]: variant === 'primary', [classes.primary]: variant === 'primary',
@ -21,11 +29,6 @@ const Button = ({ to, variant, large, icon, className, children, ...props }) =>
) )
} }
Button.defaultProps = {
variant: 'secondary',
large: false,
}
Button.propTypes = { Button.propTypes = {
to: PropTypes.string, to: PropTypes.string,
variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']), variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
@ -33,5 +36,3 @@ Button.propTypes = {
icon: PropTypes.string, icon: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
} }
export default Button

52
website/src/components/card.js
View File

@ -6,32 +6,34 @@ import Link from './link'
import { H5 } from './typography' import { H5 } from './typography'
import classes from '../styles/card.module.sass' import classes from '../styles/card.module.sass'
const Card = ({ title, to, image, header, small, onClick, children }) => ( export default function Card({ title, to, image, header, small, onClick, children }) {
<div className={classNames(classes.root, { [classes.small]: !!small })}> return (
{header && ( <div className={classNames(classes.root, { [classes.small]: !!small })}>
{header && (
<Link to={to} onClick={onClick} hidden>
{header}
</Link>
)}
{(title || image) && (
<H5 className={classes.title}>
{image && (
<div className={classes.image}>
<img src={image} width={35} alt="" />
</div>
)}
{title && (
<Link to={to} onClick={onClick} hidden>
{title}
</Link>
)}
</H5>
)}
<Link to={to} onClick={onClick} hidden> <Link to={to} onClick={onClick} hidden>
{header} {children}
</Link> </Link>
)} </div>
{(title || image) && ( )
<H5 className={classes.title}> }
{image && (
<div className={classes.image}>
<img src={image} width={35} alt="" />
</div>
)}
{title && (
<Link to={to} onClick={onClick} hidden>
{title}
</Link>
)}
</H5>
)}
<Link to={to} onClick={onClick} hidden>
{children}
</Link>
</div>
)
Card.propTypes = { Card.propTypes = {
title: PropTypes.node, title: PropTypes.node,
@ -41,5 +43,3 @@ Card.propTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
children: PropTypes.node, children: PropTypes.node,
} }
export default Card

6
website/src/components/code.js
View File

@ -21,7 +21,7 @@ export const Pre = props => {
return <pre className={classes.pre}>{props.children}</pre> return <pre className={classes.pre}>{props.children}</pre>
} }
export const InlineCode = ({ wrap, className, children, ...props }) => { export const InlineCode = ({ wrap = false, className, children, ...props }) => {
const codeClassNames = classNames(classes.inlineCode, className, { const codeClassNames = classNames(classes.inlineCode, className, {
[classes.wrap]: wrap || (isString(children) && children.length >= 20), [classes.wrap]: wrap || (isString(children) && children.length >= 20),
}) })
@ -32,10 +32,6 @@ export const InlineCode = ({ wrap, className, children, ...props }) => {
) )
} }
InlineCode.defaultProps = {
wrap: false,
}
InlineCode.propTypes = { InlineCode.propTypes = {
wrap: PropTypes.bool, wrap: PropTypes.bool,
className: PropTypes.string, className: PropTypes.string,

4
website/src/components/copy.js
View File

@ -14,7 +14,7 @@ export function copyToClipboard(ref, callback) {
} }
} }
const CopyInput = ({ text, prefix }) => { export default function CopyInput({ text, prefix }) {
const isClient = typeof window !== 'undefined' const isClient = typeof window !== 'undefined'
const supportsCopy = isClient && document.queryCommandSupported('copy') const supportsCopy = isClient && document.queryCommandSupported('copy')
const textareaRef = useRef() const textareaRef = useRef()
@ -46,5 +46,3 @@ const CopyInput = ({ text, prefix }) => {
</div> </div>
) )
} }
export default CopyInput

4
website/src/components/dropdown.js
View File

@ -5,7 +5,7 @@ import { navigate } from 'gatsby'
import classes from '../styles/dropdown.module.sass' import classes from '../styles/dropdown.module.sass'
const Dropdown = ({ defaultValue, className, onChange, children }) => { export default function Dropdown({ defaultValue, className, onChange, children }) {
const defaultOnChange = ({ target }) => navigate(target.value) const defaultOnChange = ({ target }) => navigate(target.value)
return ( return (
<select <select
@ -24,5 +24,3 @@ Dropdown.propTypes = {
onChange: PropTypes.func, onChange: PropTypes.func,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
} }
export default Dropdown

19
website/src/components/embed.js
View File

@ -8,7 +8,7 @@ import { markdownToReact } from './util'
import classes from '../styles/embed.module.sass' import classes from '../styles/embed.module.sass'
const YouTube = ({ id, ratio }) => { const YouTube = ({ id, ratio = '16x9' }) => {
const embedClassNames = classNames(classes.root, classes.responsive, { const embedClassNames = classNames(classes.root, classes.responsive, {
[classes.ratio16x9]: ratio === '16x9', [classes.ratio16x9]: ratio === '16x9',
[classes.ratio4x3]: ratio === '4x3', [classes.ratio4x3]: ratio === '4x3',
@ -28,16 +28,12 @@ const YouTube = ({ id, ratio }) => {
) )
} }
YouTube.defaultProps = {
ratio: '16x9',
}
YouTube.propTypes = { YouTube.propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
ratio: PropTypes.oneOf(['16x9', '4x3']), ratio: PropTypes.oneOf(['16x9', '4x3']),
} }
const SoundCloud = ({ id, color, title }) => { const SoundCloud = ({ id, color = '09a3d5', title }) => {
const url = `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${id}&color=%23${color}&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true` const url = `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${id}&color=%23${color}&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`
return ( return (
<figure className={classes.root}> <figure className={classes.root}>
@ -54,10 +50,6 @@ const SoundCloud = ({ id, color, title }) => {
) )
} }
SoundCloud.defaultProps = {
color: '09a3d5',
}
SoundCloud.propTypes = { SoundCloud.propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
@ -69,7 +61,7 @@ function formatHTML(html) {
return `<html><head><meta charset="UTF-8"></head><body>${encoded}</body></html>` return `<html><head><meta charset="UTF-8"></head><body>${encoded}</body></html>`
} }
const Iframe = ({ title, src, html, width, height }) => { const Iframe = ({ title, src, html, width = 800, height = 300 }) => {
const source = html ? `data:text/html,${formatHTML(html)}` : src const source = html ? `data:text/html,${formatHTML(html)}` : src
return ( return (
<iframe <iframe
@ -84,11 +76,6 @@ const Iframe = ({ title, src, html, width, height }) => {
) )
} }
Iframe.defaultProps = {
width: 800,
height: 300,
}
Iframe.propTypes = { Iframe.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
src: PropTypes.string, src: PropTypes.string,

105
website/src/components/footer.js
View File

@ -9,68 +9,69 @@ import Newsletter from './newsletter'
import { ReactComponent as ExplosionLogo } from '../images/explosion.svg' import { ReactComponent as ExplosionLogo } from '../images/explosion.svg'
import classes from '../styles/footer.module.sass' import classes from '../styles/footer.module.sass'
const Footer = ({ wide }) => ( export default function Footer({ wide = false }) {
<StaticQuery return (
query={query} <StaticQuery
render={data => { query={query}
const { companyUrl, company, footer, newsletter } = data.site.siteMetadata render={data => {
return ( const { companyUrl, company, footer, newsletter } = data.site.siteMetadata
<footer className={classes.root}> return (
<Grid cols={wide ? 4 : 3} narrow className={classes.content}> <footer className={classes.root}>
{footer.map(({ label, items }, i) => ( <Grid cols={wide ? 4 : 3} narrow className={classes.content}>
<section key={i}> {footer.map(({ label, items }, i) => (
<section key={i}>
<ul className={classes.column}>
<li className={classes.label}>{label}</li>
{items.map(({ text, url }, j) => (
<li key={j}>
<Link to={url} hidden>
{text}
</Link>
</li>
))}
</ul>
</section>
))}
<section className={wide ? null : classes.full}>
<ul className={classes.column}> <ul className={classes.column}>
<li className={classes.label}>{label}</li> <li className={classes.label}>Stay in the loop!</li>
{items.map(({ text, url }, j) => ( <li>Receive updates about new releases, tutorials and more.</li>
<li key={j}> <li>
<Link to={url} hidden> <Newsletter {...newsletter} />
{text} </li>
</Link>
</li>
))}
</ul> </ul>
</section> </section>
))} </Grid>
<section className={wide ? null : classes.full}> <div className={classNames(classes.content, classes.copy)}>
<ul className={classes.column}> <span>
<li className={classes.label}>Stay in the loop!</li> &copy; 2016-{new Date().getFullYear()}{' '}
<li>Receive updates about new releases, tutorials and more.</li> <Link to={companyUrl} hidden>
<li> {company}
<Newsletter {...newsletter} /> </Link>
</li> </span>
</ul> <Link
</section> to={companyUrl}
</Grid> aria-label={company}
<div className={classNames(classes.content, classes.copy)}> hidden
<span> className={classes.logo}
&copy; 2016-{new Date().getFullYear()}{' '} >
<Link to={companyUrl} hidden> <ExplosionLogo width={45} height={45} />
{company}
</Link> </Link>
</span> <Link to={`${companyUrl}/legal`} hidden>
<Link to={companyUrl} aria-label={company} hidden className={classes.logo}> Legal / Imprint
<ExplosionLogo width={45} height={45} /> </Link>
</Link> </div>
<Link to={`${companyUrl}/legal`} hidden> </footer>
Legal / Imprint )
</Link> }}
</div> />
</footer> )
)
}}
/>
)
Footer.defaultProps = {
wide: false,
} }
Footer.propTypes = { Footer.propTypes = {
wide: PropTypes.bool, wide: PropTypes.bool,
} }
export default Footer
const query = graphql` const query = graphql`
query FooterQuery { query FooterQuery {
site { site {

6
website/src/components/github.js
View File

@ -13,7 +13,7 @@ Please use the link below to view the example. If you've come across
a broken link, we always appreciate a pull request to the repository, a broken link, we always appreciate a pull request to the repository,
or a report on the issue tracker. Thanks!` or a report on the issue tracker. Thanks!`
const GitHubCode = ({ url, lang, errorMsg, className }) => { const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
const [code, setCode] = useState(errorMsg) const [code, setCode] = useState(errorMsg)
const codeClassNames = classNames(classes.code, classes.maxHeight, className) const codeClassNames = classNames(classes.code, classes.maxHeight, className)
@ -56,10 +56,6 @@ const GitHubCode = ({ url, lang, errorMsg, className }) => {
) )
} }
GitHubCode.defaultProps = {
errorMsg: defaultErrorMsg,
}
GitHubCode.propTypes = { GitHubCode.propTypes = {
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
lang: PropTypes.string, lang: PropTypes.string,

16
website/src/components/grid.js
View File

@ -4,7 +4,13 @@ import classNames from 'classnames'
import classes from '../styles/grid.module.sass' import classes from '../styles/grid.module.sass'
const Grid = ({ cols, narrow, gutterBottom, className, children }) => { export default function Grid({
cols = 1,
narrow = false,
gutterBottom = true,
className,
children,
}) {
const gridClassNames = classNames(classes.root, className, { const gridClassNames = classNames(classes.root, className, {
[classes.narrow]: narrow, [classes.narrow]: narrow,
[classes.spacing]: gutterBottom, [classes.spacing]: gutterBottom,
@ -15,16 +21,8 @@ const Grid = ({ cols, narrow, gutterBottom, className, children }) => {
return <div className={gridClassNames}>{children}</div> return <div className={gridClassNames}>{children}</div>
} }
Grid.defaultProps = {
cols: 1,
narrow: false,
gutterBottom: true,
}
Grid.propTypes = { Grid.propTypes = {
cols: PropTypes.oneOf([1, 2, 3, 4]), cols: PropTypes.oneOf([1, 2, 3, 4]),
narrow: PropTypes.bool, narrow: PropTypes.bool,
gutterBottom: PropTypes.bool, gutterBottom: PropTypes.bool,
} }
export default Grid

9
website/src/components/icon.js
View File

@ -51,7 +51,7 @@ const icons = {
download: DownloadIcon, download: DownloadIcon,
} }
const Icon = ({ name, width, height, inline, variant, className }) => { export default function Icon({ name, width = 20, height, inline = false, variant, className }) {
const IconComponent = icons[name] const IconComponent = icons[name]
const iconClassNames = classNames(classes.root, className, { const iconClassNames = classNames(classes.root, className, {
[classes.inline]: inline, [classes.inline]: inline,
@ -69,11 +69,6 @@ const Icon = ({ name, width, height, inline, variant, className }) => {
) )
} }
Icon.defaultProps = {
width: 20,
inline: false,
}
Icon.propTypes = { Icon.propTypes = {
name: PropTypes.oneOf(Object.keys(icons)), name: PropTypes.oneOf(Object.keys(icons)),
width: PropTypes.number, width: PropTypes.number,
@ -82,5 +77,3 @@ Icon.propTypes = {
variant: PropTypes.oneOf(['success', 'error', 'subtle']), variant: PropTypes.oneOf(['success', 'error', 'subtle']),
className: PropTypes.string, className: PropTypes.string,
} }
export default Icon

8
website/src/components/infobox.js
View File

@ -5,7 +5,7 @@ import classNames from 'classnames'
import Icon from './icon' import Icon from './icon'
import classes from '../styles/infobox.module.sass' import classes from '../styles/infobox.module.sass'
const Infobox = ({ title, emoji, id, variant, className, children }) => { export default function Infobox({ title, emoji, id, variant = 'default', className, children }) {
const infoboxClassNames = classNames(classes.root, className, { const infoboxClassNames = classNames(classes.root, className, {
[classes.warning]: variant === 'warning', [classes.warning]: variant === 'warning',
[classes.danger]: variant === 'danger', [classes.danger]: variant === 'danger',
@ -32,10 +32,6 @@ const Infobox = ({ title, emoji, id, variant, className, children }) => {
) )
} }
Infobox.defaultProps = {
variant: 'default',
}
Infobox.propTypes = { Infobox.propTypes = {
title: PropTypes.node, title: PropTypes.node,
id: PropTypes.string, id: PropTypes.string,
@ -43,5 +39,3 @@ Infobox.propTypes = {
className: PropTypes.string, className: PropTypes.string,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
} }
export default Infobox

4
website/src/components/juniper.js
View File

@ -8,7 +8,7 @@ import { OutputArea, OutputAreaModel } from '@jupyterlab/outputarea'
import { RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime' import { RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime'
import { window } from 'browser-monads' import { window } from 'browser-monads'
class Juniper extends React.Component { export default class Juniper extends React.Component {
outputRef = null outputRef = null
inputRef = null inputRef = null
state = { kernel: null, renderers: null, fromStorage: null } state = { kernel: null, renderers: null, fromStorage: null }
@ -270,5 +270,3 @@ Juniper.propTypes = {
output: PropTypes.string, output: PropTypes.string,
}), }),
} }
export default Juniper

21
website/src/components/link.js
View File

@ -15,19 +15,19 @@ const Whitespace = ({ children }) => (
<> {children} </> <> {children} </>
) )
const Link = ({ export default function Link({
children, children,
to, to,
href, href,
onClick, onClick,
activeClassName, activeClassName,
hidden, hidden = false,
hideIcon, hideIcon = false,
ws, ws = false,
forceExternal, forceExternal = false,
className, className,
...other ...other
}) => { }) {
const dest = to || href const dest = to || href
const external = forceExternal || /(http(s?)):\/\//gi.test(dest) const external = forceExternal || /(http(s?)):\/\//gi.test(dest)
const isApi = !external && !hidden && !hideIcon && /^\/?api/.test(dest) const isApi = !external && !hidden && !hideIcon && /^\/?api/.test(dest)
@ -100,13 +100,6 @@ export const OptionalLink = ({ to, href, children, ...props }) => {
) )
} }
Link.defaultProps = {
hidden: false,
hideIcon: false,
ws: false,
forceExternal: false,
}
Link.propTypes = { Link.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
to: PropTypes.string, to: PropTypes.string,
@ -118,5 +111,3 @@ Link.propTypes = {
ws: PropTypes.bool, ws: PropTypes.bool,
className: PropTypes.string, className: PropTypes.string,
} }
export default Link

18
website/src/components/main.js
View File

@ -19,7 +19,14 @@ export const Content = ({ Component = 'div', className, children }) => (
<Component className={classNames(classes.content, className)}>{children}</Component> <Component className={classNames(classes.content, className)}>{children}</Component>
) )
const Main = ({ sidebar, asides, wrapContent, theme, footer, children }) => { export default function Main({
sidebar = false,
asides = false,
wrapContent = false,
theme = 'blue',
footer,
children,
}) {
const pattern = patterns[theme] const pattern = patterns[theme]
const mainClassNames = classNames(classes.root, { const mainClassNames = classNames(classes.root, {
[classes.withSidebar]: sidebar, [classes.withSidebar]: sidebar,
@ -37,13 +44,6 @@ const Main = ({ sidebar, asides, wrapContent, theme, footer, children }) => {
) )
} }
Main.defaultProps = {
sidebar: false,
asides: false,
wrapContent: false,
theme: 'blue',
}
Main.propTypes = { Main.propTypes = {
sidebar: PropTypes.bool, sidebar: PropTypes.bool,
asides: PropTypes.bool, asides: PropTypes.bool,
@ -51,5 +51,3 @@ Main.propTypes = {
theme: PropTypes.string.isRequired, theme: PropTypes.string.isRequired,
footer: PropTypes.node, footer: PropTypes.node,
} }
export default Main

10
website/src/components/navigation.js
View File

@ -9,7 +9,7 @@ import { github } from './util'
import { ReactComponent as Logo } from '../images/logo.svg' import { ReactComponent as Logo } from '../images/logo.svg'
import classes from '../styles/navigation.module.sass' import classes from '../styles/navigation.module.sass'
const NavigationDropdown = ({ items, section }) => { const NavigationDropdown = ({ items = [], section }) => {
const active = items.find(({ text }) => text.toLowerCase() === section) const active = items.find(({ text }) => text.toLowerCase() === section)
const defaultValue = active ? active.url : 'title' const defaultValue = active ? active.url : 'title'
return ( return (
@ -26,7 +26,7 @@ const NavigationDropdown = ({ items, section }) => {
) )
} }
const Navigation = ({ title, items, section, search, children }) => { export default function Navigation({ title, items = [], section, search, children }) {
return ( return (
<nav className={classes.root}> <nav className={classes.root}>
<Link to="/" aria-label={title} hidden> <Link to="/" aria-label={title} hidden>
@ -64,10 +64,6 @@ const Navigation = ({ title, items, section, search, children }) => {
) )
} }
Navigation.defaultProps = {
items: [],
}
Navigation.propTypes = { Navigation.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
items: PropTypes.arrayOf( items: PropTypes.arrayOf(
@ -79,5 +75,3 @@ Navigation.propTypes = {
section: PropTypes.string, section: PropTypes.string,
search: PropTypes.node, search: PropTypes.node,
} }
export default Navigation

4
website/src/components/newsletter.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import classes from '../styles/newsletter.module.sass' import classes from '../styles/newsletter.module.sass'
const Newsletter = ({ user, id, list }) => { export default function Newsletter({ user, id, list }) {
const action = `//${user}.list-manage.com/subscribe/post?u=${id}&amp;id=${list}` const action = `//${user}.list-manage.com/subscribe/post?u=${id}&amp;id=${list}`
return ( return (
<form <form
@ -46,5 +46,3 @@ Newsletter.propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
list: PropTypes.string.isRequired, list: PropTypes.string.isRequired,
} }
export default Newsletter

4
website/src/components/progress.js
View File

@ -20,7 +20,7 @@ function getScrollY() {
return isNaN(pos) ? 0 : pos return isNaN(pos) ? 0 : pos
} }
const Progress = () => { export default function Progress() {
const progressRef = useRef() const progressRef = useRef()
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
const [offset, setOffset] = useState(getOffset()) const [offset, setOffset] = useState(getOffset())
@ -53,5 +53,3 @@ const Progress = () => {
const value = scrollY === 0 ? 0 : total || 0 const value = scrollY === 0 ? 0 : total || 0
return <progress ref={progressRef} className={classes.root} value={value} max="100" /> return <progress ref={progressRef} className={classes.root} value={value} max="100" />
} }
export default Progress

12
website/src/components/quickstart.js
View File

@ -25,12 +25,12 @@ function getRawContent(ref) {
} }
const Quickstart = ({ const Quickstart = ({
data, data = [],
title, title,
description, description,
copy, copy = true,
download, download,
id, id = 'quickstart',
setters = {}, setters = {},
hidePrompts, hidePrompts,
children, children,
@ -242,12 +242,6 @@ const Quickstart = ({
) )
} }
Quickstart.defaultProps = {
data: [],
id: 'quickstart',
copy: true,
}
Quickstart.propTypes = { Quickstart.propTypes = {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

26
website/src/components/readnext.js
View File

@ -7,21 +7,21 @@ import { Label } from './typography'
import classes from '../styles/readnext.module.sass' import classes from '../styles/readnext.module.sass'
const ReadNext = ({ title, to }) => ( export default function ReadNext({ title, to }) {
<div className={classes.root}> return (
<Link to={to} hidden> <div className={classes.root}>
<Label>Read next</Label> <Link to={to} hidden>
{title} <Label>Read next</Label>
</Link> {title}
<Link to={to} hidden className={classes.icon} aria-hidden="true"> </Link>
<Icon name="arrowright" /> <Link to={to} hidden className={classes.icon} aria-hidden="true">
</Link> <Icon name="arrowright" />
</div> </Link>
) </div>
)
}
ReadNext.propTypes = { ReadNext.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
to: PropTypes.string.isRequired, to: PropTypes.string.isRequired,
} }
export default ReadNext

10
website/src/components/search.js
View File

@ -5,7 +5,7 @@ import { window } from 'browser-monads'
import Icon from './icon' import Icon from './icon'
import classes from '../styles/search.module.sass' import classes from '../styles/search.module.sass'
const Search = ({ id, placeholder, settings }) => { export default function Search({ id = 'docsearch', placeholder = 'Search docs', settings = {} }) {
const { apiKey, indexName } = settings const { apiKey, indexName } = settings
if (!apiKey && !indexName) return null if (!apiKey && !indexName) return null
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
@ -36,12 +36,6 @@ const Search = ({ id, placeholder, settings }) => {
) )
} }
Search.defaultProps = {
id: 'docsearch',
placeholder: 'Search docs',
settings: {},
}
Search.propTypes = { Search.propTypes = {
settings: PropTypes.shape({ settings: PropTypes.shape({
apiKey: PropTypes.string.isRequired, apiKey: PropTypes.string.isRequired,
@ -50,5 +44,3 @@ Search.propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired, placeholder: PropTypes.string.isRequired,
} }
export default Search

4
website/src/components/section.js
View File

@ -6,7 +6,7 @@ import { window } from 'browser-monads'
import classes from '../styles/section.module.sass' import classes from '../styles/section.module.sass'
const Section = ({ id, className, ...props }) => { export default function Section({ id, className, ...props }) {
const sectionClassNames = classNames(classes.root, className) const sectionClassNames = classNames(classes.root, className)
const relId = id && id.startsWith('section-') ? id.slice(8) : id const relId = id && id.startsWith('section-') ? id.slice(8) : id
const [ref, inView] = useInView({ threshold: 0 }) const [ref, inView] = useInView({ threshold: 0 })
@ -24,6 +24,4 @@ Section.propTypes = {
className: PropTypes.string, className: PropTypes.string,
} }
export default Section
export const Hr = () => <hr className={classes.hr} /> export const Hr = () => <hr className={classes.hr} />

172
website/src/components/seo.js
View File

@ -25,89 +25,95 @@ function getImage(section, nightly) {
return socialImageDefault return socialImageDefault
} }
const SEO = ({ description, lang, title, section, sectionTitle, bodyClass, nightly }) => ( export default function SEO({
<StaticQuery description,
query={query} lang = 'en',
render={data => { title,
const siteMetadata = data.site.siteMetadata section,
const metaDescription = description || siteMetadata.description sectionTitle,
const pageTitle = getPageTitle( bodyClass,
title, nightly,
siteMetadata.title, }) {
siteMetadata.slogan, return (
sectionTitle <StaticQuery
) query={query}
const socialImage = siteMetadata.siteUrl + getImage(section, nightly) render={data => {
const meta = [ const siteMetadata = data.site.siteMetadata
{ const metaDescription = description || siteMetadata.description
name: 'description', const pageTitle = getPageTitle(
content: metaDescription, title,
}, siteMetadata.title,
{ siteMetadata.slogan,
property: 'og:title', sectionTitle
content: pageTitle, )
}, const socialImage = siteMetadata.siteUrl + getImage(section, nightly)
{ const meta = [
property: 'og:description', {
content: metaDescription, name: 'description',
}, content: metaDescription,
{ },
property: 'og:type', {
content: `website`, property: 'og:title',
}, content: pageTitle,
{ },
property: 'og:site_name', {
content: title, property: 'og:description',
}, content: metaDescription,
{ },
property: 'og:image', {
content: socialImage, property: 'og:type',
}, content: `website`,
{ },
name: 'twitter:card', {
content: 'summary_large_image', property: 'og:site_name',
}, content: title,
{ },
name: 'twitter:image', {
content: socialImage, property: 'og:image',
}, content: socialImage,
{ },
name: 'twitter:creator', {
content: `@${siteMetadata.social.twitter}`, name: 'twitter:card',
}, content: 'summary_large_image',
{ },
name: 'twitter:site', {
content: `@${siteMetadata.social.twitter}`, name: 'twitter:image',
}, content: socialImage,
{ },
name: 'twitter:title', {
content: pageTitle, name: 'twitter:creator',
}, content: `@${siteMetadata.social.twitter}`,
{ },
name: 'twitter:description', {
content: metaDescription, name: 'twitter:site',
}, content: `@${siteMetadata.social.twitter}`,
{ },
name: 'docsearch:language', {
content: lang, name: 'twitter:title',
}, content: pageTitle,
] },
{
name: 'twitter:description',
content: metaDescription,
},
{
name: 'docsearch:language',
content: lang,
},
]
return ( return (
<Helmet <Helmet
defer={false} defer={false}
htmlAttributes={{ lang }} htmlAttributes={{ lang }}
bodyAttributes={{ class: bodyClass }} bodyAttributes={{ class: bodyClass }}
title={pageTitle} title={pageTitle}
meta={meta} meta={meta}
/> />
) )
}} }}
/> />
) )
SEO.defaultProps = {
lang: 'en',
} }
SEO.propTypes = { SEO.propTypes = {
@ -120,8 +126,6 @@ SEO.propTypes = {
bodyClass: PropTypes.string, bodyClass: PropTypes.string,
} }
export default SEO
const query = graphql` const query = graphql`
query DefaultSEOQuery { query DefaultSEOQuery {
site { site {

9
website/src/components/sidebar.js
View File

@ -37,7 +37,7 @@ const DropdownNavigation = ({ items, defaultValue }) => {
) )
} }
const Sidebar = ({ items, pageMenu, slug }) => { export default function Sidebar({ items = [], pageMenu = [], slug }) {
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
const [activeSection, setActiveSection] = useState(null) const [activeSection, setActiveSection] = useState(null)
const activeRef = useRef() const activeRef = useRef()
@ -109,11 +109,6 @@ const Sidebar = ({ items, pageMenu, slug }) => {
) )
} }
Sidebar.defaultProps = {
items: [],
pageMenu: [],
}
Sidebar.propTypes = { Sidebar.propTypes = {
items: PropTypes.arrayOf( items: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
@ -140,5 +135,3 @@ Sidebar.propTypes = {
}) })
), ),
} }
export default Sidebar

8
website/src/components/tag.js
View File

@ -8,7 +8,7 @@ import classes from '../styles/tag.module.sass'
const MIN_VERSION = 3 const MIN_VERSION = 3
const Tag = ({ spaced, variant, tooltip, children }) => { export default function Tag({ spaced = false, variant, tooltip, children }) {
if (variant === 'new') { if (variant === 'new') {
const isValid = isString(children) && !isNaN(children) const isValid = isString(children) && !isNaN(children)
const version = isValid ? Number(children).toFixed(1) : children const version = isValid ? Number(children).toFixed(1) : children
@ -49,14 +49,8 @@ const TagTemplate = ({ spaced, tooltip, children }) => {
) )
} }
Tag.defaultProps = {
spaced: false,
}
Tag.propTypes = { Tag.propTypes = {
spaced: PropTypes.bool, spaced: PropTypes.bool,
tooltip: PropTypes.string, tooltip: PropTypes.string,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
} }
export default Tag

6
website/src/components/title.js
View File

@ -24,7 +24,7 @@ const MetaItem = ({ label, url, children, help }) => (
</span> </span>
) )
const Title = ({ export default function Title({
id, id,
title, title,
tag, tag,
@ -35,7 +35,7 @@ const Title = ({
apiDetails, apiDetails,
children, children,
...props ...props
}) => { }) {
const hasApiDetails = Object.values(apiDetails || {}).some(v => v) const hasApiDetails = Object.values(apiDetails || {}).some(v => v)
const metaIconProps = { className: classes.metaIcon, width: 18 } const metaIconProps = { className: classes.metaIcon, width: 18 }
return ( return (
@ -111,5 +111,3 @@ Title.propTypes = {
image: PropTypes.string, image: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
} }
export default Title

4
website/src/widgets/project.js
View File

@ -9,7 +9,7 @@ import { InlineCode } from '../components/code'
const DEFAULT_REPO = 'https://github.com/explosion/projects' const DEFAULT_REPO = 'https://github.com/explosion/projects'
const COMMAND = 'python -m spacy project clone' const COMMAND = 'python -m spacy project clone'
const Project = ({ id, repo, children }) => { export default function Project({ id, repo, children }) {
const repoArg = repo ? ` --repo ${repo}` : '' const repoArg = repo ? ` --repo ${repo}` : ''
const text = `${COMMAND} ${id}${repoArg}` const text = `${COMMAND} ${id}${repoArg}`
const url = `${repo || DEFAULT_REPO}/${id}` const url = `${repo || DEFAULT_REPO}/${id}`
@ -28,5 +28,3 @@ const Project = ({ id, repo, children }) => {
</Infobox> </Infobox>
) )
} }
export default Project

6
website/src/widgets/quickstart-models.js
View File

@ -33,7 +33,7 @@ const data = [
}, },
] ]
const QuickstartInstall = ({ id, title, description, defaultLang, children }) => ( const QuickstartInstall = ({ id, title, description, defaultLang = 'en', children }) => (
<StaticQuery <StaticQuery
query={query} query={query}
render={({ site }) => { render={({ site }) => {
@ -85,10 +85,6 @@ const QuickstartInstall = ({ id, title, description, defaultLang, children }) =>
/> />
) )
QuickstartInstall.defaultProps = {
defaultLang: 'en',
}
export default QuickstartInstall export default QuickstartInstall
const query = graphql` const query = graphql`

4
website/src/widgets/quickstart-training.js
View File

@ -55,7 +55,7 @@ const DATA = [
}, },
] ]
const QuickstartTraining = ({ id, title, download = 'config.cfg' }) => { export default function QuickstartTraining({ id, title, download = 'config.cfg' }) {
const [lang, setLang] = useState(DEFAULT_LANG) const [lang, setLang] = useState(DEFAULT_LANG)
const [pipeline, setPipeline] = useState([]) const [pipeline, setPipeline] = useState([])
const setters = { lang: setLang, components: setPipeline } const setters = { lang: setLang, components: setPipeline }
@ -124,5 +124,3 @@ const query = graphql`
} }
} }
` `
export default QuickstartTraining