diff --git a/website/docs/styleguide.mdx b/website/docs/styleguide.mdx index 276137aab..a9a908970 100644 --- a/website/docs/styleguide.mdx +++ b/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 -interactive widget defaults to a regular code block. +[Jupyterlabs](https://github.com/jupyterlab/jupyterlab). If JavaScript is +disabled, the interactive widget defaults to a regular code block. > #### Markdown > diff --git a/website/src/components/code.js b/website/src/components/code.js index 09c2fabfc..3bcac5d70 100644 --- a/website/src/components/code.js +++ b/website/src/components/code.js @@ -255,9 +255,9 @@ export default class Code extends React.Component { } if (!!executable) { return ( - + {children} - + ) } @@ -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 ( -
-

- {juniperTitle} - +
+

+ {title || 'Editable Code'} + spaCy v{binderVersion} · Python 3 · via{' '} Binder @@ -291,19 +290,19 @@ const JuniperWrapper = ({ title, lang, children }) => {

- {children} - +
) } diff --git a/website/src/components/juniper.js b/website/src/components/codeInteractive.js similarity index 96% rename from website/src/components/juniper.js rename to website/src/components/codeInteractive.js index 3f906388e..49c9a9bd1 100644 --- a/website/src/components/juniper.js +++ b/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 { {this.state.output !== null && (
                         {this.state.output}
                     
@@ -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', - input: 'juniper-input', - button: 'juniper-button', - output: 'juniper-output', + cell: 'code-interactive-cell', + input: 'code-interactive-input', + button: 'code-interactive-button', + output: 'code-interactive-output', }, } diff --git a/website/src/styles/code.module.sass b/website/src/styles/code.module.sass index b619c71cc..8df71715a 100644 --- a/website/src/styles/code.module.sass +++ b/website/src/styles/code.module.sass @@ -14,15 +14,15 @@ height: 450px .code, -.juniper-input pre, -.juniper-output +.code-interactive-input pre, +.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