Update website for v3 launch

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
@@ -423,9 +425,10 @@ frozen_components = ["parser", "custom"]
 
 When the components in your pipeline
 [share an embedding layer](/usage/embeddings-transformers#embedding-layers), the
-**performance** of your frozen component will be **degraded** if you continue training
+**performance** of your frozen component will be **degraded** if you continue
-other layers with the same underlying `Tok2Vec` instance. As a rule of thumb,
+training other layers with the same underlying `Tok2Vec` instance. As a rule of
-ensure that your frozen components are truly **independent** in the pipeline.
+thumb, ensure that your frozen components are truly **independent** in the
+pipeline.
 
 </Infobox>
 

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/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

@@ -109,6 +109,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 +120,7 @@ export const LandingBanner = ({
                             {title}
                         </Link>
                     </Heading>
+                )}
                 <div className={textClassNames}>
                     <p>{children}</p>
 

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/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/index.js

@@ -108,6 +108,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: {},
@@ -177,6 +183,7 @@ class Layout extends React.Component {
                     items={meta.navigation}
                     section={section}
                     search={<Search settings={meta.docSearch} />}
+                    alert={navAlert}
                 >
                     <Progress key={location.href} />
                 </Navigation>

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'
 
@@ -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>