Update docs and add support for legacy style

netlify.toml

@@ -2,9 +2,9 @@ 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://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},

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

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/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/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.
@@ -158,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 : (
@@ -177,13 +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={navAlert}
+                    alert={meta.nightly ? null : navAlert}
                 >
                     <Progress key={location.href} />
                 </Navigation>
@@ -214,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

@@ -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 />
@@ -274,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">