Merge branch 'master' into fix-aria-hidden-element

azure-pipelines.yml

@@ -11,13 +11,21 @@ trigger:
     exclude:
       - "website/*"
       - "*.md"
+      - "*.mdx"
       - ".github/workflows/*"
 pr:
   paths:
     exclude:
       - "*.md"
+      - "*.mdx"
       - "website/docs/*"
       - "website/src/*"
+      - "website/meta/*.tsx"
+      - "website/meta/*.mjs"
+      - "website/meta/languages.json"
+      - "website/meta/site.json"
+      - "website/meta/sidebars.json"
+      - "website/meta/type-annotations.json"
       - ".github/workflows/*"
 
 jobs:

spacy/tests/test_cli.py

@@ -1074,7 +1074,7 @@ def test_cli_find_threshold(capsys):
         )
         with make_tempdir() as nlp_dir:
             nlp.to_disk(nlp_dir)
-            res = find_threshold(
+            best_threshold, best_score, res = find_threshold(
                 model=nlp_dir,
                 data_path=docs_dir / "docs.spacy",
                 pipe_name="tc_multi",
@@ -1082,10 +1082,10 @@ def test_cli_find_threshold(capsys):
                 scores_key="cats_macro_f",
                 silent=True,
             )
-            assert res[0] != thresholds[0]
+            assert best_threshold != thresholds[0]
-            assert thresholds[0] < res[0] < thresholds[9]
+            assert thresholds[0] < best_threshold < thresholds[9]
-            assert res[1] == 1.0
+            assert best_score == max(res.values())
-            assert res[2][1.0] == 0.0
+            assert res[1.0] == 0.0
 
         # Test with spancat.
         nlp, _ = init_nlp((("spancat", {}),))

website/docs/usage/101/_vectors-similarity.mdx

@@ -134,6 +134,7 @@ useful for your purpose. Here are some important considerations to keep in mind:
 <Image
   src="/images/sense2vec.jpg"
   href="https://github.com/explosion/sense2vec"
+  alt="sense2vec Screenshot"
 />
 
 [`sense2vec`](https://github.com/explosion/sense2vec) is a library developed by

website/docs/usage/layers-architectures.mdx

@@ -113,6 +113,7 @@ code.
 <Image
   src="/images/thinc_mypy.jpg"
   href="https://thinc.ai/docs/usage-type-checking#linting"
+  alt="Screenshot of Thinc type checking in VSCode with mypy"
 />
 
 </Accordion>

website/docs/usage/projects.mdx

@@ -943,7 +943,7 @@ full embedded visualizer, as well as individual components.
 > $ pip install spacy-streamlit --pre
 > ```
 
-![](/images/spacy-streamlit.png)
+![Screenshot of the spacy-streamlit package in Streamlit](/images/spacy-streamlit.png)
 
 Using [`spacy-streamlit`](https://github.com/explosion/spacy-streamlit), your
 projects can easily define their own scripts that spin up an interactive

website/docs/usage/saving-loading.mdx

@@ -304,6 +304,28 @@ installed in the same environment – that's it.
 | `spacy_lookups`                                   | Group of entry points for custom [`Lookups`](/api/lookups), including lemmatizer data. Used by spaCy's [`spacy-lookups-data`](https://github.com/explosion/spacy-lookups-data) package.                                                                  |
 | [`spacy_displacy_colors`](#entry-points-displacy) | Group of entry points of custom label colors for the [displaCy visualizer](/usage/visualizers#ent). The key name doesn't matter, but it should point to a dict of labels and color values. Useful for custom models that predict different entity types. |
 
+### Loading probability tables into existing models
+
+You can load a probability table from [spacy-lookups-data](https://github.com/explosion/spacy-lookups-data) into an existing spaCy model like `en_core_web_sm`.
+
+```python
+# Requirements: pip install spacy-lookups-data
+import spacy
+from spacy.lookups import load_lookups
+nlp = spacy.load("en_core_web_sm")
+lookups = load_lookups("en", ["lexeme_prob"])
+nlp.vocab.lookups.add_table("lexeme_prob", lookups.get_table("lexeme_prob"))
+```
+
+When training a model from scratch you can also specify probability tables in the `config.cfg`.
+
+```ini {title="config.cfg (excerpt)"}
+[initialize.lookups]
+@misc = "spacy.LookupsDataLoader.v1"
+lang = ${nlp.lang}
+tables = ["lexeme_prob"]
+```
+
 ### Custom components via entry points {id="entry-points-components"}
 
 When you load a pipeline, spaCy will generally use its `config.cfg` to set up

website/docs/usage/spacy-101.mdx

@@ -567,7 +567,10 @@ If you would like to use the spaCy logo on your site, please get in touch and
 ask us first. However, if you want to show support and tell others that your
 project is using spaCy, you can grab one of our **spaCy badges** here:
 
-<img src={`https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg`} />
+<img
+  src={`https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg`}
+  alt="Built with spaCy"
+/>
 
 ```markdown
 [![Built with spaCy](https://img.shields.io/badge/built%20with-spaCy-09a3d5.svg)](https://spacy.io)
@@ -575,8 +578,9 @@ project is using spaCy, you can grab one of our **spaCy badges** here:
 
 <img
   src={`https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg`}
+  alt="Made with love and spaCy"
 />
 
 ```markdown
-[![Built with spaCy](https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg)](https://spacy.io)
+[![Made with love and spaCy](https://img.shields.io/badge/made%20with%20❤%20and-spaCy-09a3d5.svg)](https://spacy.io)
 ```

website/docs/usage/visualizers.mdx

@@ -437,6 +437,6 @@ Alternatively, if you're using [Streamlit](https://streamlit.io), check out the
 helps you integrate spaCy visualizations into your apps. It includes a full
 embedded visualizer, as well as individual components.
 
-![](/images/spacy-streamlit.png)
+![Screenshot of the spacy-streamlit package in Streamlit](/images/spacy-streamlit.png)
 
 </Grid>

website/pages/_app.tsx

@@ -17,7 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 <link rel="manifest" href="/manifest.webmanifest" />
                 <meta
                     name="viewport"
-                    content="width=device-width, initial-scale=1.0, minimum-scale=1 maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
+                    content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=5.0, shrink-to-fit=no, viewport-fit=cover"
                 />
                 <meta name="theme-color" content="#09a3d5" />
                 <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png" />

website/pages/index.tsx

@@ -89,8 +89,8 @@ const Landing = () => {
                 </LandingCard>
 
                 <LandingCard title="Awesome ecosystem" url="/usage/projects" button="Read more">
-                    Since its release in 2015, spaCy has become an industry standard with
+                    Since its release in 2015, spaCy has become an industry standard with a huge
-                    a huge ecosystem. Choose from a variety of plugins, integrate with your machine
+                    ecosystem. Choose from a variety of plugins, integrate with your machine
                     learning stack and build custom components and workflows.
                 </LandingCard>
             </LandingGrid>
@@ -206,7 +206,10 @@ const Landing = () => {
             <LandingGrid cols={2}>
                 <LandingCol>
                     <Link to="/usage/projects" hidden>
-                        <ImageFill image={projectsImage} />
+                        <ImageFill
+                            image={projectsImage}
+                            alt="Illustration of project workflow and commands"
+                        />
                     </Link>
                     <br />
                     <br />

website/src/components/card.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import ImageNext from 'next/image'
 
 import Link from './link'
 import { H5 } from './typography'
@@ -18,8 +19,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
                 <H5 className={classes.title}>
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <ImageNext src={image} height={35} width={35} alt={`${title} Logo`} />
-                            <img src={image} width={35} alt="" />
                         </div>
                     )}
                     {title && (

website/src/components/copy.js

@@ -14,7 +14,7 @@ export function copyToClipboard(ref, callback) {
     }
 }
 
-export default function CopyInput({ text, prefix }) {
+export default function CopyInput({ text, description, prefix }) {
     const isClient = typeof window !== 'undefined'
     const [supportsCopy, setSupportsCopy] = useState(false)
 
@@ -41,6 +41,7 @@ export default function CopyInput({ text, prefix }) {
                 defaultValue={text}
                 rows={1}
                 onClick={selectText}
+                aria-label={description}
             />
             {supportsCopy && (
                 <button title="Copy to clipboard" onClick={onClick}>

website/src/components/juniper.js

@@ -14,8 +14,8 @@ const spacyTheme = createTheme({
         background: 'var(--color-front)',
         foreground: 'var(--color-subtle)',
         caret: 'var(--color-theme-dark)',
-        selection: 'var(--color-theme)',
+        selection: 'var(--color-theme-dark)',
-        selectionMatch: 'var(--color-theme)',
+        selectionMatch: 'var(--color-theme-dark)',
         gutterBackground: 'var(--color-front)',
         gutterForeground: 'var(--color-subtle)',
         fontFamily: 'var(--font-code)',

website/src/components/landing.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import patternDefault from '../images/pattern_blue.jpg'
+import patternDefault from '../images/pattern_blue.png'
-import patternNightly from '../images/pattern_nightly.jpg'
+import patternNightly from '../images/pattern_nightly.png'
-import patternLegacy from '../images/pattern_legacy.jpg'
+import patternLegacy from '../images/pattern_legacy.png'
-import overlayDefault from '../images/pattern_landing.jpg'
+import overlayDefault from '../images/pattern_landing.png'
-import overlayNightly from '../images/pattern_landing_nightly.jpg'
+import overlayNightly from '../images/pattern_landing_nightly.png'
-import overlayLegacy from '../images/pattern_landing_legacy.jpg'
+import overlayLegacy from '../images/pattern_landing_legacy.png'
 
 import Grid from './grid'
 import { Content } from './main'

website/src/components/main.js

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import patternBlue from '../images/pattern_blue.jpg'
+import patternBlue from '../images/pattern_blue.png'
-import patternGreen from '../images/pattern_green.jpg'
+import patternGreen from '../images/pattern_green.png'
-import patternPurple from '../images/pattern_purple.jpg'
+import patternPurple from '../images/pattern_purple.png'
-import patternNightly from '../images/pattern_nightly.jpg'
+import patternNightly from '../images/pattern_nightly.png'
-import patternLegacy from '../images/pattern_legacy.jpg'
+import patternLegacy from '../images/pattern_legacy.png'
 import classes from '../styles/main.module.sass'
 
 const patterns = {

website/src/components/title.js

@@ -51,8 +51,7 @@ export default function Title({
 
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <Image src={image} width={100} height={100} alt={`${title} Logo`} />
-                            <img src={image} width={100} height={100} alt="" />
                         </div>
                     )}
                 </div>

website/src/images/explosion.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="200" height="200">
+<svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
-    <path fill="currentColor" d="M111.7 74.9L91.2 93.1l9.1 10.2 17.8-15.8 7.4 8.4-17.8 15.8 10.1 11.4 20.6-18.2 7.7 8.7-30.4 26.9-41.9-47.3 30.3-26.9 7.6 8.6zM190.8 59.6L219 84.3l-14.4 4.5-20.4-18.2-6.4 26.6-14.4 4.5 8.9-36.4-26.9-24.1 14.3-4.5L179 54.2l5.7-25.2 14.3-4.5-8.2 35.1zM250.1 21.2l27.1 3.4c6.1.8 10.8 3.1 14 7.2 3.2 4.1 4.5 9.2 3.7 15.5-.8 6.3-3.2 11-7.4 14.1-4.1 3.1-9.2 4.3-15.3 3.5L258 63.2l-2.8 22.3-13-1.6 7.9-62.7zm11.5 13l-2.2 17.5 12.6 1.6c5.1.6 9.1-2 9.8-7.6.7-5.6-2.5-9.2-7.6-9.9l-12.6-1.6zM329.1 95.4l23.8 13.8-5.8 10L312 98.8l31.8-54.6 11.3 6.6-26 44.6zM440.5 145c-1.3 8.4-5.9 15.4-13.9 21.1s-16.2 7.7-24.6 6.1c-8.4-1.6-15.3-6.3-20.8-14.1-5.5-7.9-7.6-16-6.4-24.4 1.3-8.5 6-15.5 14-21.1 8-5.6 16.2-7.7 24.5-6 8.4 1.6 15.4 6.3 20.9 14.2 5.5 7.6 7.6 15.7 6.3 24.2zM412 119c-5.1-.8-10.3.6-15.6 4.4-5.2 3.7-8.4 8.1-9.4 13.2-1 5.2.2 10.1 3.5 14.8 3.4 4.8 7.5 7.5 12.7 8.2 5.2.8 10.4-.7 15.6-4.4 5.3-3.7 8.4-8.1 9.4-13.2 1.1-5.1-.1-9.9-3.4-14.7-3.4-4.8-7.6-7.6-12.8-8.3zM471.5 237.9c-2.8 4.8-7.1 7.6-13 8.7l-2.6-13.1c5.3-.9 8.1-5 7.2-11-.9-5.8-4.3-8.8-8.9-8.2-2.3.3-3.7 1.4-4.5 3.3-.7 1.9-1.4 5.2-1.7 10.1-.8 7.5-2.2 13.1-4.3 16.9-2.1 3.9-5.7 6.2-10.9 7-6.3.9-11.3-.5-15.2-4.4-3.9-3.8-6.3-9-7.3-15.7-1.1-7.4-.2-13.7 2.6-18.8 2.8-5.1 7.4-8.2 13.7-9.2l2.6 13c-5.6 1.1-8.7 6.6-7.7 13.4 1 6.6 3.9 9.5 8.6 8.8 4.4-.7 5.7-4.5 6.7-14.1.3-3.5.7-6.2 1.1-8.4.4-2.2 1.2-4.4 2.2-6.8 2.1-4.7 6-7.2 11.8-8.1 5.4-.8 10.3.4 14.5 3.7 4.2 3.3 6.9 8.5 8 15.6.9 6.9-.1 12.6-2.9 17.3zM408.6 293.5l2.4-12.9 62 11.7-2.4 12.9-62-11.7zM419.6 396.9c-8.3 2-16.5.3-24.8-5-8.2-5.3-13.2-12.1-14.9-20.5-1.6-8.4.1-16.6 5.3-24.6 5.2-8.1 11.9-13.1 20.2-15.1 8.4-1.9 16.6-.3 24.9 5 8.2 5.3 13.2 12.1 14.8 20.5 1.7 8.4 0 16.6-5.2 24.7-5.2 8-12 13-20.3 15zm13.4-36.3c-1.2-5.1-4.5-9.3-9.9-12.8s-10.6-4.7-15.8-3.7-9.3 4-12.4 8.9-4.1 9.8-2.8 14.8c1.2 5.1 4.5 9.3 9.9 12.8 5.5 3.5 10.7 4.8 15.8 3.7 5.1-.9 9.2-3.8 12.3-8.7s4.1-9.9 2.9-15zM303.6 416.5l9.6-5.4 43.3 20.4-19.2-34 11.4-6.4 31 55-9.6 5.4-43.4-20.5 19.2 34.1-11.3 6.4-31-55zM238.2 468.8c-49 0-96.9-17.4-134.8-49-38.3-32-64-76.7-72.5-125.9-2-11.9-3.1-24-3.1-35.9 0-36.5 9.6-72.6 27.9-104.4 2.1-3.6 6.7-4.9 10.3-2.8 3.6 2.1 4.9 6.7 2.8 10.3-16.9 29.5-25.9 63.1-25.9 96.9 0 11.1 1 22.3 2.9 33.4 7.9 45.7 31.8 87.2 67.3 116.9 35.2 29.3 79.6 45.5 125.1 45.5 11.1 0 22.3-1 33.4-2.9 4.1-.7 8 2 8.7 6.1.7 4.1-2 8-6.1 8.7-11.9 2-24 3.1-36 3.1z" />
+    <path d="M22.8 11.9l1.5 1.7-4.4 3.8 1.8 2 4-3.5 1.4 1.6-4 3.5 1.9 2.2 4.4-3.8 1.5 1.7-6.3 5.5-8-9.3 6.2-5.4zm17.1-1.2l5.9 4.8-2.8.8-4-3.3-1.5 4.9-2.7.8 2.3-7.2-5.6-4.6 2.8-.8 3.7 3 1.5-4.6 2.7-.8-2.3 7zm14.1.9l-.6 4.2-2.5-.4 1.8-12.1 4.9.7c2.6.4 4.1 2 3.7 4.6s-2.3 3.7-4.9 3.3l-2.4-.3zm3.2-5.4l-2.3-.3-.5 3.6 2.3.3c1.3.2 2.1-.5 2.2-1.5.1-1.1-.4-1.9-1.7-2.1zm14.5 2.4l2.2 1.4-5.4 8.4 4.8 3.1-1.2 1.9-7-4.5 6.6-10.3zm6.8 22.8c-1.9-2.9-.9-6.3 2.1-8.3 3.1-2 6.6-1.5 8.5 1.4s1 6.3-2.1 8.3c-3 2-6.6 1.4-8.5-1.4zm8.7-5.7c-1.1-1.6-3.1-1.8-5.1-.5s-2.7 3.3-1.6 4.9 3.2 1.8 5.2.5c1.9-1.3 2.6-3.3 1.5-4.9zm-.1 17c-1 .5-1.4 1.4-1.2 2.6s.8 2 1.8 1.8c.7-.1 1.1-.6 1.2-1.7l.2-2.2c.2-1.8.9-3.3 2.9-3.5 2.2-.3 4 1.3 4.3 3.9.4 2.8-.9 4.6-2.9 5.2l-.3-2.5c.8-.4 1.3-1.2 1.2-2.4-.2-1.1-.8-1.8-1.7-1.7-.7.1-1 .6-1.1 1.5l-.3 2.3c-.2 2-1.2 3.4-3 3.6-2.4.3-4-1.4-4.4-4-.4-2.7.7-4.8 3-5.5l.3 2.6zm-3.8 15.6l.5-2.5 12 2.5-.5 2.5-12-2.5zm-4.7 10.3c1.9-2.9 5.4-3.4 8.5-1.4s4 5.5 2.1 8.3-5.4 3.4-8.5 1.4-4-5.5-2.1-8.3zm8.7 5.6c1.1-1.6.4-3.6-1.7-4.9-2-1.3-4.1-1.2-5.1.5-1.1 1.6-.4 3.6 1.6 4.9 2 1.4 4.1 1.2 5.2-.5zm-24.7 8.1l1.8-1 9.1 4.2-4.1-7.1 2.1-1.2 6.1 10.6-2 1.2-8.6-4 3.9 6.7-2.1 1.2-6.2-10.6zM50 92.2C26.7 92.2 7.8 73.3 7.8 50c0-7.2 1.8-14.3 5.3-20.5.4-.7 1.3-1 2-.6s1 1.3.6 2a39.53 39.53 0 0 0-4.9 19c0 21.6 17.6 39.2 39.2 39.2 2.2 0 4.4-.2 6.6-.5.8-.1 1.6.4 1.7 1.2s-.4 1.6-1.2 1.7c-2.4.5-4.7.7-7.1.7z"/>
-</svg>
+</svg>

website/src/styles/accordion.module.sass

@@ -31,7 +31,7 @@
     width: $width
     height: $width
     flex: 0 0 $width
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
     color: var(--color-back)
     border-radius: 50%
     padding: 0.35rem

website/src/styles/alert.module.sass

@@ -10,7 +10,7 @@
     padding: 1rem
     box-shadow: var(--box-shadow)
     border-top: 2px solid
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
 .warning
     --alert-bg: var(--color-yellow-light)

website/src/styles/button.module.sass

@@ -2,7 +2,7 @@
     display: inline-block
     padding: 0.65rem 1.1rem 0.825rem
     margin-bottom: 1px
-    border: 2px solid var(--color-theme)
+    border: 2px solid var(--color-theme-dark)
     border-radius: 2em
     text-align: center
     transition: background-color, color 0.25s ease
@@ -18,7 +18,7 @@
     padding: 0.8em 1.1em 1em
 
 .primary
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
     color: var(--color-back)
 
     &:hover
@@ -27,7 +27,7 @@
 
 .secondary
     background: var(--color-back)
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
     &:hover
         color: var(--color-theme-dark)

website/src/styles/code.module.sass

@@ -152,7 +152,7 @@
 
 .juniper-button
     transition: background-color 0.15s ease
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
     margin: 0.5rem 0 1rem 2rem
 
     &:hover
@@ -182,8 +182,8 @@
         color: inherit !important
 
 .cli-arg-highlight
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
-    border-color: var(--color-theme)
+    border-color: var(--color-theme-dark)
     color: var(--color-back) !important
 
 .cli-arg-subtle

website/src/styles/footer.module.sass

@@ -32,7 +32,7 @@
 .copy
     border-top: 1px dotted var(--color-subtle)
     font-size: var(--font-size-xs)
-    color: var(--color-subtle-dark)
+    color: var(--color-front-dark)
     text-align: center
     width: 100%
 
@@ -42,4 +42,4 @@
     vertical-align: middle
 
     &:hover
-        color: var(--color-theme)
+        color: var(--color-theme-dark)

website/src/styles/infobox.module.sass

@@ -31,7 +31,7 @@
 
 .title
     font-weight: bold
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     display: block
     margin-bottom: var(--spacing-xs)
     font-size: var(--font-size-md)
@@ -41,7 +41,7 @@
         color: inherit
 
 .icon
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     vertical-align: baseline
     position: relative
     bottom: -2px

website/src/styles/landing.module.sass

@@ -2,22 +2,25 @@
 
 .header
     background: var(--color-theme)
-    padding-top: calc(var(--height-nav) * 1.5)
+    padding-top: var(--height-nav)
     width: 100%
     text-align: center
+    --header-top-margin: 27px
 
 .header-wrapper
     background: var(--color-theme)
-    background-position: top center
+    background-position: center var(--header-top-margin)
     background-repeat: repeat
     width: 100%
+    background-size: 799px 643px
 
 .header-content
-    background: transparent
+    background-position: center calc(-138px + var(--header-top-margin))
-    background-position: center -138px
     background-repeat: no-repeat
     width: 100%
-    min-height: 573px
+    min-height: calc(573px + var(--header-top-margin))
+    background-size: 1444px 573px
+    padding-top: var(--header-top-margin)
 
 .title
     font: normal 600 7rem/#{1} var(--font-secondary)
@@ -38,7 +41,7 @@
     border-radius: 1em
     padding: 0 1rem 0.15rem
     background: var(--color-back)
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
 .subtitle
     margin-top: 1rem

website/src/styles/layout.sass

@@ -301,13 +301,13 @@ p
         margin-bottom: 0
 
 a:focus
-    outline: 1px dotted var(--color-theme)
+    outline: 1px dotted var(--color-theme-dark)
 
 body [id]:target
     padding-top: calc(var(--height-nav) * 1.25) !important
 
 ::selection
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
     color: var(--color-back)
     text-shadow: none
 
@@ -524,7 +524,7 @@ body [id]:target
     display: block
     font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
 .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column
     color: var(--color-dark)

website/src/styles/link.module.sass

@@ -1,11 +1,11 @@
 .root
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     border-bottom: 1px solid
     transition: color 0.2s ease
     cursor: pointer
 
     &:hover
-        color: var(--color-theme-dark)
+        color: var(--color-front)
 
 .no-link-layout
     border: none

website/src/styles/main.module.sass

@@ -26,6 +26,7 @@
         background-color: var(--color-theme)
         background-repeat: repeat
         background-position: center top
+        background-size: 799px 643px
         z-index: -1
         min-height: 100vh
 

website/src/styles/navigation.module.sass

@@ -16,12 +16,15 @@
     z-index: 30
     width: 100%
     box-shadow: var(--box-shadow)
+    --docsearch-muted-color: var(--color-subtle-dark)
+    --docsearch-text-color: var(--docsearch-muted-color)
+    --docsearch-searchbox-background: var(--color-subtle-light)
 
 .logo
     min-width: 95px
     width: 95px
     height: 30px
-    color: var(--color-theme) !important
+    color: var(--color-theme-dark) !important
     vertical-align: middle
 
 .title
@@ -42,7 +45,7 @@
     font-family: var(--font-secondary)
     font-size: 1.6rem
     font-weight: bold
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
     &:not(:first-child)
         margin-left: 2em
@@ -77,11 +80,11 @@
         min-width: 100px
 
 .dropdown
-    --dropdown-text-color: var(--color-theme)
+    --dropdown-text-color: var(--color-theme-dark)
     font-family: var(--font-secondary)
     font-size: 1.6rem
     font-weight: bold
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     text-transform: uppercase
     margin-right: 0.5rem
     border: 2px solid var(--color-back)

website/src/styles/newsletter.module.sass

@@ -18,5 +18,5 @@
 .button
     font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     white-space: nowrap

website/src/styles/quickstart.module.sass

@@ -47,7 +47,7 @@
         background: var(--color-subtle-light)
 
     .input:focus
-        border: 1px solid var(--color-theme)
+        border: 1px solid var(--color-theme-dark)
         outline: none
 
     .radio + &
@@ -70,8 +70,8 @@
 
     .radio:checked + &
         color: var(--color-back)
-        border-color: var(--color-theme)
+        border-color: var(--color-theme-dark)
-        background: var(--color-theme)
+        background: var(--color-theme-dark)
 
     .checkbox + &:before
         $size: 18px
@@ -90,9 +90,9 @@
 
     .checkbox:checked + &:before
         // Embed "check" icon here for simplicity
-        background: var(--color-theme) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
+        background: var(--color-theme-dark) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
         background-size: contain
-        border-color: var(--color-theme)
+        border-color: var(--color-theme-dark)
 
 .field-extra:not(:empty):not(:first-child)
     margin-left: 1rem
@@ -167,7 +167,7 @@
     content: initial !important
 
 .prompt:before
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     margin-right: 1em
 
 .bash:before

website/src/styles/readnext.module.sass

@@ -18,4 +18,4 @@
     margin-left: 3rem
 
     &:hover
-        color: var(--color-theme)
+        color: var(--color-theme-dark)

website/src/styles/search.sass

@@ -1,7 +1,7 @@
 @import base
 
 .DocSearch-Modal
-    --docsearch-primary-color: var(--color-theme)
+    --docsearch-primary-color: var(--color-theme-dark)
     --docsearch-searchbox-background: var(--color-back)
     --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color)
     --docsearch-highlight-color: var(--docsearch-primary-color)

website/src/styles/sidebar.module.sass

@@ -32,10 +32,10 @@ $crumb-bar: 2px
     text-transform: uppercase
 
 .item
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
 
     &:hover
-        color: var(--color-theme-dark)
+        color: var(--color-front)
 
 .link
     border: none
@@ -62,11 +62,11 @@ $crumb-bar: 2px
     margin-bottom: math.div($crumb-bullet, 2)
     position: relative
     padding-left: 2rem
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     font-size: 1.2rem
 
     &:hover
-        color: var(--color-theme-dark)
+        color: var(--color-front)
 
     &:after
         width: $crumb-bullet

website/src/styles/table.module.sass

@@ -22,11 +22,11 @@ figure > .root
 .footer
     --color-inline-code-bg: var(--color-theme-opaque)
     background: var(--color-theme-light) !important
-    border-top: 2px solid var(--color-theme)
+    border-top: 2px solid var(--color-theme-dark)
 
     & > td:first-child
         font-family: var(--font-secondary)
-        color: var(--color-theme)
+        color: var(--color-theme-dark)
 
     & > td:nth-child(2) a
         border: 0
@@ -52,9 +52,9 @@ figure > .root
 .th
     font: bold var(--font-size-md)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
-    color: var(--color-theme)
+    color: var(--color-theme-dark)
     padding: 1rem 0.5rem
-    border-bottom: 2px solid var(--color-theme)
+    border-bottom: 2px solid var(--color-theme-dark)
     vertical-align: bottom
 
 .th-rotated
@@ -90,7 +90,7 @@ figure > .root
         top: -5px
         left: 10px
         display: inline-block
-        background: var(--color-theme)
+        background: var(--color-theme-dark)
         color: var(--color-back)
         padding: 0 5px 1px
         font-size: 0.85rem

website/src/styles/tag.module.sass

@@ -1,7 +1,7 @@
 .root
     display: inline-block
     font: bold var(--font-size-xs)/#{1} var(--font-secondary)
-    background: var(--color-theme)
+    background: var(--color-theme-dark)
     color: var(--color-back)
     padding: 2px 6px 4px
     border-radius: 1em

website/src/styles/typography.module.sass

@@ -21,7 +21,7 @@
         content: "\00b6"
         font-size: 0.9em
         font-weight: normal
-        color: var(--color-subtle)
+        color: var(--color-subtle-dark)
         position: absolute
         top: 0.15em
         left: -2.85rem
@@ -32,7 +32,7 @@
         opacity: 1
 
     &:active:before
-        color: var(--color-theme)
+        color: var(--color-theme-dark)
 
     &:target
         display: inline-block

website/src/templates/universe.js

@@ -81,10 +81,11 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
                                     }
                                     const url = `/universe/project/${id}`
                                     const header = youtube && (
-                                        // eslint-disable-next-line @next/next/no-img-element
+                                        <Image
-                                        <img
                                             src={`https://img.youtube.com/vi/${youtube}/0.jpg`}
-                                            alt=""
+                                            alt={title}
+                                            width="480"
+                                            height="360"
                                             style={{
                                                 clipPath: 'inset(12.9% 0)',
                                                 marginBottom: 'calc(-12.9% + 1rem)',
@@ -195,6 +196,19 @@ const SpaCyVersion = ({ version }) => {
     ))
 }
 
+const ImageGitHub = ({ url, isRounded, title }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+        style={{
+            borderRadius: isRounded ? '1em' : 0,
+            marginRight: '0.5rem',
+            verticalAlign: 'middle',
+        }}
+        src={`https://img.shields.io/github/${url}`}
+        alt={`${title} on GitHub`}
+    />
+)
+
 const Project = ({ data, components }) => (
     <>
         <Title title={data.title || data.id} teaser={data.slogan} image={data.thumb}>
@@ -203,23 +217,20 @@ const Project = ({ data, components }) => (
                     {data.spacy_version && <SpaCyVersion version={data.spacy_version} />}
                     {data.github && (
                         <Link to={`https://github.com/${data.github}`} noLinkLayout>
-                            {[
+                            <ImageGitHub
-                                `release/${data.github}/all.svg?style=flat-square`,
+                                title={data.title || data.id}
-                                `license/${data.github}.svg?style=flat-square`,
+                                url={`release/${data.github}/all.svg?style=flat-square`}
-                                `stars/${data.github}.svg?style=social&label=Stars`,
+                                isRounded
-                            ].map((url, i) => (
+                            />
-                                // eslint-disable-next-line @next/next/no-img-element
+                            <ImageGitHub
-                                <img
+                                title={data.title || data.id}
-                                    style={{
+                                url={`license/${data.github}.svg?style=flat-square`}
-                                        borderRadius: '1em',
+                                isRounded
-                                        marginRight: '0.5rem',
+                            />
-                                        verticalAlign: 'middle',
+                            <ImageGitHub
-                                    }}
+                                title={data.title || data.id}
-                                    key={i}
+                                url={`stars/${data.github}.svg?style=social&label=Stars`}
-                                    src={`https://img.shields.io/github/${url}`}
+                            />
-                                    alt=""
-                                />
-                            ))}
                         </Link>
                     )}
                 </p>

website/src/widgets/project.js

@@ -29,7 +29,11 @@ export default function Project({
     return (
         <Infobox title={header} emoji="🪐">
             {children}
-            <CopyInput text={text} prefix="$" />
+            <CopyInput
+                text={text}
+                prefix="$"
+                description="Example bash command to start with an end-to-end template"
+            />
         </Infobox>
     )
 }

website/src/widgets/styleguide.js

@@ -6,9 +6,9 @@ import Link from '../components/link'
 import SVG from 'react-inlinesvg'
 
 import logoSpacy from '../images/logo.svg'
-import patternBlue from '../images/pattern_blue.jpg'
+import patternBlue from '../images/pattern_blue.png'
-import patternGreen from '../images/pattern_green.jpg'
+import patternGreen from '../images/pattern_green.png'
-import patternPurple from '../images/pattern_purple.jpg'
+import patternPurple from '../images/pattern_purple.png'
 
 const colors = {
     dark: 'var(--color-front)',