From 4c609757a41c18807135b06a4f417f82dc8992e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Tue, 24 Jan 2023 17:01:17 +0100 Subject: [PATCH] Extract `InlineCode` component into own file --- website/pages/index.tsx | 2 +- website/src/components/code.js | 17 ----------------- website/src/components/embed.js | 2 +- website/src/components/inlineCode.js | 23 +++++++++++++++++++++++ website/src/components/title.js | 2 +- website/src/remark.js | 3 ++- website/src/templates/index.js | 2 +- website/src/templates/models.js | 2 +- website/src/templates/universe.js | 2 +- website/src/widgets/changelog.js | 2 +- website/src/widgets/languages.js | 2 +- website/src/widgets/project.js | 2 +- 12 files changed, 34 insertions(+), 27 deletions(-) create mode 100644 website/src/components/inlineCode.js diff --git a/website/pages/index.tsx b/website/pages/index.tsx index 3f08ec007..e76778b58 100644 --- a/website/pages/index.tsx +++ b/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' diff --git a/website/src/components/code.js b/website/src/components/code.js index 735d2810c..120c94364 100644 --- a/website/src/components/code.js +++ b/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 ( - - {children} - - ) -} - -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() diff --git a/website/src/components/embed.js b/website/src/components/embed.js index cc94c9738..1dfc3cefb 100644 --- a/website/src/components/embed.js +++ b/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' diff --git a/website/src/components/inlineCode.js b/website/src/components/inlineCode.js new file mode 100644 index 000000000..53c30e649 --- /dev/null +++ b/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 ( + + {children} + + ) +} +InlineCode.propTypes = { + wrap: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.node, +} diff --git a/website/src/components/title.js b/website/src/components/title.js index 64754d7d6..c79b094ef 100644 --- a/website/src/components/title.js +++ b/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' diff --git a/website/src/remark.js b/website/src/remark.js index e9f033475..fe067a76f 100644 --- a/website/src/remark.js +++ b/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' diff --git a/website/src/templates/index.js b/website/src/templates/index.js index 80b5a24d4..245ea3f0f 100644 --- a/website/src/templates/index.js +++ b/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' diff --git a/website/src/templates/models.js b/website/src/templates/models.js index 517d5f5ab..3d486b971 100644 --- a/website/src/templates/models.js +++ b/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' diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js index 2767a86ae..c5dd71ef2 100644 --- a/website/src/templates/universe.js +++ b/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' diff --git a/website/src/widgets/changelog.js b/website/src/widgets/changelog.js index 2db06b78d..fafc252fb 100644 --- a/website/src/widgets/changelog.js +++ b/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' diff --git a/website/src/widgets/languages.js b/website/src/widgets/languages.js index 9f5f9e23f..1ddf95675 100644 --- a/website/src/widgets/languages.js +++ b/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' diff --git a/website/src/widgets/project.js b/website/src/widgets/project.js index 5841e93e8..339f1e054 100644 --- a/website/src/widgets/project.js +++ b/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'