code4recovery · joshreisner · Aug 27, 2022 · Aug 28, 2022 · Aug 28, 2022 · Aug 28, 2022
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -18,7 +18,7 @@ jobs:
           cache: 'npm'
       - run: npm install
       - run: npm run test-coverage
-      - run: npx mix --production
+      - run: npm run build
       - name: Coveralls
         uses: coverallsapp/github-action@master
         with:

diff --git a/README.md b/README.md
@@ -78,10 +78,10 @@ Not yet! Please open a pull request and walk us through the process of adding it
 
 ## Contributing
 
-Pull requests are welcome. To get started, clone this repository, run `npm i`, and point your web root at the `public` folder.
+Pull requests are welcome. To get started, clone this repository, and run `npm i`.
 
-While developing, run `npx mix watch` to compile assets as you edit them. When you're ready to commit, run `npx mix --production` to minify them for production.
+While developing, run `npm run dev` and navigate to [http://127.0.0.1:5173/tests/aasanjose.html](http://127.0.0.1:5173/tests/aasanjose.html). When you're ready to commit, run `npm run build` to minify them for production.
 
 ## Credits
 
-This project uses [React JS](https://reactjs.org/) and [Bootstrap CSS](https://getbootstrap.com/).
+This project uses [React JS](https://reactjs.org/), [Bootstrap CSS](https://getbootstrap.com/), and the [Vite build system](https://vitejs.dev/).
diff --git a/dist/app.js b/dist/app.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>TSML UI</title>
+  </head>
+  <body class="bg-light">
+    <main class="container my-5">
+      <div class="row">
+        <div class="col-md-6 offset-md-3">
+          <h1>TSML UI</h1>
+          <p class="lead">
+            TSML UI (12 Step Meeting List User Interface) is an open source
+            interactive recovery meeting finder that can be embedded on any
+            website.
+          </p>
+          <section class="my-5">
+            <h4>12 Step Meeting List</h4>
+            <p>
+              Go to Dashboard > Meetings > Import & Settings > Settings and
+              change <code>User Interface Display</code> &rarr;
+              <code>TSML UI</code>
+            </p>
+            <!--
+            <div
+              style="
+                position: relative;
+                padding-bottom: 69.76744186046511%;
+                height: 0;
+              "
+            >
+              <iframe
+                src="https://www.loom.com/embed/7b080b54d4674be0959277f148b7b87f"
+                frameborder="0"
+                webkitallowfullscreen
+                mozallowfullscreen
+                allowfullscreen
+                style="
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                "
+              ></iframe>
+            </div>
+            -->
+          </section>
+
+          <section class="my-5">
+            <h4>Custom JSON feed</h4>
+            <p>
+              If you can generate a
+              <a href="https://github.com/code4recovery/spec" target="_blank"
+                >Meeting Guide-spec JSON feed</a
+              >, say, from a custom database, you can plug that info in to the
+              format below. To enable maps, add a
+              <a href="https://www.mapbox.com/" target="_blank"
+                >Mapbox API access token</a
+              >
+              (or remove that parameter). Be sure to add a
+              <a
+                href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones"
+                target="_blank"
+                >proper time zone</a
+              >
+              for your location.
+            </p>
+            <pre class="rounded bg-dark text-light p-3 overflow-hidden">
+&lt;div
+  id="tsml-ui"
+  data-src="/path/to/your.json"
+  data-mapbox="pk.your.mapbox.access.token.goes.here"
+  data-timezone="America/Los_Angeles"
+&gt;&lt;/div&gt;
+&lt;script src="https://tsml-ui.code4recovery.org/app.js" async&gt;&lt;/script&gt;</pre
+            >
+            <a
+              class="btn btn-outline-primary"
+              href="https://aasfmarin.org/meetings"
+              target="_blank"
+              >Demo: San Francisco & Marin, CA</a
+            >
+          </section>
+
+          <section class="my-5">
+            <h4>Google Sheet</h4>
+            <p>
+              You can generate a JSON feed from a Google Sheet using the
+              <a href="https://sheets.code4recovery.org/" target="_blank"
+                >Google Sheet Importer</a
+              >. Use the URL you generate in conjunction with the Custom JSON
+              feed instructions above. Here is a
+              <a
+                href="https://docs.google.com/spreadsheets/d/12Ga8uwMG4WJ8pZ_SEU7vNETp_aQZ-2yNVsYDFqIwHyE/edit#gid=0"
+                target="_blank"
+                >sample Google Sheet</a
+              >
+              you can use to get started.
+            </p>
+            <a
+              class="btn btn-outline-primary"
+              href="https://aasanjose.org/meetings"
+              target="_blank"
+              >Demo: San Jose, CA</a
+            >
+          </section>
+
+          <p class="mb-4">
+            More information is available on the
+            <a href="https://github.com/code4recovery/tsml-ui" target="_blank"
+              >project page on GitHub</a
+            >, including advanced configuration options. To get help, please
+            <a
+              href="https://github.com/code4recovery/tsml-ui/issues"
+              target="_blank"
+              >file an issue</a
+            >.
+          </p>
+          <p class="text-center">
+            <a href="https://code4recovery.org" target="_blank">
+              <img
+                src="/logo.svg"
+                width="100"
+                height="100"
+                alt="Code for Recovery"
+              />
+            </a>
+          </p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/dist/logo.svg b/dist/logo.svg
diff --git a/dist/style.css b/dist/style.css