From 2f64ff0a36466815b5bf1b713d8ab1f31fed9e79 Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sat, 10 Apr 2021 20:44:16 +1000
Subject: [PATCH] added explanations to example code

---
 src/pages/Previews.js |  2 +-
 src/pages/README.md   | 49 +++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.js    |  4 ----
 3 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/README.md

diff --git a/src/pages/Previews.js b/src/pages/Previews.js
index e4e11d7fc..f812c7b8f 100644
--- a/src/pages/Previews.js
+++ b/src/pages/Previews.js
@@ -28,7 +28,7 @@ function Preview({ sourceKey, content }) {
           >
             <SourceCodeDisplay
               language="jsx"
-              code={examplesListing[sourceKey] || ''}
+              code={examplesListing[sourceKey] || "(Example code isn't in examplesListing.json - run 'python3 copy_examples_to_json.py' to update" }
             />
           </div>
         </div>
diff --git a/src/pages/README.md b/src/pages/README.md
new file mode 100644
index 000000000..902e70ee8
--- /dev/null
+++ b/src/pages/README.md
@@ -0,0 +1,49 @@
+# mxGraph Examples
+
+This directory contains modified examples for mxGraph.
+The original examples can be found at
+https://jgraph.github.io/mxgraph/javascript/index.html.
+
+The main ways in which it differs from the original 
+samples are that the examples have been refactored and 
+converted to React with templates+logic code separated.  
+
+The JavaScript prototypes of mxGraph classes have also been 
+replaced with subclasses to not make configuration
+global for other mxGraph configurations on the same page.
+
+## How to View/Run Examples
+
+The examples are grouped by category tabs in the React 
+application, which you can view live at 
+https://mxgraph-mcyph.vercel.app/ or run locally by 
+typing the following:
+
+    cd src
+    npm install
+    npm run dev
+
+From this project's root directory on the command line.
+Note that this next application has a different `package.json`
+and dependencies to the core mxGraph library, whose 
+`package.json` is located in the root directory of this 
+project.
+
+## Development Status+Plans
+
+Some of the examples are yet to be converted: these can
+be found in the `/docs/stashed` folder.
+
+To add new tabs, go to `PageTabs.js` and add the route 
+and text of the tab to the list. Note that the examples
+are served by next.js and the routes correspond to the
+subdirectories, e.g. "/effects" will include 
+`/src/pages/effects/index.js`.
+
+To update the source code previews displayed in `Previews.js` 
+after modifying the examples, run `python3 copy_examples_to_json.py`.
+
+There are plans to remove the react+next example 
+dependencies: see also https://github.com/jsGraph/mxgraph/issues/8 
+for the full discussion. 
+
diff --git a/src/pages/index.js b/src/pages/index.js
index e5ac7dfd7..144ef21d8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,3 @@
-import Head from 'next/head';
-import Link from 'next/link';
-import styles from '../styles/Home.module.css';
-import PageTabs from './PageTabs';
 import Basic from './basic';
 
 export default function Home() {