update readme to use Node18 and add demo/

Chiu Peter · Chiu Peter · commit 5ac095ab84cd · 2025-09-29T17:36:57.000-07:00
diff --git a/README.md b/README.md
@@ -30,8 +30,8 @@ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 Install and use Node.js version 12.x.
 
 ```
-nvm install 12
-nvm use 12
+nvm install 18
+nvm use 18
 ```
 
 To check Node.js version
diff --git a/demo/app.tsx b/demo/app.tsx
@@ -0,0 +1,39 @@
+/**
+ * Main app page for mp-react-component
+ * Serves as a playground for testing and viewing components
+ *
+ * Experimental implementations of components are imported from the views directory
+ * and rendered here.
+ */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import './styles.less';
+import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
+//import './assets/fonts.css';
+//import '../node_modules/bulma/css/bulma.min.css';
+//import '../node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css';
+import { CrystalStructureAnimationViewer } from '../src/pages/CrystalStructureAnimationViewer';
+import { CrystalStructureViewer } from '../src/pages/CrystalStructureViewer';
+
+const mountNodeSelector = 'app';
+const mountNode = document.getElementById(mountNodeSelector);
+
+ReactDOM.render(
+  <>
+    <Router>
+      <div className="basic-navbar">
+        <Link to="/crystal_animation">Crystal Animation</Link>
+      </div>
+      <section>
+        <Switch>
+          <Route path="/">
+            <CrystalStructureViewer />
+          </Route>
+        </Switch>
+      </section>
+    </Router>
+  </>,
+
+  mountNode
+);
+console.log('RUNNING in', process.env.NODE_ENV, 'DEBUGGING IS', process.env.DEBUG);
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>App</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://kit.fontawesome.com/eb70cee2b0.js" crossorigin="anonymous"></script>
+  </head>
+  <style>
+    body {
+      margin: 0;
+    }
+    .mp-element-wrapper {
+      margin: 10px;
+    }
+  </style>
+  <body>
+    <div id="app"></div>
+    <script src="app.tsx"></script>
+  </body>
+</html>
diff --git a/demo/styles.less b/demo/styles.less
