Update Code States Visualizer and add a guide how to use it

docs/code-states-visualizer-guide.md

@@ -0,0 +1,33 @@
+# Code States Visualizer guide
+
+## Adding a Code States Visualizer in a markdown-file
+
+Simply write the tag `<code-states-visualizer input='ADD JSON HERE'></code-states-visualizer>`
+
+Note, that since the input json contains double quotes, we recommend using single quotes around the input. This way there's no need to escape any double quotes in the input json. For this reason, we also recommend using double quotes in your python example code, because otherwise you need to escape every single quote in the input you generate.
+
+Here's an example of a Code States Visualizer in a markdown-file:
+
+![An example piece of code of a Code States Visualizer in a markdown file](images/code-states-visualizer/markdown.png "An example piece of code of a Code States Visualizer in a markdown file")
+
+## How to generate the input json
+
+1. Go over to http://www.pythontutor.com/
+2. Click the link labeled "Visualize your code and get live help now"
+
+![Frontpage of www.pythontutor.com](images/code-states-visualizer/pythontutor-frontpage.png "Frontpage of www.pythontutor.com")
+
+3. Select Python 3.6 from the dropdown menu.
+4. Write your example code in the field below the dropdown menu. **Note** that if your code contains quotes, we recommend using double quotes. If you use single quotes, you need to escape all of them in the json when adding the input to Code State Visualizer's markdown.
+5. Open your browser's Network Monitor.
+6. Click the button "Visualize execution" below the field where you wrote your code.
+
+![Code editor page of www.pythontutor.com](images/code-states-visualizer/pythontutor-editor.png "Code editor page of www.pythontutor.com")
+
+7. Select the request with the domain "www.pythontutor.com".
+8. Go to the request's Response-tab.
+9. Right click the json and select copy all.
+
+![Browser's Network Monitor tool showing a response of a request](images/code-states-visualizer/network-monitor.png "Browser's Network Monitor tool showing a response of a request")
+
+10. Paste the json to the input-part of the tag `code-states-visualizer input=''>` in your markdown-file.

package.json

@@ -21,7 +21,7 @@
     "axios": "^0.19.2",
     "babel-plugin-styled-components": "^1.10.7",
     "clsx": "^1.1.1",
-    "code-states-visualizer": "^0.1.1",
+    "code-states-visualizer": "^0.2.0",
     "color": "^3.1.1",
     "commonmark": "^0.29.1",
     "core-js": "^3.6.5",

src/partials/CodeStatesVisualizer.js

@@ -20,7 +20,7 @@ class CodeStatesVisualizerWrapper extends React.Component {
     const { input } = this.props
     return (
       <Suspense fallback={<div>Loading...</div>}>
-        <CodeStatesVisualizer input={input} />
+        <CodeStatesVisualizer input={input} language="python" />
       </Suspense>
     )
   }

use-local-code-states-visualizer.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+PATH_TO_PACKAGE=${1:-"../code-states-visualizer"};
+
+
+if [ ! -d "$PATH_TO_PACKAGE" ]; then
+      echo "Given argument '$PATH_TO_PACKAGE' is not a directory"
+      exit 1
+fi
+
+rm -r ./node_modules/code-states-visualizer;
+mkdir ./node_modules/code-states-visualizer;
+
+if [ ! -d "$PATH_TO_PACKAGE/dist" ]; then
+  PATH_TO_THIS=$PWD
+  cd "$PATH_TO_PACKAGE" || exit 1
+  yarn install
+  cd "$PATH_TO_THIS" || exit 1
+fi
+
+cp -r "$PATH_TO_PACKAGE/dist" node_modules/code-states-visualizer/dist;
+cp "$PATH_TO_PACKAGE/package.json" node_modules/code-states-visualizer/package.json;
+cd node_modules/code-states-visualizer || exit 1;
+# npm install --prod;
+cd ../..;

use-local-quizzes.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+PATH_TO_PACKAGE=${1:-"../quizzes/packages/moocfi-quizzes"};
+
+
+if [ ! -d "$PATH_TO_PACKAGE" ]; then
+      echo "Given argument '$PATH_TO_PACKAGE' is not a directory"
+      exit -1
+fi
+
+rm -r ./node_modules/moocfi-quizzes;
+mkdir ./node_modules/moocfi-quizzes;
+
+if [ ! -d "$PATH_TO_PACKAGE/dist" ]; then
+  PATH_TO_THIS=$PWD
+  cd $PATH_TO_PACKAGE
+  yarn install
+  cd $PATH_TO_THIS
+fi
+
+cp -r $PATH_TO_PACKAGE/dist node_modules/moocfi-quizzes/dist;
+cp $PATH_TO_PACKAGE/package.json node_modules/moocfi-quizzes/package.json;
+cd node_modules/moocfi-quizzes;
+npm install --prod;
+cd ../..;