improve demo page

zfletch · zfletch · commit bd6dbb0d907a · 2023-03-12T18:52:02.000-04:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,15 +25,10 @@ jobs:
         env:
           CI: true
 
-      - name: Build
-        run: yarn build
-        env:
-          PUBLIC_URL: /treebank-react
-
       - name: Predeploy
         run: yarn predeploy
         env:
-          PUBLIC_URL: /treebank-react
+          PUBLIC_URL: /alignment-react
 
       - name: Deploy GitHub
         uses: JamesIves/github-pages-deploy-action@releases/v3
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -22,13 +22,10 @@ jobs:
       - name: Lint code
         run: yarn lint
 
-      # Ideally yarn audit would be part of the CI flow
-      # but currently there is too much noise
-      # See e.g. https://github.com/facebook/create-react-app/issues/8529
-      # - name: Audit dependencies
-      #   - run: yarn audit
-
       - name: Run unit tests
         run: yarn test --coverage
         env:
           CI: true
+
+      - name: Build
+        run: yarn build
diff --git a/example/public/favicon.ico b/example/public/favicon.ico
diff --git a/example/public/index.html b/example/public/index.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="alignment-react demo" />
 
     <!--
       manifest.json provides metadata used when your web app is added to the
diff --git a/example/src/App/App.js b/example/src/App/App.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import styles from './App.module.scss';
+
 import {
   Alignment,
   Collapse,
@@ -458,15 +460,17 @@ const xml = `
 `;
 
 const App = () => (
-  <Alignment alignment={xml}>
-    <Sentence n="1">
-      <Segment lnum="L1" />
-      <Segment lnum="L2" />
-      <Collapse title="XML">
-        <Xml />
-      </Collapse>
-    </Sentence>
-  </Alignment>
+  <div className={styles.alignment}>
+    <Alignment alignment={xml}>
+      <Sentence n="1">
+        <Segment lnum="L1" />
+        <Segment lnum="L2" />
+        <Collapse title="XML">
+          <Xml />
+        </Collapse>
+      </Sentence>
+    </Alignment>
+  </div>
 );
 
 export default App;
diff --git a/example/src/App/App.module.css b/example/src/App/App.module.css
diff --git a/example/src/App/App.module.scss b/example/src/App/App.module.scss
@@ -0,0 +1,7 @@
+.alignment {
+  width: 80vw;
+  margin-left: 10vw;
+
+  margin-top: 5vh;
+  margin-bottom: 5vh;
+}
diff --git a/example/src/App/App.test.js b/example/src/App/App.test.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "alignment-react",
   "version": "0.1.0",
   "description": "Alignment display engine for React",
-  "homepage": "https://perseids-tools.github.io/treebank-react/",
+  "homepage": "https://perseids-tools.github.io/alignment-react/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perseids-tools/alignment-react.git"
