Refactoring, add CodeMirror

front/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "codemirror": "^5.48.2",
     "prismjs": "^1.17.1",
     "react": "^16.9.0",
+    "react-codemirror2": "^6.0.0",
     "react-dom": "^16.9.0",
     "react-markdown": "^4.1.0",
     "react-router-dom": "^5.0.1",

front/public/css/prism.css

@@ -1,5 +1,5 @@
-/* PrismJS 1.10.0
-http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+java+json+jsx */
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+pascal+python */
 /*
  Solarized Color Schemes originally by Ethan Schoonover
  http://ethanschoonover.com/solarized
@@ -32,68 +32,69 @@ green     #859900
 
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #657b83; /* base00 */
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
+  color: #657b83; /* base00 */
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
 
-	line-height: 1.5;
+  line-height: 1.5;
 
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
 
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	background: #073642; /* base02 */
+  background: #073642; /* base02 */
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	background: #073642; /* base02 */
+  background: #073642; /* base02 */
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background-color: #fdf6e3; /* base3 */
+  background-color: #fdf6e3; /* base3 */
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
+  padding: .1em;
+  border-radius: .3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: #93a1a1; /* base1 */
+  color: #93a1a1; /* base1 */
 }
 
 .token.punctuation {
-	color: #586e75; /* base01 */
+  color: #586e75; /* base01 */
 }
 
 .namespace {
-	opacity: .7;
+  opacity: .7;
 }
 
 .token.property,
@@ -103,7 +104,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #268bd2; /* blue */
+  color: #268bd2; /* blue */
 }
 
 .token.selector,
