Add basic CodeBlock component

Author: chiedo

content/github/getting-started-with-github/access-permissions-on-github.md

@@ -18,12 +18,12 @@ A repository owned by a user account has two permission levels: the *repository
 
 ### Organization accounts
 <!--react-->
-<BlueContent>
-    {`var i;
-    for (i = 0; i < cars.length; i++) {
-      text += cars[i] + "<br>";
-    }`}
-</BlueContent>
+<CodeBlock>
+{`var i;
+for (i = 0; i < cars.length; i++) {
+  text += cars[i] + "<br>";
+}`}
+</CodeBlock>
 <!--end-react-->
 
 Organization members can have *owner*{% if currentVersion == "free-pro-team@latest" %}, *billing manager*,{% endif %} or *member* roles. Owners have complete administrative access to your organization{% if currentVersion == "free-pro-team@latest" %}, while billing managers can manage billing settings{% endif %}. Member is the default role for everyone else. You can manage access permissions for multiple members at a time with teams. For more information, see:
@@ -32,8 +32,6 @@ Organization members can have *owner*{% if currentVersion == "free-pro-team@late
 - "[Repository permission levels for an organization](/articles/repository-permission-levels-for-an-organization)"
 - "[About teams](/articles/about-teams)"
 
-<!--react--><BlueContent>More blue content!</BlueContent><!--end-react-->
-
 <!--react--><RedContent>Red content!</RedContent><!--end-react-->
 
 <!--react--><Timer /><!--end-react-->

javascripts/index.js

@@ -16,7 +16,7 @@ import experiment from './experiment'
 import copyCode from './copy-code'
 import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
-import BlueContent from '../react/BlueContent'
+import CodeBlock from '../react/CodeBlock'
 import RedContent from '../react/RedContent'
 import Timer from '../react/Timer'
 
@@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 })
 
 module.export = {
-  BlueContent,
+  CodeBlock,
   RedContent,
   Timer
 }

lib/react-engine.js

@@ -3,7 +3,7 @@ const React = require('react')
 const { renderToString } = require('react-dom/server')
 const mdx = require('@mdx-js/mdx')
 const { MDXProvider, mdx: createElement } = require('@mdx-js/react')
-const BlueContent = require('../dist/react/BlueContent')
+const CodeBlock = require('../dist/react/CodeBlock')
 const RedContent = require('../dist/react/RedContent')
 const Timer = require('../dist/react/Timer')
 
@@ -17,7 +17,7 @@ const transform = code =>
 
 const renderReact = async componentStr => {
   let componentName
-  if (componentStr.trim().startsWith('<BlueContent')) componentName = 'bluecontent'
+  if (componentStr.trim().startsWith('<CodeBlock')) componentName = 'codeblock'
   if (componentStr.trim().startsWith('<RedContent')) componentName = 'redcontent'
   if (componentStr.trim().startsWith('<Timer')) componentName = 'timer'
 

react/BlueContent.js renamed to react/CodeBlock.js

@@ -1,22 +1,21 @@
 const React = require('react')
 const ReactDOM = require('react-dom')
 
-const BlueContent = (props) => {
+const CodeBlock = (props) => {
   return (
-    <div style={{ color: 'blue' }}>
+    <pre>
       {props.children}
-      {props.extra}
-    </div>
+    </pre>
   )
 }
 
 if (typeof window === 'undefined') {
 } else {
-  const componentContainers = document.querySelectorAll('.react-component-bluecontent')
+  const componentContainers = document.querySelectorAll('.react-component-codeblock')
 
   for (const componentContainer of componentContainers) {
-    ReactDOM.render(React.createElement(BlueContent, {}, componentContainer.children[0].innerText), componentContainer)
+    ReactDOM.render(React.createElement(CodeBlock, {}, componentContainer.children[0].innerText), componentContainer)
   }
 }
 
-module.exports = BlueContent
+module.exports = CodeBlock