Merge branch 'website/v3-launch' into develop

sunilXY · Jan 30, 2021 · ae07416 · ae07416
2 parents d076838 + 5e24fbb
commit ae07416
Showing 22 changed files with 167 additions and 96 deletions.
diff --git a/netlify.toml b/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},
-    # TODO: update this with the v2 branch build once v3 is live (status = 200)
-    {from = "https://v2.spacy.io/*", to="https://spacy.io/:splat", force = true},
+    {from = "https://nightly.spacy.io/*", to="https://spacy.io/:splat", force = true},
+    {from = "https://v2.spacy.io/*", to="https://v2-spacy-io.spacy.io/:splat", force = true, status = 200},
     # Old subdomains
     {from = "https://survey.spacy.io/*", to = "https://spacy.io", force = true},
     {from = "http://survey.spacy.io/*", to = "https://spacy.io", force = true},

diff --git a/website/docs/usage/layers-architectures.md b/website/docs/usage/layers-architectures.md
@@ -537,15 +537,17 @@ two major steps required:
    pass through the `nlp` pipeline.
 
 <Project id="tutorials/rel_component">
-Run this example use-case by using our project template. It includes all the 
+Run this example use-case by using our project template. It includes all the
 code to create the ML model and the pipeline component from scratch.
-It also contains two config files to train the model: 
+It also contains two config files to train the model:
 one to run on CPU with a Tok2Vec layer, and one for the GPU using a transformer.
-The project applies the relation extraction component to identify biomolecular 
-interactions in a sample dataset, but you can easily swap in your own dataset 
+The project applies the relation extraction component to identify biomolecular
+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
@@ -824,7 +826,7 @@ will predict scores for each label. We add convenience methods to easily
 retrieve and add to them.
 
 ```python
-### The constructor (continued) 
+### The constructor (continued)
     def __init__(self, vocab, model, name="rel"):
         """Create a component instance."""
         # ...
@@ -1041,11 +1043,11 @@ def make_relation_extractor(nlp, name, model):
 ```
 
 <Project id="tutorials/rel_component">
-Run this example use-case by using our project template. It includes all the 
+Run this example use-case by using our project template. It includes all the
 code to create the ML model and the pipeline component from scratch.
-It contains two config files to train the model: 
+It contains two config files to train the model:
 one to run on CPU with a Tok2Vec layer, and one for the GPU using a transformer.
-The project applies the relation extraction component to identify biomolecular 
-interactions, but you can easily swap in your own dataset for your experiments 
+The project applies the relation extraction component to identify biomolecular
+interactions, but you can easily swap in your own dataset for your experiments
 in any other domain.
 </Project>
diff --git a/website/docs/usage/training.md b/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

diff --git a/website/docs/usage/v3.md b/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

diff --git a/website/gatsby-config.js b/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 favicon = isNightly ? `src/images/icon_nightly.png` : `src/images/icon.png`
-const binderBranch = isNightly ? 'nightly' : site.binderBranch
-const siteUrl = isNightly ? site.siteUrlNightly : site.siteUrl
-const domain = isNightly ? site.domainNightly : site.domain
+const domain = process.env.BRANCH || site.domain
+const siteUrl = `https://${domain}`
+const isNightly = site.nightlyBranches.includes(domain)
+const isLegacy = site.legacy || !!+process.env.SPACY_LEGACY
+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,
     },
 

diff --git a/website/meta/site.json b/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",

diff --git a/website/package.json b/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\"",

diff --git a/website/src/components/embed.js b/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 embedClassNames = classNames(classes.root, classes.responsive, {
+const YouTube = ({ id, ratio = '16x9', className }) => {
+    const embedClassNames = classNames(classes.root, classes.responsive, className, {
         [classes.ratio16x9]: ratio === '16x9',
         [classes.ratio4x3]: ratio === '4x3',
     })

diff --git a/website/src/components/landing.js b/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 patternOverlayNightly from '../images/pattern_landing_nightly.jpg'
+import patternLegacy from '../images/pattern_legacy.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 }) => {
-    const overlay = nightly ? patternOverlayNightly : patternOverlay
-    const wrapperStyle = { backgroundImage: `url(${nightly ? patternNightly : pattern})` }
+function getPattern(nightly, legacy) {
+    if (nightly) return { pattern: patternNightly, overlay: overlayNightly }
+    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,16 +117,18 @@ export const LandingBanner = ({
     return (
         <div className={classes.banner} style={style}>
             <Grid cols={small ? null : 3} narrow className={contentClassNames}>
-                <Heading Component="h3" className={classes.bannerTitle}>
-                    {label && (
-                        <div className={classes.bannerLabel}>
-                            <span className={classes.label}>{label}</span>
-                        </div>
-                    )}
-                    <Link to={to} hidden>
-                        {title}
-                    </Link>
-                </Heading>
+                {(title || label) && (
+                    <Heading Component="h3" className={classes.bannerTitle}>
+                        {label && (
+                            <div className={classes.bannerLabel}>
+                                <span className={classes.label}>{label}</span>
+                            </div>
+                        )}
+                        <Link to={to} hidden>
+                            {title}
+                        </Link>
+                    </Heading>
+                )}
                 <div className={textClassNames}>
                     <p>{children}</p>
 

diff --git a/website/src/components/main.js b/website/src/components/main.js
@@ -6,13 +6,15 @@ 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 = {
     blue: patternBlue,
     green: patternGreen,
     purple: patternPurple,
     nightly: patternNightly,
+    legacy: patternLegacy,
 }
 
 export const Content = ({ Component = 'div', className, children }) => (

diff --git a/website/src/components/navigation.js b/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}>

diff --git a/website/src/components/seo.js b/website/src/components/seo.js
@@ -7,19 +7,22 @@ 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}`
     }
     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',

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

diff --git a/website/src/images/icon_legacy.png b/website/src/images/icon_legacy.png
diff --git a/website/src/pages/404.js b/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 {

diff --git a/website/src/styles/layout.sass b/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 */
 

diff --git a/website/src/styles/navigation.module.sass b/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