Remove references to Juniper

website/docs/styleguide.mdx

@@ -420,8 +420,8 @@ matches = matcher(doc)
 
 Adding `{executable="true"}` to the title turns the code into an executable
 block, powered by [Binder](https://mybinder.org) and
-[Juniper](https://github.com/ines/juniper). If JavaScript is disabled, the
+[Jupyterlabs](https://github.com/jupyterlab/jupyterlab). If JavaScript is
-interactive widget defaults to a regular code block.
+disabled, the interactive widget defaults to a regular code block.
 
 > #### Markdown
 >

website/src/components/code.js

@@ -255,9 +255,9 @@ export default class Code extends React.Component {
         }
         if (!!executable) {
             return (
-                <JuniperWrapper title={title} lang={lang}>
+                <CodeInteractiveWrapper title={title} lang={lang}>
                     {children}
-                </JuniperWrapper>
+                </CodeInteractiveWrapper>
             )
         }
 
@@ -274,16 +274,15 @@ export default class Code extends React.Component {
     }
 }
 
-const JuniperDynamic = dynamic(() => import('./juniper'))
+const CodeInteractiveDynamic = dynamic(() => import('./codeInteractive'))
 
-const JuniperWrapper = ({ title, lang, children }) => {
+const CodeInteractiveWrapper = ({ title, lang, children }) => {
     const { binderUrl, binderVersion } = siteMetadata
-    const juniperTitle = title || 'Editable Code'
     return (
-        <div className={classes['juniper-wrapper']}>
+        <div className={classes['code-interactive-wrapper']}>
-            <h4 className={classes['juniper-title']}>
+            <h4 className={classes['code-interactive-title']}>
-                {juniperTitle}
+                {title || 'Editable Code'}
-                <span className={classes['juniper-meta']}>
+                <span className={classes['code-interactive-meta']}>
                     spaCy v{binderVersion} &middot; Python 3 &middot; via{' '}
                     <Link to="https://mybinder.org/" noLinkLayout>
                         Binder
@@ -291,19 +290,19 @@ const JuniperWrapper = ({ title, lang, children }) => {
                 </span>
             </h4>
 
-            <JuniperDynamic
+            <CodeInteractiveDynamic
                 repo={binderUrl}
                 branch={binderBranch}
                 lang={lang}
                 classNames={{
-                    cell: classes['juniper-cell'],
+                    cell: classes['code-interactive-cell'],
-                    input: classes['juniper-input'],
+                    input: classes['code-interactive-input'],
-                    button: classes['juniper-button'],
+                    button: classes['code-interactive-button'],
-                    output: classes['juniper-output'],
+                    output: classes['code-interactive-output'],
                 }}
             >
                 {children}
-            </JuniperDynamic>
+            </CodeInteractiveDynamic>
         </div>
     )
 }

website/src/components/codeInteractive.js

@@ -211,7 +211,7 @@ export default class Juniper extends React.Component {
                             highlightActiveLine: false,
                             highlightSelectionMatches: false,
                         }}
-                        className={classes['juniper-input']}
+                        className={classes['code-interactive-input']}
                         onChange={(value) => {
                             this.setState({ code: value })
                         }}
@@ -222,7 +222,7 @@ export default class Juniper extends React.Component {
                 </button>
                 {this.state.output !== null && (
                     <pre
-                        className={`${this.props.classNames.output} ${classes['juniper-input']} ${classes.wrap}`}
+                        className={`${this.props.classNames.output} ${classes['code-interactive-input']} ${classes.wrap}`}
                     >
                         {this.state.output}
                     </pre>
@@ -242,7 +242,7 @@ Juniper.defaultProps = {
     theme: 'default',
     isolateCells: true,
     useBinder: true,
-    storageKey: 'juniper',
+    storageKey: 'codeInteractive',
     useStorage: true,
     storageExpire: 60,
     debug: false,
@@ -250,10 +250,10 @@ Juniper.defaultProps = {
     msgLoading: 'Loading...',
     msgError: 'Connecting failed. Please reload and try again.',
     classNames: {
-        cell: 'juniper-cell',
+        cell: 'code-interactive-cell',
-        input: 'juniper-input',
+        input: 'code-interactive-input',
-        button: 'juniper-button',
+        button: 'code-interactive-button',
-        output: 'juniper-output',
+        output: 'code-interactive-output',
     },
 }
 

website/src/styles/code.module.sass

@@ -14,15 +14,15 @@
     height: 450px
 
 .code,
-.juniper-input pre,
+.code-interactive-input pre,
-.juniper-output
+.code-interactive-output
     font: var(--font-size-code)/var(--line-height-code) var(--font-code) !important
     font-variant-ligatures: none !important
     -webkit-font-smoothing: subpixel-antialiased
     -moz-osx-font-smoothing: auto
 
 .code,
-.juniper-input pre
+.code-interactive-input pre
     display: block
     padding: 1.75em 1.5em
 
@@ -97,7 +97,7 @@
     word-wrap: anywhere
 
 .title,
-.juniper-button
+.code-interactive-button
     font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
     display: inline-block
@@ -121,23 +121,23 @@
     padding: 1.25rem 1rem 1rem
     font-size: var(--font-size-sm)
 
-.juniper-wrapper
+.code-interactive-wrapper
     background: var(--color-dark-secondary)
     padding: 5px
 
-.juniper-title
+.code-interactive-title
     font: bold var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
     text-align: center
     padding: 0.25rem 1rem 0.5rem
     display: flex
     justify-content: space-between
 
-.juniper-cell
+.code-interactive-cell
     border: 0
     background: var(--color-front)
     padding: 1rem 0
 
-.juniper-input
+.code-interactive-input
     padding-top: 1rem
     padding-bottom: 2rem
     padding-left: 2rem
@@ -147,10 +147,10 @@
         padding: 0
         height: auto
 
-.juniper-output
+.code-interactive-output
     font: var(--font-size-xs) var(--font-code)
 
-.juniper-button
+.code-interactive-button
     transition: background-color 0.15s ease
     background: var(--color-theme-dark)
     margin: 0.5rem 0 1rem 2rem
@@ -158,7 +158,7 @@
     &:hover
         background: var(--color-theme-dark)
 
-.juniper-meta
+.code-interactive-meta
     font-size: var(--font-size-xs)
     font-weight: normal
     padding-top: 0.1rem