Add README.md to scratch paper

Author: 64json

src/components/App/index.js

@@ -18,7 +18,7 @@ import { AlgorithmApi, GitHubApi, VisualizationApi } from 'apis';
 import { actions } from 'reducers';
 import { createUserFile, extension, refineGist } from 'common/util';
 import { exts, languages } from 'common/config';
-import { CONTRIBUTING_MD } from 'files';
+import { SCRATCH_PAPER_README_MD } from 'files';
 import styles from './App.module.scss';
 
 class App extends BaseComponent {
@@ -163,7 +163,7 @@ class App extends BaseComponent {
               login: undefined,
               gistId,
               title: 'Untitled',
-              files: [CONTRIBUTING_MD, createUserFile('visualization.json', JSON.stringify(content))],
+              files: [SCRATCH_PAPER_README_MD, createUserFile('visualization.json', JSON.stringify(content))],
             });
           });
       } else if (gistId === 'new') {
@@ -172,7 +172,7 @@ class App extends BaseComponent {
           login: undefined,
           gistId,
           title: 'Untitled',
-          files: [CONTRIBUTING_MD, language.skeleton],
+          files: [SCRATCH_PAPER_README_MD, language.skeleton],
         });
       } else if (gistId) {
         return GitHubApi.getGist(gistId, { timestamp: Date.now() })

src/files/index.js

@@ -8,5 +8,5 @@ const readUserFile = filePath => createUserFile(getName(filePath), getContent(fi
 export const CODE_CPP = readUserFile('skeletons/code.cpp');
 export const CODE_JAVA = readUserFile('skeletons/code.java');
 export const CODE_JS = readUserFile('skeletons/code.js');
-export const README_MD = readProjectFile('algorithm-visualizer/README.md');
-export const CONTRIBUTING_MD = readProjectFile('scratch-paper/CONTRIBUTING.md');
+export const ROOT_README_MD = readProjectFile('algorithm-visualizer/README.md');
+export const SCRATCH_PAPER_README_MD = readProjectFile('scratch-paper/README.md');

src/files/scratch-paper/CONTRIBUTING.md

@@ -0,0 +1,28 @@
+# Scratch Paper
+
+Visualize your own code here!
+
+## Learning About Tracers
+
+The project [Algorithm Visualizer](https://github.com/algorithm-visualizer) has a visualization library in each
+supported language ([JavaScript](https://github.com/algorithm-visualizer/tracers.js)
+, [C++](https://github.com/algorithm-visualizer/tracers.cpp),
+and [Java](https://github.com/algorithm-visualizer/tracers.java)) to visualize codes.
+
+There are five tracers in the library to visualize different types of data:
+
+- [Array1DTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/Array1DTracer)
+- [Array2DTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/Array2DTracer)
+- [ChartTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/ChartTracer)
+- [GraphTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/GraphTracer)
+- [LogTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/LogTracer)
+
+There are also randomizers to help you create random data.
+
+Check out the [API reference](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki) for more information.
+
+## Making Your Visualization Public
+
+If you think other people would find your visualization useful, you can add it to the side menu
+by [contributing to `algorithm-visualizer/algorithms`](https://github.com/algorithm-visualizer/algorithms/blob/master/CONTRIBUTING.md)
+.

src/files/scratch-paper/README.md

@@ -1,5 +1,5 @@
 import { combineActions, createAction, handleActions } from 'redux-actions';
-import { README_MD } from 'files';
+import { ROOT_README_MD } from 'files';
 import { extension, isSaved } from 'common/util';
 
 const prefix = 'CURRENT';
@@ -37,7 +37,7 @@ export const actions = {
 };
 
 const homeTitles = ['Algorithm Visualizer'];
-const homeFiles = [README_MD];
+const homeFiles = [ROOT_README_MD];
 const homeDescription = 'Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.';
 const defaultState = {
   algorithm: {