Got React working properly

Author: chiedo

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

@@ -17,6 +17,12 @@ A repository owned by a user account has two permission levels: the *repository
 
 ### Organization accounts
 
+<BlueContent>
+
+Hello world!
+
+</BlueContent>
+
 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)"

lib/react/mdx-init.js renamed to lib/initialize-react-markdown-engine.js

@@ -3,6 +3,7 @@ const React = require('react')
 const { renderToStaticMarkup } = 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 transform = code =>
   babel.transform(code, {
@@ -12,7 +13,7 @@ const transform = code =>
     ]
   }).code
 
-const renderWithReact = async mdxCode => {
+const renderReact = async mdxCode => {
   const jsx = await mdx(mdxCode, { skipExport: true })
   const code = transform(jsx)
   const scope = { mdx: createElement }
@@ -26,8 +27,8 @@ const renderWithReact = async mdxCode => {
 
   const element = fn(React, ...Object.values(scope))
   const components = {
-    h1: ({ children }) =>
-      React.createElement('h1', { style: { color: 'tomato' } }, children)
+    BlueContent: BlueContent,
+    h3: undefined
   }
 
   const elementWithProvider = React.createElement(
@@ -39,4 +40,4 @@ const renderWithReact = async mdxCode => {
   return renderToStaticMarkup(elementWithProvider)
 }
 
-module.exports = renderWithReact
+module.exports = renderReact

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('./initialize-react-markdown-engine')
 const frontmatter = require('./frontmatter')
 const products = require('./all-products')
 const slash = require('slash')
 
+
 class Page {
   constructor (opts) {
     assert(opts.relativePath, 'relativePath is required')
@@ -123,7 +125,9 @@ class Page {
       ? getMapTopicContent(this, context.pages, context.redirects)
       : this.markdown
 
-    const html = await renderContent(markdown, context)
+    const markdownWithParsedReact = await renderReact(markdown)
+    console.log(markdownWithParsedReact)
+    const html = await renderContent(markdownWithParsedReact, context)
 
     // product frontmatter may contain liquid
     if (this.product) {

package-lock.json

@@ -10,6 +10,7 @@
   "license": "(MIT AND CC-BY-4.0)",
   "dependencies": {
     "@babel/core": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.8.4",
     "@babel/runtime": "^7.11.2",
@@ -36,6 +37,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.0.0",
     "csurf": "^1.11.0",
+    "directory-tree": "^2.2.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",

package.json

@@ -0,0 +1,11 @@
+const React = require('react')
+
+const BlueContent = (props) => {
+  return (
+    <div style={{ color: 'blue' }}>
+      {props.children}
+    </div>
+  )
+}
+
+module.exports = BlueContent

react/BlueContent.js

@@ -5,9 +5,36 @@ require('./lib/feature-flags')
 const express = require('express')
 const portUsed = require('port-used')
 const warmServer = require('./lib/warm-server')
+const babel = require('@babel/core')
+const fs = require('fs')
+const path = require('path')
+const dirTree = require('directory-tree')
 const port = Number(process.env.PORT) || 4000
 const app = express()
 
+
+// Build React Components
+const transform = code =>
+  babel.transform(code, {
+    plugins: [
+      '@babel/plugin-transform-react-jsx',
+      '@babel/plugin-proposal-object-rest-spread'
+    ]
+  }).code
+
+const tree = dirTree('./react/')
+for (const index in tree.children) {
+  const file = tree.children[index]
+  if (file.type === 'file') {
+    if (!fs.existsSync(path.join('dist', 'react'))) {
+      fs.mkdirSync(path.join('dist', 'react'), { recursive: true })
+    }
+    const content = transform(fs.readFileSync(file.path, 'utf8'))
+    fs.writeFileSync(path.join('dist', file.path), content)
+  }
+}
+// End Build React Components
+
 require('./middleware')(app)
 
 // prevent the app from starting up durings tests