Interactive SICP-JS: Improve readability + minor fixes

src/features/sicp/SourceTheme.ts

@@ -2,10 +2,12 @@
  * Source Theme for use with react-syntax-highlighter.
  * Tries to match the Source Theme for Ace Editor in js-slang
  */
+const SourceThemeBackground = '#2c3e50';
+
 export const SourceTheme = {
   'code[class*="language-"]': {
     color: 'white',
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     fontFamily: "'Inconsolata', 'Consolas', monospace",
     textAlign: 'left',
     whiteSpace: 'pre',
@@ -24,7 +26,7 @@ export const SourceTheme = {
   },
   'pre[class*="language-"]': {
     color: 'white',
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     fontFamily: "'Inconsolata', 'Consolas', monospace",
     textAlign: 'left',
     whiteSpace: 'pre',
@@ -45,7 +47,7 @@ export const SourceTheme = {
     borderRadius: '0.3em'
   },
   ':not(pre) > code[class*="language-"]': {
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     padding: '0.1em',
     borderRadius: '0.3em',
     whiteSpace: 'normal'

src/features/sicp/parser/ParseJson.tsx

@@ -116,7 +116,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
   <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-figure">
     {handleImage(obj, refs)}
     {obj['captionName'] && (
-      <h5>
+      <h5 className="sicp-caption">
         {obj['captionName']}
         {parseArr(obj['captionBody']!, refs)}
       </h5>
@@ -127,7 +127,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
 const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   if (obj['src']) {
     return (
-      <div className={'sicp-figure'}>
+      <div>
         {obj['src'] && (
           <img
             src={Constants.interactiveSicpUrl + obj['src']}
@@ -175,6 +175,10 @@ const handleContainer = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   );
 };
 
+const handleReference = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
+  return <div>{parseArr(obj['child']!, refs)}</div>;
+};
+
 const handleText = (text: string) => {
   return <p>{text}</p>;
 };
@@ -221,19 +225,13 @@ export const processingFunctions = {
 
   LaTeX: (_obj: JsonType, _refs: React.MutableRefObject<{}>) => handleText('LaTeX'),
 
-  MATTER: handleContainer,
-
   META: (obj: JsonType, _refs: React.MutableRefObject<{}>) => <em>{obj['body']}</em>,
 
-  METAPHRASE: (obj: JsonType, _refs: React.MutableRefObject<{}>) => <p>&langle; &rangle;</p>,
-
   OL: (obj: JsonType, refs: React.MutableRefObject<{}>) => <OL>{parseArr(obj['child']!, refs)}</OL>,
 
   REF: handleRef,
 
-  REFERENCE: handleContainer,
-
-  REFERENCES: handleContainer,
+  REFERENCE: handleReference,
 
   SECTION: handleContainer,
 
@@ -245,17 +243,13 @@ export const processingFunctions = {
     </h2>
   ),
 
-  SUBSECTION: handleContainer,
-
   SUBSUBHEADING: (obj: JsonType, refs: React.MutableRefObject<{}>) => (
     <h4 className="bp3-heading" ref={ref => (refs.current[obj['id']!] = ref)}>
       <br />
       {parseArr(obj['child']!, refs)}
     </h4>
   ),
 
-  SUBSUBSECTION: handleContainer,
-
   TABLE: (obj: JsonType, refs: React.MutableRefObject<{}>) => (
     <table>
       <tbody>{obj['child']!.map((x, index) => handleTR(x, refs, index))}</tbody>

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -7,16 +7,16 @@ import { JsonType, parseArr, ParseJsonError, parseObj, processingFunctions } fro
 
 // Tags to process
 const headingTags = ['SUBHEADING', 'SUBSUBHEADING'];
-const sectionTags = ['SECTION', 'SUBSECTION', 'SUBSUBSECTION', 'MATTER', 'CHAPTER', 'REFERENCES'];
 const listTags = ['OL', 'UL'];
 const symbolTags = ['BR', 'LaTeX', 'TeX'];
-const stylingTags = ['B', 'EM', 'JAVASCRIPTINLINE', 'TT', 'METAPHRASE', 'META'];
+const stylingTags = ['B', 'EM', 'JAVASCRIPTINLINE', 'TT', 'META'];
 const latexTags = ['LATEX', 'LATEXINLINE'];
 const linkTags = ['LINK', 'REF', 'FOOTNOTE_REF'];
 
 const epigraphTag = 'EPIGRAPH';
 const tableTag = 'TABLE';
 const exerciseTag = 'EXERCISE';
+const sectionTag = 'SECTION';
 const snippetTag = 'SNIPPET';
 const figureTag = 'FIGURE';
 const displayFootnoteTag = 'DISPLAYFOOTNOTE';
@@ -79,12 +79,12 @@ describe('Parse heading', () => {
 });
 
 describe('Parse section', () => {
-  const tags = sectionTags;
+  const tag = sectionTag;
   const text = { tag: 'TEXT', child: [mockData['text'], mockData['text']] };
   const content = [text, text];
   const obj = { body: 'Title', child: content };
 
-  tags.forEach(x => testTagSuccessful(obj, x));
+  testTagSuccessful(obj, tag);
 });
 
 describe('Parse list', () => {