Remove static queries

Import JSON meta data directly, to simplify components

website/README.md

@@ -78,6 +78,7 @@ bit of time.
 ```yaml
 ├── docs                 # the actual markdown content
 ├── meta                 # JSON-formatted site metadata
+|   ├── dynamicMeta.js   # At build time generated meta data
 |   ├── languages.json   # supported languages and statistical models
 |   ├── sidebars.json    # sidebar navigations for different sections
 |   ├── site.json        # general site metadata

website/gatsby-config.js

@@ -13,16 +13,11 @@ const codeBlocksPlugin = require('./src/plugins/remark-code-blocks.js')
 
 // Import metadata
 const site = require('./meta/site.json')
-const sidebars = require('./meta/sidebars.json')
+const { domain, nightly: isNightly, legacy: isLegacy } = site
-const models = require('./meta/languages.json')
+const { siteUrl } = require('./meta/dynamicMeta')
-const universe = require('./meta/universe.json')
 
 const DEFAULT_TEMPLATE = path.resolve('./src/templates/index.js')
 
-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'
 
@@ -34,30 +29,11 @@ const replacements = {
     SPACY_PKG_FLAGS: isNightly ? ' --pre' : '',
 }
 
-/**
- * Compute the overall total counts of models and languages
- */
-function getCounts(langs = []) {
-    return {
-        langs: langs.length,
-        modelLangs: langs.filter(({ models }) => models && !!models.length).length,
-        models: langs.map(({ models }) => (models ? models.length : 0)).reduce((a, b) => a + b, 0),
-    }
-}
-
 module.exports = {
     siteMetadata: {
         ...site,
-        sidebars,
-        ...models,
-        counts: getCounts(models.languages),
-        universe,
-        nightly: isNightly,
-        legacy: isLegacy,
-        binderBranch: domain,
         siteUrl,
     },
-
     plugins: [
         {
             resolve: `gatsby-plugin-sass`,

website/gatsby-node.js

@@ -4,6 +4,9 @@ const { createFilePath } = require('gatsby-source-filesystem')
 const DEFAULT_TEMPLATE = path.resolve('./src/templates/index.js')
 const BASE_PATH = 'docs'
 const PAGE_EXTENSIONS = ['.md', '.mdx']
+const siteMetadata = require('./meta/site.json')
+const universe = require('./meta/universe.json')
+const models = require('./meta/languages.json')
 
 function replacePath(pagePath) {
     return pagePath === `/` ? pagePath : pagePath.replace(/\/$/, ``)
@@ -26,37 +29,6 @@ exports.createPages = ({ graphql, actions }) => {
             graphql(
                 `
                     {
-                        site {
-                            siteMetadata {
-                                sections {
-                                    id
-                                    title
-                                    theme
-                                }
-                                languages {
-                                    code
-                                    name
-                                    models
-                                    example
-                                    has_examples
-                                }
-                                universe {
-                                    resources {
-                                        id
-                                        title
-                                        slogan
-                                    }
-                                    categories {
-                                        label
-                                        items {
-                                            id
-                                            title
-                                            description
-                                        }
-                                    }
-                                }
-                            }
-                        }
                         allFile(filter: { ext: { in: [".md", ".mdx"] } }) {
                             edges {
                                 node {
@@ -107,8 +79,10 @@ exports.createPages = ({ graphql, actions }) => {
                     reject(result.errors)
                 }
 
-                const sectionData = result.data.site.siteMetadata.sections
+                const sections = Object.assign(
-                const sections = Object.assign({}, ...sectionData.map((s) => ({ [s.id]: s })))
+                    {},
+                    ...siteMetadata.sections.map((s) => ({ [s.id]: s }))
+                )
 
                 /* Regular pages */
 
@@ -183,8 +157,8 @@ exports.createPages = ({ graphql, actions }) => {
                     },
                 })
 
-                const universe = result.data.site.siteMetadata.universe.resources
+                const universeResources = universe.resources
-                universe.forEach((page) => {
+                universeResources.forEach((page) => {
                     const slug = `/universe/project/${page.id}`
 
                     createPage({
@@ -202,7 +176,7 @@ exports.createPages = ({ graphql, actions }) => {
                     })
                 })
 
-                const universeCategories = result.data.site.siteMetadata.universe.categories
+                const universeCategories = universe.categories
                 const categories = [].concat.apply(
                     [],
                     universeCategories.map((cat) => cat.items)
@@ -227,7 +201,7 @@ exports.createPages = ({ graphql, actions }) => {
 
                 /* Models */
 
-                const langs = result.data.site.siteMetadata.languages
+                const langs = models.languages
                 const modelLangs = langs.filter(({ models }) => models && models.length)
                 modelLangs.forEach(({ code, name, models, example, has_examples }, i) => {
                     const slug = `/models/${code}`

website/meta/dynamicMeta.js

@@ -0,0 +1,11 @@
+const site = require('./site.json')
+
+const domain = process.env.BRANCH || site.domain
+
+module.exports = {
+    domain,
+    siteUrl: `https://${domain}`,
+    nightly: site.nightlyBranches.includes(domain),
+    legacy: site.legacy || !!+process.env.SPACY_LEGACY,
+    binderBranch: domain,
+}

website/meta/site.json

@@ -27,7 +27,6 @@
         "indexName": "spacy"
     },
     "binderUrl": "explosion/spacy-io-binder",
-    "binderBranch": "spacy.io",
     "binderVersion": "3.4",
     "sections": [
         { "id": "usage", "title": "Usage Documentation", "theme": "blue" },

website/src/components/code.js

@@ -4,7 +4,6 @@ import classNames from 'classnames'
 import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
 import 'prismjs-bibtex'
 import rangeParser from 'parse-numeric-range'
-import { StaticQuery, graphql } from 'gatsby'
 import { window } from 'browser-monads'
 
 import CUSTOM_TYPES from '../../meta/type-annotations.json'
@@ -12,6 +11,8 @@ import { isString, htmlToReact } from './util'
 import Link, { OptionalLink } from './link'
 import GitHubCode from './github'
 import classes from '../styles/code.module.sass'
+import siteMetadata from '../../meta/site.json'
+import { binderBranch } from '../../meta/dynamicMeta'
 
 const WRAP_THRESHOLD = 30
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
@@ -270,11 +271,8 @@ export class Code extends React.Component {
     }
 }
 
-const JuniperWrapper = ({ Juniper, title, lang, children }) => (
+const JuniperWrapper = ({ Juniper, title, lang, children }) => {
-    <StaticQuery
+    const { binderUrl, binderVersion } = siteMetadata
-        query={query}
-        render={(data) => {
-            const { binderUrl, binderBranch, binderVersion } = data.site.siteMetadata
     const juniperTitle = title || 'Editable Code'
     return (
         <div className={classes.juniperWrapper}>
@@ -303,18 +301,4 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => (
             </Juniper>
         </div>
     )
-        }}
+}
-    />
-)
-
-const query = graphql`
-    query JuniperQuery {
-        site {
-            siteMetadata {
-                binderUrl
-                binderBranch
-                binderVersion
-            }
-        }
-    }
-`

website/src/components/footer.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 import classNames from 'classnames'
 
 import Link from './link'
@@ -8,13 +7,10 @@ import Grid from './grid'
 import Newsletter from './newsletter'
 import ExplosionLogo from '-!svg-react-loader!../images/explosion.svg'
 import classes from '../styles/footer.module.sass'
+import siteMetadata from '../../meta/site.json'
 
 export default function Footer({ wide = false }) {
-    return (
+    const { companyUrl, company, footer, newsletter } = siteMetadata
-        <StaticQuery
-            query={query}
-            render={(data) => {
-                const { companyUrl, company, footer, newsletter } = data.site.siteMetadata
     return (
         <footer className={classes.root}>
             <Grid cols={wide ? 4 : 3} narrow className={classes.content}>
@@ -49,12 +45,7 @@ export default function Footer({ wide = false }) {
                         {company}
                     </Link>
                 </span>
-                            <Link
+                <Link to={companyUrl} aria-label={company} hidden className={classes.logo}>
-                                to={companyUrl}
-                                aria-label={company}
-                                hidden
-                                className={classes.logo}
-                            >
                     <ExplosionLogo width={45} height={45} />
                 </Link>
                 <Link to={`${companyUrl}/legal`} hidden>
@@ -63,34 +54,8 @@ export default function Footer({ wide = false }) {
             </div>
         </footer>
     )
-            }}
-        />
-    )
 }
 
 Footer.propTypes = {
     wide: PropTypes.bool,
 }
-
-const query = graphql`
-    query FooterQuery {
-        site {
-            siteMetadata {
-                company
-                companyUrl
-                footer {
-                    label
-                    items {
-                        text
-                        url
-                    }
-                }
-                newsletter {
-                    user
-                    id
-                    list
-                }
-            }
-        }
-    }
-`

website/src/components/seo.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
-import { StaticQuery, graphql } from 'gatsby'
 
 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'
+import siteMetadata from '../../meta/site.json'
+import { siteUrl } from '../../meta/dynamicMeta'
 
 function getPageTitle(title, sitename, slogan, sectionTitle, nightly, legacy) {
     if (sectionTitle && title) {
@@ -38,11 +39,6 @@ export default function SEO({
     nightly,
     legacy,
 }) {
-    return (
-        <StaticQuery
-            query={query}
-            render={(data) => {
-                const siteMetadata = data.site.siteMetadata
     const metaDescription = description || siteMetadata.description
     const pageTitle = getPageTitle(
         title,
@@ -52,7 +48,7 @@ export default function SEO({
         nightly,
         legacy
     )
-                const socialImage = siteMetadata.siteUrl + getImage(section, nightly, legacy)
+    const socialImage = siteUrl + getImage(section, nightly, legacy)
     const meta = [
         {
             name: 'description',
@@ -117,9 +113,6 @@ export default function SEO({
             meta={meta}
         />
     )
-            }}
-        />
-    )
 }
 
 SEO.propTypes = {
@@ -131,19 +124,3 @@ SEO.propTypes = {
     section: PropTypes.string,
     bodyClass: PropTypes.string,
 }
-
-const query = graphql`
-    query DefaultSEOQuery {
-        site {
-            siteMetadata {
-                title
-                description
-                slogan
-                siteUrl
-                social {
-                    twitter
-                }
-            }
-        }
-    }
-`

website/src/components/util.js

@@ -3,10 +3,11 @@ import { Parser as HtmlToReactParser } from 'html-to-react'
 import remark from 'remark'
 import remark2react from 'remark-react'
 import siteMetadata from '../../meta/site.json'
+import { domain } from '../../meta/dynamicMeta'
 
 const htmlToReactParser = new HtmlToReactParser()
 
-const isNightly = siteMetadata.nightlyBranches.includes(siteMetadata.domain)
+const isNightly = siteMetadata.nightlyBranches.includes(domain)
 export const DEFAULT_BRANCH = isNightly ? 'develop' : 'master'
 export const repo = siteMetadata.repo
 export const modelsRepo = siteMetadata.modelsRepo

website/src/pages/404.js

@@ -1,16 +1,15 @@
 import React from 'react'
 import { window } from 'browser-monads'
-import { graphql } from 'gatsby'
 
 import Template from '../templates/index'
 import { LandingHeader, LandingTitle } from '../components/landing'
 import Button from '../components/button'
+import { nightly, legacy } from '../../meta/dynamicMeta'
 
-const page404 = ({ data, location }) => {
+const page404 = ({ location }) => {
-    const { nightly, legacy } = data.site.siteMetadata
     const pageContext = { title: '404 Error', searchExclude: true, isIndex: false }
     return (
-        <Template data={data} pageContext={pageContext} location={location}>
+        <Template pageContext={pageContext} location={location}>
             <LandingHeader style={{ minHeight: 400 }} nightly={nightly} legacy={legacy}>
                 <LandingTitle>
                     Ooops, this page
@@ -27,25 +26,3 @@ const page404 = ({ data, location }) => {
 }
 
 export default page404
-
-export const pageQuery = graphql`
-    query {
-        site {
-            siteMetadata {
-                nightly
-                legacy
-                title
-                description
-                navigation {
-                    text
-                    url
-                }
-                docSearch {
-                    apiKey
-                    indexName
-                    appId
-                }
-            }
-        }
-    }
-`

website/src/templates/docs.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 
 import Models from './models'
 
@@ -13,10 +12,12 @@ import Sidebar from '../components/sidebar'
 import Main from '../components/main'
 import { getCurrentSource, github } from '../components/util'
 
-const Docs = ({ pageContext, children }) => (
+import siteMetadata from '../../meta/site.json'
-    <StaticQuery
+import sidebars from '../../meta/sidebars.json'
-        query={query}
+import models from '../../meta/languages.json'
-        render={({ site }) => {
+import { nightly, legacy } from '../../meta/dynamicMeta'
+
+const Docs = ({ pageContext, children }) => {
     const {
         id,
         slug,
@@ -32,7 +33,8 @@ const Docs = ({ pageContext, children }) => (
         version,
         apiDetails,
     } = pageContext
-            const { sidebars = [], modelsRepo, languages, nightly, legacy } = site.siteMetadata
+    const { modelsRepo } = siteMetadata
+    const { languages } = models
     const isModels = section === 'models'
     const sidebar = pageContext.sidebar
         ? { items: pageContext.sidebar }
@@ -102,9 +104,7 @@ const Docs = ({ pageContext, children }) => (
             </Main>
         </>
     )
-        }}
+}
-    />
-)
 
 Docs.propTypes = {
     pageContext: PropTypes.shape({
@@ -125,32 +125,3 @@ Docs.propTypes = {
 }
 
 export default Docs
-
-const query = graphql`
-    query DocsQuery {
-        site {
-            siteMetadata {
-                repo
-                modelsRepo
-                languages {
-                    code
-                    name
-                    models
-                }
-                nightly
-                legacy
-                sidebars {
-                    section
-                    items {
-                        label
-                        items {
-                            text
-                            url
-                            tag
-                        }
-                    }
-                }
-            }
-        }
-    }
-`

website/src/templates/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'gatsby'
 import { MDXProvider } from '@mdx-js/tag'
 import { withMDXScope } from 'gatsby-mdx/context'
 import useOnlineStatus from '@rehooks/online-status'
@@ -35,6 +34,9 @@ import Search from '../components/search'
 import Project from '../widgets/project'
 import { Integration, IntegrationLogo } from '../widgets/integration'
 
+import siteMetadata from '../../meta/site.json'
+import { nightly, legacy } from '../../meta/dynamicMeta'
+
 const mdxComponents = {
     a: Link,
     p: P,
@@ -167,9 +169,8 @@ class Layout extends React.Component {
         const { data, pageContext, location, children } = this.props
         const { file, site = {} } = data || {}
         const mdx = file ? file.childMdx : null
-        const meta = site.siteMetadata || {}
         const { title, section, sectionTitle, teaser, theme = 'blue', searchExclude } = pageContext
-        const uiTheme = meta.nightly ? 'nightly' : meta.legacy ? 'legacy' : theme
+        const uiTheme = nightly ? 'nightly' : legacy ? 'legacy' : theme
         const bodyClass = classNames(`theme-${uiTheme}`, { 'search-exclude': !!searchExclude })
         const isDocs = ['usage', 'models', 'api', 'styleguide'].includes(section)
         const content = !mdx ? null : (
@@ -182,19 +183,19 @@ class Layout extends React.Component {
             <>
                 <SEO
                     title={title}
-                    description={teaser || meta.description}
+                    description={teaser || siteMetadata.description}
                     section={section}
                     sectionTitle={sectionTitle}
                     bodyClass={bodyClass}
-                    nightly={meta.nightly}
+                    nightly={nightly}
                 />
-                <AlertSpace nightly={meta.nightly} legacy={meta.legacy} />
+                <AlertSpace nightly={nightly} legacy={legacy} />
                 <Navigation
-                    title={meta.title}
+                    title={siteMetadata.title}
-                    items={meta.navigation}
+                    items={siteMetadata.navigation}
                     section={section}
-                    search={<Search settings={meta.docSearch} />}
+                    search={<Search settings={siteMetadata.docSearch} />}
-                    alert={meta.nightly ? null : navAlert}
+                    alert={nightly ? null : navAlert}
                 >
                     <Progress key={location.href} />
                 </Navigation>
@@ -219,33 +220,3 @@ class Layout extends React.Component {
 }
 
 export default withMDXScope(Layout)
-
-export const pageQuery = graphql`
-    query ($slug: String!) {
-        site {
-            siteMetadata {
-                nightly
-                legacy
-                title
-                description
-                navigation {
-                    text
-                    url
-                }
-                docSearch {
-                    apiKey
-                    indexName
-                    appId
-                }
-            }
-        }
-        file(fields: { slug: { eq: $slug } }) {
-            childMdx {
-                code {
-                    scope
-                    body
-                }
-            }
-        }
-    }
-`

website/src/templates/models.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useMemo, Fragment } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 import { window } from 'browser-monads'
 
 import Title from '../components/title'
@@ -17,6 +16,9 @@ import Accordion from '../components/accordion'
 import { join, arrayToObj, abbrNum, markdownToReact } from '../components/util'
 import { isString, isEmptyObj } from '../components/util'
 
+import siteMetadata from '../../meta/site.json'
+import languages from '../../meta/languages.json'
+
 const COMPONENT_LINKS = {
     tok2vec: '/api/tok2vec',
     transformer: '/api/transformer',
@@ -415,10 +417,7 @@ const Models = ({ pageContext, repo, children }) => {
     return (
         <>
             <Title title={title} teaser={`Available trained pipelines for ${title}`} />
-            <StaticQuery
+            {models.map((modelName) => (
-                query={query}
-                render={({ site }) =>
-                    models.map((modelName) => (
                 <Model
                     key={modelName}
                     name={modelName}
@@ -427,31 +426,14 @@ const Models = ({ pageContext, repo, children }) => {
                     compatibility={compatibility}
                     baseUrl={baseUrl}
                     repo={repo}
-                            licenses={arrayToObj(site.siteMetadata.licenses, 'id')}
+                    licenses={arrayToObj(languages.licenses, 'id')}
                     hasExamples={meta.hasExamples}
-                            prereleases={site.siteMetadata.nightly}
+                    prereleases={siteMetadata.nightly}
                 />
-                    ))
+            ))}
-                }
-            />
-
             {children}
         </>
     )
 }
 
 export default Models
-
-const query = graphql`
-    query ModelsQuery {
-        site {
-            siteMetadata {
-                nightly
-                licenses {
-                    id
-                    url
-                }
-            }
-        }
-    }
-`

website/src/templates/universe.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 
 import Card from '../components/card'
 import Link from '../components/link'
@@ -19,6 +18,9 @@ import { H3, H5, Label, InlineList } from '../components/typography'
 import { YouTube, SoundCloud, Iframe } from '../components/embed'
 import { github, markdownToReact } from '../components/util'
 
+import { nightly, legacy } from '../../meta/dynamicMeta'
+import universe from '../../meta/universe.json'
+
 function getSlug(data) {
     if (data.isCategory) return `/universe/category/${data.id}`
     if (data.isProject) return `/universe/project/${data.id}`
@@ -333,11 +335,7 @@ const Project = ({ data, components }) => (
     </>
 )
 
-const Universe = ({ pageContext, location, mdxComponents }) => (
+const Universe = ({ pageContext, location, mdxComponents }) => {
-    <StaticQuery
-        query={query}
-        render={(data) => {
-            const { universe, nightly, legacy } = data.site.siteMetadata
     const theme = nightly ? 'nightly' : legacy ? 'legacy' : pageContext.theme
     return (
         <UniverseContent
@@ -349,57 +347,6 @@ const Universe = ({ pageContext, location, mdxComponents }) => (
             theme={theme}
         />
     )
-        }}
+}
-    />
-)
 
 export default Universe
-
-const query = graphql`
-    query UniverseQuery {
-        site {
-            siteMetadata {
-                nightly
-                legacy
-                universe {
-                    resources {
-                        type
-                        id
-                        title
-                        slogan
-                        url
-                        github
-                        description
-                        spacy_version
-                        pip
-                        cran
-                        category
-                        thumb
-                        image
-                        cover
-                        code_example
-                        code_language
-                        youtube
-                        soundcloud
-                        iframe
-                        iframe_height
-                        author
-                        author_links {
-                            twitter
-                            github
-                            website
-                        }
-                    }
-                    categories {
-                        label
-                        items {
-                            id
-                            title
-                            description
-                        }
-                    }
-                }
-            }
-        }
-    }
-`

website/src/widgets/features.js

@@ -1,25 +1,33 @@
 import React from 'react'
-import { graphql, StaticQuery } from 'gatsby'
 
 import { Ul, Li } from '../components/list'
 
-const Features = () => (
+import models from '../../meta/languages.json'
-    <StaticQuery
+
-        query={query}
+/**
-        render={({ site }) => {
+ * Compute the overall total counts of models and languages
-            const { counts } = site.siteMetadata
+ */
+function getCounts(langs = []) {
+    return {
+        langs: langs.length,
+        modelLangs: langs.filter(({ models }) => models && !!models.length).length,
+        models: langs.map(({ models }) => (models ? models.length : 0)).reduce((a, b) => a + b, 0),
+    }
+}
+
+const Features = () => {
+    const counts = getCounts(models.languages)
     return (
         <Ul>
             <Li>
                 ✅ Support for <strong>{counts.langs}+ languages</strong>
             </Li>
             <Li>
-                        ✅ <strong>{counts.models} trained pipelines</strong> for{' '}
+                ✅ <strong>{counts.models} trained pipelines</strong> for {counts.modelLangs}{' '}
-                        {counts.modelLangs} languages
+                languages
             </Li>
             <Li>
-                        ✅ Multi-task learning with pretrained <strong>transformers</strong> like
+                ✅ Multi-task learning with pretrained <strong>transformers</strong> like BERT
-                        BERT
             </Li>
             <Li>
                 ✅ Pretrained <strong>word vectors</strong>
@@ -32,10 +40,9 @@ const Features = () => (
                 ✅ Linguistically-motivated <strong>tokenization</strong>
             </Li>
             <Li>
-                        ✅ Components for <strong>named entity</strong> recognition, part-of-speech
+                ✅ Components for <strong>named entity</strong> recognition, part-of-speech tagging,
-                        tagging, dependency parsing, sentence segmentation,{' '}
+                dependency parsing, sentence segmentation, <strong>text classification</strong>,
-                        <strong>text classification</strong>, lemmatization, morphological analysis,
+                lemmatization, morphological analysis, entity linking and more
-                        entity linking and more
             </Li>
             <Li>
                 ✅ Easily extensible with <strong>custom components</strong> and attributes
@@ -53,22 +60,6 @@ const Features = () => (
             <Li>✅ Robust, rigorously evaluated accuracy</Li>
         </Ul>
     )
-        }}
+}
-    />
-)
 
 export default Features
-
-const query = graphql`
-    query FeaturesQuery {
-        site {
-            siteMetadata {
-                counts {
-                    langs
-                    modelLangs
-                    models
-                }
-            }
-        }
-    }
-`

website/src/widgets/landing.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 
 import {
     LandingHeader,
@@ -19,13 +18,15 @@ import { Ul, Li } from '../components/list'
 import Button from '../components/button'
 import Link from '../components/link'
 
-import QuickstartTraining from './quickstart-training'
+import QuickstartTraining from '../widgets/quickstart-training'
-import Project from './project'
+import Project from '../widgets/project'
-import Features from './features'
+import Features from '../widgets/features'
+import Layout from '../components/layout'
 import courseImage from '../../docs/images/course.jpg'
 import prodigyImage from '../../docs/images/prodigy_overview.jpg'
 import projectsImage from '../../docs/images/projects.png'
 import tailoredPipelinesImage from '../../docs/images/spacy-tailored-pipelines_wide.png'
+import { nightly, legacy } from '../../meta/dynamicMeta'
 
 import Benchmarks from '../../docs/usage/_benchmarks-models.mdx'
 
@@ -56,8 +57,7 @@ for entity in doc.ents:
 `
 }
 
-const Landing = ({ data }) => {
+const Landing = () => {
-    const { nightly, legacy } = data
     const codeExample = getCodeExample(nightly)
     return (
         <>
@@ -289,31 +289,4 @@ const Landing = ({ data }) => {
     )
 }
 
-Landing.propTypes = {
+export default Landing
-    data: PropTypes.shape({
-        repo: PropTypes.string,
-        languages: PropTypes.arrayOf(
-            PropTypes.shape({
-                models: PropTypes.arrayOf(PropTypes.string),
-            })
-        ),
-    }),
-}
-
-const PageLanding = () => (
-    <StaticQuery query={landingQuery} render={({ site }) => <Landing data={site.siteMetadata} />} />
-)
-
-export default PageLanding
-
-const landingQuery = graphql`
-    query LandingQuery {
-        site {
-            siteMetadata {
-                nightly
-                legacy
-                repo
-            }
-        }
-    }
-`

website/src/widgets/languages.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 
 import Link from '../components/link'
 import { InlineCode } from '../components/code'
@@ -8,6 +7,8 @@ import { Ul, Li } from '../components/list'
 import Infobox from '../components/infobox'
 import { github, join } from '../components/util'
 
+import models from '../../meta/languages.json'
+
 const Language = ({ name, code, models }) => (
     <Tr>
         <Td>{name}</Td>
@@ -31,11 +32,8 @@ const Language = ({ name, code, models }) => (
     </Tr>
 )
 
-const Languages = () => (
+const Languages = () => {
-    <StaticQuery
+    const langs = models.languages
-        query={query}
-        render={({ site }) => {
-            const langs = site.siteMetadata.languages
     const withModels = langs
         .filter(({ models }) => models && !!models.length)
         .sort((a, b) => a.name.localeCompare(b.name))
@@ -82,26 +80,6 @@ const Languages = () => (
             </Infobox>
         </>
     )
-        }}
+}
-    />
-)
 
 export default Languages
-
-const query = graphql`
-    query LanguagesQuery {
-        site {
-            siteMetadata {
-                languages {
-                    code
-                    name
-                    models
-                    dependencies {
-                        name
-                        url
-                    }
-                }
-            }
-        }
-    }
-`

website/src/widgets/quickstart-install.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 
 import { Quickstart, QS } from '../components/quickstart'
 import { repo, DEFAULT_BRANCH } from '../components/util'
+import siteMetadata from '../../meta/site.json'
+import models from '../../meta/languages.json'
 
 const DEFAULT_OS = 'mac'
 const DEFAULT_PLATFORM = 'x86'
@@ -51,13 +52,10 @@ const QuickstartInstall = ({ id, title }) => {
     ]
         .filter((e) => e)
         .join(',')
-    return (
+
-        <StaticQuery
+    const { nightly } = siteMetadata
-            query={query}
-            render={({ site }) => {
-                const { nightly, languages } = site.siteMetadata
     const pkg = nightly ? 'spacy-nightly' : 'spacy'
-                const models = languages.filter(({ models }) => models !== null)
+    const languages = models.languages.filter(({ models }) => !!models)
     const data = [
         {
             id: 'os',
@@ -121,7 +119,7 @@ const QuickstartInstall = ({ id, title }) => {
             id: 'models',
             title: 'Trained pipelines',
             multiple: true,
-                        options: models
+            options: languages
                 .sort((a, b) => a.name.localeCompare(b.name))
                 .map(({ code, name }) => ({
                     id: code,
@@ -151,18 +149,10 @@ const QuickstartInstall = ({ id, title }) => {
         })
     }
     return (
-                    <Quickstart
+        <Quickstart data={data} title={title} id={id} setters={setters} showDropdown={showDropdown}>
-                        data={data}
-                        title={title}
-                        id={id}
-                        setters={setters}
-                        showDropdown={showDropdown}
-                    >
             <QS os="mac" hardware="gpu" platform="arm">
                 # Note M1 GPU support is experimental, see{' '}
-                            <a href="https://github.com/explosion/thinc/issues/792">
+                <a href="https://github.com/explosion/thinc/issues/792">Thinc issue #792</a>
-                                Thinc issue #792
-                            </a>
             </QS>
             <QS package="pip" config="venv">
                 python -m venv .env
@@ -197,19 +187,11 @@ const QuickstartInstall = ({ id, title }) => {
             <QS package="pip">pip install -U pip setuptools wheel</QS>
             <QS package="source">pip install -U pip setuptools wheel</QS>
             <QS package="pip">
-                            {pipExtras
+                {pipExtras ? `pip install -U '${pkg}[${pipExtras}]'` : `pip install -U ${pkg}`}
-                                ? `pip install -U '${pkg}[${pipExtras}]'`
-                                : `pip install -U ${pkg}`}
                 {nightly ? ' --pre' : ''}
             </QS>
             <QS package="conda">conda install -c conda-forge spacy</QS>
-                        <QS package="conda" hardware="gpu" os="windows">
+            <QS package="conda" hardware="gpu">
-                            conda install -c conda-forge cupy
-                        </QS>
-                        <QS package="conda" hardware="gpu" os="linux">
-                            conda install -c conda-forge cupy
-                        </QS>
-                        <QS package="conda" hardware="gpu" os="mac" platform="x86">
                 conda install -c conda-forge cupy
             </QS>
             <QS package="conda" config="train">
@@ -232,7 +214,7 @@ const QuickstartInstall = ({ id, title }) => {
                 pip install spacy-lookups-data
             </QS>
 
-                        {models.map(({ code, models: modelOptions }) => {
+            {languages.map(({ code, models: modelOptions }) => {
                 const pkg = modelOptions[efficiency ? 0 : modelOptions.length - 1]
                 return (
                     <QS models={code} key={code}>
@@ -242,24 +224,6 @@ const QuickstartInstall = ({ id, title }) => {
             })}
         </Quickstart>
     )
-            }}
-        />
-    )
 }
 
 export default QuickstartInstall
-
-const query = graphql`
-    query QuickstartInstallQuery {
-        site {
-            siteMetadata {
-                nightly
-                languages {
-                    code
-                    name
-                    models
-                }
-            }
-        }
-    }
-`

website/src/widgets/quickstart-models.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 
 import { Quickstart, QS } from '../components/quickstart'
+import models from '../../meta/languages.json'
 
 const DEFAULT_LANG = 'en'
 const DEFAULT_OPT = 'efficiency'
@@ -62,12 +62,9 @@ const QuickstartInstall = ({ id, title, description, children }) => {
         lang: setLang,
         optimize: (v) => setEfficiency(v.includes('efficiency')),
     }
-    return (
+
-        <StaticQuery
+    const languages = models.languages.filter(({ models }) => !!models)
-            query={query}
+    data[0].dropdown = languages
-            render={({ site }) => {
-                const models = site.siteMetadata.languages.filter(({ models }) => models !== null)
-                data[0].dropdown = models
         .sort((a, b) => a.name.localeCompare(b.name))
         .map(({ code, name }) => ({
             id: code,
@@ -82,7 +79,7 @@ const QuickstartInstall = ({ id, title, description, children }) => {
             setters={setters}
             copy={false}
         >
-                        {models.map(({ code, models, example }) => {
+            {languages.map(({ code, models, example }) => {
                 const pkg = efficiency ? models[0] : models[models.length - 1]
                 const exampleText = example || 'No text available yet'
                 return lang !== code ? null : (
@@ -118,24 +115,6 @@ const QuickstartInstall = ({ id, title, description, children }) => {
             {children}
         </Quickstart>
     )
-            }}
-        />
-    )
 }
 
 export default QuickstartInstall
-
-const query = graphql`
-    query QuickstartModelsQuery {
-        site {
-            siteMetadata {
-                languages {
-                    code
-                    name
-                    models
-                    example
-                }
-            }
-        }
-    }
-`

website/src/widgets/quickstart-training.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
 
 import { Quickstart } from '../components/quickstart'
 import generator, { DATA as GENERATOR_DATA } from './quickstart-training-generator'
 import { htmlToReact } from '../components/util'
+import models from '../../meta/languages.json'
 
 const DEFAULT_LANG = 'en'
 const DEFAULT_HARDWARE = 'cpu'
@@ -112,23 +112,16 @@ export default function QuickstartTraining({ id, title, download = 'base_config.
         .split('\n')
         .map((line) => (line.startsWith('#') ? `<span class="token comment">${line}</span>` : line))
         .join('\n')
-    return (
+
-<<<<<<< Updated upstream
-        <StaticQuery
-            query={query}
-            render={({ site }) => {
     let data = DATA
-                const langs = site.siteMetadata.languages
+    data[0].dropdown = models.languages
-                data[0].dropdown = langs
         .map(({ name, code }) => ({
             id: code,
             title: name,
         }))
         .sort((a, b) => a.title.localeCompare(b.title))
     if (!_components.includes('textcat')) {
-                    data = data.map((field) =>
+        data = data.map((field) => (field.id === 'textcat' ? { ...field, hidden: true } : field))
-                        field.id === 'textcat' ? { ...field, hidden: true } : field
-                    )
     }
     return (
         <Quickstart
@@ -146,36 +139,4 @@ export default function QuickstartTraining({ id, title, download = 'base_config.
             {htmlToReact(displayContent)}
         </Quickstart>
     )
-            }}
-        />
-=======
-        <Quickstart
-            Container="div"
-            download={download}
-            rawContent={rawContent}
-            data={data}
-            title={title}
-            id={id}
-            setters={setters}
-            hidePrompts
-            small
-            codeLang="ini"
-        >
-            {htmlToReact(displayContent)}
-        </Quickstart>
->>>>>>> Stashed changes
-    )
 }
-
-const query = graphql`
-    query QuickstartTrainingQuery {
-        site {
-            siteMetadata {
-                languages {
-                    code
-                    name
-                }
-            }
-        }
-    }
-`