From a617212e214ba7d3cc9774bd7ad01e5d4e5e26d5 Mon Sep 17 00:00:00 2001 From: Samuel Fang Date: Wed, 16 Jun 2021 21:27:07 +0800 Subject: [PATCH] Interactive SICP-JS: Improve readability + minor fixes (#1796) * Fix syntax highlighting webpack tree shaking issue * Fix index page text alignment * Tweak styles to increase readibility * Fix formatting of styles page * Change max-width * Fix formatting of index page * Update unit tests * Change parsing of metaphrase tag * Update adapters names * Fix figure margins * Update test snapshots * Simplify parsing of containers Co-authored-by: Martin Henz --- src/features/sicp/SourceTheme.ts | 8 +- src/features/sicp/parser/ParseJson.tsx | 20 +- .../sicp/parser/__tests__/ParseJson.tsx | 8 +- .../__snapshots__/ParseJson.tsx.snap | 230 +----------------- src/pages/sicp/Sicp.tsx | 3 +- src/pages/sicp/__tests__/Sicp.tsx | 3 +- src/pages/sicp/subcomponents/CodeSnippet.tsx | 2 +- .../sicp/subcomponents/SicpIndexPage.tsx | 3 +- .../__snapshots__/CodeSnippet.tsx.snap | 4 +- .../__snapshots__/SicpIndexPage.tsx.snap | 2 +- src/styles/_sicp.scss | 49 +++- 11 files changed, 77 insertions(+), 255 deletions(-) diff --git a/src/features/sicp/SourceTheme.ts b/src/features/sicp/SourceTheme.ts index 30ef8660a2..fe2cd04dcd 100644 --- a/src/features/sicp/SourceTheme.ts +++ b/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' diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx index 60bd6c2ba3..70931a43d8 100644 --- a/src/features/sicp/parser/ParseJson.tsx +++ b/src/features/sicp/parser/ParseJson.tsx @@ -116,7 +116,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
(refs.current[obj['id']!] = ref)} className="sicp-figure"> {handleImage(obj, refs)} {obj['captionName'] && ( -
+
{obj['captionName']} {parseArr(obj['captionBody']!, refs)}
@@ -127,7 +127,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => ( const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => { if (obj['src']) { return ( -
+
{obj['src'] && ( ) => { ); }; +const handleReference = (obj: JsonType, refs: React.MutableRefObject<{}>) => { + return
{parseArr(obj['child']!, refs)}
; +}; + const handleText = (text: string) => { return

{text}

; }; @@ -221,19 +225,13 @@ export const processingFunctions = { LaTeX: (_obj: JsonType, _refs: React.MutableRefObject<{}>) => handleText('LaTeX'), - MATTER: handleContainer, - META: (obj: JsonType, _refs: React.MutableRefObject<{}>) => {obj['body']}, - METAPHRASE: (obj: JsonType, _refs: React.MutableRefObject<{}>) =>

⟨ ⟩

, - OL: (obj: JsonType, refs: React.MutableRefObject<{}>) =>
    {parseArr(obj['child']!, refs)}
, REF: handleRef, - REFERENCE: handleContainer, - - REFERENCES: handleContainer, + REFERENCE: handleReference, SECTION: handleContainer, @@ -245,8 +243,6 @@ export const processingFunctions = { ), - SUBSECTION: handleContainer, - SUBSUBHEADING: (obj: JsonType, refs: React.MutableRefObject<{}>) => (

(refs.current[obj['id']!] = ref)}>
@@ -254,8 +250,6 @@ export const processingFunctions = {

), - SUBSUBSECTION: handleContainer, - TABLE: (obj: JsonType, refs: React.MutableRefObject<{}>) => ( {obj['child']!.map((x, index) => handleTR(x, refs, index))} diff --git a/src/features/sicp/parser/__tests__/ParseJson.tsx b/src/features/sicp/parser/__tests__/ParseJson.tsx index f494d79e85..c9864ae112 100644 --- a/src/features/sicp/parser/__tests__/ParseJson.tsx +++ b/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', () => { diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap index d179dfee81..379346bc6d 100644 --- a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap +++ b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap @@ -127,10 +127,10 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = ` exports[`Parse figures FIGURE with image and scale successful 1`] = ` "
-
+
\\"id\\"
-
+
name

@@ -143,10 +143,10 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = ` exports[`Parse figures FIGURE with image successful 1`] = ` "

-
+
\\"id\\"
-
+
name

@@ -160,7 +160,7 @@ exports[`Parse figures FIGURE with image successful 1`] = ` exports[`Parse figures FIGURE with snippet successful 1`] = ` "

-
+
name

@@ -209,7 +209,7 @@ exports[`Parse figures FIGURE with table successful 1`] = `

-
+
name

@@ -352,133 +352,11 @@ exports[`Parse object successful 1`] = ` exports[`Parse reference REFERENCE successful 1`] = ` "

-
- -

- Mock Text -

- -
-
" -`; - -exports[`Parse section CHAPTER successful 1`] = ` -"
- - Title - -
- -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- - -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- -
-
" -`; - -exports[`Parse section MATTER successful 1`] = ` -"
- - Title - -
- -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- - -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- -
-
" -`; - -exports[`Parse section REFERENCES successful 1`] = ` -"
- - Title - -
- -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- - -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- -
+ +

+ Mock Text +

+
" `; @@ -522,86 +400,6 @@ exports[`Parse section SECTION successful 1`] = `
" `; -exports[`Parse section SUBSECTION successful 1`] = ` -"
- - Title - -
- -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- - -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- -
-
" -`; - -exports[`Parse section SUBSUBSECTION successful 1`] = ` -"
- - Title - -
- -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- - -
- -

- Mock Text -

- - -

- Mock Text -

- -
-
- -
-
" -`; - exports[`Parse snippet SNIPPET no eval successful 1`] = ` " @@ -660,12 +458,6 @@ exports[`Parse styling JAVASCRIPTINLINE successful 1`] = `""`; -exports[`Parse styling METAPHRASE successful 1`] = ` -"

- &langle; &rangle; -

" -`; - exports[`Parse styling TT successful 1`] = ` " diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx index c3674bcc33..d52dd52be8 100644 --- a/src/pages/sicp/Sicp.tsx +++ b/src/pages/sicp/Sicp.tsx @@ -81,7 +81,6 @@ const Sicp: React.FC = props => { setLoading(true); if (section === 'index') { - setData(); setLoading(false); return; } @@ -154,6 +153,8 @@ const Sicp: React.FC = props => { {loading ? (
{loadingComponent}
+ ) : section === 'index' ? ( + ) : (
{data}
)} diff --git a/src/pages/sicp/__tests__/Sicp.tsx b/src/pages/sicp/__tests__/Sicp.tsx index 658eba16e5..b326924b03 100644 --- a/src/pages/sicp/__tests__/Sicp.tsx +++ b/src/pages/sicp/__tests__/Sicp.tsx @@ -35,7 +35,6 @@ describe('Sicp renders', () => { ); const wrapper = mount(sicp); - const display = wrapper.find('.sicp-content'); - expect(display.prop('children')).toEqual(); + expect(wrapper.contains()).toBeTruthy(); }); }); diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx index be7db8784c..645377113f 100644 --- a/src/pages/sicp/subcomponents/CodeSnippet.tsx +++ b/src/pages/sicp/subcomponents/CodeSnippet.tsx @@ -3,7 +3,7 @@ import { HighlightRulesSelector, ModeSelector } from 'js-slang/dist/editors/ace/ import { Resizable } from 're-resizable'; import * as React from 'react'; import { useMediaQuery } from 'react-responsive'; -import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import ControlBar from 'src/commons/controlBar/ControlBar'; import { ControlBarCloseButton } from 'src/commons/controlBar/ControlBarCloseButton'; import { ControlBarShowDependenciesButton } from 'src/commons/controlBar/ControlBarShowDependenciesButton'; diff --git a/src/pages/sicp/subcomponents/SicpIndexPage.tsx b/src/pages/sicp/subcomponents/SicpIndexPage.tsx index 3cb63a2e22..f20ee6bcf8 100644 --- a/src/pages/sicp/subcomponents/SicpIndexPage.tsx +++ b/src/pages/sicp/subcomponents/SicpIndexPage.tsx @@ -6,8 +6,7 @@ import SicpToc from './SicpToc'; const originalAuthors = 'Harold Abelson and Gerald Jay Sussman'; const originalWithAuthors = 'with Julie Sussman'; const adaptedAuthors = 'Martin Henz and Tobias Wrigstad'; -const adaptedWithAuthors = - 'with Chan Ger Hean, He Xinyue, Liu Hang, Feng Piaopiao, Jolyn Tan and Wang Qian'; +const adaptedWithAuthors = 'with Samuel Fang'; const authors = (
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap index e85f20c92e..1c19375f15 100644 --- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap +++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap @@ -2,9 +2,9 @@ exports[`Sicp Code Snippet renders correctly 1`] = ` "
- + 1+1; - + 2 diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap index ca1eb627e6..72f910f7bb 100644 --- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap +++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap @@ -38,7 +38,7 @@ exports[`Sicp index page 1`] = `

- with Chan Ger Hean, He Xinyue, Liu Hang, Feng Piaopiao, Jolyn Tan and Wang Qian + with Samuel Fang — adapters to JavaScript diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss index a43cf3e010..a747d5d592 100644 --- a/src/styles/_sicp.scss +++ b/src/styles/_sicp.scss @@ -7,9 +7,11 @@ $sicp-background-color: #ffffff; color: $sicp-text-color; overflow: auto; background-color: $sicp-background-color; + font-size: 1.5em; + line-height: 2; @media only screen and (max-width: 768px) { - font-size: 1em; + font-size: 1.2em; } mjx-container, @@ -34,8 +36,8 @@ $sicp-background-color: #ffffff; .sicp-content { margin: 1em auto; - padding: 0 5em; - max-width: 1300px; + padding: 0 6em; + max-width: 1050px; height: fit-content; background-color: $sicp-background-color; @@ -49,7 +51,7 @@ $sicp-background-color: #ffffff; } @media only screen and (max-width: 768px) { - padding: 0 1em; + padding: 0 1.2em; } } @@ -58,7 +60,15 @@ $sicp-background-color: #ffffff; } .sicp-index-page { - > h1, + max-width: 1400px; + margin: 1em auto; + padding: 0 1em; + + h1, + h2 { + text-align: right; + } + > h2, > .sicp-licenses { text-align: center; @@ -74,6 +84,7 @@ $sicp-background-color: #ffffff; flex-flow: column nowrap; text-align: right; align-items: flex-end; + font-size: smaller; > .sicp-authors { max-width: 500px; @@ -104,6 +115,26 @@ $sicp-background-color: #ffffff; } } } + + @media only screen and (max-width: 768px) { + h1, + h2, + h4, + h5 { + text-align: left; + } + + > .sicp-cover { + .sicp-cover-text { + align-items: flex-start; + text-align: left; + } + } + + > h2 { + text-align: center; + } + } } .sicp-code-snippet { @@ -149,8 +180,12 @@ $sicp-background-color: #ffffff; } .sicp-figure { - margin: auto; - text-align: center; + margin: 45px auto 25px auto; + + > .sicp-caption { + margin: 15px auto; + text-align: center; + } } // text container