Fix small issues in the docs [ci skip]

website/docs/usage/adding-languages.md

@@ -39,7 +39,7 @@ and morphological analysis.
 
 </div>
 
-<Infobox title="Table of Contents">
+<Infobox title="Table of Contents" id="toc">
 
 - [Language data 101](#101)
 - [The Language subclass](#language-subclass)

website/docs/usage/linguistic-features.md

@@ -298,9 +298,9 @@ different languages, see the
 The best way to understand spaCy's dependency parser is interactively. To make
 this easier, spaCy v2.0+ comes with a visualization module. You can pass a `Doc`
 or a list of `Doc` objects to displaCy and run
-[`displacy.serve`](top-level#displacy.serve) to run the web server, or
-[`displacy.render`](top-level#displacy.render) to generate the raw markup. If
-you want to know how to write rules that hook into some type of syntactic
+[`displacy.serve`](/api/top-level#displacy.serve) to run the web server, or
+[`displacy.render`](/api/top-level#displacy.render) to generate the raw markup.
+If you want to know how to write rules that hook into some type of syntactic
 construction, just plug the sentence into the visualizer and see how spaCy
 annotates it.
 

website/docs/usage/models.md

@@ -41,7 +41,7 @@ contribute to model development.
 > If a model is available for a language, you can download it using the
 > [`spacy download`](/api/cli#download) command. In order to use languages that
 > don't yet come with a model, you have to import them directly, or use
-> [`spacy.blank`](api/top-level#spacy.blank):
+> [`spacy.blank`](/api/top-level#spacy.blank):
 >
 > ```python
 > from spacy.lang.fi import Finnish

website/docs/usage/processing-pipelines.md

@@ -46,7 +46,8 @@ components. spaCy then does the following:
 3. Add each pipeline component to the pipeline in order, using
    [`add_pipe`](/api/language#add_pipe).
 4. Make the **model data** available to the `Language` class by calling
-   [`from_disk`](language#from_disk) with the path to the model data directory.
+   [`from_disk`](/api/language#from_disk) with the path to the model data
+   directory.
 
 So when you call this...
 

website/docs/usage/spacy-101.md

@@ -50,7 +50,7 @@ systems, or to pre-process text for **deep learning**.
 
 </div>
 
-<Infobox title="Table of contents">
+<Infobox title="Table of contents" id="toc">
 
 - [Features](#features)
 - [Linguistic annotations](#annotations)

website/docs/usage/v2.md

@@ -39,7 +39,7 @@ also add your own custom attributes, properties and methods to the `Doc`,
 
 </div>
 
-<Infobox title="Table of Contents">
+<Infobox title="Table of Contents" id="toc">
 
 - [Summary](#summary)
 - [New features](#features)

website/docs/usage/visualizers.md

@@ -75,7 +75,7 @@ arcs.
 | `font`    | unicode | Font name or font family for all text.                      | `"Arial"`   |
 
 For a list of all available options, see the
-[`displacy` API documentation](top-level#displacy_options).
+[`displacy` API documentation](/api/top-level#displacy_options).
 
 > #### Options example
 >

website/src/components/accordion.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -6,26 +6,33 @@ import Link from './link'
 import classes from '../styles/accordion.module.sass'
 
 const Accordion = ({ title, id, expanded, children }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded)
+    const [isExpanded, setIsExpanded] = useState(true)
     const contentClassNames = classNames(classes.content, {
         [classes.hidden]: !isExpanded,
     })
     const iconClassNames = classNames({
         [classes.hidden]: isExpanded,
     })
+    // Make sure accordion is expanded if JS is disabled
+    useEffect(() => setIsExpanded(expanded), [])
     return (
-        <section id={id}>
+        <section className="accordion" id={id}>
             <div className={classes.root}>
-                <h3>
+                <h4>
                     <button
                         className={classes.button}
                         aria-expanded={String(isExpanded)}
                         onClick={() => setIsExpanded(!isExpanded)}
                     >
                         <span>
-                            {title}
+                            <span className="heading-text">{title}</span>
                             {isExpanded && !!id && (
-                                <Link to={`#${id}`} className={classes.anchor} hidden>
+                                <Link
+                                    to={`#${id}`}
+                                    className={classes.anchor}
+                                    hidden
+                                    onClick={event => event.stopPropagation()}
+                                >
                                     &para;
                                 </Link>
                             )}
@@ -42,7 +49,7 @@ const Accordion = ({ title, id, expanded, children }) => {
                             <rect height={2} width={8} x={1} y={4} />
                         </svg>
                     </button>
-                </h3>
+                </h4>
                 <div className={contentClassNames}>{children}</div>
             </div>
         </section>

website/src/components/infobox.js

@@ -5,13 +5,13 @@ import classNames from 'classnames'
 import Icon from './icon'
 import classes from '../styles/infobox.module.sass'
 
-const Infobox = ({ title, variant, className, children }) => {
+const Infobox = ({ title, id, variant, className, children }) => {
     const infoboxClassNames = classNames(classes.root, className, {
         [classes.warning]: variant === 'warning',
         [classes.danger]: variant === 'danger',
     })
     return (
-        <aside className={infoboxClassNames}>
+        <aside className={infoboxClassNames} id={id}>
             {title && (
                 <h4 className={classes.title}>
                     {variant !== 'default' && (
@@ -31,6 +31,7 @@ Infobox.defaultProps = {
 
 Infobox.propTypes = {
     title: PropTypes.string,
+    id: PropTypes.string,
     variant: PropTypes.oneOf(['default', 'warning', 'danger']),
     className: PropTypes.string,
     children: PropTypes.node.isRequired,

website/src/components/juniper.js

@@ -232,6 +232,7 @@ Juniper.defaultProps = {
     theme: 'default',
     isolateCells: true,
     useBinder: true,
+    storageKey: 'juniper',
     useStorage: true,
     storageExpire: 60,
     debug: false,

website/src/templates/models.js

@@ -105,7 +105,7 @@ const Help = ({ children }) => (
 
 const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExamples, licenses }) => {
     const [initialized, setInitialized] = useState(false)
-    const [isError, setIsError] = useState(false)
+    const [isError, setIsError] = useState(true)
     const [meta, setMeta] = useState({})
     const { type, genre, size } = getModelComponents(name)
     const version = useMemo(() => getLatestVersion(name, compatibility), [name, compatibility])
@@ -113,6 +113,7 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
     useEffect(() => {
         window.dispatchEvent(new Event('resize')) // scroll position for progress
         if (!initialized && version) {
+            setIsError(false)
             fetch(`${baseUrl}/meta/${name}-${version}.json`)
                 .then(res => res.json())
                 .then(json => {
@@ -134,7 +135,7 @@ const Model = ({ name, langId, langName, baseUrl, repo, compatibility, hasExampl
     const author = !meta.url ? meta.author : <Link to={meta.url}>{meta.author}</Link>
     const licenseUrl = licenses[meta.license] ? licenses[meta.license].url : null
     const license = licenseUrl ? <Link to={licenseUrl}>{meta.license}</Link> : meta.license
-    const hasInteractiveCode = size === 'sm' && hasExamples
+    const hasInteractiveCode = size === 'sm' && hasExamples && !isError
 
     const rows = [
         { label: 'Language', tag: langId, content: langName },