Add demos homepage

README.md

@@ -1,6 +1,6 @@
 # H5Web: React components for data visualization and exploration
 
-[![Demo](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/)
+[![Demos](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/)
 
 H5Web is a collection of React components to visualize and explore data. It
 consists of three packages:
@@ -69,23 +69,24 @@ visualizations. Several demos are available, one per data provider:
 
 ### [H5Grove](https://github.com/silx-kit/h5grove)
 
-This demo is available at https://h5web.panosc.eu.
+This demo is available at https://h5web.panosc.eu/h5grove.
 
 The following HDF5 files can be reached with a URL of the form
-`https://h5web.panosc.eu/?file=<name>`:
+`https://h5web.panosc.eu/h5grove?file=<name>`:
 
-- [`water_224.h5`](https://h5web.panosc.eu/) (**default**): A typical NeXus file
-  with various real-world datasets to demonstrate the visualizations.
-- [`compressed.h5`](https://h5web.panosc.eu/?file=compressed.h5): A file with
-  datasets compressed with various filters to test decompression.
-- [`epics.h5`](https://h5web.panosc.eu/?file=epics.h5): A test file from
+- [`water_224.h5`](https://h5web.panosc.eu/h5grove) (**default**): A typical
+  NeXus file with various real-world datasets to demonstrate the visualizations.
+- [`compressed.h5`](https://h5web.panosc.eu/h5grove?file=compressed.h5): A file
+  with datasets compressed with various filters to test decompression.
+- [`epics.h5`](https://h5web.panosc.eu/h5grove?file=epics.h5): A test file from
   [EPICS](https://epics.anl.gov/) group (Argonne national lab).
-- [`grove.h5`](https://h5web.panosc.eu/?file=grove.h5): A file used to test the
-  provider. It contains datasets with NaN/Infinity values, booleans, complexes
-  and other types of datasets such as RGB images and 4D stacks.
-- [`links.h5`](https://h5web.panosc.eu/?file=links.h5): A file with external
-  links, soft links and a virtual dataset to test link resolution.
-- [`tall.h5`](https://h5web.panosc.eu/?file=tall.h5): The demo file of HSDS.
+- [`grove.h5`](https://h5web.panosc.eu/h5grove?file=grove.h5): A file used to
+  test the provider. It contains datasets with NaN/Infinity values, booleans,
+  complexes and other types of datasets such as RGB images and 4D stacks.
+- [`links.h5`](https://h5web.panosc.eu/h5grove?file=links.h5): A file with
+  external links, soft links and a virtual dataset to test link resolution.
+- [`tall.h5`](https://h5web.panosc.eu/h5grove?file=tall.h5): The demo file of
+  HSDS.
 
 ### [HSDS](https://github.com/HDFGroup/hsds)
 

apps/demo/package.json

@@ -27,6 +27,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "12.0.5",
+    "react-icons": "4.3.1",
     "react-router-dom": "6.2.1"
   },
   "devDependencies": {

apps/demo/src/DemoApp.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 
 import H5GroveApp from './H5GroveApp';
+import Home from './Home';
 import HsdsApp from './HsdsApp';
 import MockApp from './MockApp';
 import H5WasmApp from './h5wasm/H5WasmApp';
@@ -14,11 +15,12 @@ function DemoApp() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<H5GroveApp />} />
+        <Route path="/" element={<Home />} />
+        <Route path="h5grove" element={<H5GroveApp />} />
         <Route path="mock" element={<MockApp />} />
         <Route path="hsds" element={<HsdsApp />} />
         <Route path="h5wasm" element={<H5WasmApp />} />
-        <Route path="*" element={<Navigate to="/" />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Router>
   );

apps/demo/src/Home.module.css

@@ -0,0 +1,155 @@
+.root {
+  font-size: 1.125em;
+  line-height: 1.5;
+}
+
+.header {
+  background-color: var(--primary-bg);
+}
+
+.max {
+  margin: 0 auto;
+  padding: 0 1.5em;
+}
+
+.header > .max {
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+.title {
+  font-size: 2em;
+  font-weight: 300;
+  margin: 0;
+}
+
+.intro {
+  margin: 0.5em 0 0.75em;
+}
+
+.intro > span {
+  white-space: nowrap;
+}
+
+.cta {
+  display: flex;
+}
+
+.ctaBtn {
+  text-decoration: none;
+  background-color: var(--primary);
+  margin-right: 0.5em;
+  padding: 0.5em 1em;
+  border-radius: 0.75em 0.25em;
+  color: inherit;
+}
+
+.ctaBtn:hover,
+.ctaBtn:focus-visible {
+  background-color: var(--secondary);
+}
+
+.ctaBtn:hover {
+  text-decoration: underline;
+}
+
+.demos {
+  margin-bottom: 3em;
+}
+
+.demos h2 {
+  margin-top: 1.5em;
+}
+
+.demos a:not(.demoLink):hover,
+.demos a:not(.demoLink):focus-visible {
+  text-decoration: none;
+}
+
+.demoLink {
+  display: inline-flex;
+  align-items: center;
+  color: var(--primary-dark);
+  text-decoration: none;
+}
+
+.demoLink:hover,
+.demoLink:focus-visible {
+  color: var(--secondary-dark);
+}
+
+.demoLink:hover {
+  text-decoration: underline;
+}
+
+.demoLink > svg {
+  margin-left: 0.25em;
+}
+
+.demoContext {
+  padding-left: 1em;
+  border-left: 5px solid var(--secondary-bg);
+  color: var(--secondary-dark);
+  font-style: italic;
+}
+
+.demoContext > a {
+  color: inherit;
+}
+
+.demoFiles {
+  font-size: 0.875em;
+}
+
+@media (min-width: 40em) {
+  .max {
+    max-width: 45em;
+    padding: 0 2em;
+  }
+
+  .title {
+    font-size: 3em;
+  }
+
+  .intro {
+    font-size: 1.25em;
+  }
+}
+
+@media (min-width: 70em) {
+  .root {
+    font-size: 1.25em;
+  }
+
+  .max {
+    max-width: 90em;
+    padding: 0 3em;
+  }
+
+  .title {
+    font-size: 4em;
+  }
+
+  .intro {
+    font-size: 1.5em;
+    font-weight: 300;
+  }
+
+  .ctaBtn {
+    margin-right: 0.75em;
+  }
+
+  .demos {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding-top: 1.5em;
+  }
+
+  .demos > section:nth-child(odd) {
+    padding-right: 2.5em;
+  }
+
+  .demos > section:nth-child(even) {
+    padding-left: 2.5em;
+  }
+}