Merge branch 'website/v3-launch' into develop

netlify.toml

@@ -2,9 +2,8 @@ redirects = [
     # Netlify
     {from = "https://spacy.netlify.com/*", to="https://spacy.io/:splat", force = true },
     # Subdomain for branches
-    {from = "https://nightly.spacy.io/*", to="https://nightly-spacy-io.spacy.io/:splat", force = true, status = 200},
+    {from = "https://nightly.spacy.io/*", to="https://spacy.io/:splat", force = true},
-    # TODO: update this with the v2 branch build once v3 is live (status = 200)
+    {from = "https://v2.spacy.io/*", to="https://v2-spacy-io.spacy.io/:splat", force = true, status = 200},
-    {from = "https://v2.spacy.io/*", to="https://spacy.io/:splat", force = true},
     # Old subdomains
     {from = "https://survey.spacy.io/*", to = "https://spacy.io", force = true},
     {from = "http://survey.spacy.io/*", to = "https://spacy.io", force = true},

website/docs/usage/layers-architectures.md

@@ -546,6 +546,8 @@ interactions in a sample dataset, but you can easily swap in your own dataset
 for your experiments in any other domain.
 </Project>
 
+<YouTube id="8HL-Ap5_Axo"></YouTube>
+
 #### Step 1: Implementing the Model {#component-rel-model}
 
 We need to implement a [`Model`](https://thinc.ai/docs/api-model) that takes a

website/docs/usage/training.md

@@ -193,6 +193,8 @@ available for the different architectures are documented with the
 
 </Infobox>
 
+<YouTube id="BWhh3r6W-qE"></YouTube>
+
 ### Config lifecycle at runtime and training {#config-lifecycle}
 
 A pipeline's `config.cfg` is considered the "single source of truth", both at

website/docs/usage/v3.md

@@ -67,6 +67,16 @@ improvements**. The [API docs](/api) include additional deprecation notes. New
 methods and functions that were introduced in this version are marked with the
 tag <Tag variant="new">3</Tag>.
 
+<YouTube id="9k_EfV7Cns0"></YouTube>
+
+<Grid cols={2} gutterBottom={false} narrow>
+
+<YouTube id="BWhh3r6W-qE"></YouTube>
+
+<YouTube id="8HL-Ap5_Axo"></YouTube>
+
+</Grid>
+
 ### Transformer-based pipelines {#features-transformers}
 
 > #### Example

website/gatsby-config.js

@@ -19,11 +19,11 @@ const universe = require('./meta/universe.json')
 
 const DEFAULT_TEMPLATE = path.resolve('./src/templates/index.js')
 
-const isNightly = !!+process.env.SPACY_NIGHTLY || site.nightlyBranches.includes(process.env.BRANCH)
+const domain = process.env.BRANCH || site.domain
-const favicon = isNightly ? `src/images/icon_nightly.png` : `src/images/icon.png`
+const siteUrl = `https://${domain}`
-const binderBranch = isNightly ? 'nightly' : site.binderBranch
+const isNightly = site.nightlyBranches.includes(domain)
-const siteUrl = isNightly ? site.siteUrlNightly : site.siteUrl
+const isLegacy = site.legacy || !!+process.env.SPACY_LEGACY
-const domain = isNightly ? site.domainNightly : site.domain
+const favicon = `src/images/icon${isNightly ? '_nightly' : isLegacy ? '_legacy' : ''}.png`
 const branch = isNightly ? 'develop' : 'master'
 
 // Those variables are going to be replaced in the Markdown, e.g. %%GITHUB_SPACY
@@ -53,7 +53,8 @@ module.exports = {
         counts: getCounts(models.languages),
         universe,
         nightly: isNightly,
-        binderBranch,
+        legacy: isLegacy,
+        binderBranch: domain,
         siteUrl,
     },
 

website/meta/site.json

@@ -2,11 +2,9 @@
     "title": "spaCy",
     "description": "spaCy is a free open-source library for Natural Language Processing in Python. It features NER, POS tagging, dependency parsing, word vectors and more.",
     "slogan": "Industrial-strength Natural Language Processing in Python",
-    "siteUrl": "https://spacy.io",
     "domain": "spacy.io",
-    "siteUrlNightly": "https://nightly.spacy.io",
-    "domainNightly": "nightly.spacy.io",
     "nightlyBranches": ["nightly.spacy.io"],
+    "legacy": false,
     "email": "contact@explosion.ai",
     "company": "Explosion",
     "companyUrl": "https://explosion.ai",

website/package.json

@@ -57,6 +57,7 @@
         "build": "npm run python:install && npm run python:setup && gatsby build",
         "dev": "npm run python:setup && gatsby develop",
         "dev:nightly": "BRANCH=nightly.spacy.io npm run dev",
+        "dev:legacy": "SPACY_LEGACY=1 npm run dev",
         "lint": "eslint **",
         "clear": "rm -rf .cache",
         "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",

website/src/components/embed.js

@@ -8,8 +8,8 @@ import { markdownToReact } from './util'
 
 import classes from '../styles/embed.module.sass'
 
-const YouTube = ({ id, ratio = '16x9' }) => {
+const YouTube = ({ id, ratio = '16x9', className }) => {
-    const embedClassNames = classNames(classes.root, classes.responsive, {
+    const embedClassNames = classNames(classes.root, classes.responsive, className, {
         [classes.ratio16x9]: ratio === '16x9',
         [classes.ratio4x3]: ratio === '4x3',
     })

website/src/components/landing.js

@@ -1,10 +1,12 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import pattern from '../images/pattern_blue.jpg'
+import patternDefault from '../images/pattern_blue.jpg'
 import patternNightly from '../images/pattern_nightly.jpg'
-import patternOverlay from '../images/pattern_landing.jpg'
+import patternLegacy from '../images/pattern_legacy.jpg'
-import patternOverlayNightly from '../images/pattern_landing_nightly.jpg'
+import overlayDefault from '../images/pattern_landing.jpg'
+import overlayNightly from '../images/pattern_landing_nightly.jpg'
+import overlayLegacy from '../images/pattern_landing_legacy.jpg'
 
 import Grid from './grid'
 import { Content } from './main'
@@ -14,9 +16,15 @@ import { H1, H2, H3 } from './typography'
 import Link from './link'
 import classes from '../styles/landing.module.sass'
 
-export const LandingHeader = ({ nightly, style = {}, children }) => {
+function getPattern(nightly, legacy) {
-    const overlay = nightly ? patternOverlayNightly : patternOverlay
+    if (nightly) return { pattern: patternNightly, overlay: overlayNightly }
-    const wrapperStyle = { backgroundImage: `url(${nightly ? patternNightly : pattern})` }
+    if (legacy) return { pattern: patternLegacy, overlay: overlayLegacy }
+    return { pattern: patternDefault, overlay: overlayDefault }
+}
+
+export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
+    const { pattern, overlay } = getPattern(nightly, legacy)
+    const wrapperStyle = { backgroundImage: `url(${pattern})` }
     const contentStyle = { backgroundImage: `url(${overlay})`, ...style }
     return (
         <header className={classes.header}>
@@ -109,6 +117,7 @@ export const LandingBanner = ({
     return (
         <div className={classes.banner} style={style}>
             <Grid cols={small ? null : 3} narrow className={contentClassNames}>
+                {(title || label) && (
                     <Heading Component="h3" className={classes.bannerTitle}>
                         {label && (
                             <div className={classes.bannerLabel}>
@@ -119,6 +128,7 @@ export const LandingBanner = ({
                             {title}
                         </Link>
                     </Heading>
+                )}
                 <div className={textClassNames}>
                     <p>{children}</p>
 

website/src/components/main.js

@@ -6,6 +6,7 @@ import patternBlue from '../images/pattern_blue.jpg'
 import patternGreen from '../images/pattern_green.jpg'
 import patternPurple from '../images/pattern_purple.jpg'
 import patternNightly from '../images/pattern_nightly.jpg'
+import patternLegacy from '../images/pattern_legacy.jpg'
 import classes from '../styles/main.module.sass'
 
 const patterns = {
@@ -13,6 +14,7 @@ const patterns = {
     green: patternGreen,
     purple: patternPurple,
     nightly: patternNightly,
+    legacy: patternLegacy,
 }
 
 export const Content = ({ Component = 'div', className, children }) => (

website/src/components/navigation.js

@@ -26,12 +26,18 @@ const NavigationDropdown = ({ items = [], section }) => {
     )
 }
 
-export default function Navigation({ title, items = [], section, search, children }) {
+export default function Navigation({ title, items = [], section, search, alert, children }) {
     return (
         <nav className={classes.root}>
-            <Link to="/" aria-label={title} hidden>
+            <Link
+                to="/"
+                aria-label={title}
+                hidden
+                className={classNames({ [classes.hasAlert]: !!alert })}
+            >
                 <h1 className={classes.title}>{title}</h1>
                 <Logo className={classes.logo} width={300} height={96} />
+                {alert && <span className={classes.alert}>{alert}</span>}
             </Link>
 
             <div className={classes.menu}>

website/src/components/seo.js

@@ -7,10 +7,12 @@ import socialImageDefault from '../images/social_default.jpg'
 import socialImageApi from '../images/social_api.jpg'
 import socialImageUniverse from '../images/social_universe.jpg'
 import socialImageNightly from '../images/social_nightly.jpg'
+import socialImageLegacy from '../images/social_legacy.jpg'
 
-function getPageTitle(title, sitename, slogan, sectionTitle, nightly) {
+function getPageTitle(title, sitename, slogan, sectionTitle, nightly, legacy) {
     if (sectionTitle && title) {
-        return `${title} · ${sitename} ${sectionTitle}${nightly ? ' (nightly)' : ''}`
+        const suffix = nightly ? ' (nightly)' : legacy ? ' (legacy)' : ''
+        return `${title} · ${sitename} ${sectionTitle}${suffix}`
     }
     if (title) {
         return `${title} · ${sitename}`
@@ -18,8 +20,9 @@ function getPageTitle(title, sitename, slogan, sectionTitle, nightly) {
     return `${sitename} · ${slogan}`
 }
 
-function getImage(section, nightly) {
+function getImage(section, nightly, legacy) {
     if (nightly) return socialImageNightly
+    if (legacy) return socialImageLegacy
     if (section === 'api') return socialImageApi
     if (section === 'universe') return socialImageUniverse
     return socialImageDefault
@@ -33,6 +36,7 @@ export default function SEO({
     sectionTitle,
     bodyClass,
     nightly,
+    legacy,
 }) {
     return (
         <StaticQuery
@@ -45,9 +49,10 @@ export default function SEO({
                     siteMetadata.title,
                     siteMetadata.slogan,
                     sectionTitle,
-                    nightly
+                    nightly,
+                    legacy
                 )
-                const socialImage = siteMetadata.siteUrl + getImage(section, nightly)
+                const socialImage = siteMetadata.siteUrl + getImage(section, nightly, legacy)
                 const meta = [
                     {
                         name: 'description',

website/src/components/util.js

@@ -6,8 +6,8 @@ import siteMetadata from '../../meta/site.json'
 
 const htmlToReactParser = new HtmlToReactParser()
 
-// TODO: update this
+const isNightly = siteMetadata.nightlyBranches.includes(siteMetadata.domain)
-const DEFAULT_BRANCH = 'develop'
+export const DEFAULT_BRANCH = isNightly ? 'develop' : 'master'
 export const repo = siteMetadata.repo
 export const modelsRepo = siteMetadata.modelsRepo
 export const projectsRepo = siteMetadata.projectsRepo

website/src/pages/404.js

@@ -7,11 +7,11 @@ import { LandingHeader, LandingTitle } from '../components/landing'
 import Button from '../components/button'
 
 export default ({ data, location }) => {
-    const { nightly } = data.site.siteMetadata
+    const { nightly, legacy } = data.site.siteMetadata
     const pageContext = { title: '404 Error', searchExclude: true, isIndex: false }
     return (
         <Template data={data} pageContext={pageContext} location={location}>
-            <LandingHeader style={{ minHeight: 400 }} nightly={nightly}>
+            <LandingHeader style={{ minHeight: 400 }} nightly={nightly} legacy={legacy}>
                 <LandingTitle>
                     Ooops, this page
                     <br />
@@ -31,6 +31,7 @@ export const pageQuery = graphql`
         site {
             siteMetadata {
                 nightly
+                legacy
                 title
                 description
                 navigation {

website/src/styles/layout.sass

@@ -54,6 +54,11 @@
     --color-theme-nightly-light: hsla(257, 99%, 67%, 0.06)
     --color-theme-nightly-opaque: hsla(257, 99%, 67%, 0.11)
 
+    --color-theme-legacy: #6f6f6f
+    --color-theme-legacy-dark: hsl(257, 0%, 35%)
+    --color-theme-legacy-light: hsla(257, 0%, 67%, 0.06)
+    --color-theme-legacy-opaque: hsla(257, 0%, 67%, 0.11)
+
     // Regular colors
     --color-back: hsl(0, 0%, 100%)
     --color-front: hsl(213, 15%, 12%)
@@ -118,6 +123,12 @@
     --color-theme-light: var(--color-theme-nightly-light)
     --color-theme-opaque: var(--color-theme-nightly-opaque)
 
+.theme-legacy
+    --color-theme: var(--color-theme-legacy)
+    --color-theme-dark: var(--color-theme-legacy-dark)
+    --color-theme-light: var(--color-theme-legacy-light)
+    --color-theme-opaque: var(--color-theme-legacy-opaque)
+
 
 /* Fonts */
 

website/src/styles/navigation.module.sass

@@ -83,10 +83,33 @@
         border: 2px dotted var(--color-theme)
         outline: none
 
+.has-alert
+    display: inline-flex
+    flex-flow: row nowrap
+    align-items: center
+
+.alert
+    font-size: 1.2rem
+    font-family: var(--font-primary)
+    display: inline-block
+    background: var(--color-yellow-opaque)
+    color: var(--color-dark)
+    border-radius: var(--border-radius)
+    margin-left: var(--spacing-xs)
+    padding: 0.5rem
+    line-height: var(--line-height-xs)
+    text-align: center
+
 @include breakpoint(max, xs)
     .list
         display: none
 
+    .alert
+        display: none
+
+    .has-alert
+        display: inline
+
 @include breakpoint(min, sm)
     .dropdown
         display: none

website/src/templates/docs.js

@@ -32,7 +32,7 @@ const Docs = ({ pageContext, children }) => (
                 version,
                 apiDetails,
             } = pageContext
-            const { sidebars = [], modelsRepo, languages, nightly } = site.siteMetadata
+            const { sidebars = [], modelsRepo, languages, nightly, legacy } = site.siteMetadata
             const isModels = section === 'models'
             const sidebar = pageContext.sidebar
                 ? { items: pageContext.sidebar }
@@ -74,7 +74,7 @@ const Docs = ({ pageContext, children }) => (
                     {sidebar && <Sidebar items={sidebar.items} pageMenu={pageMenu} slug={slug} />}
                     <Main
                         section={section}
-                        theme={nightly ? 'nightly' : theme}
+                        theme={nightly ? 'nightly' : legacy ? 'legacy' : theme}
                         sidebar
                         asides
                         wrapContent
@@ -138,6 +138,7 @@ const query = graphql`
                     models
                 }
                 nightly
+                legacy
                 sidebars {
                     section
                     items {

website/src/templates/index.js

@@ -82,7 +82,7 @@ const scopeComponents = {
     IntegrationLogo,
 }
 
-const AlertSpace = ({ nightly }) => {
+const AlertSpace = ({ nightly, legacy }) => {
     const isOnline = useOnlineStatus()
     return (
         <>
@@ -99,6 +99,16 @@ const AlertSpace = ({ nightly }) => {
                     , not the latest <Link to="https://spacy.io">stable version</Link>.
                 </Alert>
             )}
+            {legacy && (
+                <Alert
+                    title="You're viewing the old documentation"
+                    icon="warning"
+                    closeOnClick={false}
+                >
+                    The page reflects an older version of spaCy, not the latest{' '}
+                    <Link to="https://spacy.io">stable release</Link>.
+                </Alert>
+            )}
             {!isOnline && (
                 <Alert title="Looks like you're offline." icon="offline" variant="warning">
                     But don't worry, your visited pages should be saved for you.
@@ -108,6 +118,12 @@ const AlertSpace = ({ nightly }) => {
     )
 }
 
+const navAlert = (
+    <Link to="/usage/v3" hidden>
+        <strong>💥 Out now:</strong> spaCy v3.0
+    </Link>
+)
+
 class Layout extends React.Component {
     static defaultProps = {
         scope: {},
@@ -152,7 +168,7 @@ class Layout extends React.Component {
         const mdx = file ? file.childMdx : null
         const meta = site.siteMetadata || {}
         const { title, section, sectionTitle, teaser, theme = 'blue', searchExclude } = pageContext
-        const uiTheme = meta.nightly ? 'nightly' : theme
+        const uiTheme = meta.nightly ? 'nightly' : meta.legacy ? 'legacy' : theme
         const bodyClass = classNames(`theme-${uiTheme}`, { 'search-exclude': !!searchExclude })
         const isDocs = ['usage', 'models', 'api', 'styleguide'].includes(section)
         const content = !mdx ? null : (
@@ -171,12 +187,13 @@ class Layout extends React.Component {
                     bodyClass={bodyClass}
                     nightly={meta.nightly}
                 />
-                <AlertSpace nightly={meta.nightly} />
+                <AlertSpace nightly={meta.nightly} legacy={meta.legacy} />
                 <Navigation
                     title={meta.title}
                     items={meta.navigation}
                     section={section}
                     search={<Search settings={meta.docSearch} />}
+                    alert={meta.nightly ? null : navAlert}
                 >
                     <Progress key={location.href} />
                 </Navigation>
@@ -207,6 +224,7 @@ export const pageQuery = graphql`
         site {
             siteMetadata {
                 nightly
+                legacy
                 title
                 description
                 navigation {

website/src/templates/universe.js

@@ -302,8 +302,8 @@ const Universe = ({ pageContext, location, mdxComponents }) => (
     <StaticQuery
         query={query}
         render={data => {
-            const { universe, nightly } = data.site.siteMetadata
+            const { universe, nightly, legacy } = data.site.siteMetadata
-            const theme = nightly ? 'nightly' : pageContext.theme
+            const theme = nightly ? 'nightly' : legacy ? 'legacy' : pageContext.theme
             return (
                 <UniverseContent
                     content={universe.resources}
@@ -325,6 +325,7 @@ const query = graphql`
         site {
             siteMetadata {
                 nightly
+                legacy
                 universe {
                     resources {
                         type

website/src/widgets/landing.js

@@ -17,6 +17,7 @@ import { H2 } from '../components/typography'
 import { InlineCode } from '../components/code'
 import Button from '../components/button'
 import Link from '../components/link'
+import { YouTube } from '../components/embed'
 
 import QuickstartTraining from './quickstart-training'
 import Project from './project'
@@ -24,7 +25,6 @@ import Features from './features'
 import courseImage from '../../docs/images/course.jpg'
 import prodigyImage from '../../docs/images/prodigy_overview.jpg'
 import projectsImage from '../../docs/images/projects.png'
-import irlBackground from '../images/spacy-irl.jpg'
 
 import Benchmarks from 'usage/_benchmarks-models.md'
 
@@ -56,11 +56,11 @@ for entity in doc.ents:
 }
 
 const Landing = ({ data }) => {
-    const { nightly } = data
+    const { nightly, legacy } = data
     const codeExample = getCodeExample(nightly)
     return (
         <>
-            <LandingHeader nightly={data.nightly}>
+            <LandingHeader nightly={nightly} legacy={legacy}>
                 <LandingTitle>
                     Industrial-Strength
                     <br />
@@ -206,50 +206,29 @@ const Landing = ({ data }) => {
             </LandingGrid>
 
             <LandingBannerGrid>
-                <LandingBanner
+                <LandingBanner background="#0099dd" color="#ffffff" small>
-                    title="spaCy v3.0 nightly: Transformer-based pipelines, new training system, project templates &amp; more"
+                    <YouTube id="9k_EfV7Cns0" />
-                    label="Try the pre-release"
-                    to="https://nightly.spacy.io"
-                    button="See what's new"
-                    background="#8758fe"
-                    color="#ffffff"
-                    small
-                >
-                    spaCy v3.0 features all new <strong>transformer-based pipelines</strong> that
-                    bring spaCy's accuracy right up to the current <strong>state-of-the-art</strong>
-                    . You can use any pretrained transformer to train your own pipelines, and even
-                    share one transformer between multiple components with{' '}
-                    <strong>multi-task learning</strong>. Training is now fully configurable and
-                    extensible, and you can define your own custom models using{' '}
-                    <strong>PyTorch</strong>, <strong>TensorFlow</strong> and other frameworks. The
-                    new spaCy projects system lets you describe whole{' '}
-                    <strong>end-to-end workflows</strong> in a single file, giving you an easy path
-                    from prototype to production, and making it easy to clone and adapt
-                    best-practice projects for your own use cases.
                 </LandingBanner>
-
                 <LandingBanner
-                    title="Prodigy: Radically efficient machine teaching"
+                    to="https://course.spacy.io"
-                    label="From the makers of spaCy"
+                    button="Start the course"
-                    to="https://prodi.gy"
-                    button="Try it out"
                     background="#f6f6f6"
-                    color="#000"
+                    color="#252a33"
                     small
                 >
-                    <Link to="https://prodi.gy" hidden>
+                    <Link to="https://course.spacy.io" hidden>
                         <img
-                            src={prodigyImage}
+                            src={courseImage}
-                            alt="Prodigy: Radically efficient machine teaching"
+                            alt="Advanced NLP with spaCy: A free online course"
                         />
                     </Link>
                     <br />
                     <br />
-                    Prodigy is an <strong>annotation tool</strong> so efficient that data scientists
+                    In this <strong>free and interactive online course</strong> you’ll learn how to
-                    can do the annotation themselves, enabling a new level of rapid iteration.
+                    use spaCy to build advanced natural language understanding systems, using both
-                    Whether you're working on entity recognition, intent detection or image
+                    rule-based and machine learning approaches. It includes{' '}
-                    classification, Prodigy can help you <strong>train and evaluate</strong> your
+                    <strong>55 exercises</strong> featuring videos, slide decks, multiple-choice
-                    models faster.
+                    questions and interactive coding practice in the browser.
                 </LandingBanner>
             </LandingBannerGrid>
 
@@ -295,6 +274,7 @@ const landingQuery = graphql`
         site {
             siteMetadata {
                 nightly
+                legacy
                 repo
             }
         }

website/src/widgets/quickstart-install.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 
 import { Quickstart, QS } from '../components/quickstart'
-import { repo } from '../components/util'
+import { repo, DEFAULT_BRANCH } from '../components/util'
 
 const DEFAULT_MODELS = ['en']
 const DEFAULT_OPT = 'efficiency'
@@ -166,7 +166,7 @@ const QuickstartInstall = ({ id, title }) => {
                         </QS>
                         <QS package="source">
                             git clone https://github.com/{repo}
-                            {nightly ? ` --branch develop` : ''}
+                            {nightly ? ` --branch ${DEFAULT_BRANCH}` : ''}
                         </QS>
                         <QS package="source">cd spaCy</QS>
                         <QS package="source" os="linux">