A quick experiment to get allow React components in Markdown pages and throughout the site

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

@@ -9,6 +9,7 @@ intro: 'While you can grant read/write access to collaborators on a personal rep
 versions:
   free-pro-team: '*'
   enterprise-server: '*'
+interactive: true
 ---
 
 ### Personal user accounts
@@ -17,16 +18,42 @@ A repository owned by a user account has two permission levels: the *repository
 
 ### Organization accounts
 
+#### Code Block Component
+<!--react-->
+<CodeBlock language="javascript"
+js={`var i;
+for (i = 0; i < cars.length; i++) {
+  text += cars[i] + "<br>";
+}`}
+
+php={`for ($x = 0; $x <= 10; $x++) {
+  echo "The number is: $x <br>";
+}`}
+
+python={`for x in "banana":
+  print(x)
+`}
+/>
+<!--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:
 - "[Permission levels for an organization](/articles/permission-levels-for-an-organization)"
 - "[Project board permissions for an organization](/articles/project-board-permissions-for-an-organization)"
 - "[Repository permission levels for an organization](/articles/repository-permission-levels-for-an-organization)"
 - "[About teams](/articles/about-teams)"
 
+## Code Editor Component
+
+<!--react-->
+<CodeEditor language='javascript' code={`console.log('hello world')`} />
+<!--end-react-->
+
+
 {% if currentVersion == "free-pro-team@latest" %}
 
 ### Enterprise accounts
 
+
 *Enterprise owners* have ultimate power over the enterprise account and can take every action in the enterprise account. *Billing managers* can manage your enterprise account's billing settings. Members and outside collaborators of organizations owned by your enterprise account are automatically members of the enterprise account, although they have no access to the enterprise account itself or its settings. For more information, see "[Roles for an enterprise account](/articles/roles-for-an-enterprise-account)."
 
 {% data reusables.gated-features.enterprise-accounts %}

includes/head.html

@@ -26,4 +26,6 @@
   <link rel="stylesheet" href="/dist/index.css">
   <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
   <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">
+  <script src="/assets/js/react.development.js" crossorigin></script>
+  <script src="/assets/js/react-dom.development.js" crossorigin></script>
 </head>

javascripts/index.js

@@ -16,6 +16,11 @@ import experiment from './experiment'
 import copyCode from './copy-code'
 import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
+import CodeBlock from '../react/CodeBlock'
+import CoolTable from '../react/CoolTable'
+import CodeEditor from '../react/CodeEditor'
+
+import 'react-tabs/style/react-tabs.css'
 
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
@@ -35,3 +40,9 @@ document.addEventListener('DOMContentLoaded', async () => {
   copyCode()
   initializeEvents()
 })
+
+module.export = {
+  CodeBlock,
+  CoolTable,
+  CodeEditor
+}

lib/frontmatter.js

@@ -70,6 +70,9 @@ const schema = {
         quickstart: { type: 'string' },
         learn: { type: 'string' }
       }
+    },
+    interactive: {
+      type: 'boolean'
     }
   }
 }

lib/page.js

@@ -15,10 +15,12 @@ const pathUtils = require('./path-utils')
 const Permalink = require('./permalink')
 const languages = require('./languages')
 const renderContent = require('./render-content')
+const { renderReact } = require('./react/engine')
 const frontmatter = require('./frontmatter')
 const products = require('./all-products')
 const slash = require('slash')
 
+
 class Page {
   constructor (opts) {
     assert(opts.relativePath, 'relativePath is required')
@@ -119,9 +121,30 @@ class Page {
     this.title = await renderContent(this.rawTitle, context, { textOnly: true, encodeEntities: true })
     this.shortTitle = await renderContent(this.shortTitle, context, { textOnly: true, encodeEntities: true })
 
-    const markdown = this.mapTopic
+    let markdown = this.mapTopic
       ? getMapTopicContent(this, context.pages, context.redirects)
       : this.markdown
+
+    // If the article is interactive parse the React!
+    if (this.interactive) {
+      // Search for the react code comments to find the react components
+      const reactComponents = markdown.match(/<!--react-->(.*?)<!--end-react-->/gms)
+
+      // Render each of the react components in the markdown
+      for (const index in reactComponents) {
+        let componentStr = reactComponents[index]
+
+        // Remove the React comment indicators
+        componentStr = componentStr.replace('<!--react-->\n', '').replace('<!--react-->', '')
+        componentStr = componentStr.replace('\n<!--end-react-->', '').replace('<!--end-react-->', '')
+
+        // Get the rendered component
+        const renderedComponent = await renderReact(componentStr)
+
+        // Replace the react component with the rendered markdown
+        markdown = markdown.replace(reactComponents[index], renderedComponent)
+      }
+    }
 
     const html = await renderContent(markdown, context)
 
@@ -163,6 +186,7 @@ class Page {
     return cleanedHTML
   }
 
+
   // Allow other modules (like custom liquid tags) to make one-off requests
   // for a page's rendered properties like `title` and `intro`
   async renderProp (propName, context, opts = { unwrap: false }) {
@@ -179,6 +203,7 @@ class Page {
 
     const html = await renderContent(prop, context, opts)
 
+
     if (!opts.unwrap) return html
 
     // The unwrap option removes surrounding tags from a string, preserving any inner HTML

lib/react/babel.js

@@ -0,0 +1,22 @@
+const babel = require('@babel/core')
+
+const reactBabelOptions = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/transform-runtime'
+  ]
+}
+
+const transform = code =>
+  babel.transform(code, reactBabelOptions).code
+
+module.exports = {
+  transform: transform,
+  reactBabelOptions: reactBabelOptions
+}

lib/react/engine.js

@@ -0,0 +1,23 @@
+const { renderToString } = require('react-dom/server')
+const { transform } = require('./babel')
+
+// These all need to be here even though eslint doesn't think so
+/* eslint-disable */
+const React = require('react')
+const CodeBlock = require('../../dist/react/CodeBlock')
+const CoolTable = require('../../dist/react/CoolTable')
+const CodeEditor = require('../../dist/react/CodeEditor')
+/* eslint-enable */
+
+const renderReact = async componentStr => {
+  const componentName = componentStr.match(/[^<]([a-zA-Z])*/gm)[0]
+  const jsx = `<div className="react-component-${componentName}">\n${componentStr}\n</div>`
+  const component = transform(jsx)
+
+  // eslint-disable-next-line
+  return renderToString(eval(component))
+}
+
+module.exports = {
+  renderReact
+}