@@ -113,38 +114,40 @@ pre[class*="language-"] {
 .token.builtin,
 .token.url,
 .token.inserted {
-	color: #2aa198; /* cyan */
+  color: #2aa198; /* cyan */
 }
 
 .token.entity {
-	color: #657b83; /* base00 */
-	background: #eee8d5; /* base2 */
+  color: #657b83; /* base00 */
+  background: #eee8d5; /* base2 */
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #859900; /* green */
+  color: #859900; /* green */
 }
 
-.token.function {
-	color: #b58900; /* yellow */
+.token.function,
+.token.class-name {
+  color: #b58900; /* yellow */
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #cb4b16; /* orange */
+  color: #cb4b16; /* orange */
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .token.italic {
-	font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-	cursor: help;
+  cursor: help;
 }
+

front/public/css/style.css

@@ -21,7 +21,7 @@ html {
 }
 body {
   min-height: 100%;
-  overflow: hidden;
+  /*overflow: hidden;*/
 }
 
 /* Columns */
@@ -141,7 +141,10 @@ span.breadcrumb::before {
 /* Styles for page content */
 .main {
   /* overflow-y: scroll; */
-  border-right: 1px solid #ddd;
+  display: flex;
+}
+.main > div {
+  width: 33%;
 }
 .page {
   /* max-height: 100px; */

front/public/index.html

@@ -47,5 +47,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="js/prism.js"></script>
   </body>
 </html>

front/src/App.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import { Switch, Route, HashRouter, Link } from 'react-router-dom';
+import { Switch, HashRouter, Link } from 'react-router-dom';
 import About from './components/About';
 import Home from './components/Home';
-import Navbar from './components/Navbar';
+import Layout from './components/Layout';
 import Page from './components/Page';
 const markdown = require('./resources/markdown.json');
 
@@ -14,9 +13,11 @@ const markdown = require('./resources/markdown.json');
 // }
 // $window.on('resize', onResize);
 
-function getSection(sectionIndex) {
-  const section = markdown[sectionIndex];
-  return () => (
+function Section({ match }) {
+  const { params: { sectionSlug } } = match;
+  const sectionPath = `/${sectionSlug}`;
+  const section = markdown.find(s => s.path === sectionPath);
+  return (
     <div>
       <div className="breadcrumb-wrapper">
         <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
@@ -55,10 +56,14 @@ function getSectionPagination(section, activeIndex) {
   );
 }
 
-function getPage(sectionIndex, pageIndex) {
-  const section = markdown[sectionIndex];
+function PageWrap({ match }) {
+  const { params: { sectionSlug, pageSlug } } = match;
+  const sectionPath = `/${sectionSlug}`;
+  const section = markdown.find(s => s.path === sectionPath);
+  const pagePath = `/${pageSlug}`;
+  const pageIndex = section.items.findIndex(p => p.path === pagePath);
   const page = section.items[pageIndex];
-  return () => (
+  return (
     <div>
       <Page page={page} section={section} />
       {getSectionPagination(section, pageIndex)}
@@ -77,31 +82,27 @@ function getSectionPageLinks(section) {
   );
 }
 
-function getSectionRoutes(section, sIndex) {
-  const routes = [{
-    key: sIndex, path: section.path, component: getSection(sIndex)
-  }].concat(section.items.map((page, pIndex) => ({
-    key: sIndex + '-' + pIndex,
-    path: section.path + page.path,
-    component: getPage(sIndex, pIndex)
-  })));
-  return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
-}
+// function getSectionRoutes(section, sIndex) {
+//   const routes = [
+//   // {
+//   //   key: sIndex, path: section.path, component: getSection(sIndex)
+//   // }
+//   ].concat(section.items.map((page, pIndex) => ({
+//     key: sIndex + '-' + pIndex,
+//     path: section.path + page.path,
+//     component: getPage(sIndex, pIndex)
+//   })));
+//   return routes.map(r => <Layout key={r.key} exact path={r.path} component={r.component} />);
+// }
 
 const App = () => (
-    <HashRouter>
-      <div id="react-wrapper">
-        <Navbar />
-        <div className="main">
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/a-propos" component={About} />
-            {
-              markdown.map(getSectionRoutes)
-            }
-          </Switch>
-        </div>
-      </div>
+  <HashRouter>
+    <Switch>
+      <Layout path="/:sectionSlug/:pageSlug" component={PageWrap} />
+      <Layout path="/:sectionSlug" component={Section} />
+      <Layout exact path="/a-propos" component={About} />
+      <Layout exact path="/" component={Home} />
+    </Switch>
   </HashRouter>
 );
 

front/src/components/Editor.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2'
+import 'codemirror/mode/python/python.js';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/material.css';
+import cradle from '../cradle';
+
+class Editor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: cradle
+    }
+  }
+
+  render() {
+    const options = {
+      mode: 'python'
+    };
+    return (
+      <CodeMirror
+        value={this.state.value}
+        options={options}
+        onBeforeChange={(editor, data, value) => {
+          this.setState({value});
+        }}
+        onChange={(editor, data, value) => {
+        }}
+      />
+    );
+  }
+}
+
+export default Editor;

front/src/components/Layout.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import Navbar from './Navbar';
+import Editor from './Editor';
+
+const Layout = ({ path, component, exact }) => (
+  <div id="react-wrapper">
+    <Navbar />
+    <div className="main">
+      <Route exact={exact} path={path} component={component} />
+      <Editor />
+    </div>
+  </div>
+);
+
+export default Layout;

front/src/components/Page.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import Prism from 'prismjs';
+import 'prismjs/components/prism-pascal.js';
+import 'prismjs/components/prism-python.js';
 
 let first = true;
 class Page extends React.Component {
@@ -15,7 +17,6 @@ class Page extends React.Component {
     this.main = document.querySelector('.main');
     this.nav = document.querySelector('nav');
     this.pgWrapper = document.querySelector('.pagination-wrapper');
-    console.log(this.main, this.nav, this.pgWrapper);
 
     // Re-highlight with Prism
     Prism.highlightAll();
@@ -28,6 +29,11 @@ class Page extends React.Component {
     window.addEventListener('resize', this.onResize);
   }
 
+  componentDidUpdate() {
+    console.log('update');
+    setTimeout(Prism.highlightAll, 100);
+  }
+
   /**
    * Fix pagination at bottom if content height < window height
    */

front/src/cradle.js

@@ -0,0 +1,138 @@
+export default `#!/usr/local/bin/python
+
+stream = raw_input()
+idx = 0
+look = ""
+
+def is_add_op(s):
+    return s in ['+','-']
+
+def abort(s):
+    print s
+    exit(0)
+
+def expected(s):
+    abort(s + ' expected')
+
+def skip_white():
+    while look.isspace():
+        get_char()
+
+def get_char():
+    global idx
+    global look
+    look = stream[idx]
+    if idx < (len(stream)-1):
+        idx += 1
+
+def initialize():
+    get_char()
+
+def match(x):
+    if look == x:
+        get_char()
+        skip_white()
+    else:
+        expected('\\'\\'' + x + '\\'\\'')
+
+def get_num():
+    value = ''
+    try:
+        int(look)
+    except:
+        expected('Integer')
+
+    while look.isdigit():
+        value = value + look
+        get_char()
+    skip_white()
+    return value
+
+def get_name():
+    token = ''
+    if look.isalpha():
+        while look.isalnum():
+            token = token + look.upper()
+            get_char()
+        skip_white()
+        return token
+    else:
+        expected('Name')
+
+def factor():
+    if look == '(':
+        match('(')
+        expression()
+        match(')')
+    elif look.isalpha():
+        ident()
+    else:
+        print('MOVE #' + get_num() + ',D0')
+
+def ident():
+    name = get_name()
+    if look == '(':
+        match('(')
+        match(')')
+        print('BSR ' + name)
+    else:
+        print('MOVE ' + name + '(PC),D0')
+
+def subtract():
+    match('-')
+    term()
+    print('SUB (SP)+,D0')
+    print('NEG D0')
+
+def add():
+    match('+')
+    term()
+    print('ADD (SP)+,D0')
+
+def multiply():
+    match('*')
+    factor()
+    print('MULS (SP)+,D0')
+
+def divide():
+    match('/')
+    factor()
+    print('MOVE (SP)+,D1')
+    print('DIVS D1,D0')
+
+def term():
+    factor()
+    while look in ['*','/']:
+        print('MOVE D0,-(SP)')
+        if look == '*':
+            multiply()
+        elif look == '/':
+            divide()
+        else:
+            expected('MulOp')
+
+def expression():
+    if is_add_op(look):
+        print('CLR D0')
+    else:
+        term()
+    while is_add_op(look):
+        print('MOVE D0,-(SP)')
+        if look == '+':
+            add()
+        elif look == '-':
+            subtract()
+        else:
+            expected('AddOp')
+
+def assignment():
+    name = get_name()
+    match('=')
+    expression()
+    print('LEA ' + name + '(PC),A0')
+    print('MOVE D0,(A0)')
+
+initialize()
+#expression()
+assignment()
+if(look != stream[-1]): expected('Newline')`;

front/yarn.lock

@@ -2429,6 +2429,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.48.2:
+  version "5.48.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.48.2.tgz#a9dd3d426dea4cd59efd59cd98e20a9152a30922"
+  integrity sha512-i9VsmC8AfA5ji6EDIZ+aoSe4vt9FcwPLdHB1k1ItFbVyuOFRrcfvnoKqwZlC7EVA2UmTRiNEypE4Uo7YvzVY8Q==
+
 collapse-white-space@^1.0.2:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.5.tgz#c2495b699ab1ed380d29a1091e01063e75dbbe3a"
@@ -7987,6 +7992,11 @@ react-app-polyfill@^1.0.2:
     regenerator-runtime "0.13.3"
     whatwg-fetch "3.0.0"
 
+react-codemirror2@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
+  integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==
+
 react-dev-utils@^9.0.3:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.0.3.tgz#7607455587abb84599451460eb37cef0b684131a"