Handful of changes

- Some minor styling tweaks in mobile (lesser padding)
- Lazily load the routes to keep package size small
- Prepare for markdown-powered documentation pages in the secret
`/manual` route. This also is the reason for the `config-overrides.js`
file being pulled in; CRA by default wants to load `.md` files using
`file-loader`, but that would require a client-side http request to load
in the markdown file. I want the markdown file to be baked into the page
so the resulting react component can be built synchronously.

config-overrides.js

@@ -0,0 +1,16 @@
+module.exports = (webpackConfig) => {
+  const { rules } = webpackConfig.module
+
+  // I want to be able to import markdown files as strings, to avoid fetching them dynamically. To accomplish
+  // this, I need to override the default webpack config and load .md files using `raw-loader`, rather than the
+  // previously-used `file-loader`.
+  rules.push({
+    test: /\.md$/,
+    use: 'raw-loader'
+  })
+  const catchall = rules[rules.length - 2]
+  const fileLoaderConfig = catchall.oneOf.find(({ loader }) => loader?.includes('file-loader'))
+  fileLoaderConfig.exclude.push(/\.md$/)
+
+  return webpackConfig
+}

package.json

@@ -4,22 +4,26 @@
   "private": true,
   "dependencies": {
     "@kengorab/abra_wasm": "^0.6.9",
-    "codemirror": "^5.48.0",
+    "codemirror": "5.48.0",
     "react": "^16.8.6",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.8.6",
     "react-responsive": "^8.1.0",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.1",
     "react-scripts": "3.0.1",
+    "remark-parse": "^9.0.0",
+    "remark-react": "^8.0.0",
+    "remark-slug": "^6.0.0",
     "styled-components": "^4.3.2",
-    "typescript": "3.5.3"
+    "typescript": "3.5.3",
+    "unified": "^9.2.1"
   },
   "scripts": {
     "postinstall": "cp node_modules/@kengorab/abra_wasm/abra_wasm_bg.wasm public/abra_wasm/abra_wasm_bg.wasm",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "devDependencies": {
@@ -31,7 +35,9 @@
     "@types/react-responsive": "^8.0.2",
     "@types/react-router-dom": "^4.3.4",
     "@types/react-router-hash-link": "^1.2.1",
-    "@types/styled-components": "^4.1.16"
+    "@types/styled-components": "^4.1.16",
+    "raw-loader": "^4.0.2",
+    "react-app-rewired": "^2.1.8"
   },
   "eslintConfig": {
     "extends": "react-app"

src/@types/remark-react.d.ts

@@ -0,0 +1,9 @@
+declare module 'remark-react' {
+  import { Plugin } from 'unified'
+
+  type RemarkReactOptions = any
+  interface RemarkReact extends Plugin<[RemarkReactOptions?]> {}
+
+  declare const remarkReact: RemarkReact
+  export = remarkReact
+}

src/@types/remark-slug.d.ts

@@ -0,0 +1,9 @@
+declare module 'remark-slug' {
+  import { Plugin } from 'unified'
+
+  type RemarkSlugOptions = any
+  interface RemarkSlug extends Plugin<[RemarkSlugOptions?]> {}
+
+  declare const remarkSlug: RemarkSlug
+  export = remarkSlug
+}

src/App.tsx

@@ -1,24 +1,35 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { Layout, Header, Main } from './components/Layout'
-import HomePage from './pages/HomePage'
-import Documentation from './pages/Documentation'
-import Manual from './pages/Manual'
-import PlaygroundPage from './pages/PlaygroundPage'
+
+const HomePage = React.lazy(() => import(/* webpackChunkName: "./pages/HomePage" */ './pages/HomePage'))
+const Documentation = React.lazy(() => import(/* webpackChunkName: "./pages/Documentation" */ './pages/Documentation'))
+const Manual = React.lazy(() => import(/* webpackChunkName: "./pages/Manual" */ './pages/Manual'))
+const PlaygroundPage = React.lazy(() => import(/* webpackChunkName: "./pages/PlaygroundPage" */ './pages/PlaygroundPage'))
+
+function PlaygroundPageWrapper() {
+  return (
+    <React.Suspense fallback={<div/>}>
+      <PlaygroundPage/>
+    </React.Suspense>
+  )
+}
 
 export default function App() {
   return (
     <Layout>
       <Router>
         <Switch>
-          <Route path="/try" component={PlaygroundPage}/>
+          <Route path="/try" component={PlaygroundPageWrapper}/>
           <Route path="/">
             <Header/>
-            <Main>
-              <Route path="/docs" component={Documentation}/>
-              <Route path="/manual" component={Manual}/>
-              <Route exact path="/" component={HomePage}/>
-            </Main>
+            <React.Suspense fallback={<div/>}>
+              <Main>
+                <Route path="/docs" component={Documentation}/>
+                <Route path="/manual" component={Manual}/>
+                <Route exact path="/" component={HomePage}/>
+              </Main>
+            </React.Suspense>
           </Route>
         </Switch>
       </Router>

src/components/Code.tsx

@@ -7,14 +7,19 @@ import 'codemirror/theme/material.css'
 import '../abra-lang/abra-mode'
 
 interface Props {
-  children: string,
+  children: string | string[],
 }
 
 export default function Code({ children }: Props) {
   const ref = React.createRef<HTMLPreElement>()
 
   React.useLayoutEffect(() => {
-    const code = unindent(children)
+    let code: string
+    if (typeof children === 'string') {
+      code = unindent(children)
+    } else {
+      code = unindent(children[0])
+    }
 
     // @ts-ignore: this function is an addon, and isn't present in the type definitions
     Codemirror.runMode(code, 'abra', ref.current)
@@ -46,9 +51,9 @@ function unindent(str: string): string {
 
 const Pre = styled.pre`
   height: auto !important; // Need to override codemirror's default 300px height
-  padding: 16px; 
+  overflow: scroll !important; // Need to override codemirror's default overflow: hidden
+  padding: 16px;
   border-radius: 6px;
   max-width: 100%;
   max-height: 300px;
-  overflow: scroll;
 `

src/components/Layout.tsx

@@ -15,7 +15,7 @@ export const Main = styled.main`
   
   @media(max-width: ${MOBILE_WIDTH}px) {
     max-width: 100%;
-    padding: calc(${HEADER_HEIGHT}px + 24px) 24px 24px;
+    padding: calc(${HEADER_HEIGHT}px + 24px) 12px 24px;
   }
 `
 
@@ -25,6 +25,8 @@ export const MainFullWidth = styled.main`
   flex: 1;
   width: 100%;
   padding: calc(${HEADER_HEIGHT}px + 24px) 0 0;
+  height: 100vh;
+  box-sizing: border-box;
 `
 
 export const Section = styled.section`

src/components/MarkdownArticle.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import unified from 'unified'
+import parse from 'remark-parse'
+import remarkSlug from 'remark-slug'
+import remark2react from 'remark-react'
+import Code from './Code'
+
+export function renderMarkdownToReact(markdown: string) {
+  const markdownResult: any = unified()
+    .use(parse)
+    .use(remarkSlug)
+    .use(remark2react, {
+      remarkReactComponents: { code: Code },
+      sanitize: { clobberPrefix: '' }
+    })
+    .processSync(markdown)
+  return markdownResult.result
+}
+
+interface Props {
+  contents: string
+}
+
+export default function MarkdownArticle({ contents }: Props) {
+  const rendered = renderMarkdownToReact(contents)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <div style={{ flex: 1 }}>
+        {rendered}
+      </div>
+    </div>
+  )
+}

src/index.css

@@ -1,7 +1,7 @@
 html, body {
     padding: 0;
     margin: 0;
-    height: 100%;
+    height: 100vh;
     width: 100%;
     display: flex;
     background: #fefefe;
@@ -17,7 +17,6 @@ body, button {
 
 #root {
     flex: 1;
-    display: flex;
 }
 
 code {