Urls for textbook updated (#1797)

* textbook urls updated

* textbook urls updated

* tests updated

* yarn updated

* Update url

* Change comment to lowercase

* Fix formatting for prettier

* Fix failing snapshots

* Fix failing test snapshots

Co-authored-by: Samuel Fang <samuelfangjw@gmail.com>

.env.example

@@ -53,4 +53,4 @@ REACT_APP_CADET_LOGGER=
 REACT_APP_CADET_LOGGER_INTERVAL=10000
 
 # Link to interative-sicp
-REACT_APP_INTERACTIVE_SICP_URL="http://127.0.0.1:8080/"
+REACT_APP_INTERACTIVE_SICP_DATA_URL="http://127.0.0.1:8080/"

src/commons/__tests__/__snapshots__/Markdown.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Markdown page renders correctly 1`] = `
-"<Memo(Markdown) content=\\"\\\\nWelcome to the Source Academy playground!\\\\n\\\\nThe language [_Source_](https://source-academy.github.io/source/) is the official language of the textbook [_Structure and\\\\nInterpretation of Computer Programs, JavaScript Adaptation_](https://source-academy.github.io/sicp/). You have chosen the sublanguage [_Source §1_](https://source-academy.github.io/source/source_1/).\\\\n\\\\nIn the editor on the left, you can use the [_Ace keyboard shortcuts_](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts) \\\\nand also the [_Source Academy keyboard shortcuts_](https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts).\\\\n\\\\n\\" openLinksInNewWindow={true}>
+"<Memo(Markdown) content=\\"\\\\nWelcome to the Source Academy playground!\\\\n\\\\nThe language [_Source_](https://source-academy.github.io/source/) is the official language of the textbook [_Structure and\\\\nInterpretation of Computer Programs, JavaScript Adaptation_](https://source-academy.github.io/interactive-sicp/). You have chosen the sublanguage [_Source §1_](https://source-academy.github.io/source/source_1/).\\\\n\\\\nIn the editor on the left, you can use the [_Ace keyboard shortcuts_](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts) \\\\nand also the [_Source Academy keyboard shortcuts_](https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts).\\\\n\\\\n\\" openLinksInNewWindow={true}>
   <div className=\\"md bp3-running-text\\" dangerouslySetInnerHTML={{...}} />
 </Memo(Markdown)>"
 `;

src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap

@@ -11,7 +11,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     <br />
     The environment model diagram follows a notation introduced in
      
-    <a href=\\"https://source-academy.github.io/sicp/chapters/3.2.html\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">
+    <a href=\\"https://source-academy.github.io/interactive-sicp/3.2\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">
       <i>
         Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 3, Section 2
       </i>

src/commons/utils/Constants.ts

@@ -31,8 +31,8 @@ const googleApiKey = process.env.REACT_APP_GOOGLE_API_KEY;
 const googleAppId = process.env.REACT_APP_GOOGLE_APP_ID;
 const githubClientId = process.env.REACT_APP_GITHUB_CLIENT_ID || '';
 const githubOAuthProxyUrl = process.env.REACT_APP_GITHUB_OAUTH_PROXY_URL || '';
-const interactiveSicpUrl =
-  process.env.REACT_APP_INTERACTIVE_SICP_URL || 'https://source-academy.github.io/sicp/';
+const interactiveSicpDataUrl =
+  process.env.REACT_APP_INTERACTIVE_SICP_DATA_URL || 'https://source-academy.github.io/sicp/'; // data for interactive-sicp (images and json files)
 
 const authProviders: Map<string, { name: string; endpoint: string; isDefault: boolean }> =
   new Map();
@@ -80,9 +80,9 @@ export enum Links {
   sourceDocs = 'https://source-academy.github.io/source/',
   techSVC = 'mailto:techsvc@comp.nus.edu.sg',
   techSVCNumber = '6516 2736',
-  textbook = 'https://source-academy.github.io/sicp/',
-  textbookChapter2_2 = 'https://source-academy.github.io/sicp/chapters/2.2.html',
-  textbookChapter3_2 = 'https://source-academy.github.io/sicp/chapters/3.2.html',
+  textbook = 'https://source-academy.github.io/interactive-sicp/',
+  textbookChapter2_2 = 'https://source-academy.github.io/interactive-sicp/2.2',
+  textbookChapter3_2 = 'https://source-academy.github.io/interactive-sicp/3.2',
 
   aceHotkeys = 'https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts',
   sourceHotkeys = 'https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts',
@@ -127,7 +127,7 @@ const Constants = {
   sharedbBackendUrl,
   disablePeriods,
   cadetLoggerInterval,
-  interactiveSicpUrl
+  interactiveSicpDataUrl
 };
 
 export default Constants;

src/features/sicp/parser/ParseJson.tsx

@@ -127,15 +127,11 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
 const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   if (obj['src']) {
     return (
-      <div>
-        {obj['src'] && (
-          <img
-            src={Constants.interactiveSicpUrl + obj['src']}
-            alt={obj['id']}
-            width={obj['scale']}
-          />
-        )}
-      </div>
+      <img
+        src={Constants.interactiveSicpDataUrl + obj['src']}
+        alt={obj['id']}
+        width={obj['scale']}
+      />
     );
   } else if (obj['snippet']) {
     return processingFunctions['SNIPPET'](obj['snippet'], refs);

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

@@ -28,7 +28,7 @@ jest.mock('src/commons/utils/Constants', () => ({
   Links: {
     sourceDocs: ''
   },
-  interactiveSicpUrl: 'source-academy.github.io/sicp/'
+  interactiveSicpDataUrl: 'https://source-academy.github.io/sicp/'
 }));
 
 const mockData = {

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

@@ -127,9 +127,7 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = `
 
 exports[`Parse figures FIGURE with image and scale successful 1`] = `
 "<div className=\\"sicp-figure\\">
-  <div>
-    <img src=\\"source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width=\\"50%\\" />
-  </div>
+  <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width=\\"50%\\" />
   <h5 className=\\"sicp-caption\\">
     name
     <span>
@@ -143,9 +141,7 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
 
 exports[`Parse figures FIGURE with image successful 1`] = `
 "<div className=\\"sicp-figure\\">
-  <div>
-    <img src=\\"source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width={[undefined]} />
-  </div>
+  <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width={[undefined]} />
   <h5 className=\\"sicp-caption\\">
     name
     <span>

src/pages/sicp/Sicp.tsx

@@ -13,7 +13,7 @@ import SicpIndexPage from './subcomponents/SicpIndexPage';
 
 type SicpProps = RouteComponentProps<{}>;
 
-const baseUrl = Constants.interactiveSicpUrl + '/json/';
+const baseUrl = Constants.interactiveSicpDataUrl + '/json/';
 const extension = '.json';
 
 // Context to determine which code snippet is active

src/styles/_sicp.scss

@@ -181,6 +181,9 @@ $sicp-background-color: #ffffff;
 
   .sicp-figure {
     margin: 45px auto 25px auto;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
 
     > .sicp-caption {
       margin: 15px auto;