Package updates and required changes. Use vite.

stevekirks · Dec 17, 2023 · bab4fae · bab4fae
1 parent e3c46dd
commit bab4fae
Show file tree

Hide file tree

Showing 9 changed files with 1,146 additions and 76 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_DATA_SERVICES_URL='/data/services.json'
diff --git a/.env.development b/.env.development
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -14,7 +14,7 @@ jobs:
 
       - name: Install and Build
         env:
-          REACT_APP_DATA_SERVICES_URL: "data/services.json"
+          VITE_DATA_SERVICES_URL: "data/services.json"
         run: |
           npm install
           npm run build

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 <h1 align="center">D3 Force Diagram | <a href="https://stevekirks.github.io/d3-force-diagram">Demo</a></h1>
 
-Built using [Typescript](https://www.typescriptlang.org/) and [d3 v7](https://d3js.org/)
+Built in [Typescript](https://www.typescriptlang.org/) with [d3 v7](https://d3js.org/)
 
 ### Features
 -   node highlighting (type in search field or click one or more nodes)
@@ -15,11 +15,11 @@ Built using [Typescript](https://www.typescriptlang.org/) and [d3 v7](https://d3
 -   node hierarchy up to two levels in depth (double-click a node to explode or re-group)
 
 ### Usage
-Clone this repository, copy the ./public/data file to ./dist/data, then run
+Requires npm. Clone this repository, then run
 ```
-npx parcel ./public/index.html
+npm install
+npm run start
 ```
-Parcel builds the source files into the ./dist folder and runs a web server.
 
 ### Data format
-Sample data is stored in the `public/data` folder.
+Sample data is stored in the `public/data` folder and set in the `.env` file.
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -3,12 +3,12 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="D3 Force Diagram" />
-  <link rel="apple-touch-icon" href="logo192.png" />
-  <link rel="manifest" href="manifest.json" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
   <title>D3 Force Diagram</title>
 </head>
 
@@ -47,7 +47,7 @@ <h2 class="title">Diagram</h2>
     </div>
   </div>
 
-  <script src="../src/index.ts"></script>
+  <script type="module" src="/src/index.ts"></script>
 </body>
 
 </html>