Extract CodeBlock component into own file

website/src/components/code.js

@@ -26,18 +26,6 @@ import { binderBranch } from '../../meta/dynamicMeta.mjs'
 const WRAP_THRESHOLD = 30
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
 
-const CodeBlock = (props) => (
-    <Pre>
-        <Code {...props} />
-    </Pre>
-)
-
-export default CodeBlock
-
-export const Pre = (props) => {
-    return <pre className={classes['pre']}>{props.children}</pre>
-}
-
 export const InlineCode = ({ wrap = false, className, children, ...props }) => {
     const codeClassNames = classNames(classes['inline-code'], className, {
         [classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),

website/src/components/codeBlock.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Code } from './code'
+import classes from '../styles/code.module.sass'
+
+export const Pre = (props) => {
+    return <pre className={classes['pre']}>{props.children}</pre>
+}
+
+const CodeBlock = (props) => (
+    <Pre>
+        <Code {...props} />
+    </Pre>
+)
+export default CodeBlock

website/src/components/landing.js

@@ -11,7 +11,7 @@ import overlayLegacy from '../images/pattern_landing_legacy.png'
 import Grid from './grid'
 import { Content } from './main'
 import Button from './button'
-import CodeBlock from './code'
+import CodeBlock from './codeBlock'
 import { H1, H2, H3 } from './typography'
 import Link from './link'
 import classes from '../styles/landing.module.sass'

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 CodeBlock, { Pre, Code, InlineCode, TypeAnnotation } from './components/code'
+import { Code, InlineCode, TypeAnnotation } from './components/code'
+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'
 import Accordion from './components/accordion'

website/src/templates/models.js

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

website/src/templates/universe.js

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