Lots of cleanup

- Removed unused svg icons from an old version of the playground page
- Changed from using code-prettify to just using codemirror's `runMode`
function for formatting code samples on the homepage/docs page. This
makes all the code styles consistent, and allowed me to remove a few
dependencies and clean up some code. It also means that new syntax
features don't need to be implemented twice, once for the playground
page and once for the docs pages
- Begin scaffolding for Manual (new docs) page

package.json

@@ -4,12 +4,10 @@
   "private": true,
   "dependencies": {
     "@kengorab/abra_wasm": "^0.6.9",
-    "code-prettify": "^0.1.0",
     "codemirror": "^5.48.0",
     "react": "^16.8.6",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.8.6",
-    "react-dropdown": "^1.6.4",
     "react-responsive": "^8.1.0",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.1",

src/App.tsx

@@ -3,6 +3,7 @@ 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'
 
 export default function App() {
@@ -15,6 +16,7 @@ export default function App() {
             <Header/>
             <Main>
               <Route path="/docs" component={Documentation}/>
+              <Route path="/manual" component={Manual}/>
               <Route exact path="/" component={HomePage}/>
             </Main>
           </Route>

src/components/Code.tsx

@@ -1,47 +1,54 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { VsCodeThemeStyles } from '../prettier-languages'
-import 'code-prettify'
-import 'code-prettify/src/run_prettify'
+import Codemirror from 'codemirror'
+import 'codemirror/addon/runmode/runmode'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/material.css'
+import '../abra-lang/abra-mode'
 
 interface Props {
   children: string,
-  language?: 'abra' | 'abrac',
-  style?: React.CSSProperties
 }
 
-export default function Code({ children, style, language = 'abra' }: Props) {
-  const pre = React.createRef<HTMLPreElement>()
-
-  // Split into lines, removing any empty lines at start and end (but keeping empty lines in middle)
-  const codeLines = children.trimEnd()
-    .split('\n')
-    .filter((line, idx) => idx !== 0 || line.length)
-  const indentation = codeLines[0] ? codeLines[0].length - codeLines[0].trimStart().length : 0
-  const code = codeLines.map(line => line.substring(indentation, line.length)).join('\n')
+export default function Code({ children }: Props) {
+  const ref = React.createRef<HTMLPreElement>()
 
   React.useLayoutEffect(() => {
-    if (pre.current) {
-      pre.current.classList.remove('prettyprinted')
-    }
-    window.PR.prettyPrint()
-  }, [pre, code])
-
-  return (
-    <>
-      <VsCodeThemeStyles/>
-      <Pre ref={pre} className={`prettyprint lang-${language}`} style={style || {}}>
-        {code}
-      </Pre>
-    </>
-  )
+    const code = unindent(children)
+
+    // @ts-ignore: this function is an addon, and isn't present in the type definitions
+    Codemirror.runMode(code, 'abra', ref.current)
+  }, [ref, children])
+
+  return <Pre ref={ref} className="CodeMirror cm-s-material"/>
+}
+
+function unindent(str: string): string {
+  const lines = str.split('\n')
+
+  let startIdx = 0
+  for (; startIdx < lines.length; startIdx++) {
+    if (lines[startIdx].trim()) break
+  }
+  let endIdx = lines.length - 1
+  for (; endIdx >= 0; endIdx--) {
+    if (lines[endIdx].trim()) break
+  }
+
+  const firstLine = lines[startIdx]
+  if (!firstLine) return str
+  const indentation = firstLine.search(/\S/)
+
+  return lines.slice(startIdx, endIdx + 1)
+    .map(line => line.substring(indentation))
+    .join('\n')
 }
 
 const Pre = styled.pre`
-  padding: 16px !important; // Need to override prettyprint's default for padding
+  height: auto !important; // Need to override codemirror's default 300px height
+  padding: 16px; 
   border-radius: 6px;
   max-width: 100%;
   max-height: 300px;
   overflow: scroll;
 `
-

src/index.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import { registerAbracLang, registerAbraLang } from './prettier-languages'
 import './index.css'
 
-registerAbraLang()
-registerAbracLang()
-
 ReactDOM.render(<App/>, document.getElementById('root'))

src/pages/Manual.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Section } from '../components/Layout'
+
+export default function Manual() {
+  return (
+    <Section>
+      <h1>Abra Manual</h1>
+      <code>// TODO</code>
+    </Section>
+  )
+}