Extract InlineCode component into own file

website/pages/index.tsx

@@ -13,7 +13,7 @@ import {
     LandingBanner,
 } from '../src/components/landing'
 import { H2 } from '../src/components/typography'
-import { InlineCode } from '../src/components/code'
+import { InlineCode } from '../src/components/inlineCode'
 import { Ul, Li } from '../src/components/list'
 import Button from '../src/components/button'
 import Link from '../src/components/link'

website/src/components/code.js

@@ -26,23 +26,6 @@ import { binderBranch } from '../../meta/dynamicMeta.mjs'
 const WRAP_THRESHOLD = 30
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
 
-export const InlineCode = ({ wrap = false, className, children, ...props }) => {
-    const codeClassNames = classNames(classes['inline-code'], className, {
-        [classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
-    })
-    return (
-        <code className={codeClassNames} {...props}>
-            {children}
-        </code>
-    )
-}
-
-InlineCode.propTypes = {
-    wrap: PropTypes.bool,
-    className: PropTypes.string,
-    children: PropTypes.node,
-}
-
 function linkType(el, showLink = true) {
     if (!isString(el) || !el.length) return el
     const elStr = el.trim()

website/src/components/embed.js

@@ -5,7 +5,7 @@ import ImageNext from 'next/image'
 
 import Link from './link'
 import Button from './button'
-import { InlineCode } from './code'
+import { InlineCode } from './inlineCode'
 import { MarkdownToReact } from './util'
 
 import classes from '../styles/embed.module.sass'

website/src/components/inlineCode.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isString } from './util'
+import classes from '../styles/code.module.sass'
+
+const WRAP_THRESHOLD = 30
+
+export const InlineCode = ({ wrap = false, className, children, ...props }) => {
+    const codeClassNames = classNames(classes['inline-code'], className, {
+        [classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
+    })
+    return (
+        <code className={codeClassNames} {...props}>
+            {children}
+        </code>
+    )
+}
+InlineCode.propTypes = {
+    wrap: PropTypes.bool,
+    className: PropTypes.string,
+    children: PropTypes.node,
+}

website/src/components/title.js

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import Button from './button'
 import Tag from './tag'
 import { OptionalLink } from './link'
-import { InlineCode } from './code'
+import { InlineCode } from './inlineCode'
 import { H1, Label, InlineList, Help } from './typography'
 import Icon from './icon'
 

website/src/remark.js

@@ -1,7 +1,8 @@
 import Link from './components/link'
 import Section, { Hr } from './components/section'
 import { Table, Tr, Th, Tx, Td } from './components/table'
-import { Code, InlineCode, TypeAnnotation } from './components/code'
+import { Code, TypeAnnotation } from './components/code'
+import { InlineCode } from './components/inlineCode'
 import CodeBlock, { Pre } from './components/codeBlock'
 import { Ol, Ul, Li } from './components/list'
 import { H2, H3, H4, H5, P, Abbr, Help, Label } from './components/typography'

website/src/templates/index.js

@@ -13,7 +13,7 @@ import Progress from '../components/progress'
 import Footer from '../components/footer'
 import SEO from '../components/seo'
 import Link from '../components/link'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import Alert from '../components/alert'
 import Search from '../components/search'
 

website/src/templates/models.js

@@ -5,7 +5,7 @@ import Title from '../components/title'
 import Section from '../components/section'
 import Button from '../components/button'
 import Aside from '../components/aside'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import CodeBlock from '../components/codeBlock'
 import { Table, Tr, Td, Th } from '../components/table'
 import Tag from '../components/tag'

website/src/templates/universe.js

@@ -8,7 +8,7 @@ import Grid from '../components/grid'
 import Button from '../components/button'
 import Icon from '../components/icon'
 import Tag from '../components/tag'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import CodeBlock from '../components/codeBlock'
 import Aside from '../components/aside'
 import Sidebar from '../components/sidebar'

website/src/widgets/changelog.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Fragment } from 'react'
 import { window } from 'browser-monads'
 
 import Link from '../components/link'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import { Label, H3 } from '../components/typography'
 import { Table, Tr, Th, Td } from '../components/table'
 import Infobox from '../components/infobox'

website/src/widgets/languages.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Link from '../components/link'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import { Table, Tr, Th, Td } from '../components/table'
 import { Ul, Li } from '../components/list'
 import Infobox from '../components/infobox'

website/src/widgets/project.js

@@ -3,7 +3,7 @@ import React from 'react'
 import CopyInput from '../components/copy'
 import Infobox from '../components/infobox'
 import Link from '../components/link'
-import { InlineCode } from '../components/code'
+import { InlineCode } from '../components/inlineCode'
 import { projectsRepo } from '../components/util'
 
 const COMMAND = 'python -m spacy project clone'