mirror of
https://github.com/explosion/spaCy.git
synced 2026-01-09 10:11:24 +03:00
e6a5840c68
* Extract `CodeBlock` component into own file * Extract `InlineCode` component into own file * Extract `TypeAnnotation` component into own file * Convert named `export` to `default export` * Remove unused `export` * Simplify `TypeAnnotation` to remove dependency for Prism * Load `Code` component dynamically * Extract `MarkdownToReact` component into own file * WIP Code Dynamic * Load `MarkdownToReact` component dynamically * Extract `htmlToReact` to own file * Load `htmlToReact` component dynamically * Dynamically load `Juniper`
71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classNames from 'classnames'
|
|
|
|
import Icon from './icon'
|
|
import Link from './link'
|
|
import classes from '../styles/code.module.sass'
|
|
import Code from './codeDynamic'
|
|
|
|
const defaultErrorMsg = `Can't fetch code example from GitHub :(
|
|
|
|
Please use the link below to view the example. If you've come across
|
|
a broken link, we always appreciate a pull request to the repository,
|
|
or a report on the issue tracker. Thanks!`
|
|
|
|
const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
|
|
const [initialized, setInitialized] = useState(false)
|
|
const [code, setCode] = useState(errorMsg)
|
|
const codeClassNames = classNames(classes.code, classes['max-height'], className)
|
|
|
|
const rawUrl = url
|
|
.replace('github.com', 'raw.githubusercontent.com')
|
|
.replace('/blob', '')
|
|
.replace('/tree', '')
|
|
|
|
useEffect(() => {
|
|
if (!initialized) {
|
|
setCode(null)
|
|
fetch(rawUrl)
|
|
.then((res) => res.text().then((text) => ({ text, ok: res.ok })))
|
|
.then(({ text, ok }) => {
|
|
setCode(ok ? text : errorMsg)
|
|
})
|
|
.catch((err) => {
|
|
setCode(errorMsg)
|
|
console.error(err)
|
|
})
|
|
setInitialized(true)
|
|
}
|
|
}, [initialized, rawUrl, errorMsg])
|
|
|
|
return (
|
|
<>
|
|
<header className={classes.header}>
|
|
<Link to={url} noLinkLayout>
|
|
<Icon name="github" width={16} inline />
|
|
<code
|
|
className={classNames(classes['inline-code'], classes['inline-code-dark'])}
|
|
>
|
|
{rawUrl.split('.com/')[1]}
|
|
</code>
|
|
</Link>
|
|
</header>
|
|
{code && (
|
|
<Code className={codeClassNames} lang={lang}>
|
|
{code}
|
|
</Code>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
GitHubCode.propTypes = {
|
|
url: PropTypes.string.isRequired,
|
|
lang: PropTypes.string,
|
|
errorMsg: PropTypes.string,
|
|
className: PropTypes.string,
|
|
}
|
|
|
|
export default React.memo(GitHubCode)
|