From b1e160956f5dbc0a0cd9d22338889cd2866a3290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 24 Jan 2023 16:49:40 +0100
Subject: [PATCH] Extract `CodeBlock` component into own file

---
 website/src/components/code.js      | 12 ------------
 website/src/components/codeBlock.js | 14 ++++++++++++++
 website/src/components/landing.js   |  2 +-
 website/src/remark.js               |  3 ++-
 website/src/templates/models.js     |  3 ++-
 website/src/templates/universe.js   |  3 ++-
 6 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 website/src/components/codeBlock.js

diff --git a/website/src/components/code.js b/website/src/components/code.js
index 5c9afd978..735d2810c 100644
--- a/website/src/components/code.js
+++ b/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),
diff --git a/website/src/components/codeBlock.js b/website/src/components/codeBlock.js
new file mode 100644
index 000000000..f151f9624
--- /dev/null
+++ b/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
diff --git a/website/src/components/landing.js b/website/src/components/landing.js
index 7d8b455ef..9456e080b 100644
--- a/website/src/components/landing.js
+++ b/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'
diff --git a/website/src/remark.js b/website/src/remark.js
index 1aae589e3..e9f033475 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 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'
diff --git a/website/src/templates/models.js b/website/src/templates/models.js
index 38f6f4b3d..517d5f5ab 100644
--- a/website/src/templates/models.js
+++ b/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'
diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js
index e72356924..2767a86ae 100644
--- a/website/src/templates/universe.js
+++ b/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'